fix: incorrect instance information displaying on dashboard details

packages/pockethost.io/src/routes/app/instances/[instanceId]/+layout.svelte

@@ -10,6 +10,7 @@
   const { instanceId } = $page.params
 
   const cm = createCleanupManagerSync()
+  instance.set(undefined)
   onMount(async () => {
     const { watchInstanceById } = client()
     watchInstanceById(instanceId, (r) => {
@@ -19,6 +20,9 @@
       instance.set(record)
     }).then(cm.add)
   })
+  cm.add(() => {
+    instance.set(undefined)
+  })
   onDestroy(cm.cleanupAll)
 </script>
 

packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import { PUBLIC_PB_PROTOCOL } from '$env/static/public'
   import { PUBLIC_PB_DOMAIN } from '$src/env'
+  import { assertExists } from '@pockethost/common'
   import Backup from './Backup.svelte'
   import Code from './Code.svelte'
   import Overview from './Overview.svelte'
   import Restore from './Restore.svelte'
   import { instance } from './store'
 
+  assertExists($instance, `Expected instance here`)
   const { subdomain, status, platform, version } = $instance
   const url = `${PUBLIC_PB_PROTOCOL}://${subdomain}.${PUBLIC_PB_DOMAIN}`
   const code = `const url = '${url}'\nconst client = new PocketBase(url)`
@@ -15,8 +17,9 @@
 <svelte:head>
   <title>{subdomain} details - PocketHost</title>
 </svelte:head>
-
-<Overview />
-<Code />
-<Backup />
-<Restore />
+{#if $instance}
+  <Overview instance={$instance} />
+  <Code instance={$instance} />
+  <Backup instance={$instance} />
+  <Restore instance={$instance} />
+{/if}

packages/pockethost.io/src/routes/app/instances/[instanceId]/Backup.svelte

@@ -6,6 +6,7 @@
     BackupStatus,
     type BackupRecord,
     type BackupRecordId,
+    type InstancesRecord,
     type RecordId
   } from '@pockethost/common'
   import { reduce, sortBy } from '@s-libs/micro-dash'
@@ -13,14 +14,15 @@
   import prettyBytes from 'pretty-bytes'
   import { onDestroy, onMount } from 'svelte'
   import { writable } from 'svelte/store'
-  import { instance } from './store'
+
+  export let instance: InstancesRecord
 
   const cm = createCleanupManagerSync()
   const backups = writable<BackupRecord[]>([])
   let isBackingUp = false
   onMount(async () => {
     const { watchBackupsByInstanceId } = client()
-    watchBackupsByInstanceId($instance.id, (r) => {
+    watchBackupsByInstanceId(instance.id, (r) => {
       // console.log(`Handling backup update`, r)
       const { action, record } = r
       const _backups = reduce(
@@ -48,7 +50,7 @@
 
   const startBackup = () => {
     const { createInstanceBackupJob } = client()
-    createInstanceBackupJob($instance.id)
+    createInstanceBackupJob(instance.id)
   }
 
   const restoreBackup = (backupId: BackupRecordId) => {

packages/pockethost.io/src/routes/app/instances/[instanceId]/Code.svelte

@@ -2,9 +2,11 @@
   import CodeSample from '$components/CodeSample.svelte'
   import { PUBLIC_PB_PROTOCOL } from '$env/static/public'
   import { PUBLIC_PB_DOMAIN } from '$src/env'
-  import { instance } from './store'
+  import type { InstancesRecord } from '@pockethost/common'
 
-  const { subdomain, status, platform, version } = $instance
+  export let instance: InstancesRecord
+
+  const { subdomain, status, platform, version } = instance
   const url = `${PUBLIC_PB_PROTOCOL}://${subdomain}.${PUBLIC_PB_DOMAIN}`
   const code = `const url = '${url}'\nconst client = new PocketBase(url)`
 </script>

packages/pockethost.io/src/routes/app/instances/[instanceId]/Overview.svelte

@@ -2,10 +2,12 @@
   import ProvisioningStatus from '$components/ProvisioningStatus.svelte'
   import { PUBLIC_PB_PROTOCOL } from '$env/static/public'
   import { PUBLIC_PB_DOMAIN } from '$src/env'
+  import type { InstancesRecord } from '@pockethost/common'
   import { humanVersion } from '@pockethost/common'
-  import { instance } from './store'
 
-  const { subdomain, status, platform, version } = $instance
+  export let instance: InstancesRecord
+
+  const { subdomain, status, platform, version } = instance
   const url = `${PUBLIC_PB_PROTOCOL}://${subdomain}.${PUBLIC_PB_DOMAIN}`
 </script>
 

packages/pockethost.io/src/routes/app/instances/[instanceId]/Restore.svelte

@@ -2,19 +2,25 @@
   import { PUBLIC_APP_DOMAIN } from '$env/static/public'
   import { client } from '$src/pocketbase'
   import { createCleanupManagerSync } from '$util/CleanupManager'
-  import { BackupStatus, type BackupRecord, type RecordId } from '@pockethost/common'
+  import {
+    BackupStatus,
+    type BackupRecord,
+    type InstancesRecord,
+    type RecordId
+  } from '@pockethost/common'
   import { reduce, sortBy } from '@s-libs/micro-dash'
   import prettyBytes from 'pretty-bytes'
   import { onDestroy, onMount } from 'svelte'
   import { writable } from 'svelte/store'
-  import { instance } from './store'
+
+  export let instance: InstancesRecord
 
   const cm = createCleanupManagerSync()
   const backups = writable<BackupRecord[]>([])
   let isBackingUp = false
   onMount(async () => {
     const { watchBackupsByInstanceId } = client()
-    watchBackupsByInstanceId($instance.id, (r) => {
+    watchBackupsByInstanceId(instance.id, (r) => {
       // console.log(`Handling backup update`, r)
       const { action, record } = r
       const _backups = reduce(
@@ -42,7 +48,7 @@
 
   const startRestore = () => {
     const { createInstanceBackupJob } = client()
-    createInstanceBackupJob($instance.id)
+    createInstanceBackupJob(instance.id)
   }
 
   let sourceBackupId = ''

packages/pockethost.io/src/routes/app/instances/[instanceId]/store.ts

@@ -1,4 +1,4 @@
 import type { InstancesRecord } from '@pockethost/common'
 import { writable } from 'svelte/store'
 
-export const instance = writable<InstancesRecord>()
+export const instance = writable<InstancesRecord | undefined>()

readme.md

@@ -136,6 +136,7 @@ open https://pockethost.io
 
 **next**
 
+- [x] fix: incorrect instance information displaying on dashboard details
 - [x] fix: more helpful error message when backup fails for nonexistent instance
 - [x] chore: move version number to base package.json
 - [ ] chore: refactor logging and async helpers