From fba2f27638d5aac92f3e39552959b8390fcd7c63 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 15 Jan 2021 14:23:27 +0000
Subject: [PATCH] Update and improve state <-> URL binding

---
 .../src/builderStore/store/frontend.js        |  22 +--
 .../AppPreview/ComponentSelectionList.svelte  |   6 +-
 .../ComponentDropdownMenu.svelte              |   3 -
 .../ComponentTree.svelte                      |   2 -
 .../ComponentNavigationTree/PathTree.svelte   |   2 -
 .../FrontendNavigatePane.svelte               |   2 +-
 .../design/NavigationPanel/Layout.svelte      |   1 -
 .../NavigationPanel/NewLayoutModal.svelte     |   3 +-
 .../NavigationPanel/NewScreenModal.svelte     |   4 +-
 .../PropertyControls/TableViewSelect.svelte   |   1 -
 .../design/[assetType]/[asset]/_layout.svelte | 132 +++++++++++-------
 .../design/[assetType]/_layout.svelte         |  16 +--
 .../design/[assetType]/index.svelte           |  62 ++++----
 13 files changed, 121 insertions(+), 135 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 4f9f343469..0bb1f59c5d 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -13,12 +13,7 @@ import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
 import { FrontendTypes } from "constants"
 import analytics from "analytics"
-import {
-  findComponentType,
-  findComponentParent,
-  findComponentPath,
-  findComponent,
-} from "../storeUtils"
+import { findComponentType, findComponentParent } from "../storeUtils"
 import { uuid } from "../uuid"
 
 const INITIAL_FRONTEND_STATE = {
@@ -487,21 +482,6 @@ export const getFrontendStore = () => {
         })
         store.actions.preview.saveSelected()
       },
-      findRoute: component => {
-        const selectedAsset = get(currentAsset)
-        if (!component || !selectedAsset) {
-          return "/"
-        }
-
-        // Get the path to this component
-        const path = findComponentPath(selectedAsset.props, component._id) || []
-
-        // Remove root entry since it's the screen or layout
-        return path
-          .slice(1)
-          .map(component => component._id)
-          .join("/")
-      },
       links: {
         save: async (url, title) => {
           const layout = get(mainLayout)
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 7e6e1a4631..7ec58fc2c3 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -46,11 +46,7 @@
       popover.show()
     } else {
       // Add this component
-      const newComponent = store.actions.components.create(item.component)
-      if (newComponent) {
-        const path = store.actions.components.findRoute(newComponent)
-        $goto(`./${$currentAssetId}/${path}`)
-      }
+      store.actions.components.create(item.component)
       popover.hide()
     }
   }
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
index 5ab3898c8d..a027beab18 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { goto } from "@sveltech/routify"
   import { get } from "svelte/store"
   import { store, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -27,8 +26,6 @@
 
   const selectComponent = component => {
     store.actions.components.select(component)
-    const path = store.actions.components.findRoute(component)
-    $goto(`./${$store.currentFrontEndType}/${path}`)
   }
 
   const moveUpComponent = () => {
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
index 1fd3f423d3..f99d90d2e7 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
@@ -15,8 +15,6 @@
 
   const selectComponent = component => {
     store.actions.components.select(component)
-    const path = store.actions.components.findRoute(component)
-    $goto(`./${$currentAssetId}/${path}`)
   }
 
   const dragstart = component => e => {
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
index 1b69ee770e..c9e9d27958 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -24,9 +24,7 @@
   $: selectedScreen = $currentAsset
 
   const changeScreen = screenId => {
-    // select the route
     store.actions.screens.select(screenId)
-    $goto(`./${screenId}`)
   }
 </script>
 
diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index db5e3e941b..147f32bb3e 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -28,7 +28,7 @@
 
   let modal
   let routes = {}
-  let tab = $params.assetType
+  $: tab = $params.assetType
 
   const navigate = ({ detail }) => {
     if (!detail) {
diff --git a/packages/builder/src/components/design/NavigationPanel/Layout.svelte b/packages/builder/src/components/design/NavigationPanel/Layout.svelte
index 77bab330c5..bab9cf56b6 100644
--- a/packages/builder/src/components/design/NavigationPanel/Layout.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/Layout.svelte
@@ -19,7 +19,6 @@
 
   const selectLayout = () => {
     store.actions.layouts.select(layout._id)
-    $goto(`./${layout._id}`)
   }
 </script>
 
diff --git a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
index 1781c6a2d3..7920f9bbf5 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
@@ -8,8 +8,7 @@
 
   async function save() {
     try {
-      const layout = await store.actions.layouts.save({ name })
-      $goto(`./${layout._id}`)
+      await store.actions.layouts.save({ name })
       notifier.success(`Layout ${name} created successfully`)
     } catch (err) {
       notifier.danger(`Error creating layout ${name}.`)
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index db9181b1bd..c33d12c1a1 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -63,7 +63,7 @@
     draftScreen.props._component = baseComponent
     draftScreen.routing = { route, roleId }
 
-    const createdScreen = await store.actions.screens.create(draftScreen)
+    await store.actions.screens.create(draftScreen)
     if (createLink) {
       await store.actions.components.links.save(route, name)
     }
@@ -75,8 +75,6 @@
         template: template.id || template.name,
       })
     }
-
-    $goto(`./${createdScreen._id}`)
   }
 
   const routeExists = (route, roleId) => {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte
index f66333e4c0..f815cac786 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte
@@ -35,7 +35,6 @@
     $currentAsset.props,
     $store.selectedComponentId
   )
-  $: console.log(bindableProperties)
 
   $: links = bindableProperties
     .filter(x => x.fieldSchema?.type === "link")
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte
index eb266293d9..baa253ce9f 100644
--- a/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte
@@ -1,64 +1,92 @@
 <script>
+  import { onMount } from "svelte"
+  import { get } from "svelte/store"
   import { params, leftover, goto } from "@sveltech/routify"
   import { FrontendTypes } from "constants"
-  import { store, allScreens } from "builderStore"
+  import { store, allScreens, currentAsset } from "builderStore"
+  import { findComponent, findComponentPath } from "builderStore/storeUtils"
 
-  // Get any leftover params not caught by Routifys params store.
-  const componentIds = $leftover.split("/").filter(id => id !== "")
+  let initialised = false
 
-  const currentAssetId = decodeURI($params.asset)
+  // Hydrate state from query param on mount
+  onMount(() => {
+    const assetId = decodeURI($params.asset)
+    let assetList
+    let actions
 
-  let assetList
-  let actions
+    // Determine screens or layouts based on the URL
+    if ($params.assetType === FrontendTypes.SCREEN) {
+      assetList = $allScreens
+      actions = store.actions.screens
+    } else {
+      assetList = $store.layouts
+      actions = store.actions.layouts
+    }
 
-  // Determine screens or layouts based on the URL
-  if ($params.assetType === FrontendTypes.SCREEN) {
-    assetList = $allScreens
-    actions = store.actions.screens
-  } else {
-    assetList = $store.layouts
-    actions = store.actions.layouts
+    // Find and select the current asset
+    const asset = assetList.find(asset => asset._id === assetId)
+    if (asset) {
+      actions.select(assetId)
+
+      // Select the component ID if one is present in the URL
+      const selectedComponentId = $leftover.split("/").pop()
+      if (selectedComponentId) {
+        const component = findComponent(asset.props, selectedComponentId)
+        if (component) {
+          store.actions.components.select(component)
+        }
+      }
+    }
+
+    initialised = true
+  })
+
+  // Updates the route params in the URL to the specified values
+  const updateParams = (assetType, asset, componentId) => {
+    // Wait until the initial state rehydration to avoid a wasted update
+    if (!initialised) {
+      return
+    }
+
+    // Extract current URL params
+    const currentParams = get(params)
+    const currentLeftover = get(leftover)
+    const paramAssetType = currentParams.assetType
+    const paramAssetId = currentParams.asset
+    const paramComponentId = currentLeftover.split("/").pop()
+
+    // Only update params if the params actually changed
+    if (
+      assetType !== paramAssetType ||
+      asset?._id !== paramAssetId ||
+      componentId !== paramComponentId
+    ) {
+      // Build and navigate to a valid URL
+      let url = "../../"
+      if ([FrontendTypes.SCREEN, FrontendTypes.LAYOUT].includes(assetType)) {
+        url += `${assetType}`
+        if (asset?._id) {
+          url += `/${asset._id}`
+          if (componentId) {
+            const componentPath = findComponentPath(asset.props, componentId)
+            const componentURL = componentPath
+              .slice(1)
+              .map(comp => comp._id)
+              .join("/")
+            url += `/${componentURL}`
+          }
+        }
+      }
+      $goto(url)
+    }
   }
 
-  // select the screen or layout in the UI
-  actions.select(currentAssetId)
-
-  // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
-  if ($leftover) {
-    // Get the correct screen children.
-    const assetChildren =
-      assetList.find(
-        asset =>
-          asset._id === $params.asset ||
-          asset._id === decodeURIComponent($params.asset)
-      )?.props._children ?? []
-    findComponent(componentIds, assetChildren)
-  }
-  // }
-
-  // Find Component with ID and continue
-  function findComponent(ids, children) {
-    // Setup stuff
-    let componentToSelect
-    let currentChildren = children
-
-    // Loop through each ID
-    ids.forEach(id => {
-      // Find ID
-      const component = currentChildren.find(child => child._id === id)
-
-      // If it does not exist, ignore (use last valid route)
-      if (!component) return
-
-      componentToSelect = component
-
-      // Update childrens array to selected components children
-      currentChildren = componentToSelect._children
-    })
-
-    // Select Component!
-    if (componentToSelect) store.actions.components.select(componentToSelect)
-  }
+  // Automatically keep URL up to date with state
+  $: updateParams(
+    $store.currentFrontEndType,
+    $currentAsset,
+    $store.selectedComponentId
+  )
 </script>
 
 <slot />
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
index 19cf59cebd..f3bd8499f5 100644
--- a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
@@ -11,25 +11,11 @@
   import ComponentSelectionList from "components/design/AppPreview/ComponentSelectionList.svelte"
   import FrontendNavigatePane from "components/design/NavigationPanel/FrontendNavigatePane.svelte"
 
-  $: instance = $store.appInstance
-
-  async function selectDatabase(database) {
-    backendUiStore.actions.database.select(database)
-  }
-
   onMount(async () => {
     if ($store.appInstance && !$backendUiStore.database) {
-      await selectDatabase($store.appInstance)
+      backendUiStore.actions.database.select($store.appInstance)
     }
   })
-
-  let confirmDeleteDialog
-  let componentToDelete = ""
-
-  let settingsView
-  const settings = () => {
-    settingsView.show()
-  }
 </script>
 
 <!-- routify:options index=1 -->
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/index.svelte b/packages/builder/src/pages/[application]/design/[assetType]/index.svelte
index 30545212a9..de74eef1ac 100644
--- a/packages/builder/src/pages/[application]/design/[assetType]/index.svelte
+++ b/packages/builder/src/pages/[application]/design/[assetType]/index.svelte
@@ -1,37 +1,45 @@
 <script>
+  import { onMount } from "svelte"
+  import { goto } from "@sveltech/routify"
   import { store, allScreens } from "builderStore"
   import { FrontendTypes } from "constants"
-  import { goto, params } from "@sveltech/routify"
+  import { params } from "@sveltech/routify"
 
-  // Go to first layout
-  if ($params.assetType === FrontendTypes.LAYOUT) {
-    // Try to use previously selected layout first
+  onMount(() => {
     let id
-    if (
-      $store.selectedLayoutId &&
-      $store.layouts.find(layout => layout._id === $store.selectedLayoutId)
-    ) {
-      id = $store.selectedLayoutId
-    } else {
-      id = $store.layouts[0]?._id
-    }
-    $goto(`../${id}`)
-  }
 
-  // Go to first screen
-  if ($params.assetType === FrontendTypes.SCREEN) {
-    // Try to use previously selected layout first
-    let id
-    if (
-      $store.selectedScreenId &&
-      $allScreens.find(screen => screen._id === $store.selectedScreenId)
-    ) {
-      id = $store.selectedScreenId
-    } else {
-      id = $allScreens[0]?._id
+    // Get valid asset type
+    let assetType = $params.assetType
+    if (![FrontendTypes.LAYOUT, FrontendTypes.SCREEN].includes(assetType)) {
+      assetType = FrontendTypes.SCREEN
     }
-    $goto(`../${id}`)
-  }
+
+    // Get ID or first correct asset type
+    if (assetType === FrontendTypes.LAYOUT) {
+      if (
+        $store.selectedLayoutId &&
+        $store.layouts.find(layout => layout._id === $store.selectedLayoutId)
+      ) {
+        id = $store.selectedLayoutId
+      } else {
+        id = $store.layouts[0]?._id
+      }
+    } else if (assetType === FrontendTypes.SCREEN) {
+      if (
+        $store.selectedScreenId &&
+        $allScreens.find(screen => screen._id === $store.selectedScreenId)
+      ) {
+        id = $store.selectedScreenId
+      } else {
+        id = $allScreens[0]?._id
+      }
+    }
+
+    // Send correct URL which will then update state
+    if (id) {
+      $goto(`../../${assetType}/${id}`)
+    }
+  })
 </script>
 
 <!-- routify:options index=false -->