Canvas reset should reset remix route (#4203)

* Canvas reset should reset remix route * fix(remix) Only update navigationData on completed navigation and clear on canvas reset --------- Co-authored-by: RheeseyB <[email protected]>
concrete-utopia · Sep 19, 2023 · 1c669ac · 1c669ac
1 parent 27ca7ea
commit 1c669ac
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/editor/src/components/canvas/remix/remix-hooks.tsx b/editor/src/components/canvas/remix/remix-hooks.tsx
@@ -0,0 +1,14 @@
+import { useAtom } from 'jotai'
+import React from 'react'
+import { RemixNavigationAtom } from './utopia-remix-root-component'
+import { AlwaysFalse, usePubSubAtomReadOnly } from '../../../core/shared/atom-with-pub-sub'
+import { UiJsxCanvasCtxAtom } from '../ui-jsx-canvas'
+
+export function useResetRemixApps() {
+  const [_, setNavigationData] = useAtom(RemixNavigationAtom)
+  let uiJsxCanvasContext = usePubSubAtomReadOnly(UiJsxCanvasCtxAtom, AlwaysFalse)
+  return React.useCallback(() => {
+    setNavigationData({})
+    uiJsxCanvasContext.current.spyValues.metadata = {}
+  }, [setNavigationData, uiJsxCanvasContext])
+}
diff --git a/editor/src/components/canvas/remix/utopia-remix-root-component.tsx b/editor/src/components/canvas/remix/utopia-remix-root-component.tsx
@@ -246,7 +246,13 @@ export const UtopiaRemixRootComponent = React.memo((props: UtopiaRemixRootCompon
   // apply changes navigation data
   React.useLayoutEffect(() => {
     if (router != null) {
-      return router?.subscribe((newState) => updateNavigationData(router, newState.location))
+      return router?.subscribe((newState) => {
+        if (newState.navigation.location == null) {
+          // newState.navigation.location will hold an intended navigation, so when it is null
+          // that will have completed
+          updateNavigationData(router, newState.location)
+        }
+      })
     }
     return
   }, [router, updateNavigationData])

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
@@ -66,6 +66,7 @@ import { stopPropagation } from '../inspector/common/inspector-utils'
 import { useConvertTo } from './convert-callbacks'
 import { useWrapInDiv } from './wrap-in-callbacks'
 import { ElementsOutsideVisibleAreaIndicator } from './elements-outside-visible-area-indicator'
+import { useResetRemixApps } from '../canvas/remix/remix-hooks'
 import { RemixNavigationBar } from './remix-navigation-bar'
 import {
   fragmentComponentInfo,
@@ -370,9 +371,12 @@ export const CanvasToolbar = React.memo(() => {
     }
   }, [dispatch, isLiveMode])
 
+  const resetRemixApps = useResetRemixApps()
+
   const resetCanvasCallback = React.useCallback(() => {
+    resetRemixApps()
     dispatch([resetCanvas()])
-  }, [dispatch])
+  }, [dispatch, resetRemixApps])
 
   const inspectorInvisible = useEditorState(
     Substores.restOfEditor,