Bugfixes: navbar and realtime provisioning status

packages/pockethost.io/src/components/MediaQuery.svelte

@@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
   // Documentation Source
   // https://svelte.dev/repl/26eb44932920421da01e2e21539494cd?version=3.51.0
 
   import { onMount } from 'svelte'
 
-  export let query
+  export let query = ''
 
-  let mql
-  let mqlListener
+  let mql: MediaQueryList | undefined = undefined
+  let mqlListener: (e: MediaQueryListEvent) => void
   let wasMounted = false
   let matches = false
 
@@ -25,7 +25,7 @@
     }
   }
 
-  function addNewListener(query) {
+  function addNewListener(query: string) {
     mql = window.matchMedia(query)
     mqlListener = (v) => (matches = v.matches)
     mql.addListener(mqlListener)

packages/pockethost.io/src/components/Navbar.svelte

@@ -1,15 +1,29 @@
 <script lang="ts">
-  import { client } from '$src/pocketbase'
   import MediaQuery from '$components/MediaQuery.svelte'
   import ThemeToggle from '$components/ThemeToggle.svelte'
+  import { client } from '$src/pocketbase'
+  import { createCleanupManagerSync } from '$util/CleanupManager'
+  import { onDestroy, onMount } from 'svelte'
+  const { isLoggedIn, logOut, onAuthChange } = client
 
-  const { isLoggedIn, logOut } = client
+  const cm = createCleanupManagerSync()
+
+  let _isLoggedIn = isLoggedIn()
+  onMount(() => {
+    _isLoggedIn = isLoggedIn()
+    const unsub = onAuthChange(() => {
+      _isLoggedIn = isLoggedIn()
+    })
+    cm.add(unsub)
+  })
+
+  onDestroy(cm.cleanupAll)
 
   const handleLogout = (e: Event) => {
     e.preventDefault()
     logOut()
     // Hard refresh to make sure any remaining data is cleared
-    window.location = '/'
+    window.location.href = '/'
   }
 </script>
 
@@ -34,7 +48,7 @@
 
     <div class="collapse navbar-collapse" id="nav-links">
       <ul class="navbar-nav ms-auto mb-2 mb-md-0">
-        {#if isLoggedIn()}
+        {#if _isLoggedIn}
           <li class="nav-item text-md-start text-center">
             <a class="nav-link" href="/dashboard">Dashboard</a>
           </li>
@@ -67,7 +81,7 @@
           </MediaQuery>
         {/if}
 
-        {#if !isLoggedIn()}
+        {#if !_isLoggedIn}
           <li class="nav-item">
             <a class="nav-link text-md-start text-center" href="/signup">Sign up</a>
           </li>

packages/pockethost.io/src/pocketbase/PocketbaseClient.ts

@@ -4,18 +4,21 @@ import { keys, map } from '@s-libs/micro-dash'
 import PocketBase, { BaseAuthStore, ClientResponseError, Record } from 'pocketbase'
 import type { Unsubscriber } from 'svelte/store'
 
+export type AuthChangeHandler = (user: BaseAuthStore) => void
+
 export const createPocketbaseClient = (url: string) => {
   const client = new PocketBase(url)
 
   const { authStore } = client
 
-  const { onChange } = authStore
-
   const user = () => authStore.model
 
   const isLoggedIn = () => authStore.isValid
 
-  const onAuthChange = (cb: (user: BaseAuthStore) => Unsubscriber) => onChange(() => cb(authStore))
+  const onAuthChange = (cb: AuthChangeHandler): Unsubscriber =>
+    authStore.onChange(() => {
+      cb(authStore)
+    })
 
   const logOut = () => authStore.clear()
 

packages/pockethost.io/src/routes/dashboard/+page.svelte

@@ -4,10 +4,11 @@
   import RetroBoxContainer from '$components/RetroBoxContainer.svelte'
   import { PUBLIC_PB_DOMAIN } from '$src/env'
   import { client } from '$src/pocketbase'
+  import { createCleanupManagerSync } from '$util/CleanupManager'
   import type { Instance_Out_ByIdCollection } from '@pockethost/common/src/schema'
   import { forEach, values } from '@s-libs/micro-dash'
   import { onDestroy, onMount } from 'svelte'
-  import type { Unsubscriber } from 'svelte/store'
+  import { fade } from 'svelte/transition'
 
   // Wait for the instance call to complete before rendering the UI
   let hasPageLoaded = false
@@ -18,8 +19,7 @@
   // This will update when the `apps` value changes
   $: isFirstApplication = values(apps).length === 0
 
-  let unsubs: Unsubscriber[] = []
-
+  const cm = createCleanupManagerSync()
   let _touch = 0 // This is a fake var because without it the watcher callback will not update UI when the apps object changes
   const _update = (_apps: Instance_Out_ByIdCollection) => {
     apps = _apps
@@ -37,7 +37,7 @@
             console.log(`got a record`, r)
             _update({ ...apps, [r.id]: r })
           })
-          unsubs.push(unsub)
+          cm.add(unsub)
         })
       })
       .catch((e) => {
@@ -48,9 +48,7 @@
       })
   })
 
-  onDestroy(() => {
-    unsubs.forEach((u) => u())
-  })
+  onDestroy(cm.cleanupAll)
 </script>
 
 <Protected>

packages/pockethost.io/src/util/CleanupManager.ts

@@ -0,0 +1,42 @@
+import { forEach, reduce } from '@s-libs/micro-dash'
+
+export type CleanupFuncSync = () => void
+export const createCleanupManagerSync = () => {
+  let i = 0
+  const cleanups: any = {}
+  const add = (cb: CleanupFuncSync) => {
+    const idx = i++
+    const cleanup = () => {
+      cb()
+      delete cleanups[idx]
+    }
+    cleanups[idx] = cleanup
+    return cleanup
+  }
+
+  const cleanupAll = () => {
+    forEach(cleanups, (c) => c())
+  }
+
+  return { add, cleanupAll }
+}
+
+export type CleanupFuncAsync = () => Promise<any>
+export const createCleanupManagerAsync = () => {
+  let i = 0
+  const cleanups: any = {}
+  const add = (cb: CleanupFuncAsync) => {
+    const idx = i++
+    const cleanup = async () => {
+      await cb()
+      delete cleanups[idx]
+    }
+    cleanups[idx] = cleanup
+    return cleanup
+  }
+
+  const cleanupAll = () =>
+    reduce(cleanups, (c, v) => c.then(v()), Promise.resolve())
+
+  return { add, cleanupAll }
+}