From 48083791cef9d2424175e4b4e7329cb547bbe5c2 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Sun, 26 Feb 2023 15:39:58 -0300
Subject: [PATCH] download flow for each tab implemented, tabs bug not solved
 yet

---
 space_flow/src/contexts/tabsContext.tsx       |  13 +-
 .../flowManager/tabComponent/index.tsx        | 150 +++++++++---------
 2 files changed, 89 insertions(+), 74 deletions(-)

diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx
index 1d99dd69d..aecaa3f08 100644
--- a/space_flow/src/contexts/tabsContext.tsx
+++ b/space_flow/src/contexts/tabsContext.tsx
@@ -10,6 +10,7 @@ type TabsContextType={
     addFlow:(flowData?:any)=>void;
     updateFlow:(newFlow:flow)=>void;
     incrementNodeId:()=>number,
+    downloadFlow:()=>void
 }
 
 const TabsContextInitialValue = {
@@ -20,7 +21,7 @@ const TabsContextInitialValue = {
     addFlow:(flowData?:any)=>{},
     updateFlow:(newFlow:flow)=>{},
     incrementNodeId:()=>0,
-    
+    downloadFlow:()=>{}
 
 }
 
@@ -53,6 +54,14 @@ export function TabsProvider({children}){
             newNodeId.current= cookieObject.nodeId;
         }
     }, [])
+
+    function downloadFlow(){
+        const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(flows[tabIndex]))}`
+        const link = document.createElement('a')
+        link.href = jsonString
+        link.download = `${flows[tabIndex].name}.json`
+        link.click()
+    }
     
     function removeFlow(id:string){
         setFlows(prevState=>{
@@ -97,7 +106,7 @@ export function TabsProvider({children}){
     }
 
     return(
-        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow}}>
+        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow, downloadFlow}}>
             {children}
         </TabsContext.Provider>
     )
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
index 9fb8861f0..4df405004 100644
--- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
@@ -1,3 +1,4 @@
+import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useContext, useRef, useState } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
@@ -5,76 +6,81 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 var _ = require("lodash");
 
 export default function TabComponent({ selected, flow, onClick }) {
-  const { removeFlow, updateFlow,flows } = useContext(TabsContext);
-  const [isRename, setIsRename] = useState(false);
-  const [value, setValue] = useState("");
-  return (
-    <>
-      {flow ? (
-        !selected ? (
-          <div
-            className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
-            onClick={onClick}
-          >
-            {flow.name}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                removeFlow(flow.id);
-              }}
-            >
-              <XMarkIcon className="h-4 hover:bg-white rounded-full" />
-            </button>
-          </div>
-        ) : (
-          <div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
-            {isRename ? (
-              <input
-                autoFocus
-                className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md  w-28"
-                onBlur={() => {
-                  setIsRename(false);
-                  if (value !== "") {
-                    let newFlow = _.cloneDeep(flow);
-                    newFlow.name = value;
-                    updateFlow(newFlow);
-                  }
-                }}
-                value={value}
-                onChange={(e) => {
-                  setValue(e.target.value);
-                }}
-              />
-            ) : (
-              <span
-                className="text-left truncate"
-                onDoubleClick={() => {
-                  setIsRename(true);
-                  setValue(flow.name);
-                }}
-              >
-                {flow.name}
-              </span>
-            )}
-            <button
-              onClick={() => {
-                removeFlow(flow.id);
-              }}
-            >
-              {flows.length>1&& <XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />}
-            </button>
-          </div>
-        )
-      ) : (
-        <div className="h-full py-1.5 flex justify-center items-center">
-          <button
-            className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
-            onClick={onClick}
-          >
-            <PlusIcon className="h-5 rounded-full hover:bg-white" />
-          </button>
-        </div>
-      )}
-    </>
-  );
+	const { removeFlow, updateFlow, flows, downloadFlow } = useContext(TabsContext);
+	const [isRename, setIsRename] = useState(false);
+	const [value, setValue] = useState("");
+	return (
+		<>
+			{flow ? (
+				!selected ? (
+					<div
+						className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
+						onClick={onClick}
+					>
+						{flow.name}
+						<button
+							onClick={(e) => {
+								e.stopPropagation();
+								removeFlow(flow.id);
+							}}
+						>
+							<XMarkIcon className="h-4 hover:bg-white rounded-full" />
+						</button>
+					</div>
+				) : (
+					<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
+						{isRename ? (
+							<input
+								autoFocus
+								className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md  w-28"
+								onBlur={() => {
+									setIsRename(false);
+									if (value !== "") {
+										let newFlow = _.cloneDeep(flow);
+										newFlow.name = value;
+										updateFlow(newFlow);
+									}
+								}}
+								value={value}
+								onChange={(e) => {
+									setValue(e.target.value);
+								}}
+							/>
+						) : (
+							<div className="flex items-center gap-2">
+								<span
+									className="text-left truncate"
+									onDoubleClick={() => {
+										setIsRename(true);
+										setValue(flow.name);
+									}}
+								>
+									{flow.name}
+								</span>
+                <ArrowDownTrayIcon onClick={()=>downloadFlow()} className="w-4 h-4 hover:text-blue-500 cursor-pointer"/>
+							</div>
+						)}
+						<button
+							onClick={() => {
+								removeFlow(flow.id);
+							}}
+						>
+							{flows.length > 1 && (
+								<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
+							)}
+						</button>
+					</div>
+				)
+			) : (
+				<div className="h-full py-1.5 flex justify-center items-center">
+					<button
+						className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
+						onClick={onClick}
+					>
+						<PlusIcon className="h-5 rounded-full hover:bg-white" />
+					</button>
+				</div>
+			)}
+		</>
+	);
 }