feat(tabsContext.tsx): add saveFlow function to save flow changes to database and update state

feat(flowSettingsModal/index.tsx): use saveFlow function from TabsContext to save flow changes to database and update state
feat(extraSidebarComponent/index.tsx): use saveFlow function from TabsContext to save flow changes to database and update state
feat(tabs/index.ts): add saveFlow function to TabsContextType to update type definition

src/frontend/src/contexts/tabsContext.tsx

@@ -20,6 +20,7 @@ import {
   saveFlowToDatabase,
   downloadFlowsFromDatabase,
   uploadFlowsToDatabase,
+  updateFlowInDatabase,
 } from "../controllers/API";
 import _ from "lodash";
 
@@ -39,6 +40,7 @@ const TabsContextInitialValue: TabsContextType = {
   uploadFlows: () => {},
   uploadFlow: () => {},
   hardReset: () => {},
+  saveFlow: async (flow:FlowType) => {},
   disableCopyPaste: false,
   setDisableCopyPaste: (state: boolean) => {},
   lastCopiedSelection: null,
@@ -562,11 +564,44 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
 
+  async function saveFlow(newFlow: FlowType) {
+    try{
+      // updates flow in db
+      const updatedFlow = await updateFlowInDatabase(newFlow);
+      if (updatedFlow){
+        // updates flow in state
+        setFlows((prevState) => {
+          const newFlows = [...prevState];
+          const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
+          if (index !== -1) {
+            newFlows[index].description = newFlow.description ?? "";
+            newFlows[index].data = newFlow.data;
+            newFlows[index].name = newFlow.name;
+          }
+          return newFlows;
+        });
+        //update tabs state
+        setTabsState((prev) => {
+          return {
+            ...prev,
+            [tabId]: {
+              isPending: false,
+            },
+          };
+        });
+      }
+    }
+    catch(err){
+      setErrorData(err);
+    }
+  }
+
   const [disableCopyPaste, setDisableCopyPaste] = useState(false);
 
   return (
     <TabsContext.Provider
       value={{
+        saveFlow,
         lastCopiedSelection,
         setLastCopiedSelection,
         disableCopyPaste,

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -22,7 +22,7 @@ export default function FlowSettingsModal() {
   const { closePopUp } = useContext(PopUpContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const ref = useRef();
-  const { flows, tabId, updateFlow, setTabsState } = useContext(TabsContext);
+  const { flows, tabId, updateFlow, setTabsState, saveFlow } = useContext(TabsContext);
   const maxLength = 50;
   function setModalOpen(x: boolean) {
     setOpen(x);
@@ -33,25 +33,6 @@ export default function FlowSettingsModal() {
     }
   }
 
-  async function handleSaveFlow(flow) {
-    try {
-      const updatedFlow = await updateFlowInDatabase(flow);
-      if (updatedFlow) {
-        updateFlow(updatedFlow);
-        setTabsState((prev) => {
-          return {
-            ...prev,
-            [tabId]: {
-              isPending: false,
-            },
-          };
-        });
-      }
-      // updateFlowStyleInDataBase(flow);
-    } catch (err) {
-      setErrorData(err);
-    }
-  }
 
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
   const [description, setDescription] = useState(
@@ -82,7 +63,7 @@ export default function FlowSettingsModal() {
         <DialogFooter>
           <Button
             onClick={() => {
-              handleSaveFlow(flows.find((f) => f.id === tabId));
+              saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
               closePopUp();
             }}

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -24,7 +24,7 @@ import { Separator } from "../../../../components/ui/separator";
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
   const { openPopUp } = useContext(PopUpContext);
-  const { flows, tabId, uploadFlow, updateFlow, tabsState, setTabsState } =
+  const { flows, tabId, uploadFlow, tabsState, saveFlow } =
     useContext(TabsContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
@@ -61,27 +61,6 @@ export default function ExtraSidebar() {
     });
   }
 
-  async function handleSaveFlow(flow) {
-    try {
-      const updatedFlow = await updateFlowInDatabase(flow);
-      if (updatedFlow) {
-        updateFlow(updatedFlow);
-        setTabsState((prev) => {
-          console.log(prev);
-          return {
-            ...prev,
-            [tabId]: {
-              isPending: false,
-            },
-          };
-        });
-      }
-      // updateFlowStyleInDataBase(flow);
-    } catch (err) {
-      setErrorData(err);
-    }
-  }
-
   return (
     <div className="w-52 flex flex-col overflow-hidden scrollbar-hide h-full border-r">
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
@@ -126,7 +105,7 @@ export default function ExtraSidebar() {
           <button
             className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             onClick={(event) => {
-              handleSaveFlow(flows.find((f) => f.id === tabId));
+              saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
             }}
             disabled={!isPending}

src/frontend/src/types/tabs/index.ts

@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction } from "react";
 import { FlowType } from "../flow";
 
 export type TabsContextType = {
+  saveFlow: (flow: FlowType) => Promise<void>;
   save: () => void;
   tabId: string;
   setTabId: (index: string) => void;