feat: setup @tanstack/solid-query for data fetching, use in upload queue

package.json

@@ -43,6 +43,7 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@solidjs/testing-library": "^0.8.10",
+    "@tanstack/solid-query-devtools": "^5.70.0",
     "@types/bun": "^1.2.5",
     "@types/geojson": "^7946.0.16",
     "@types/leaflet": "^1.9.16",
@@ -79,6 +80,7 @@
     "@sentry/vite-plugin": "^3.2.2",
     "@solid-primitives/state-machine": "^0.1.0",
     "@solidjs/router": "^0.15.3",
+    "@tanstack/solid-query": "^5.70.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "hls.js": "^1.5.20",

src/App.tsx

@@ -1,5 +1,9 @@
 import { createSignal, lazy, onCleanup, Show, Suspense, type ParentComponent, type VoidComponent } from 'solid-js'
 import { Router, Route } from '@solidjs/router'
+import { QueryClientProvider } from '@tanstack/solid-query'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+import { getAppQueryClient } from '~/api/query-client'
+
 import 'leaflet/dist/leaflet.css'
 
 const Login = lazy(() => import('./pages/auth/login'))
@@ -38,10 +42,15 @@ export const AppLayout: ParentComponent = (props) => {
   )
 }
 
+const queryClient = getAppQueryClient()
+
 const App: VoidComponent = () => (
-  <Router root={AppLayout}>
-    <Routes />
-  </Router>
+  <QueryClientProvider client={queryClient}>
+    <SolidQueryDevtools />
+    <Router root={AppLayout}>
+      <Routes />
+    </Router>
+  </QueryClientProvider>
 )
 
 export default App

src/api/devices.ts

@@ -48,8 +48,8 @@ export const getDevice = async (dongleId: string) => {
   }
 }
 
-export const getAthenaOfflineQueue = async (dongleId: string) =>
-  fetcher<AthenaOfflineQueueResponse>(`/v1/devices/${dongleId}/athena_offline_queue`).catch(() => undefined)
+export const getAthenaOfflineQueue = (dongleId: string) =>
+  fetcher<AthenaOfflineQueueResponse>(`/v1/devices/${dongleId}/athena_offline_queue`)
 
 export const getDeviceLocation = async (dongleId: string) =>
   fetcher<DeviceLocation>(`/v1/devices/${dongleId}/location`).catch(() => undefined)

src/api/query-client.ts

@@ -0,0 +1,13 @@
+import { QueryClient } from '@tanstack/solid-query'
+import { queries as uploadQueue } from '~/components/UploadQueue'
+
+const pollingConfig = { retry: false, refetchInterval: 1000 }
+
+export const getAppQueryClient = () => {
+  const queryClient = new QueryClient()
+
+  queryClient.setQueryDefaults(uploadQueue.online(), pollingConfig)
+  queryClient.setQueryDefaults(uploadQueue.offline(), pollingConfig)
+
+  return queryClient
+}

src/ci/check_bundle_size.ts

@@ -30,7 +30,7 @@ const totalCompressedSizeKB = (totalCompressedSize / 1024).toFixed(2)
 files.push({}, { path: 'Total', sizeKB: totalSizeKB, compressedSizeKB: totalCompressedSizeKB })
 console.table(files, ['path', 'sizeKB', 'compressedSizeKB'])
 
-const upperBoundKB = 255
+const upperBoundKB = 270
 const lowerBoundKB = upperBoundKB - 10
 if (totalCompressedSize < lowerBoundKB * 1024) {
   console.warn(`Bundle size lower than expected, let's lower the limit! (${totalCompressedSizeKB}KB < ${lowerBoundKB}KB)`)

src/components/UploadQueue.tsx

@@ -1,136 +1,119 @@
-import { createSignal, For, Match, onCleanup, Show, Switch, VoidComponent } from 'solid-js'
-import { cancelUpload, getUploadQueue } from '~/api/athena'
-import { UploadFilesToUrlsRequest, UploadQueueItem } from '~/types'
-import LinearProgress from './material/LinearProgress'
-import Icon from './material/Icon'
+import { createMutation, createQuery, queryOptions, useQueryClient } from '@tanstack/solid-query'
+import { createEffect, For, Match, Show, Switch, VoidComponent } from 'solid-js'
 import { createStore, reconcile } from 'solid-js/store'
-import clsx from 'clsx'
-import { getAthenaOfflineQueue } from '~/api/devices'
+import LinearProgress from './material/LinearProgress'
+import Icon, { IconName } from './material/Icon'
 import IconButton from './material/IconButton'
 import StatisticBar from './StatisticBar'
 import Button from '~/components/material/Button'
+import { AthenaOfflineQueueResponse, UploadFilesToUrlsRequest, UploadQueueItem } from '~/types'
+import { cancelUpload, getUploadQueue } from '~/api/athena'
+import { getAthenaOfflineQueue } from '~/api/devices'
+
+export const queries = {
+  prefix: ['upload_queue'],
+
+  online: () => [...queries.prefix, 'online'],
+  onlineForDongle: (dongleId: string) => [...queries.online(), dongleId],
+  getOnline: (dongleId: string) => queryOptions({ queryKey: queries.onlineForDongle(dongleId), queryFn: () => getUploadQueue(dongleId) }),
+  offline: () => [...queries.prefix, 'offline'],
+  offlineForDongle: (dongleId: string) => [...queries.offline(), dongleId],
+  getOffline: (dongleId: string) =>
+    queryOptions({ queryKey: queries.offlineForDongle(dongleId), queryFn: () => getAthenaOfflineQueue(dongleId) }),
+  cancelUpload: (dongleId: string) => {
+    const queryClient = useQueryClient()
+    return createMutation(() => ({
+      mutationFn: (ids: string[]) => cancelUpload(dongleId, ids),
+      onSettled: () => queryClient.invalidateQueries({ queryKey: queries.onlineForDongle(dongleId) }),
+    }))
+  },
+}
+
+const mapOfflineQueueItems = (data: AthenaOfflineQueueResponse): UploadQueueItem[] =>
+  data
+    .filter((item) => item.method === 'uploadFilesToUrls')
+    .flatMap((item) =>
+      (item.params as UploadFilesToUrlsRequest).files_data.map((file) => ({
+        ...file,
+        path: file.fn,
+        created_at: 0,
+        current: false,
+        id: '',
+        progress: 0,
+        retry_count: 0,
+      })),
+    )
 
-interface DecoratedUploadQueueItem extends UploadQueueItem {
+interface UploadQueueItemWithAttributes extends UploadQueueItem {
   route: string
   segment: number
   filename: string
   isFirehose: boolean
 }
 
-const parseUploadPath = (url: string) => {
-  const parsed = new URL(url)
+const populateAttributes = (item: UploadQueueItem): UploadQueueItemWithAttributes => {
+  const parsed = new URL(item.url)
   const parts = parsed.pathname.split('/')
   if (parsed.hostname === 'upload.commadotai.com') {
-    return { route: parts[2], segment: parseInt(parts[3], 10), filename: parts[4], isFirehose: true }
+    return { ...item, route: parts[2], segment: parseInt(parts[3], 10), filename: parts[4], isFirehose: true }
   }
-  return { route: parts[3], segment: parseInt(parts[4], 10), filename: parts[5], isFirehose: false }
+  return { ...item, route: parts[3], segment: parseInt(parts[4], 10), filename: parts[5], isFirehose: false }
 }
 
-const cancel = (dongleId: string, ids: string[]) => {
-  if (ids.length === 0) return
-  cancelUpload(dongleId, ids).catch((error) => {
-    console.error('Error canceling uploads', error)
-  })
-}
-
-const UploadQueueRow: VoidComponent<{ dongleId: string; item: DecoratedUploadQueueItem }> = ({ dongleId, item }) => {
+const UploadQueueRow: VoidComponent<{ cancel: (ids: string[]) => void; item: UploadQueueItemWithAttributes }> = (props) => {
+  const item = () => props.item
+  const cancel = () => props.cancel([item().id])
   return (
     <div class="flex flex-col">
       <div class="flex items-center justify-between flex-wrap mb-1 gap-x-4 min-w-0">
         <div class="flex items-center min-w-0 flex-1">
-          <Icon class="text-on-surface-variant flex-shrink-0 mr-2" name={item.isFirehose ? 'local_fire_department' : 'person'} />
+          <Icon class="text-on-surface-variant flex-shrink-0 mr-2" name={item().isFirehose ? 'local_fire_department' : 'person'} />
           <div class="flex min-w-0 gap-1">
-            <span class="text-body-sm font-mono truncate text-on-surface">{[item.route, item.segment, item.filename].join(' ')}</span>
+            <span class="text-body-sm font-mono truncate text-on-surface">{[item().route, item().segment, item().filename].join(' ')}</span>
           </div>
         </div>
         <div class="flex items-center gap-0.5 flex-shrink-0 justify-end">
-          <Show
-            when={!item.id || item.progress !== 0}
-            fallback={<IconButton size="20" name="close_small" onClick={() => cancel(dongleId, [item.id])} />}
-          >
+          <Show when={!item().id || item().progress !== 0} fallback={<IconButton size="20" name="close_small" onClick={cancel} />}>
             <span class="text-body-sm font-mono whitespace-nowrap pr-[0.5rem]">
-              {item.id ? `${Math.round(item.progress * 100)}%` : 'Offline'}
+              {item().id ? `${Math.round(item().progress * 100)}%` : 'Offline'}
             </span>
           </Show>
         </div>
       </div>
       <div class="h-1.5 w-full overflow-hidden rounded-full bg-surface-container-highest">
-        <LinearProgress progress={item.progress} color={Math.round(item.progress * 100) === 100 ? 'tertiary' : 'primary'} />
+        <LinearProgress progress={item().progress} color={Math.round(item().progress * 100) === 100 ? 'tertiary' : 'primary'} />
       </div>
     </div>
   )
 }
 
-const WAITING = 'Waiting for device to connect...'
+const StatusMessage: VoidComponent<{ iconClass?: string; icon: IconName; message: string }> = (props) => (
+  <div class="flex items-center gap-2">
+    <Icon name={props.icon} class={props.iconClass} />
+    <span class="text-body-lg">{props.message}</span>
+  </div>
+)
 
 const UploadQueue: VoidComponent<{ dongleId: string }> = (props) => {
-  const [error, setError] = createSignal<string | undefined>(WAITING)
-  const [items, setItems] = createStore<DecoratedUploadQueueItem[]>([])
-
-  let timeout: Timer | undefined
-
-  const cancelAll = () =>
-    cancel(
-      props.dongleId,
-      items.map((item) => item.id),
-    )
-  const fetch = () => {
-    getAthenaOfflineQueue(props.dongleId)
-      .then((res) => {
-        if (!error()) return
-        setItems(
-          reconcile(
-            res
-              ?.filter((r) => r.method === 'uploadFilesToUrls')
-              .flatMap((item) => {
-                return (item.params as UploadFilesToUrlsRequest).files_data.map((file) => ({
-                  ...file,
-                  ...parseUploadPath(file.url),
-                  path: file.fn,
-                  created_at: 0,
-                  current: false,
-                  id: '',
-                  progress: 0,
-                  retry_count: 0,
-                }))
-              }) || [],
-          ),
-        )
-      })
-      .catch((error) => {
-        console.error('Error fetching offline queue', error)
-      })
-    getUploadQueue(props.dongleId)
-      .then((res) => {
-        if (res.error) {
-          setError(res.error)
-          return
-        }
-        setItems(
-          reconcile(res.result?.map((item) => ({ ...item, ...parseUploadPath(item.url) })).sort((a, b) => b.progress - a.progress) || []),
-        )
-        setError(undefined)
-      })
-      .catch((error) => {
-        if (error instanceof Error && error.cause instanceof Response && error.cause.status === 404) {
-          setError('Device is offline')
-          return
-        }
-        setError(error.toString())
-      })
-      .finally(() => {
-        if (!timeout) return
-        timeout = setTimeout(fetch, 1000)
-      })
-  }
+  const onlineQueue = createQuery(() => queries.getOnline(props.dongleId))
+  const offlineQueue = createQuery(() => queries.getOffline(props.dongleId))
+  const cancel = queries.cancelUpload(props.dongleId)
 
-  timeout = setTimeout(fetch, 0)
+  const [items, setItems] = createStore<UploadQueueItemWithAttributes[]>([])
 
-  onCleanup(() => {
-    clearTimeout(timeout)
-    timeout = undefined
+  createEffect(() => {
+    const online = onlineQueue.isSuccess ? (onlineQueue.data?.result ?? []) : []
+    const offline = offlineQueue.isSuccess ? mapOfflineQueueItems(offlineQueue.data ?? []) : []
+    const sorted = [...online, ...offline].map(populateAttributes).sort((a, b) => b.progress - a.progress)
+    setItems(reconcile(sorted))
   })
 
+  const cancelAll = () => {
+    const ids = items.filter((item) => item.id).map((item) => item.id)
+    if (ids.length === 0) return
+    cancel.mutate(ids)
+  }
+
   return (
     <div class="flex flex-col gap-4 bg-surface-container-lowest">
       <div class="flex p-4 justify-between items-center border-b-2 border-b-surface-container-low">
@@ -143,17 +126,18 @@ const UploadQueue: VoidComponent<{ dongleId: string }> = (props) => {
         <Switch
           fallback={
             <div class="absolute inset-0 bottom-4 flex flex-col gap-2 px-4 overflow-y-auto hide-scrollbar">
-              <For each={items}>{(item) => <UploadQueueRow dongleId={props.dongleId} item={item} />}</For>
+              <For each={items}>{(item) => <UploadQueueRow cancel={cancel.mutate} item={item} />}</For>
             </div>
           }
         >
-          <Match when={error() && items.length === 0}>
-            <Icon class={clsx(error() === WAITING && 'animate-spin')} name={error() === WAITING ? 'progress_activity' : 'error'} />
-            <span class="ml-2">{error()}</span>
+          <Match when={!onlineQueue.isFetched}>
+            <StatusMessage iconClass="animate-spin" icon="autorenew" message="Waiting for device to connect..." />
+          </Match>
+          <Match when={onlineQueue.isFetched && !onlineQueue.isSuccess && items.length === 0}>
+            <StatusMessage icon="error" message="Device offline" />
           </Match>
-          <Match when={items.length === 0}>
-            <Icon name="check" />
-            <span class="ml-2">Nothing to upload</span>
+          <Match when={onlineQueue.isFetched && onlineQueue.isSuccess && items.length === 0}>
+            <StatusMessage icon="check" message="Nothing to upload" />
           </Match>
         </Switch>
       </div>