cleanup(snapshot): move method to athena, use store (commaai#535)

Author: incognitojam

src/api/athena.ts

@@ -7,6 +7,15 @@ export const getNetworkMetered = (dongleId: string) => makeAthenaCall<void, bool
 export const setRouteViewed = (dongleId: string, route: string) =>
   makeAthenaCall<{ route: string }, void>(dongleId, 'setRouteViewed', { route })
 
+export const takeSnapshot = (dongleId: string) =>
+  makeAthenaCall<
+    void,
+    {
+      jpegFront?: string
+      jpegBack?: string
+    }
+  >(dongleId, 'takeSnapshot')
+
 export const makeAthenaCall = async <REQ, RES>(
   dongleId: string,
   method: string,

src/pages/dashboard/activities/DeviceActivity.tsx

@@ -1,33 +1,24 @@
+import { createResource, createSignal, For, Show, Suspense, type VoidComponent } from 'solid-js'
+import { createStore } from 'solid-js/store'
 import clsx from 'clsx'
-import { createResource, createSignal, For, Show, Suspense } from 'solid-js'
-import type { VoidComponent } from 'solid-js'
 
+import { takeSnapshot } from '~/api/athena'
 import { getDevice, SHARED_DEVICE } from '~/api/devices'
-import { ATHENA_URL } from '~/api/config'
-import { getAccessToken } from '~/api/auth/client'
-
 import { DrawerToggleButton, useDrawerContext } from '~/components/material/Drawer'
 import Icon from '~/components/material/Icon'
 import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
 import DeviceLocation from '~/components/DeviceLocation'
 import DeviceStatistics from '~/components/DeviceStatistics'
+import UploadQueue from '~/components/UploadQueue'
 import { deviceIsOnline, getDeviceName } from '~/utils/device'
 
 import RouteList from '../components/RouteList'
-import UploadQueue from '~/components/UploadQueue'
 
 type DeviceActivityProps = {
   dongleId: string
 }
 
-interface SnapshotResponse {
-  result?: {
-    jpegFront?: string
-    jpegBack?: string
-  }
-}
-
 const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
   // TODO: device should be passed in from DeviceList
   const [device] = createResource(() => props.dongleId, getDevice)
@@ -36,7 +27,7 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
   // TODO: remove this. if we're listing the routes for a device you should always be a user, this is for viewing public routes which are being removed
   const isDeviceUser = () => (device.loading ? true : device.latest?.is_owner || device.latest?.alias !== SHARED_DEVICE)
   const [queueVisible, setQueueVisible] = createSignal(false)
-  const [snapshot, setSnapshot] = createSignal<{
+  const [snapshot, setSnapshot] = createStore<{
     error: string | null
     fetching: boolean
     images: string[]
@@ -46,37 +37,13 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
     images: [],
   })
 
-  const takeSnapshot = async () => {
-    setSnapshot({ error: null, fetching: true, images: [] })
-
+  const onClickSnapshot = async () => {
+    setSnapshot({ error: null, fetching: true })
     try {
-      const payload = {
-        method: 'takeSnapshot',
-        jsonrpc: '2.0',
-        id: 0,
-      }
-
-      const response = await fetch(`${ATHENA_URL}/${props.dongleId}`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `JWT ${getAccessToken()}`,
-        },
-        body: JSON.stringify(payload),
-      })
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`)
-      }
-
-      const resp: SnapshotResponse = (await response.json()) as SnapshotResponse
-      const images = []
-
-      if (resp.result?.jpegFront) images.push(resp.result.jpegFront)
-      if (resp.result?.jpegBack) images.push(resp.result.jpegBack)
-
+      const resp = await takeSnapshot(props.dongleId)
+      const images = [resp.result?.jpegFront, resp.result?.jpegBack].filter((it) => it !== undefined)
       if (images.length > 0) {
-        setSnapshot({ error: null, fetching: false, images })
+        setSnapshot('images', images)
       } else {
         throw new Error('No images found.')
       }
@@ -85,7 +52,9 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
       if (error.includes('Device not registered')) {
         error = 'Device offline'
       }
-      setSnapshot({ error, fetching: false, images: [] })
+      setSnapshot('error', error)
+    } finally {
+      setSnapshot('fetching', false)
     }
   }
 
@@ -99,13 +68,11 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
   }
 
   const clearImage = (index: number) => {
-    const newImages = snapshot().images.filter((_, i) => i !== index)
-    setSnapshot({ ...snapshot(), images: newImages })
+    const newImages = snapshot.images.filter((_, i) => i !== index)
+    setSnapshot('images', newImages)
   }
 
-  const clearError = () => {
-    setSnapshot({ ...snapshot(), error: null })
-  }
+  const clearError = () => setSnapshot('error', null)
 
   const { modal } = useDrawerContext()
 
@@ -140,7 +107,7 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
               </div>
             </Suspense>
             <div class="flex gap-4">
-              <IconButton name="camera" onClick={() => void takeSnapshot()} />
+              <IconButton name="camera" onClick={onClickSnapshot} />
               <IconButton name="settings" href={`/${props.dongleId}/settings`} />
             </div>
           </div>
@@ -162,7 +129,7 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
           </Show>
         </div>
         <div class="flex flex-col gap-2">
-          <For each={snapshot().images}>
+          <For each={snapshot.images}>
             {(image, index) => (
               <div class="flex-1 overflow-hidden rounded-lg bg-surface-container-low">
                 <div class="relative p-4">
@@ -175,21 +142,21 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
               </div>
             )}
           </For>
-          {snapshot().fetching && (
+          <Show when={snapshot.fetching}>
             <div class="flex-1 overflow-hidden rounded-lg bg-surface-container-low">
               <div class="p-4">
                 <div>Loading snapshots...</div>
               </div>
             </div>
-          )}
-          {snapshot().error && (
+          </Show>
+          <Show when={snapshot.error}>
             <div class="flex-1 overflow-hidden rounded-lg bg-surface-container-low">
               <div class="flex items-center p-4">
                 <IconButton class="text-white" name="clear" onClick={clearError} />
-                <span>Error: {snapshot().error}</span>
+                <span>Error: {snapshot.error}</span>
               </div>
             </div>
-          )}
+          </Show>
         </div>
         <RouteList dongleId={props.dongleId} />
       </div>