From b5d3cf48a68ed1094539e125eebf84e0bc09352f Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Sun, 20 Nov 2022 03:55:28 -0800
Subject: [PATCH] fix: incorrect instance information displaying on dashboard
 details

---
 .../app/instances/[instanceId]/+layout.svelte      |  4 ++++
 .../routes/app/instances/[instanceId]/+page.svelte | 13 ++++++++-----
 .../app/instances/[instanceId]/Backup.svelte       |  8 +++++---
 .../routes/app/instances/[instanceId]/Code.svelte  |  6 ++++--
 .../app/instances/[instanceId]/Overview.svelte     |  6 ++++--
 .../app/instances/[instanceId]/Restore.svelte      | 14 ++++++++++----
 .../src/routes/app/instances/[instanceId]/store.ts |  2 +-
 readme.md                                          |  1 +
 8 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/+layout.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/+layout.svelte
index c9ec0d1b..589378ab 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/+layout.svelte
+++ b/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>
 
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte
index 96610052..b6316a8d 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte
+++ b/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}
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/Backup.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/Backup.svelte
index 43acadfc..3a0e96dc 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/Backup.svelte
+++ b/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) => {
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/Code.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/Code.svelte
index 3ccb0596..021b112f 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/Code.svelte
+++ b/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>
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/Overview.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/Overview.svelte
index daa53f4c..a531b814 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/Overview.svelte
+++ b/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>
 
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/Restore.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/Restore.svelte
index c0d2f1ff..7f5f9355 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/Restore.svelte
+++ b/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 = ''
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/store.ts b/packages/pockethost.io/src/routes/app/instances/[instanceId]/store.ts
index bdb650b5..5cb3fa3a 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/store.ts
+++ b/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>()
diff --git a/readme.md b/readme.md
index 4679bfbe..ad99a462 100644
--- a/readme.md
+++ b/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