Merge pull request #170 from Saifullah-dev/168-onfileopen-event-not-triggered-when-opening-a-folder-from-the-left-sidebar

fix(onFileOpen Callback): Add onFileOpen Callback for Navigation Pane folder open event

Author: Saifullah-dev

frontend/src/FileManager/FileManager.jsx

@@ -77,7 +77,7 @@ const FileManager = ({
                   className="files-container"
                 >
                   <div className="navigation-pane" style={{ width: colSizes.col1 + "%" }}>
-                    <NavigationPane />
+                    <NavigationPane onFileOpen={onFileOpen} />
                     <div
                       className={`sidebar-resize ${isDragging ? "sidebar-dragging" : ""}`}
                       onMouseDown={handleMouseDown}

frontend/src/FileManager/NavigationPane/FolderTree.jsx

@@ -4,13 +4,14 @@ import { FaRegFolder, FaRegFolderOpen } from "react-icons/fa";
 import { MdKeyboardArrowRight } from "react-icons/md";
 import { useFileNavigation } from "../../contexts/FileNavigationContext";
 
-const FolderTree = ({ folder }) => {
+const FolderTree = ({ folder, onFileOpen }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isActive, setIsActive] = useState(false);
   const { currentPath, setCurrentPath } = useFileNavigation();
 
   const handleFolderSwitch = () => {
     setIsActive(true);
+    onFileOpen(folder);
     setCurrentPath(folder.path);
   };
 
@@ -61,7 +62,7 @@ const FolderTree = ({ folder }) => {
         <Collapse open={isOpen}>
           <div className="folder-collapsible">
             {folder.subDirectories.map((item, index) => (
-              <FolderTree key={index} folder={item} />
+              <FolderTree key={index} folder={item} onFileOpen={onFileOpen} />
             ))}
           </div>
         </Collapse>

frontend/src/FileManager/NavigationPane/NavigationPane.jsx

@@ -4,7 +4,7 @@ import { getParentPath } from "../../utils/getParentPath";
 import { useFiles } from "../../contexts/FilesContext";
 import "./NavigationPane.scss";
 
-const NavigationPane = () => {
+const NavigationPane = ({ onFileOpen }) => {
   const [foldersTree, setFoldersTree] = useState([]);
   const { files } = useFiles();
 
@@ -36,7 +36,7 @@ const NavigationPane = () => {
       {foldersTree?.length > 0 ? (
         <>
           {foldersTree?.map((folder, index) => {
-            return <FolderTree key={index} folder={folder} />;
+            return <FolderTree key={index} folder={folder} onFileOpen={onFileOpen} />;
           })}
         </>
       ) : (