From 66b71aa75efea3548e1bad724e17fb2f550eb048 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Sun, 18 Jun 2023 07:21:13 -0700
Subject: [PATCH] refactor: version change

---
 .../src/components/helpers/TinyButton.svelte  |  2 +
 .../instances/[instanceId]/MiniEdit.svelte    | 43 +++++++++++++++++++
 .../[instanceId]/RunningStatus.svelte         | 40 +++--------------
 3 files changed, 52 insertions(+), 33 deletions(-)
 create mode 100644 packages/pockethost.io/src/routes/app/instances/[instanceId]/MiniEdit.svelte

diff --git a/packages/pockethost.io/src/components/helpers/TinyButton.svelte b/packages/pockethost.io/src/components/helpers/TinyButton.svelte
index 2ef25d73..c8cb183c 100644
--- a/packages/pockethost.io/src/components/helpers/TinyButton.svelte
+++ b/packages/pockethost.io/src/components/helpers/TinyButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  export let disabled: boolean = false
   export let style: 'primary' | 'warning' | 'danger' | 'success' = 'primary'
   export let click: () => void = () => {}
 </script>
@@ -6,6 +7,7 @@
 <button
   type="button"
   class="btn btn-{style}"
+  {disabled}
   style="--bs-btn-padding-y: .05rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;"
   on:click={click}><slot /></button
 >
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/MiniEdit.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/MiniEdit.svelte
new file mode 100644
index 00000000..1ce18bb8
--- /dev/null
+++ b/packages/pockethost.io/src/routes/app/instances/[instanceId]/MiniEdit.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import TinyButton from '$components/helpers/TinyButton.svelte'
+
+  export let value: string = ''
+  export let disabled: boolean = false
+  export let save: (newValue: string) => Promise<string> = async () => 'saved'
+
+  let msg = ''
+  let oldValue = value
+  let editedValue = value
+  let editMode = false
+
+  const startEdit = () => {
+    oldValue = editedValue
+    editMode = true
+  }
+  const cancelEdit = () => {
+    editedValue = oldValue
+    editMode = false
+  }
+
+  const saveEdit = () => {
+    save(editedValue)
+      .then((res) => {
+        editMode = false
+        msg = res
+      })
+      .catch((e) => {
+        msg = e.message
+      })
+  }
+</script>
+
+{#if !editMode || disabled}
+  {editedValue}
+  <TinyButton click={startEdit} {disabled}>edit</TinyButton>
+  {msg}
+{/if}
+{#if editMode && !disabled}
+  <input type="text" bind:value={editedValue} />
+  <TinyButton style="success" {disabled} click={saveEdit}>save</TinyButton>
+  <TinyButton style="danger" {disabled} click={cancelEdit}>cancel</TinyButton>
+{/if}
diff --git a/packages/pockethost.io/src/routes/app/instances/[instanceId]/RunningStatus.svelte b/packages/pockethost.io/src/routes/app/instances/[instanceId]/RunningStatus.svelte
index af72e250..227d0016 100644
--- a/packages/pockethost.io/src/routes/app/instances/[instanceId]/RunningStatus.svelte
+++ b/packages/pockethost.io/src/routes/app/instances/[instanceId]/RunningStatus.svelte
@@ -1,49 +1,23 @@
 <script lang="ts">
-  import TinyButton from '$components/helpers/TinyButton.svelte'
-  import { PUBLIC_APP_DOMAIN, PUBLIC_APP_PROTOCOL } from '$src/env'
   import { client } from '$src/pocketbase'
   import type { InstanceFields } from '@pockethost/common'
+  import MiniEdit from './MiniEdit.svelte'
 
   export let instance: InstanceFields
 
-  const { subdomain, status, version } = instance
-  const url = `${PUBLIC_APP_PROTOCOL}://${subdomain}.${PUBLIC_APP_DOMAIN}`
+  const { version } = instance
 
-  let msg = ''
-  let _oldVersion = version
   let _version = version
-  let editMode = false
-  const startEdit = () => {
-    _oldVersion = _version
-    editMode = true
-  }
-  const cancelEdit = () => {
-    _version = _oldVersion
-    editMode = false
-  }
 
-  const saveEdit = () => {
+  const saveEdit = async (newValue: string) =>
     client()
-      .saveVersion({ instanceId: instance.id, version: _version })
+      .saveVersion({ instanceId: instance.id, version: newValue })
       .then(() => {
-        editMode = false
-        msg = 'saved'
+        _version = newValue
+        return 'saved'
       })
-      .catch((e) => {
-        msg = e.message
-      })
-  }
 </script>
 
 <div>
-  Version {#if !editMode}
-    {_version}
-    <TinyButton click={startEdit}>edit</TinyButton>
-    {msg}
-  {/if}
-  {#if editMode}
-    <input type="text" bind:value={_version} />
-    <TinyButton style="success" click={saveEdit}>save</TinyButton>
-    <TinyButton style="danger" click={cancelEdit}>cancel</TinyButton>
-  {/if}
+  Version <MiniEdit value={_version} save={saveEdit} />
 </div>