Merge pull request #96 from Saifullah-dev/95-issue-optional-callback-props-error

fix(Callback Props): Update error message to instruct user to pass missing required callback props

Author: Saifullah-dev

frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx

@@ -5,6 +5,7 @@ import NameInput from "../../../components/NameInput/NameInput";
 import ErrorTooltip from "../../../components/ErrorTooltip/ErrorTooltip";
 import { useFileNavigation } from "../../../contexts/FileNavigationContext";
 import { useLayout } from "../../../contexts/LayoutContext";
+import { validateApiCallback } from "../../../utils/validateApiCallback";
 
 const maxNameLength = 220;
 
@@ -84,7 +85,7 @@ const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction
       newFolderName = duplicateNameHandler("New Folder", true, syncedCurrPathFiles);
     }
 
-    onCreateFolder(newFolderName, currentFolder);
+    validateApiCallback(onCreateFolder, "onCreateFolder", newFolderName, currentFolder);
     setCurrentPathFiles((prev) => prev.filter((f) => f.key !== file.key));
     triggerAction.close();
   }

frontend/src/FileManager/Actions/Rename/Rename.action.jsx

@@ -8,6 +8,7 @@ import NameInput from "../../../components/NameInput/NameInput";
 import ErrorTooltip from "../../../components/ErrorTooltip/ErrorTooltip";
 import { useFileNavigation } from "../../../contexts/FileNavigationContext";
 import { useLayout } from "../../../contexts/LayoutContext";
+import { validateApiCallback } from "../../../utils/validateApiCallback";
 
 const maxNameLength = 220;
 
@@ -88,7 +89,7 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
       }
     }
     setFileRenameError(false);
-    onRename(file, renameFile);
+    validateApiCallback(onRename, "onRename", file, renameFile);
     setCurrentPathFiles((prev) => prev.filter((f) => f.key !== file.key)); // Todo: Should only filter on success API call
     triggerAction.close();
   }

frontend/src/FileManager/FileManager.jsx

@@ -20,16 +20,16 @@ const FileManager = ({
   fileUploadConfig,
   isLoading,
   onCreateFolder,
-  onFileUploading,
-  onFileUploaded,
+  onFileUploading = () => {},
+  onFileUploaded = () => {},
   onPaste,
   onRename,
   onDownload,
   onDelete = () => null,
-  onLayoutChange,
+  onLayoutChange = () => {},
   onRefresh,
-  onFileOpen,
-  onError,
+  onFileOpen = () => {},
+  onError = () => {},
   layout = "grid",
   enableFilePreview = true,
   maxFileSize,

frontend/src/FileManager/Toolbar/Toolbar.jsx

@@ -14,6 +14,7 @@ import { useFileNavigation } from "../../contexts/FileNavigationContext";
 import { useSelection } from "../../contexts/SelectionContext";
 import { useClipBoard } from "../../contexts/ClipboardContext";
 import { useLayout } from "../../contexts/LayoutContext";
+import { validateApiCallback } from "../../utils/validateApiCallback";
 import "./Toolbar.scss";
 
 const Toolbar = ({
@@ -61,7 +62,7 @@ const Toolbar = ({
       icon: <FiRefreshCw size={16} />,
       title: "Refresh",
       onClick: () => {
-        onRefresh();
+        validateApiCallback(onRefresh, "onRefresh");
         setClipBoard(null);
       },
     },

frontend/src/contexts/ClipboardContext.jsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useState } from "react";
 import { useSelection } from "./SelectionContext";
+import { validateApiCallback } from "../utils/validateApiCallback";
 
 const ClipBoardContext = createContext();
 
@@ -21,7 +22,7 @@ export const ClipBoardProvider = ({ children, onPaste }) => {
     const copiedFiles = clipBoard.files;
     const operationType = clipBoard.isMoving ? "move" : "copy";
 
-    onPaste(copiedFiles, destinationFolder, operationType);
+    validateApiCallback(onPaste, "onPaste", copiedFiles, destinationFolder, operationType);
 
     clipBoard.isMoving && setClipBoard(null);
     setSelectedFiles([]);

frontend/src/contexts/SelectionContext.jsx

@@ -1,12 +1,13 @@
 import { createContext, useContext, useState } from "react";
+import { validateApiCallback } from "../utils/validateApiCallback";
 
 const SelectionContext = createContext();
 
 export const SelectionProvider = ({ children, onDownload }) => {
   const [selectedFiles, setSelectedFiles] = useState([]);
 
   const handleDownload = () => {
-    onDownload(selectedFiles);
+    validateApiCallback(onDownload, "onDownload", selectedFiles);
   };
 
   return (

frontend/src/hooks/useShortcutHandler.js

@@ -4,6 +4,7 @@ import { useClipBoard } from "../contexts/ClipboardContext";
 import { useFileNavigation } from "../contexts/FileNavigationContext";
 import { useSelection } from "../contexts/SelectionContext";
 import { useLayout } from "../contexts/LayoutContext";
+import { validateApiCallback } from "../utils/validateApiCallback";
 
 export const useShortcutHandler = (triggerAction, onRefresh) => {
   const { setClipBoard, handleCutCopy, handlePasting } = useClipBoard();
@@ -64,7 +65,7 @@ export const useShortcutHandler = (triggerAction, onRefresh) => {
   };
 
   const triggerRefresh = () => {
-    onRefresh();
+    validateApiCallback(onRefresh, "onRefresh");
     setClipBoard(null);
   };
 

frontend/src/utils/validateApiCallback.js

@@ -0,0 +1,13 @@
+export const validateApiCallback = (callback, callbackName, ...args) => {
+  try {
+    if (typeof callback === "function") {
+      callback(...args);
+    } else {
+      throw new Error(
+        `<FileManager /> Missing prop: Callback function "${callbackName}" is required.`
+      );
+    }
+  } catch (error) {
+    console.error(error.message);
+  }
+};