From 84e1f54fa05d1272bf075ebdbfd08a69cca1ee95 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 11 Dec 2020 14:24:19 +0000
Subject: [PATCH] Improve navigation when logging in and out, remove need to
 hard reload the page and replace with smooth transitions

---
 .../client/src/components/ClientApp.svelte     |  6 ++----
 packages/client/src/components/Router.svelte   | 16 ++++++++++++----
 packages/client/src/store/auth.js              | 18 +++++++++++++++---
 packages/client/src/store/index.js             |  6 ++++++
 packages/client/src/store/initialise.js        |  7 +++++++
 packages/client/src/store/routes.js            |  2 ++
 .../standard-components/src/Navigation.svelte  |  4 ++--
 7 files changed, 46 insertions(+), 13 deletions(-)
 create mode 100644 packages/client/src/store/initialise.js

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 75061ac327..a7a972a435 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -3,7 +3,7 @@
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
   import SDK from "../sdk"
-  import { createDataStore, routeStore, screenStore } from "../store"
+  import { createDataStore, initialise, screenStore } from "../store"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -14,13 +14,11 @@
 
   // Load app config
   onMount(async () => {
-    await routeStore.actions.fetchRoutes()
-    await screenStore.actions.fetchScreens()
+    await initialise()
     loaded = true
   })
 </script>
 
 {#if loaded && $screenStore.activeLayout}
-  <!-- // TODO: need to get the active screen as well -->
   <Component definition={$screenStore.activeLayout.props} />
 {/if}
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index 5684b189eb..3c2d71c422 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -7,7 +7,15 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  $: routerConfig = getRouterConfig($routeStore.routes)
+  // Only wrap this as an array to take advantage of svelte keying,
+  // to ensure the svelte-spa-router is fully remounted when route config
+  // changes
+  $: configs = [
+    {
+      routes: getRouterConfig($routeStore.routes),
+      id: $routeStore.routeSessionId,
+    },
+  ]
 
   const getRouterConfig = routes => {
     let config = {}
@@ -25,11 +33,11 @@
   }
 </script>
 
-{#if routerConfig}
+{#each configs as config (config.id)}
   <div use:styleable={$component.styles}>
-    <Router on:routeLoading={onRouteLoading} routes={routerConfig} />
+    <Router on:routeLoading={onRouteLoading} routes={config.routes} />
   </div>
-{/if}
+{/each}
 
 <style>
   div {
diff --git a/packages/client/src/store/auth.js b/packages/client/src/store/auth.js
index d641113b4a..a08510ac31 100644
--- a/packages/client/src/store/auth.js
+++ b/packages/client/src/store/auth.js
@@ -1,18 +1,29 @@
 import * as API from "../api"
 import { getAppId } from "../utils/getAppId"
 import { writable } from "svelte/store"
+import { initialise } from "./initialise"
+import { routeStore } from "./routes"
 
 const createAuthStore = () => {
   const store = writable("")
 
+  const goToDefaultRoute = () => {
+    // Setting the active route forces an update of the active screen ID,
+    // even if we're on the same URL
+    routeStore.actions.setActiveRoute("/")
+
+    // Navigating updates the URL to reflect this route
+    routeStore.actions.navigate("/")
+  }
   const logIn = async ({ email, password }) => {
     const user = await API.logIn({ email, password })
     if (!user.error) {
       store.set(user.token)
-      location.reload()
+      await initialise()
+      goToDefaultRoute()
     }
   }
-  const logOut = () => {
+  const logOut = async () => {
     store.set("")
     const appId = getAppId()
     if (appId) {
@@ -20,7 +31,8 @@ const createAuthStore = () => {
         window.document.cookie = `budibase:${appId}:${environment}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
       }
     }
-    location.reload()
+    await initialise()
+    goToDefaultRoute()
   }
 
   return {
diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js
index 58e51b6fc1..a99a638d4b 100644
--- a/packages/client/src/store/index.js
+++ b/packages/client/src/store/index.js
@@ -1,3 +1,6 @@
+import { routeStore } from "./routes"
+import { screenStore } from "./screens"
+
 export { authStore } from "./auth"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"
@@ -6,3 +9,6 @@ export { bindingStore } from "./binding"
 
 // Data stores are layered and duplicated, so it is not a singleton
 export { createDataStore, dataStore } from "./data"
+
+// Initialises an app by loading screens and routes
+export { initialise } from "./initialise"
diff --git a/packages/client/src/store/initialise.js b/packages/client/src/store/initialise.js
new file mode 100644
index 0000000000..9e24439980
--- /dev/null
+++ b/packages/client/src/store/initialise.js
@@ -0,0 +1,7 @@
+import { routeStore } from "./routes"
+import { screenStore } from "./screens"
+
+export async function initialise() {
+  await routeStore.actions.fetchRoutes()
+  await screenStore.actions.fetchScreens()
+}
diff --git a/packages/client/src/store/routes.js b/packages/client/src/store/routes.js
index 88ca90df73..aa86718ec0 100644
--- a/packages/client/src/store/routes.js
+++ b/packages/client/src/store/routes.js
@@ -7,6 +7,7 @@ const createRouteStore = () => {
     routes: [],
     routeParams: {},
     activeRoute: null,
+    routeSessionId: Math.random(),
   }
   const store = writable(initialState)
 
@@ -29,6 +30,7 @@ const createRouteStore = () => {
 
     store.update(state => {
       state.routes = routes
+      state.routeSessionId = Math.random()
       return state
     })
   }
diff --git a/packages/standard-components/src/Navigation.svelte b/packages/standard-components/src/Navigation.svelte
index f6ca522225..4a4ec8dccc 100644
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@@ -6,8 +6,8 @@
 
   export let logoUrl
 
-  const logOut = () => {
-    authStore.actions.logOut()
+  const logOut = async () => {
+    await authStore.actions.logOut()
   }
 </script>