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,
+  data: NodeDataType,
-  name,
+  name: string,
-  handleUpdateValues,
+  handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
-  setNode,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
-  setIsLoading,
+  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,
+  data: NodeDataType,
-  name,
+  name: string,
-  takeSnapshot,
+  takeSnapshot: () => void,
-  handleUpdateValues,
+  handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
-  debouncedHandleUpdateValues,
+  debouncedHandleUpdateValues: any,
-  setNode,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
-  setIsLoading,
+  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,
+  data: NodeDataType,
-  name,
+  name: string,
-  takeSnapshot,
+  takeSnapshot: () => void,
-  setNode,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
-  updateNodeInternals,
+  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(
+  const [likedByUser, setLikedByUser] = useState(data?.liked_by_user ?? false);
-    data?.liked_by_user ?? false,
+  const [likesCount, setLikesCount] = useState(data?.liked_by_count ?? 0);
-  );
+  const [downloadsCount, setDownloadsCount] = useState(
-  const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0);
-  const [downloads_count, setDownloads_count] = 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(() => {
+  usePlaygroundEffect(
-    if (currentFlowId && playground) {
+    currentFlowId,
-      if (openPlayground) {
+    playground!,
-        setNodes(currentFlow?.data?.nodes ?? [], true);
+    openPlayground,
-        setEdges(currentFlow?.data?.edges ?? [], true);
+    currentFlow,
-      } else {
+    setNodes,
-        setNodes([], true);
+    setEdges,
-        setEdges([], true);
+    cleanFlowPool,
-      }
+  );
-      cleanFlowPool();
-    }
-  }, [openPlayground]);
 
-  useEffect(() => {
+  useDataEffect(data, setLikedByUser, setLikesCount, setDownloadsCount);
-    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]);
 
-  function handleInstall() {
+  const { handleInstall } = useInstallComponent(
-    const temp = downloads_count;
+    data,
-    setDownloads_count((old) => Number(old) + 1);
+    name,
-    setLoading(true);
+    isStore,
-    getComponent(data.id)
+    downloadsCount,
-      .then((res) => {
+    setDownloadsCount,
-        const newFlow = cloneFLowWithParent(res, res.id, data.is_component);
+    setLoading,
-        addFlow(true, newFlow)
+    setSuccessData,
-          .then((id) => {
+    setErrorData,
-            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);
-      });
-  }
 
-  function handleLike() {
+  const { handleLike } = useLikeComponent(
-    setLoadingLike(true);
+    data,
-    if (liked_by_user !== undefined || liked_by_user !== null) {
+    name,
-      const temp = liked_by_user;
+    setLoadingLike,
-      const tempNum = likes_count;
+    likedByUser,
-      setLiked_by_user((prev) => !prev);
+    likesCount,
-      if (!temp) {
+    setLikedByUser,
-        setLikes_count((prev) => Number(prev) + 1);
+    setLikesCount,
-      } else {
+    setValidApiKey,
-        setLikes_count((prev) => Number(prev) - 1);
+    setErrorData,
-      }
+  );
-      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 isSelectedCard =
     selectedFlowsComponentsCards?.includes(data?.id) ?? false;
 
-  function onDragStart(event: React.DragEvent<any>) {
+  const { onDragStart } = useDragStart(data);
-    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));
-    }
-  }
 
   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">
+              <div className="flex w-full flex-1 flex-wrap gap-2"></div>
-                {/* {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>
 
             <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,
+  setIsDragging: (value: boolean) => void,
-  setFiles,
+  setFiles: (value: any) => void,
-  currentFlowId,
+  currentFlowId: string,
-  setErrorData,
+  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[
+        const templateParam = myData.node!.template[key] as any;
-          key
-        ] as TemplateVariableType;
         return (
           key.charAt(0) !== "_" &&
           templateParam.show &&
@@ -20,9 +18,7 @@ const useRowData = (myData, open) => {
         );
       })
       .map((key: string) => {
-        const templateParam = myData.node!.template[
+        const templateParam = myData.node!.template[key] as any;
-          key
-        ] as TemplateVariableType;
         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,

src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import CollectionCardComponent from "../../../../../../components/cardComponent";
+import IconComponent from "../../../../../../components/genericIconComponent";
+import { Button } from "../../../../../../components/ui/button";
+const CollectionCard = ({ item, type, isLoading, control }) => {
+  const navigate = useNavigate();
+  const isComponent = item.is_component ?? false;
+  const editFlowLink = `/flow/${item.id}`;
+  const editFlowButtonTestId = `edit-flow-button-${item.id}`;
+
+  const handleClick = () => {
+    if (!isComponent) {
+      navigate(editFlowLink);
+    }
+  };
+
+  const renderButton = () => {
+    if (!isComponent) {
+      return (
+        <Link to={editFlowLink}>
+          <Button
+            tabIndex={-1}
+            variant="outline"
+            size="sm"
+            className="whitespace-nowrap"
+            data-testid={editFlowButtonTestId}
+          >
+            <IconComponent
+              name="ExternalLink"
+              className="main-page-nav-button select-none"
+            />
+            Edit Flow
+          </Button>
+        </Link>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <CollectionCardComponent
+      is_component={type === "component"}
+      data={{
+        is_component: isComponent,
+        ...item,
+      }}
+      disabled={isLoading}
+      data-testid={editFlowButtonTestId}
+      button={renderButton()!}
+      onClick={!isComponent ? handleClick : undefined}
+      playground={!isComponent}
+      control={control}
+    />
+  );
+};
+
+export default CollectionCard;

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx

@@ -1,15 +1,15 @@
 import { useCallback } from "react";
 
 const useDeleteMultipleFlows = (
-  selectedFlowsComponentsCards,
+  selectedFlowsComponentsCards: string[],
-  removeFlow,
+  removeFlow: (selectedFlowsComponentsCards: string[]) => Promise<void>,
-  resetFilter,
+  resetFilter: () => void,
-  getFoldersApi,
+  getFoldersApi: (refetch?: boolean) => Promise<void>,
-  folderId,
+  folderId: string | undefined,
-  myCollectionId,
+  myCollectionId: string,
-  getFolderById,
+  getFolderById: (id: string) => void,
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
 ) => {
   const handleDeleteMultiple = useCallback(() => {
     removeFlow(selectedFlowsComponentsCards)

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx

@@ -1,6 +1,9 @@
 import { useMemo } from "react";
 
-const useDescriptionModal = (selectedFlowsComponentsCards, type) => {
+const useDescriptionModal = (
+  selectedFlowsComponentsCards: string[] | undefined,
+  type: string | undefined,
+) => {
   const getDescriptionModal = useMemo(() => {
     const getTypeLabel = (type) => {
       const labels = {

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx

@@ -1,10 +1,11 @@
 import cloneDeep from "lodash/cloneDeep";
 import { useEffect } from "react";
+import { FlowType } from "../../../../../types/flow";
 
 const useFilteredFlows = (
-  flowsFromFolder,
+  flowsFromFolder: FlowType[],
-  searchFlowsComponents,
+  searchFlowsComponents: string,
-  setAllFlows,
+  setAllFlows: (value: any[]) => void,
 ) => {
   useEffect(() => {
     const newFlows = cloneDeep(flowsFromFolder || []);

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx

@@ -1,18 +1,31 @@
 import { useCallback } from "react";
+import { XYPosition } from "reactflow";
+import { FlowType } from "../../../../../types/flow";
 
 const useDuplicateFlows = (
-  selectedFlowsComponentsCards,
+  selectedFlowsComponentsCards: string[],
-  addFlow,
+  addFlow: (
-  allFlows,
+    newProject: boolean,
-  resetFilter,
+    flow?: FlowType,
-  getFoldersApi,
+    override?: boolean,
-  folderId,
+    position?: XYPosition,
-  myCollectionId,
+    fromDragAndDrop?: boolean,
-  getFolderById,
+  ) => Promise<string | undefined>,
-  setSuccessData,
+  allFlows: any[],
-  setSelectedFlowsComponentsCards,
+  resetFilter: () => void,
-  handleSelectAll,
+  getFoldersApi: (
-  cardTypes,
+    refetch?: boolean,
+    startupApplication?: boolean,
+  ) => Promise<void>,
+  folderId: string,
+  myCollectionId: string,
+  getFolderById: (id: string) => void,
+  setSuccessData: (data: { title: string }) => void,
+  setSelectedFlowsComponentsCards: (
+    selectedFlowsComponentsCards: string[],
+  ) => void,
+  handleSelectAll: (select: boolean) => void,
+  cardTypes: string,
 ) => {
   const handleDuplicate = useCallback(() => {
     Promise.all(

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx

@@ -1,15 +1,18 @@
 import { useCallback } from "react";
+import { FlowType } from "../../../../../types/flow";
 
 const useExportFlows = (
-  selectedFlowsComponentsCards,
+  selectedFlowsComponentsCards: string[],
-  allFlows,
+  allFlows: Array<FlowType>,
-  downloadFlow,
+  downloadFlow: (flow: any, name: string, description: string) => void,
-  removeApiKeys,
+  removeApiKeys: (flow: any) => any,
-  version,
+  version: string,
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setSelectedFlowsComponentsCards,
+  setSelectedFlowsComponentsCards: (
-  handleSelectAll,
+    selectedFlowsComponentsCards: string[],
-  cardTypes,
+  ) => void,
+  handleSelectAll: (select: boolean) => void,
+  cardTypes: string,
 ) => {
   const handleExport = useCallback(() => {
     selectedFlowsComponentsCards.forEach((selectedFlowId) => {

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx

@@ -1,6 +1,11 @@
 import { useCallback } from "react";
+import { FlowType } from "../../../../../types/flow";
 
-const useSelectAll = (flowsFromFolder, getValues, setValue) => {
+const useSelectAll = (
+  flowsFromFolder: FlowType[],
+  getValues: () => Record<string, boolean>,
+  setValue: (key: string, value: boolean) => void,
+) => {
   const handleSelectAll = useCallback(
     (select) => {
       const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id);

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx

@@ -1,15 +1,15 @@
 import { useCallback } from "react";
 
 const useSelectOptionsChange = (
-  selectedFlowsComponentsCards,
+  selectedFlowsComponentsCards: string[] | undefined,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
-  setOpenDelete,
+  setOpenDelete: (value: boolean) => void,
-  handleDuplicate,
+  handleDuplicate: () => void,
-  handleExport,
+  handleExport: () => void,
 ) => {
   const handleSelectOptionsChange = useCallback(
     (action) => {
-      const hasSelected = selectedFlowsComponentsCards?.length > 0;
+      const hasSelected = selectedFlowsComponentsCards?.length! > 0;
       if (!hasSelected) {
         setErrorData({
           title: "No items selected",

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx

@@ -1,8 +1,10 @@
 import { useEffect } from "react";
 
 const useSelectedFlows = (
-  entireFormValues,
+  entireFormValues: Record<string, boolean> | undefined,
-  setSelectedFlowsComponentsCards,
+  setSelectedFlowsComponentsCards: (
+    selectedFlowsComponentsCards: string[],
+  ) => void,
 ) => {
   useEffect(() => {
     if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;

src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx

@@ -19,6 +19,7 @@ import { getNameByType } from "../../utils/get-name-by-type";
 import { sortFlows } from "../../utils/sort-flows";
 import EmptyComponent from "../emptyComponent";
 import HeaderComponent from "../headerComponent";
+import CollectionCard from "./components/collectionCard";
 import useDeleteMultipleFlows from "./hooks/use-delete-multiple";
 import useDescriptionModal from "./hooks/use-description-modal";
 import useFilteredFlows from "./hooks/use-filtered-flows";
@@ -61,7 +62,6 @@ export default function ComponentsComponent({
   const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
   const [pageSize, setPageSize] = useState(20);
   const [pageIndex, setPageIndex] = useState(1);
-  const navigate = useNavigate();
   const location = useLocation();
   const all: FlowType[] = sortFlows(allFlows, type);
   const start = (pageIndex - 1) * pageSize;
@@ -94,7 +94,7 @@ export default function ComponentsComponent({
     getFolderById(folderId ? folderId : myCollectionId);
   }, [location]);
 
-  useFilteredFlows(flowsFromFolder, searchFlowsComponents, setAllFlows);
+  useFilteredFlows(flowsFromFolder!, searchFlowsComponents, setAllFlows);
 
   const resetFilter = () => {
     setPageIndex(1);
@@ -107,7 +107,7 @@ export default function ComponentsComponent({
   const methods = useForm();
 
   const { handleSelectAll } = useSelectAll(
-    flowsFromFolder,
+    flowsFromFolder!,
     getValues,
     setValue,
   );
@@ -119,7 +119,7 @@ export default function ComponentsComponent({
     resetFilter,
     getFoldersApi,
     folderId,
-    myCollectionId,
+    myCollectionId!,
     getFolderById,
     setSuccessData,
     setSelectedFlowsComponentsCards,
@@ -155,7 +155,7 @@ export default function ComponentsComponent({
     resetFilter,
     getFoldersApi,
     folderId,
-    myCollectionId,
+    myCollectionId!,
     getFolderById,
     setSuccessData,
     setErrorData,
@@ -205,43 +205,10 @@ export default function ComponentsComponent({
                     {data?.map((item) => (
                       <FormProvider {...methods} key={item.id}>
                         <form>
-                          <CollectionCardComponent
+                          <CollectionCard
-                            is_component={type === "component"}
+                            item={item}
-                            data={{
+                            type={type}
-                              is_component: item.is_component ?? false,
+                            isLoading={isLoading}
-                              ...item,
-                            }}
-                            disabled={isLoading}
-                            data-testid={"edit-flow-button-" + item.id}
-                            button={
-                              !item.is_component ? (
-                                <Link to={"/flow/" + item.id}>
-                                  <Button
-                                    tabIndex={-1}
-                                    variant="outline"
-                                    size="sm"
-                                    className="whitespace-nowrap"
-                                    data-testid={"edit-flow-button-" + item.id}
-                                  >
-                                    <IconComponent
-                                      name="ExternalLink"
-                                      className="main-page-nav-button select-none"
-                                    />
-                                    Edit Flow
-                                  </Button>
-                                </Link>
-                              ) : (
-                                <></>
-                              )
-                            }
-                            onClick={
-                              !item.is_component
-                                ? () => {
-                                    navigate("/flow/" + item.id);
-                                  }
-                                : undefined
-                            }
-                            playground={!item.is_component}
                             control={control}
                           />
                         </form>

src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx

@@ -2,7 +2,7 @@ import useAlertStore from "../../../stores/alertStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 import { deleteFolder, getFolderById } from "../services";
 
-const useDeleteFolder = ({ navigate }) => {
+const useDeleteFolder = ({ navigate }: { navigate: (url: string) => void }) => {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const folderToEdit = useFolderStore((state) => state.folderToEdit);

src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx

@@ -1,7 +1,26 @@
+import { XYPosition } from "reactflow";
 import { CONSOLE_ERROR_MSG } from "../../../constants/alerts_constants";
 import useAlertStore from "../../../stores/alertStore";
 
-const useDropdownOptions = ({ uploadFlow, navigate, is_component }) => {
+const useDropdownOptions = ({
+  uploadFlow,
+  navigate,
+  is_component,
+}: {
+  uploadFlow: ({
+    newProject,
+    file,
+    isComponent,
+    position,
+  }: {
+    newProject: boolean;
+    file?: File;
+    isComponent: boolean | null;
+    position?: XYPosition;
+  }) => Promise<string | never>;
+  navigate: (url: string) => void;
+  is_component: boolean;
+}) => {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const handleImportFromJSON = () => {

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx

@@ -1,6 +1,12 @@
 import { getApiKey } from "../../../../../controllers/API";
+import { Users } from "../../../../../types/api";
 
-const useApiKeys = (userData, setLoadingKeys, keysList, setUserId) => {
+const useApiKeys = (
+  userData: Users | null,
+  setLoadingKeys: (load: boolean) => void,
+  keysList: React.MutableRefObject<never[]>,
+  setUserId: (userId: string) => void,
+) => {
   const fetchApiKeys = () => {
     setLoadingKeys(true);
     getApiKey()

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx

@@ -7,10 +7,10 @@ import {
 import { deleteApiKey } from "../../../../../controllers/API";
 
 const useDeleteApiKeys = (
-  selectedRows,
+  selectedRows: string[],
-  resetFilter,
+  resetFilter: () => void,
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
 ) => {
   const handleDeleteKey = () => {
     Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow)))

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx

@@ -4,7 +4,10 @@ import {
   BASE_URL_API,
 } from "../../../../../../../../../constants/constants";
 
-const usePreloadImages = (profilePictures, setImagesLoaded) => {
+const usePreloadImages = (
+  profilePictures: { [key: string]: string[] },
+  setImagesLoaded: (value: boolean) => void,
+) => {
   const preloadImages = async (imageUrls) => {
     return Promise.all(
       imageUrls.map(

src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-password.tsx

@@ -5,8 +5,13 @@ import {
   SAVE_SUCCESS_ALERT,
 } from "../../../../constants/alerts_constants";
 import { resetPassword } from "../../../../controllers/API";
+import { Users } from "../../../../types/api";
 
-const usePatchPassword = (userData, setSuccessData, setErrorData) => {
+const usePatchPassword = (
+  userData: Users | null,
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
+  setErrorData: (data: { title: string; list: string[] }) => void,
+) => {
   const handlePatchPassword = async (password, cnfPassword, handleInput) => {
     if (password !== cnfPassword) {
       setErrorData({
@@ -16,7 +21,7 @@ const usePatchPassword = (userData, setSuccessData, setErrorData) => {
       return;
     }
     try {
-      if (password !== "") await resetPassword(userData.id, { password });
+      if (password !== "") await resetPassword(userData!.id, { password });
       handleInput({ target: { name: "password", value: "" } });
       handleInput({ target: { name: "cnfPassword", value: "" } });
       setSuccessData({ title: SAVE_SUCCESS_ALERT });

src/frontend/src/pages/SettingsPage/pages/hooks/use-patch-profile-picture.tsx

@@ -4,21 +4,22 @@ import {
   SAVE_SUCCESS_ALERT,
 } from "../../../../constants/alerts_constants";
 import { updateUser } from "../../../../controllers/API";
+import { Users } from "../../../../types/api";
 
 const usePatchProfilePicture = (
-  setSuccessData,
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
-  currentUserData,
+  currentUserData: Users | null,
-  setUserData,
+  setUserData: (data: any) => void,
 ) => {
   const handlePatchProfilePicture = async (profile_picture) => {
     try {
       if (profile_picture !== "") {
-        await updateUser(currentUserData.id, {
+        await updateUser(currentUserData!.id, {
           profile_image: profile_picture,
         });
         let newUserData = cloneDeep(currentUserData);
-        newUserData.profile_image = profile_picture;
+        newUserData!.profile_image = profile_picture;
         setUserData(newUserData);
       }
       setSuccessData({ title: SAVE_SUCCESS_ALERT });

src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx

@@ -7,11 +7,11 @@ import { AuthContext } from "../../../../contexts/authContext";
 import { addApiKeyStore } from "../../../../controllers/API";
 
 const useSaveKey = (
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string; list: string[] }) => void,
-  setHasApiKey,
+  setHasApiKey: (hasApiKey: boolean) => void,
-  setValidApiKey,
+  setValidApiKey: (validApiKey: boolean) => void,
-  setLoadingApiKey,
+  setLoadingApiKey: (loadingApiKey: boolean) => void,
 ) => {
   const { storeApiKey } = useContext(AuthContext);
 

src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-const useScrollToElement = (scrollId, setCurrentFlowId) => {
+const useScrollToElement = (
+  scrollId: string | null | undefined,
+  setCurrentFlowId: (currentFlowId: string) => void,
+) => {
   useEffect(() => {
     const element = document.getElementById(scrollId ?? "null");
     if (element) {

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx

@@ -1,8 +1,11 @@
+import { ColDef, ColGroupDef } from "ag-grid-community";
 import { useEffect } from "react";
 import { getMessagesTable } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 
-const useMessagesTable = (setColumns) => {
+const useMessagesTable = (
+  setColumns: (data: Array<ColDef | ColGroupDef>) => void,
+) => {
   const setMessages = useMessagesStore((state) => state.setMessages);
   useEffect(() => {
     const fetchData = async () => {

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx

@@ -2,10 +2,10 @@ import { deleteMessagesFn } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 
 const useRemoveMessages = (
-  setSelectedRows,
+  setSelectedRows: (data: number[]) => void,
-  setSuccessData,
+  setSuccessData: (data: { title: string }) => void,
-  setErrorData,
+  setErrorData: (data: { title: string }) => void,
-  selectedRows,
+  selectedRows: number[],
 ) => {
   const deleteMessages = useMessagesStore((state) => state.removeMessages);
 

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx

@@ -2,7 +2,10 @@ import { updateMessageApi } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 import { Message } from "../../../../../types/messages";
 
-const useUpdateMessage = (setSuccessData, setErrorData) => {
+const useUpdateMessage = (
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
+  setErrorData: (data: { title: string; list?: string[] }) => void,
+) => {
   const updateMessage = useMessagesStore((state) => state.updateMessage);
 
   const handleUpdate = async (data: Message) => {