Update many usages of goto to redirect to improve routing history and fix many blocking navigation cycles

2024-06-02 18:44:54 +12:00 · 2022-05-05 09:28:33 +01:00 · 2022-05-05 09:28:33 +01:00 · 071dc5be4b
parent c18f66452c
commit 071dc5be4b
17 changed files with 36 additions and 33 deletions
--- 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
--- 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>
--- 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}
--- 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>
--- 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>

--- 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>

--- 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>
--- 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>

--- 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>
--- 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 -->
--- 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 -->
--- 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>
--- 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>

--- 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">
--- 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 />
--- 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>
--- 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>