From 071dc5be4baca548cf5f213b9b67ce7273b9861d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 5 May 2022 09:28:33 +0100
Subject: [PATCH] Update many usages of goto to redirect to improve routing
 history and fix many blocking navigation cycles

---
 packages/builder/src/helpers/urlStateSync.js                 | 2 +-
 .../src/pages/builder/app/[application]/_fallback.svelte     | 4 ++--
 .../src/pages/builder/app/[application]/_layout.svelte       | 5 +----
 .../pages/builder/app/[application]/automate/index.svelte    | 4 ++--
 .../src/pages/builder/app/[application]/data/_layout.svelte  | 4 ++--
 .../datasource/[selectedDatasource]/[query]/_layout.svelte   | 4 ++--
 .../datasource/[selectedDatasource]/[query]/index.svelte     | 4 ++--
 .../builder/app/[application]/data/datasource/index.svelte   | 4 ++--
 .../src/pages/builder/app/[application]/data/index.svelte    | 4 ++--
 .../[selectedTable]/relationship/[selectedRow]/index.svelte  | 4 ++--
 .../data/table/[selectedTable]/relationship/index.svelte     | 4 ++--
 .../builder/app/[application]/data/table/_layout.svelte      | 4 ++--
 .../pages/builder/app/[application]/data/table/index.svelte  | 4 ++--
 .../app/[application]/design/[screenId]/_layout.svelte       | 5 ++++-
 .../[screenId]/components/[componentId]/_layout.svelte       | 5 ++++-
 .../builder/src/pages/builder/app/[application]/index.svelte | 4 ++--
 packages/builder/src/pages/builder/app/index.svelte          | 4 ++--
 17 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js
index f6357ae5d9..616bb9b7f1 100644
--- a/packages/builder/src/helpers/urlStateSync.js
+++ b/packages/builder/src/helpers/urlStateSync.js
@@ -36,7 +36,7 @@ export const syncURLToState = options => {
   let cachedRedirect = get(routify.redirect)
   let cachedPage = get(routify.page)
   let previousParamsHash = null
-  let debug = false
+  let debug = true
   const log = (...params) => debug && console.log(...params)
 
   // Navigate to a certain URL
diff --git a/packages/builder/src/pages/builder/app/[application]/_fallback.svelte b/packages/builder/src/pages/builder/app/[application]/_fallback.svelte
index 24c5c56780..c5b3b3803d 100644
--- a/packages/builder/src/pages/builder/app/[application]/_fallback.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_fallback.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
 
-  $goto("../design")
+  $redirect("../design")
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index cf27add084..03bb545780 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -27,6 +27,7 @@
 
   async function getPackage() {
     try {
+      store.actions.reset()
       const pkg = await API.fetchAppPackage(application)
       await store.actions.initialise(pkg)
       await automationStore.actions.fetch()
@@ -65,10 +66,6 @@
       hasSynced = true
     }
   })
-
-  onDestroy(() => {
-    store.actions.reset()
-  })
 </script>
 
 {#await promise}
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/index.svelte b/packages/builder/src/pages/builder/app/[application]/automate/index.svelte
index e5dea10e0b..b861e82dd1 100644
--- a/packages/builder/src/pages/builder/app/[application]/automate/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto, leftover } from "@roxi/routify"
+  import { redirect, leftover } from "@roxi/routify"
   import { onMount } from "svelte"
   import { automationStore } from "builderStore"
 
@@ -11,7 +11,7 @@
       (!$automationStore.selectedAutomation ||
         !$automationStore.selectedAutomation?.automation?._id)
     ) {
-      $goto(`./${$automationStore.automations[0]._id}`)
+      $redirect(`./${$automationStore.automations[0]._id}`)
     }
   })
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
index f5f5c9d977..87c648bd4f 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto, params } from "@roxi/routify"
+  import { redirect, params } from "@roxi/routify"
   import { Icon, Tabs, Tab } from "@budibase/bbui"
   import { BUDIBASE_INTERNAL_DB } from "constants"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
@@ -14,7 +14,7 @@
     $params.selectedDatasource !== BUDIBASE_INTERNAL_DB
 
   function selectFirstDatasource() {
-    $goto("./table")
+    $redirect("./table")
   }
 </script>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
index 403e12a78c..3536a78be7 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
@@ -2,7 +2,7 @@
   import { params } from "@roxi/routify"
   import { queries, datasources } from "stores/backend"
   import { IntegrationTypes } from "constants/backend"
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
 
   let datasourceId
   if ($params.query) {
@@ -16,7 +16,7 @@
     ds => ds._id === $datasources.selected || ds._id === datasourceId
   )
   if (datasource?.source === IntegrationTypes.REST) {
-    $goto(`../rest/${$params.query}`)
+    $redirect(`../rest/${$params.query}`)
   }
 </script>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
index 61e2ae5f19..a6bd10147d 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { params, goto } from "@roxi/routify"
+  import { params, redirect } from "@roxi/routify"
   import { database, datasources, queries } from "stores/backend"
   import QueryInterface from "components/integration/QueryViewer.svelte"
   import { IntegrationTypes } from "constants/backend"
@@ -18,7 +18,7 @@
   )
   $: {
     if (datasource?.source === IntegrationTypes.REST) {
-      $goto(`../rest/${$params.query}`)
+      $redirect(`../rest/${$params.query}`)
     }
   }
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
index ffaaf5dad5..b59286b62a 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
@@ -1,11 +1,11 @@
 <script>
   import { datasources } from "stores/backend"
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
   import { onMount } from "svelte"
 
   onMount(async () => {
     // navigate to first table in list, if not already selected
-    $datasources.list.length > 0 && $goto(`./${$datasources.list[0]._id}`)
+    $datasources.list.length > 0 && $redirect(`./${$datasources.list[0]._id}`)
   })
 </script>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/index.svelte
index 70c3d4481a..42ee02a308 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
   import { onMount } from "svelte"
   import { admin } from "stores/portal"
   import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@@ -14,7 +14,7 @@
     if (!setupComplete && !$admin.isDev) {
       modal.show()
     } else {
-      $goto("./table")
+      $redirect("./table")
     }
   })
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/[selectedRow]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/[selectedRow]/index.svelte
index 8e195ddb12..1db607ccc1 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/[selectedRow]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/[selectedRow]/index.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { goto } from "@roxi/routify"
-  $goto("../../")
+  import { redirect } from "@roxi/routify"
+  $redirect("../../")
 </script>
 
 <!-- routify:options index=false -->
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/index.svelte
index 7d081b6976..f0baf88ffe 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/relationship/index.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { goto } from "@roxi/routify"
-  $goto("../")
+  import { redirect } from "@roxi/routify"
+  $redirect("../")
 </script>
 
 <!-- routify:options index=false -->
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/_layout.svelte
index 9ab874a4d0..5d0e12185a 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { tables } from "stores/backend"
-  import { goto, leftover } from "@roxi/routify"
+  import { redirect, leftover } from "@roxi/routify"
   import { onMount } from "svelte"
 
   onMount(async () => {
@@ -11,7 +11,7 @@
       $tables.list.length > 0 &&
       (!$tables.selected || !$tables.selected._id)
     ) {
-      $goto(`./${$tables.list[0]._id}`)
+      $redirect(`./${$tables.list[0]._id}`)
     }
   })
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/index.svelte
index 6d61614145..2bafb50a71 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/index.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
   import { onMount } from "svelte"
   import { tables } from "stores/backend"
 
   onMount(async () => {
-    $tables.list.length > 0 && $goto(`./${$tables.list[0]._id}`)
+    $tables.list.length > 0 && $redirect(`./${$tables.list[0]._id}`)
   })
 </script>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 79e4fecf52..7de0c5d093 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -17,7 +17,10 @@
     routify,
   })
 
-  onDestroy(stopSyncing)
+  onDestroy(() => {
+    console.log("============= stop syncing screen ID!")
+    stopSyncing()
+  })
 </script>
 
 <div class="design">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
index 5b51d755af..b773cbe6ee 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
@@ -15,7 +15,10 @@
     routify,
   })
 
-  onDestroy(stopSyncing)
+  onDestroy(() => {
+    console.log("============= stop syncing component ID!")
+    stopSyncing()
+  })
 </script>
 
 <slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/index.svelte b/packages/builder/src/pages/builder/app/[application]/index.svelte
index 31486e771e..efcb3d1f44 100644
--- a/packages/builder/src/pages/builder/app/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/index.svelte
@@ -1,4 +1,4 @@
 <script>
-  import { goto } from "@roxi/routify"
-  $goto("./design")
+  import { redirect } from "@roxi/routify"
+  $redirect("./design")
 </script>
diff --git a/packages/builder/src/pages/builder/app/index.svelte b/packages/builder/src/pages/builder/app/index.svelte
index 110b5e83d9..05a71911d2 100644
--- a/packages/builder/src/pages/builder/app/index.svelte
+++ b/packages/builder/src/pages/builder/app/index.svelte
@@ -1,4 +1,4 @@
 <script>
-  import { goto } from "@roxi/routify"
-  $goto("../portal")
+  import { redirect } from "@roxi/routify"
+  $redirect("../portal")
 </script>