From 631fc73a5eb059a5d94bd6122b107c21bbea1170 Mon Sep 17 00:00:00 2001
From: anteqkois <anteqkois.dev@gmail.com>
Date: Thu, 23 May 2024 23:27:28 +0200
Subject: [PATCH] feat(editor): clean editor when new flow is created

---
 .../web/app/app/flows/editor/[[...id]]/page.tsx |  5 ++++-
 apps/web/modules/editor/Editor.tsx              |  4 ++--
 apps/web/modules/editor/store/editorSlice.ts    | 17 +++++++++++++++++
 .../editor/store/flowAndConnectorsSlice.ts      |  4 ++--
 apps/web/modules/editor/store/types.ts          |  3 ++-
 5 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/app/flows/editor/[[...id]]/page.tsx b/apps/web/app/app/flows/editor/[[...id]]/page.tsx
index 7b468117..524b3487 100644
--- a/apps/web/app/app/flows/editor/[[...id]]/page.tsx
+++ b/apps/web/app/app/flows/editor/[[...id]]/page.tsx
@@ -114,7 +114,7 @@ const renderFlow = (flowVersion: FlowVersion, connectorsMetadata: ConnectorMetad
 
 export default function Page({ params }: { params: { id: string } }) {
   const { data: connectorsMetadata, status } = useClientQuery(connectorsMetadataQueryConfig.getSummaryMany())
-  const { loadFlow, setFlow, setEdges, setNodes } = useEditor()
+  const { loadFlow, setFlow, setEdges, setNodes, clearEditorState } = useEditor()
   const { toast } = useToast()
   const { showDialogBasedOnErrorCode } = useReachLimitDialog()
   const { currentPlan, subscriptionsStatus, subscriptionsError } = useSubscriptions()
@@ -122,6 +122,9 @@ export default function Page({ params }: { params: { id: string } }) {
 
   const initEditor = useCallback(async () => {
     if (!connectorsMetadata?.length) throw new Error('Can not retrive connectors metadata')
+    clearEditorState()
+    // Clear editor state, becouse wehn user click to create new flow when they edit other flow, there are still old data
+
     const id = params?.id?.[0]
 
     // Fetch and render if exists
diff --git a/apps/web/modules/editor/Editor.tsx b/apps/web/modules/editor/Editor.tsx
index e2cbbd40..6cc173da 100644
--- a/apps/web/modules/editor/Editor.tsx
+++ b/apps/web/modules/editor/Editor.tsx
@@ -57,7 +57,7 @@ export const Editor = ({ mode, limits, useLocalStorage = false }: EditorProps) =
     setShowRightDrawer,
     rightDrawer,
     leftDrawer,
-    loaded,
+    flowLoaded,
     showLeftDrawer,
     setShowLeftDrawer,
     setLimits,
@@ -75,7 +75,7 @@ export const Editor = ({ mode, limits, useLocalStorage = false }: EditorProps) =
 
   return (
     <ReactFlowProvider>
-      {loaded ? <EditorFlowMenu /> : null}
+      {flowLoaded ? <EditorFlowMenu /> : null}
       <div style={{ width: '100vw', height: '100vh' }} ref={reactFlowWrapper}>
         <ReactFlow
           nodes={nodes}
diff --git a/apps/web/modules/editor/store/editorSlice.ts b/apps/web/modules/editor/store/editorSlice.ts
index bc96f98f..c1daa173 100644
--- a/apps/web/modules/editor/store/editorSlice.ts
+++ b/apps/web/modules/editor/store/editorSlice.ts
@@ -84,4 +84,21 @@ export const createEditorSlice: CreateSlice<EditorSlice> = (set, get) => ({
     if (newDrawer?.name === get().leftDrawer.name) return
     set(() => ({ leftDrawer: newDrawer }))
   },
+  clearEditorState: () => {
+    const { flowLoaded } = get()
+
+    // this mean that flow is first time loaded, so there is no need to clear
+    if (!flowLoaded) return
+
+    set({
+      showLeftDrawer: false,
+      leftDrawer: editorDrawers[0],
+      showRightDrawer: false,
+      rightDrawer: editorDrawers[0],
+      editedTrigger: null,
+      editStepMetadata: null,
+      editedAction: null,
+      editedConnectorMetadata: null,
+    })
+  },
 })
diff --git a/apps/web/modules/editor/store/flowAndConnectorsSlice.ts b/apps/web/modules/editor/store/flowAndConnectorsSlice.ts
index 92bb2562..a748b8da 100644
--- a/apps/web/modules/editor/store/flowAndConnectorsSlice.ts
+++ b/apps/web/modules/editor/store/flowAndConnectorsSlice.ts
@@ -52,7 +52,7 @@ const emptyFlow: FlowPopulated = {
 
 export const createFlowAndConnectorsSlice: CreateSlice<FlowAndConnectorsSlice> = (set, get) => ({
   // FLOW
-  loaded: false,
+  flowLoaded: false,
   flowOperationRunning: null,
   flow: emptyFlow,
   loadFlow: async (id: Id) => {
@@ -68,7 +68,7 @@ export const createFlowAndConnectorsSlice: CreateSlice<FlowAndConnectorsSlice> =
 
     assertNotNullOrUndefined(flow, 'flow')
 
-    set({ flow, loaded: true })
+    set({ flow, flowLoaded: true })
     return flow
   },
   setFlow: (flow: FlowPopulated) => {
diff --git a/apps/web/modules/editor/store/types.ts b/apps/web/modules/editor/store/types.ts
index a6e77a14..10f62c35 100644
--- a/apps/web/modules/editor/store/types.ts
+++ b/apps/web/modules/editor/store/types.ts
@@ -59,6 +59,7 @@ export interface EditorSlice {
   setLeftDrawer: (name: EditorDrawer['name']) => void
   showLeftDrawer: boolean
   setShowLeftDrawer: Dispatch<SetStateAction<boolean>>
+  clearEditorState: () => void
 }
 
 export enum FlowOperationRunnType {
@@ -68,7 +69,7 @@ export enum FlowOperationRunnType {
 
 export interface FlowAndConnectorsSlice {
   // FLOW
-  loaded: boolean
+  flowLoaded: boolean
   flowOperationRunning: null | FlowOperationRunnType
   flow: FlowPopulated
   loadFlow: (id: Id) => Promise<FlowPopulated | null>