dashboard: refactor version picker

packages/dashboard/src/routes/(app)/instances/[instanceId]/version/VersionPicker.svelte

@@ -1,33 +1,11 @@
 <script lang="ts">
-  import { client } from '$src/pocketbase-client'
-  import { createEventDispatcher, onMount } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
 
   // Props definition with default value if needed
+  export let versions: string[]
   export let selectedVersion: string = ''
   export let disabled: boolean = false
 
-  let versions: string[] = [] // This will hold our version strings
-
-  // Function to fetch versions - replace with your actual fetch logic
-  async function fetchVersions(): Promise<string[]> {
-    const { versions } = await client().client.send<{ versions: string[] }>(
-      `/api/versions`,
-      {},
-    )
-
-    return versions.filter((v) => v.endsWith('*'))
-  }
-
-  onMount(() => {
-    fetchVersions()
-      .then((fetchedVersions) => {
-        versions = fetchedVersions
-      })
-      .catch((error) => {
-        console.error('Failed to load versions', error)
-      })
-  })
-
   // Emit an update when the selection changes
   function handleSelect(event: Event) {
     const detail = (event.target as HTMLSelectElement).value

packages/dashboard/src/util/stores.ts

@@ -23,6 +23,7 @@ try {
   console.warn(e)
 }
 
+export const versions = writable<string[]>([])
 export const isMothershipReachable = writable(true)
 export const isUserLegacy = writable(false)
 export const userSubscriptionType = writable(SubscriptionType.Legacy)
@@ -65,7 +66,27 @@ const continuouslyCheckMothershipReachability = () => {
   }, 5000)
 }
 
+async function fetchVersions(): Promise<string[]> {
+  const { versions } = await client().client.send<{ versions: string[] }>(
+    `/api/versions`,
+    {},
+  )
+
+  return versions.filter((v) => v.endsWith('*'))
+}
+
 export const init = () => {
+  const periodicallyFetchVersions = () => {
+    fetchVersions()
+      .then((versionList) => {
+        versions.set(versionList)
+        console.log('Fetched versions', versionList)
+      })
+      .finally(() => {
+        setTimeout(periodicallyFetchVersions, 1000 * 60 * 5)
+      })
+  }
+  periodicallyFetchVersions()
   const { onAuthChange } = client()
 
   checkStats()