Add Types & Refactor Card Components (useHooks) (#2365)

This pull request introduces two improvements:

Type Annotations for Custom Hooks: Enhances code readability and
maintainability by adding type annotations to our custom hooks. This
will improve IDE support and help catch potential errors early in the
development process.

Card Component Refactor (useHooks): Refactors card components to
leverage the useHooks pattern. This improves code organization and
potentially simplifies component logic.

These changes improve the overall codebase quality and make it easier to
understand and maintain.

src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx

@@ -6,13 +6,14 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
+import { NodeDataType } from "../../types/flow";
 
 const useFetchDataOnMount = (
-  data,
-  name,
-  handleUpdateValues,
-  setNode,
-  setIsLoading,
+  data: NodeDataType,
+  name: string,
+  handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+  setIsLoading: (value: boolean) => void,
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 

src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx

@@ -5,15 +5,16 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ResponseErrorTypeAPI } from "../../types/api";
+import { NodeDataType } from "../../types/flow";
 
 const useHandleOnNewValue = (
-  data,
-  name,
-  takeSnapshot,
-  handleUpdateValues,
-  debouncedHandleUpdateValues,
-  setNode,
-  setIsLoading,
+  data: NodeDataType,
+  name: string,
+  takeSnapshot: () => void,
+  handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
+  debouncedHandleUpdateValues: any,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+  setIsLoading: (value: boolean) => void,
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 

src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx

@@ -1,11 +1,12 @@
 import { cloneDeep } from "lodash";
+import { NodeDataType } from "../../types/flow";
 
 const useHandleNodeClass = (
-  data,
-  name,
-  takeSnapshot,
-  setNode,
-  updateNodeInternals,
+  data: NodeDataType,
+  name: string,
+  takeSnapshot: () => void,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+  updateNodeInternals: (id: string) => void,
 ) => {
   const handleNodeClass = (newNodeClass, code, type?: string) => {
     if (!data.node) return;

src/frontend/src/CustomNodes/hooks/use-handle-refresh-buttons.tsx

@@ -7,7 +7,10 @@ import useAlertStore from "../../stores/alertStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
 import { handleUpdateValues } from "../../utils/parameterUtils";
 
-const useHandleRefreshButtonPress = (setIsLoading, setNode) => {
+const useHandleRefreshButtonPress = (
+  setIsLoading: (value: boolean) => void,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
   const handleRefreshButtonPress = async (name, data) => {

src/frontend/src/CustomNodes/hooks/use-update-validation-status.tsx

@@ -1,6 +1,11 @@
 import { useEffect } from "react";
+import { FlowPoolType } from "../../types/zustand/flow";
 
-const useUpdateValidationStatus = (dataId, flowPool, setValidationStatus) => {
+const useUpdateValidationStatus = (
+  dataId: string,
+  flowPool: FlowPoolType,
+  setValidationStatus: (value: any) => void,
+) => {
   useEffect(() => {
     const relevantData =
       flowPool[dataId] && flowPool[dataId]?.length > 0

src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx

@@ -4,7 +4,7 @@ import { isErrorLog } from "../../types/utils/typeCheckingUtils";
 
 const useValidationStatusString = (
   validationStatus: VertexBuildTypeAPI | null,
-  setValidationString,
+  setValidationString: (value: any) => void,
 ) => {
   useEffect(() => {
     if (validationStatus && validationStatus.data?.outputs) {

src/frontend/src/components/cardComponent/hooks/use-data-effect.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { storeComponent } from "../../../types/store";
+
+const useDataEffect = (
+  data: storeComponent,
+  setLikedByUser: (value: any) => void,
+  setLikesCount: (value: any) => void,
+  setDownloadsCount: (value: any) => void,
+) => {
+  useEffect(() => {
+    if (data) {
+      setLikedByUser(data?.liked_by_user ?? false);
+      setLikesCount(data?.liked_by_count ?? 0);
+      setDownloadsCount(data?.downloads_count ?? 0);
+    }
+  }, [data, data?.liked_by_count, data?.liked_by_user, data?.downloads_count]);
+};
+
+export default useDataEffect;

src/frontend/src/components/cardComponent/hooks/use-handle-install.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { getComponent } from "../../../controllers/API";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { storeComponent } from "../../../types/store";
+import cloneFlowWithParent from "../../../utils/storeUtils";
+
+const useInstallComponent = (
+  data: storeComponent,
+  name: string,
+  isStore: boolean,
+  downloadsCount: number,
+  setDownloadsCount: (value: any) => void,
+  setLoading: (value: boolean) => void,
+  setSuccessData: (value: { title: string }) => void,
+  setErrorData: (value: { title: string; list: string[] }) => void,
+) => {
+  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+
+  const handleInstall = () => {
+    const temp = downloadsCount;
+    setDownloadsCount((old) => Number(old) + 1);
+    setLoading(true);
+
+    getComponent(data.id)
+      .then((res) => {
+        const newFlow = cloneFlowWithParent(res, res.id, data.is_component);
+        addFlow(true, newFlow)
+          .then((id) => {
+            setSuccessData({
+              title: `${name} ${isStore ? "Downloaded" : "Installed"} Successfully.`,
+            });
+            setLoading(false);
+          })
+          .catch((error) => {
+            setLoading(false);
+            setErrorData({
+              title: `Error ${isStore ? "downloading" : "installing"} the ${name}`,
+              list: [error.response.data.detail],
+            });
+          });
+      })
+      .catch((err) => {
+        setLoading(false);
+        setErrorData({
+          title: `Error ${isStore ? "downloading" : "installing"} the ${name}`,
+          list: [err.response.data.detail],
+        });
+        setDownloadsCount(temp);
+      });
+  };
+
+  return { handleInstall };
+};
+
+export default useInstallComponent;

src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx

@@ -0,0 +1,51 @@
+import { postLikeComponent } from "../../../controllers/API";
+import { storeComponent } from "../../../types/store";
+
+const useLikeComponent = (
+  data: storeComponent,
+  name: string,
+  setLoadingLike: (value: boolean) => void,
+  likedByUser: boolean | null | undefined,
+  likesCount: number,
+  setLikedByUser: (value: any) => void,
+  setLikesCount: (value: any) => void,
+  setValidApiKey: (value: boolean) => void,
+  setErrorData: (value: { title: string; list: string[] }) => void,
+) => {
+  const handleLike = () => {
+    setLoadingLike(true);
+    if (likedByUser !== undefined || likedByUser !== null) {
+      const temp = likedByUser;
+      const tempNum = likesCount;
+      setLikedByUser((prev) => !prev);
+      setLikesCount((prev) => (temp ? prev - 1 : prev + 1));
+
+      postLikeComponent(data.id)
+        .then((response) => {
+          setLoadingLike(false);
+          setLikesCount(response.data.likes_count);
+          setLikedByUser(response.data.liked_by_user);
+        })
+        .catch((error) => {
+          setLoadingLike(false);
+          setLikesCount(tempNum);
+          setLikedByUser(temp);
+          if (error.response.status === 403) {
+            setValidApiKey(false);
+          } else {
+            console.error(error);
+            setErrorData({
+              title: `Error liking ${name}.`,
+              list: [error.response.data.detail],
+            });
+          }
+        });
+    }
+  };
+
+  return {
+    handleLike,
+  };
+};
+
+export default useLikeComponent;

src/frontend/src/components/cardComponent/hooks/use-on-drag-start.tsx

@@ -0,0 +1,34 @@
+import { useCallback } from "react";
+import { createRoot } from "react-dom/client";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { storeComponent } from "../../../types/store";
+import DragCardComponent from "../components/dragCardComponent";
+
+const useDragStart = (data: storeComponent) => {
+  const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
+
+  const onDragStart = useCallback(
+    (event) => {
+      let image = <DragCardComponent data={data} />; // Replace with whatever you want here
+
+      const ghost = document.createElement("div");
+      ghost.style.transform = "translate(-10000px, -10000px)";
+      ghost.style.position = "absolute";
+      document.body.appendChild(ghost);
+      event.dataTransfer.setDragImage(ghost, 0, 0);
+
+      const root = createRoot(ghost);
+      root.render(image);
+
+      const flow = getFlowById(data.id);
+      if (flow) {
+        event.dataTransfer.setData("flow", JSON.stringify(data));
+      }
+    },
+    [data],
+  );
+
+  return { onDragStart };
+};
+
+export default useDragStart;

src/frontend/src/components/cardComponent/hooks/use-playground-effect.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { FlowType } from "../../../types/flow";
+
+const usePlaygroundEffect = (
+  currentFlowId: string,
+  playground: boolean,
+  openPlayground: boolean,
+  currentFlow: FlowType | undefined,
+  setNodes: (value: any, value2: boolean) => void,
+  setEdges: (value: any, value2: boolean) => void,
+  cleanFlowPool: () => void,
+) => {
+  useEffect(() => {
+    if (currentFlowId && playground) {
+      if (openPlayground) {
+        setNodes(currentFlow?.data?.nodes ?? [], true);
+        setEdges(currentFlow?.data?.edges ?? [], true);
+      } else {
+        setNodes([], true);
+        setEdges([], true);
+      }
+      cleanFlowPool();
+    }
+  }, [openPlayground]);
+};
+
+export default usePlaygroundEffect;

src/frontend/src/components/cardComponent/index.tsx

@@ -28,6 +28,11 @@ import { Checkbox } from "../ui/checkbox";
 import { FormControl, FormField } from "../ui/form";
 import Loading from "../ui/loading";
 import DragCardComponent from "./components/dragCardComponent";
+import useDataEffect from "./hooks/use-data-effect";
+import useInstallComponent from "./hooks/use-handle-install";
+import useLikeComponent from "./hooks/use-handle-like";
+import useDragStart from "./hooks/use-on-drag-start";
+import usePlaygroundEffect from "./hooks/use-playground-effect";
 import { convertTestName } from "./utils/convert-test-name";
 
 export default function CollectionCardComponent({
@@ -59,11 +64,9 @@ export default function CollectionCardComponent({
   const isStore = false;
   const [loading, setLoading] = useState(false);
   const [loadingLike, setLoadingLike] = useState(false);
-  const [liked_by_user, setLiked_by_user] = useState(
-    data?.liked_by_user ?? false,
-  );
-  const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0);
-  const [downloads_count, setDownloads_count] = useState(
+  const [likedByUser, setLikedByUser] = useState(data?.liked_by_user ?? false);
+  const [likesCount, setLikesCount] = useState(data?.liked_by_count ?? 0);
+  const [downloadsCount, setDownloadsCount] = useState(
     data?.downloads_count ?? 0,
   );
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
@@ -99,115 +102,45 @@ export default function CollectionCardComponent({
     return inputs.length > 0 || outputs.length > 0;
   }
 
-  useEffect(() => {
-    if (currentFlowId && playground) {
-      if (openPlayground) {
-        setNodes(currentFlow?.data?.nodes ?? [], true);
-        setEdges(currentFlow?.data?.edges ?? [], true);
-      } else {
-        setNodes([], true);
-        setEdges([], true);
-      }
-      cleanFlowPool();
-    }
-  }, [openPlayground]);
+  usePlaygroundEffect(
+    currentFlowId,
+    playground!,
+    openPlayground,
+    currentFlow,
+    setNodes,
+    setEdges,
+    cleanFlowPool,
+  );
 
-  useEffect(() => {
-    if (data) {
-      setLiked_by_user(data?.liked_by_user ?? false);
-      setLikes_count(data?.liked_by_count ?? 0);
-      setDownloads_count(data?.downloads_count ?? 0);
-    }
-  }, [data, data.liked_by_count, data.liked_by_user, data.downloads_count]);
+  useDataEffect(data, setLikedByUser, setLikesCount, setDownloadsCount);
 
-  function handleInstall() {
-    const temp = downloads_count;
-    setDownloads_count((old) => Number(old) + 1);
-    setLoading(true);
-    getComponent(data.id)
-      .then((res) => {
-        const newFlow = cloneFLowWithParent(res, res.id, data.is_component);
-        addFlow(true, newFlow)
-          .then((id) => {
-            setSuccessData({
-              title: `${name} ${
-                isStore ? "Downloaded" : "Installed"
-              } Successfully.`,
-            });
-            setLoading(false);
-          })
-          .catch((error) => {
-            setLoading(false);
-            setErrorData({
-              title: `Error ${
-                isStore ? "downloading" : "installing"
-              } the ${name}`,
-              list: [error["response"]["data"]["detail"]],
-            });
-          });
-      })
-      .catch((err) => {
-        setLoading(false);
-        setErrorData({
-          title: `Error ${isStore ? "downloading" : "installing"} the ${name}`,
-          list: [err["response"]["data"]["detail"]],
-        });
-        setDownloads_count(temp);
-      });
-  }
+  const { handleInstall } = useInstallComponent(
+    data,
+    name,
+    isStore,
+    downloadsCount,
+    setDownloadsCount,
+    setLoading,
+    setSuccessData,
+    setErrorData,
+  );
 
-  function handleLike() {
-    setLoadingLike(true);
-    if (liked_by_user !== undefined || liked_by_user !== null) {
-      const temp = liked_by_user;
-      const tempNum = likes_count;
-      setLiked_by_user((prev) => !prev);
-      if (!temp) {
-        setLikes_count((prev) => Number(prev) + 1);
-      } else {
-        setLikes_count((prev) => Number(prev) - 1);
-      }
-      postLikeComponent(data.id)
-        .then((response) => {
-          setLoadingLike(false);
-          setLikes_count(response.data.likes_count);
-          setLiked_by_user(response.data.liked_by_user);
-        })
-        .catch((error) => {
-          setLoadingLike(false);
-          setLikes_count(tempNum);
-          setLiked_by_user(temp);
-          if (error.response.status === 403) {
-            setValidApiKey(false);
-          } else {
-            console.error(error);
-            setErrorData({
-              title: `Error liking ${name}.`,
-              list: [error["response"]["data"]["detail"]],
-            });
-          }
-        });
-    }
-  }
+  const { handleLike } = useLikeComponent(
+    data,
+    name,
+    setLoadingLike,
+    likedByUser,
+    likesCount,
+    setLikedByUser,
+    setLikesCount,
+    setValidApiKey,
+    setErrorData,
+  );
 
   const isSelectedCard =
     selectedFlowsComponentsCards?.includes(data?.id) ?? false;
 
-  function onDragStart(event: React.DragEvent<any>) {
-    let image: JSX.Element = <DragCardComponent data={data} />; // <== whatever you want here
-
-    var ghost = document.createElement("div");
-    ghost.style.transform = "translate(-10000px, -10000px)";
-    ghost.style.position = "absolute";
-    document.body.appendChild(ghost);
-    event.dataTransfer.setDragImage(ghost, 0, 0);
-    const root = createRoot(ghost);
-    root.render(image);
-    const flow = getFlowById(data.id);
-    if (flow) {
-      event.dataTransfer.setData("flow", JSON.stringify(data));
-    }
-  }
+  const { onDragStart } = useDragStart(data);
 
   return (
     <>
@@ -264,7 +197,7 @@ export default function CollectionCardComponent({
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                         <IconComponent name="Heart" className={cn("h-4 w-4")} />
                         <span data-testid={`likes-${data.name}`}>
-                          {likes_count ?? 0}
+                          {likesCount ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
@@ -275,7 +208,7 @@ export default function CollectionCardComponent({
                           className="h-4 w-4"
                         />
                         <span data-testid={`downloads-${data.name}`}>
-                          {downloads_count ?? 0}
+                          {downloadsCount ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
@@ -324,20 +257,7 @@ export default function CollectionCardComponent({
                   )}
                 </span>
               )}
-              <div className="flex w-full flex-1 flex-wrap gap-2">
-                {/* {data.tags &&
-                  data.tags.length > 0 &&
-                  data.tags.map((tag, index) => (
-                    <Badge
-                      key={index}
-                      variant="outline"
-                      size="xq"
-                      className="text-muted-foreground"
-                    >
-                      {tag.name}
-                    </Badge>
-                  ))} */}
-              </div>
+              <div className="flex w-full flex-1 flex-wrap gap-2"></div>
             </div>
 
             <CardDescription className="pb-2 pt-2">
@@ -457,7 +377,7 @@ export default function CollectionCardComponent({
                           name="Heart"
                           className={cn(
                             "h-5 w-5",
-                            liked_by_user
+                            likedByUser
                               ? "fill-destructive stroke-destructive"
                               : "",
                             !authorized ? "text-ring" : "",

src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx

@@ -9,7 +9,10 @@ import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 import { addVersionToDuplicates } from "../../../utils/reactflowUtils";
 
-const useFileDrop = (folderId, folderChangeCallback) => {
+const useFileDrop = (
+  folderId: string,
+  folderChangeCallback: (folderId: string) => void,
+) => {
   const setFolderDragging = useFolderStore((state) => state.setFolderDragging);
   const setFolderIdDragging = useFolderStore(
     (state) => state.setFolderIdDragging,

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-auto-resize-text-area.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-const useAutoResizeTextArea = (value, inputRef) => {
+const useAutoResizeTextArea = (
+  value: string,
+  inputRef: React.RefObject<HTMLInputElement>,
+) => {
   useEffect(() => {
     if (inputRef.current && inputRef.current.scrollHeight! !== 0) {
       inputRef.current.style!.height = "inherit"; // Reset the height

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx

@@ -7,10 +7,10 @@ import {
 import useFileUpload from "./use-file-upload";
 
 const useDragAndDrop = (
-  setIsDragging,
-  setFiles,
-  currentFlowId,
-  setErrorData,
+  setIsDragging: (value: boolean) => void,
+  setFiles: (value: any) => void,
+  currentFlowId: string,
+  setErrorData: (value: any) => void,
 ) => {
   const dragOver = (e) => {
     e.preventDefault();

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-focus-unlock.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-const useFocusOnUnlock = (lockChat, inputRef) => {
+const useFocusOnUnlock = (
+  lockChat: boolean,
+  inputRef: React.RefObject<HTMLInputElement>,
+) => {
   useEffect(() => {
     if (!lockChat && inputRef.current) {
       inputRef.current.focus();

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx

@@ -1,3 +1,4 @@
+import { AxiosResponse } from "axios";
 import { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
 import {
@@ -6,9 +7,18 @@ import {
   SN_ERROR_TEXT,
 } from "../../../../../../constants/constants";
 import useAlertStore from "../../../../../../stores/alertStore";
+import { UploadFileTypeAPI } from "../../../../../../types/api";
 import useFileUpload from "./use-file-upload";
 
-const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => {
+const useUpload = (
+  uploadFile: (
+    file: File,
+    id: string,
+  ) => Promise<AxiosResponse<UploadFileTypeAPI>>,
+  currentFlowId: string,
+  setFiles: any,
+  lockChat: boolean,
+) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent): void => {

src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx

@@ -2,9 +2,10 @@ import { ColDef, ValueGetterParams } from "ag-grid-community";
 import { useMemo } from "react";
 import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
 import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
+import { NodeDataType } from "../../../types/flow";
 
 const useColumnDefs = (
-  myData: any,
+  myData: NodeDataType,
   handleOnNewValue: (newValue: any, name: string) => void,
   handleOnChangeDb: (value: boolean, key: string) => void,
   changeAdvanced: (n: string) => void,

src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx

@@ -1,14 +1,12 @@
 import { useMemo } from "react";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
-import { TemplateVariableType } from "../../../types/api";
+import { NodeDataType } from "../../../types/flow";
 
-const useRowData = (myData, open) => {
+const useRowData = (myData: NodeDataType, open: boolean) => {
   const rowData = useMemo(() => {
     return Object.keys(myData.node!.template)
       .filter((key: string) => {
-        const templateParam = myData.node!.template[
-          key
-        ] as TemplateVariableType;
+        const templateParam = myData.node!.template[key] as any;
         return (
           key.charAt(0) !== "_" &&
           templateParam.show &&
@@ -20,9 +18,7 @@ const useRowData = (myData, open) => {
         );
       })
       .map((key: string) => {
-        const templateParam = myData.node!.template[
-          key
-        ] as TemplateVariableType;
+        const templateParam = myData.node!.template[key] as any;
         return {
           ...templateParam,
           key: key,

src/frontend/src/modals/editNodeModal/index.tsx

@@ -16,13 +16,11 @@ const EditNodeModal = forwardRef(
       nodeLength,
       open,
       setOpen,
-      //      setOpenWDoubleClick,
       data,
     }: {
       nodeLength: number;
       open: boolean;
       setOpen: (open: boolean) => void;
-      //      setOpenWDoubleClick: (open: boolean) => void;
       data: NodeDataType;
     },
     ref,