From b2598165a6f2a6101759bfdf4558f80feb07daa6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 14 Jun 2023 06:52:10 -0300
Subject: [PATCH] Fixed saving issue and implemented saved message

---
 .../components/menuBar/index.tsx              |   9 +-
 .../extraSidebarComponent/index.tsx           | 108 ++++++++++--------
 2 files changed, 62 insertions(+), 55 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 85aa39947..88c7cb2be 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -43,14 +43,7 @@ export const MenuBar = ({flows, tabId }) => {
   const { openPopUp } = useContext(PopUpContext);
   const { undo, redo } = useContext(undoRedoContext);
 
-  function handleSaveFlow(flow) {
-    try {
-      updateFlowInDatabase(flow);
-      // updateFlowStyleInDataBase(flow);
-    } catch (err) {
-      setErrorData(err);
-    }
-  }
+  
 
   function handleAddFlow() {
     try {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index b8f9da88c..9a153bac9 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,4 +1,9 @@
-import { Bars2Icon, PencilSquareIcon, Square2StackIcon, TrashIcon } from "@heroicons/react/24/outline";
+import {
+  Bars2Icon,
+  PencilSquareIcon,
+  Square2StackIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
 import {
   classNames,
@@ -18,11 +23,14 @@ import ExportModal from "../../../../modals/exportModal";
 import ApiModal from "../../../../modals/ApiModal";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { Separator } from "../../../../components/ui/separator";
+import { alertContext } from "../../../../contexts/alertContext";
+import { updateFlowInDatabase } from "../../../../controllers/API";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
   const { openPopUp } = useContext(PopUpContext);
   const { flows, tabId } = useContext(TabsContext);
+  const { setSuccessData, setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
 
@@ -57,57 +65,65 @@ export default function ExtraSidebar() {
     });
   }
 
-  function handleSaveFlow(current_flow: any) {
-    throw new Error("Function not implemented.");
+  function handleSaveFlow(flow) {
+    try {
+      updateFlowInDatabase(flow);
+      // updateFlowStyleInDataBase(flow);
+    } catch (err) {
+      setErrorData(err);
+    }
   }
 
   return (
     <div className="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">
-          <ShadTooltip delayDuration={1000} content="Import" side="top">
-            <button
-              className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-              onClick={() => {
-                openPopUp(<ImportModal />);
-              }}
-            >
-              <FileUp className="w-5 h-5 dark:text-gray-300"></FileUp>
-            </button>
-          </ShadTooltip>
+        <ShadTooltip delayDuration={1000} content="Import" side="top">
+          <button
+            className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            onClick={() => {
+              openPopUp(<ImportModal />);
+            }}
+          >
+            <FileUp className="w-5 h-5 dark:text-gray-300"></FileUp>
+          </button>
+        </ShadTooltip>
 
-          <ShadTooltip delayDuration={1000} content="Export" side="top">
-            <button
-              className={classNames("hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all 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) => {
-                openPopUp(<ExportModal />);
-              }}
-            >
-              <FileDown className="w-5 h-5  dark:text-gray-300"></FileDown>
-            </button>
-          </ShadTooltip>
-          <ShadTooltip delayDuration={1000} content="Code" side="top">
-            <button
-              className={classNames("hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all 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) => {
-                openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
-              }}
-            >
-              <Code2 className="w-5 h-5  dark:text-gray-300"></Code2>
-            </button>
-          </ShadTooltip>
+        <ShadTooltip delayDuration={1000} content="Export" side="top">
+          <button
+            className={classNames(
+              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all 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) => {
+              openPopUp(<ExportModal />);
+            }}
+          >
+            <FileDown className="w-5 h-5  dark:text-gray-300"></FileDown>
+          </button>
+        </ShadTooltip>
+        <ShadTooltip delayDuration={1000} content="Code" side="top">
+          <button
+            className={classNames(
+              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all 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) => {
+              openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
+            }}
+          >
+            <Code2 className="w-5 h-5  dark:text-gray-300"></Code2>
+          </button>
+        </ShadTooltip>
 
-            <ShadTooltip delayDuration={1000} content="Save" side="top">
-              <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));
-                }}
-              >
-                <Save className="w-5 h-5  dark:text-gray-300"></Save>
-              </button>
-            </ShadTooltip>
+        <ShadTooltip delayDuration={1000} content="Save" side="top">
+          <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));
+              setSuccessData({ title: "Changes saved successfully" });
+            }}
+          >
+            <Save className="w-5 h-5  dark:text-gray-300"></Save>
+          </button>
+        </ShadTooltip>
       </div>
       <Separator />
       <div className="relative mt-2 flex items-center mb-2 mx-2">
@@ -126,8 +142,6 @@ export default function ExtraSidebar() {
           <MagnifyingGlassIcon className="h-5 w-5 dark:text-white"></MagnifyingGlassIcon>
         </div>
       </div>
-      
-      
 
       <div className="w-full overflow-auto scrollbar-hide">
         {Object.keys(dataFilter)