feat(editor): clean editor when new flow is created

anteqkois · May 23, 2024 · 631fc73 · 631fc73
1 parent b544686
commit 631fc73
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/apps/web/app/app/flows/editor/[[...id]]/page.tsx b/apps/web/app/app/flows/editor/[[...id]]/page.tsx
@@ -114,14 +114,17 @@ 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()
   const { push } = useRouter()
 
   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
@@ -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
@@ -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
@@ -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
@@ -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>