💡 (hooks): add TypeScript types to hook parameters for better type safety

💡 (index.tsx): add non-null assertion operator to playground variable
♻️ (use-on-file-drop.tsx): add type annotations for folderId and folderChangeCallback
♻️ (use-auto-resize-text-area.tsx): add type annotations for value and inputRef
♻️ (use-drag-and-drop.tsx): add type annotations for setIsDragging, setFiles, currentFlowId, and setErrorData
♻️ (use-focus-unlock.tsx): add type annotations for lockChat and inputRef
♻️ (use-upload.tsx): add type annotations for uploadFile, currentFlowId, setFiles, and lockChat
♻️ (use-column-defs.tsx): add type annotation for myData
♻️ (use-row-data.tsx): add type annotations for myData and open
♻️ (index.tsx): remove commented-out code
♻️ (use-filtered-flows.tsx): add type annotations for flowsFromFolder, searchFlowsComponents, and setAllFlows
💡 (index.tsx): add non-null assertion operator to flowsFromFolder variable

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

@@ -1,10 +1,11 @@
 import { useEffect } from "react";
+import { storeComponent } from "../../../types/store";
 
 const useDataEffect = (
-  data,
-  setLikedByUser,
-  setLikesCount,
-  setDownloadsCount,
+  data: storeComponent,
+  setLikedByUser: (value: any) => void,
+  setLikesCount: (value: any) => void,
+  setDownloadsCount: (value: any) => void,
 ) => {
   useEffect(() => {
     if (data) {

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

@@ -1,17 +1,18 @@
 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,
-  name,
-  isStore,
-  downloadsCount,
-  setDownloadsCount,
-  setLoading,
-  setSuccessData,
-  setErrorData,
+  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);
 

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

@@ -1,15 +1,16 @@
 import { postLikeComponent } from "../../../controllers/API";
+import { storeComponent } from "../../../types/store";
 
 const useLikeComponent = (
-  data,
-  name,
-  setLoadingLike,
-  likedByUser,
-  likesCount,
-  setLikedByUser,
-  setLikesCount,
-  setValidApiKey,
-  setErrorData,
+  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);

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

@@ -1,9 +1,10 @@
 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) => {
+const useDragStart = (data: storeComponent) => {
   const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
 
   const onDragStart = useCallback(

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

@@ -1,13 +1,14 @@
 import { useEffect } from "react";
+import { FlowType } from "../../../types/flow";
 
 const usePlaygroundEffect = (
-  currentFlowId,
-  playground,
-  openPlayground,
-  currentFlow,
-  setNodes,
-  setEdges,
-  cleanFlowPool,
+  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) {

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

@@ -104,7 +104,7 @@ export default function CollectionCardComponent({
 
   usePlaygroundEffect(
     currentFlowId,
-    playground,
+    playground!,
     openPlayground,
     currentFlow,
     setNodes,

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,

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,
-  searchFlowsComponents,
-  setAllFlows,
+  flowsFromFolder: FlowType[],
+  searchFlowsComponents: string,
+  setAllFlows: (value: any[]) => void,
 ) => {
   useEffect(() => {
     const newFlows = cloneDeep(flowsFromFolder || []);

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

@@ -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);