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

💡 (use-dropdown-options.tsx): add TypeScript types to function parameters

💡 (use-api-keys.tsx): add TypeScript types to function parameters

💡 (use-handle-delete-key.tsx): add TypeScript types to function parameters

💡 (use-preload-images.tsx): add TypeScript types to function parameters

💡 (use-patch-password.tsx): add TypeScript types to function parameters

💡 (use-patch-profile-picture.tsx): add TypeScript types to function parameters

💡 (use-save-key.tsx): add TypeScript types to function parameters

💡 (use-scroll-to-element.tsx): add TypeScript types to function parameters

💡 (use-messages-table.tsx): add TypeScript types to function parameters

💡 (use-remove-messages.tsx): add TypeScript types to function parameters

💡 (use-updateMessage.tsx): add type annotations to setSuccessData and setErrorData for better type safety and code clarity

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

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

@@ -1,18 +1,31 @@
 import { useCallback } from "react";
+import { XYPosition } from "reactflow";
+import { FlowType } from "../../../../../types/flow";
 
 const useDuplicateFlows = (
-  selectedFlowsComponentsCards,
-  addFlow,
-  allFlows,
-  resetFilter,
-  getFoldersApi,
-  folderId,
-  myCollectionId,
-  getFolderById,
-  setSuccessData,
-  setSelectedFlowsComponentsCards,
-  handleSelectAll,
-  cardTypes,
+  selectedFlowsComponentsCards: string[],
+  addFlow: (
+    newProject: boolean,
+    flow?: FlowType,
+    override?: boolean,
+    position?: XYPosition,
+    fromDragAndDrop?: boolean,
+  ) => Promise<string | undefined>,
+  allFlows: any[],
+  resetFilter: () => void,
+  getFoldersApi: (
+    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,
-  allFlows,
-  downloadFlow,
-  removeApiKeys,
-  version,
-  setSuccessData,
-  setSelectedFlowsComponentsCards,
-  handleSelectAll,
-  cardTypes,
+  selectedFlowsComponentsCards: string[],
+  allFlows: Array<FlowType>,
+  downloadFlow: (flow: any, name: string, description: string) => void,
+  removeApiKeys: (flow: any) => any,
+  version: string,
+  setSuccessData: (data: { title: string }) => void,
+  setSelectedFlowsComponentsCards: (
+    selectedFlowsComponentsCards: string[],
+  ) => 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,
-  setErrorData,
-  setOpenDelete,
-  handleDuplicate,
-  handleExport,
+  selectedFlowsComponentsCards: string[] | undefined,
+  setErrorData: (data: { title: string; list: string[] }) => void,
+  setOpenDelete: (value: boolean) => void,
+  handleDuplicate: () => void,
+  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,
-  setSelectedFlowsComponentsCards,
+  entireFormValues: Record<string, boolean> | undefined,
+  setSelectedFlowsComponentsCards: (
+    selectedFlowsComponentsCards: string[],
+  ) => void,
 ) => {
   useEffect(() => {
     if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;

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

@@ -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,

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,
-  resetFilter,
-  setSuccessData,
-  setErrorData,
+  selectedRows: string[],
+  resetFilter: () => void,
+  setSuccessData: (data: { title: string }) => void,
+  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,
-  setErrorData,
-  currentUserData,
-  setUserData,
+  setSuccessData: (data: { title: string; list?: string[] }) => void,
+  setErrorData: (data: { title: string; list: string[] }) => void,
+  currentUserData: Users | null,
+  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,
-  setErrorData,
-  setHasApiKey,
-  setValidApiKey,
-  setLoadingApiKey,
+  setSuccessData: (data: { title: string }) => void,
+  setErrorData: (data: { title: string; list: string[] }) => void,
+  setHasApiKey: (hasApiKey: boolean) => void,
+  setValidApiKey: (validApiKey: boolean) => void,
+  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,
-  setSuccessData,
-  setErrorData,
-  selectedRows,
+  setSelectedRows: (data: number[]) => void,
+  setSuccessData: (data: { title: string }) => void,
+  setErrorData: (data: { title: string }) => void,
+  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) => {