Remove duplicate devices query when switching device (commaai#435)

I would like to merge this instead of
commaai/connect#430, but we need to decide how
to handle public routes.

Author: sshane

src/App.browser.test.tsx

@@ -21,8 +21,8 @@ describe('Demo mode', () => {
   beforeEach(() => setAccessToken(Demo.ACCESS_TOKEN))
 
   test('View dashboard', async () => {
-    const { findByText } = renderApp('/')
-    expect(await findByText('demo 3X')).toBeTruthy()
+    const { findAllByText } = renderApp('/')
+    expect(await findAllByText('demo 3X')).toHaveLength(2)
   })
 
   test('View demo route', async () => {

src/pages/dashboard/Dashboard.tsx

@@ -136,7 +136,7 @@ const Dashboard: Component<RouteSectionProps> = () => {
         <Match when={urlState().dongleId} keyed>
           {(dongleId) => (
             <DashboardLayout
-              paneOne={<DeviceActivity dongleId={dongleId} shared={!currentDevice()} />}
+              paneOne={<DeviceActivity dongleId={dongleId} device={currentDevice()} />}
               paneTwo={
                 <Switch
                   fallback={
@@ -147,7 +147,7 @@ const Dashboard: Component<RouteSectionProps> = () => {
                   }
                 >
                   <Match when={urlState().dateStr === 'settings' || urlState().dateStr === 'prime'}>
-                    <SettingsActivity dongleId={dongleId} shared={!currentDevice()} />
+                    <SettingsActivity dongleId={dongleId} />
                   </Match>
                   <Match when={urlState().dateStr}>
                     {(dateStr) => <RouteActivity dongleId={dongleId} dateStr={dateStr()} startTime={urlState().startTime} />}

src/pages/dashboard/activities/DeviceActivity.tsx

@@ -1,10 +1,10 @@
 import clsx from 'clsx'
-import { createMemo, createResource, createSignal, For, Show, Suspense } from 'solid-js'
+import { createMemo, createSignal, For, Show, Suspense } from 'solid-js'
 import type { VoidComponent } from 'solid-js'
 
-import { getDevice } from '~/api/devices'
 import { ATHENA_URL } from '~/api/config'
 import { getAccessToken } from '~/api/auth/client'
+import type { Device } from '~/api/types'
 
 import { DrawerToggleButton, useDrawerContext } from '~/components/material/Drawer'
 import Icon from '~/components/material/Icon'
@@ -19,7 +19,7 @@ import UploadQueue from '~/components/UploadQueue'
 
 type DeviceActivityProps = {
   dongleId: string
-  shared: boolean
+  device: Device | undefined
 }
 
 interface SnapshotResponse {
@@ -30,9 +30,7 @@ interface SnapshotResponse {
 }
 
 const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
-  // TODO: device should be passed in from DeviceList
-  const [device] = createResource(() => props.dongleId, getDevice)
-  const deviceName = createMemo(() => getDeviceName(device(), props.shared))
+  const deviceName = createMemo(() => getDeviceName(props.device))
   const [queueVisible, setQueueVisible] = createSignal(false)
   const [snapshot, setSnapshot] = createSignal<{
     error: string | null
@@ -125,15 +123,13 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
             <DeviceLocation dongleId={props.dongleId} deviceName={deviceName()!} />
           </Suspense>
           <div class="flex items-center justify-between p-4">
-            <Suspense fallback={<div class="h-[32px] skeleton-loader size-full" />}>
-              {<div class="text-xl font-bold">{deviceName()}</div>}
-            </Suspense>
+            {<div class="text-xl font-bold">{deviceName()}</div>}
             <div class="flex gap-4">
               <IconButton name="camera" onClick={() => void takeSnapshot()} />
               <IconButton name="settings" href={`/${props.dongleId}/settings`} />
             </div>
           </div>
-          <Show when={!props.shared}>
+          <Show when={props.device}>
             <DeviceStatistics dongleId={props.dongleId} class="p-4" />
             <Show when={queueVisible()}>
               <UploadQueue dongleId={props.dongleId} />

src/pages/dashboard/activities/SettingsActivity.tsx

@@ -34,7 +34,6 @@ const formatCurrency = (amount: number) => `$${(amount / 100).toFixed(amount % 1
 
 type PrimeActivityProps = {
   dongleId: string
-  shared: boolean
 }
 
 type PrimePlan = 'nodata' | 'data'
@@ -403,7 +402,7 @@ const PrimeManage: VoidComponent<{ dongleId: string }> = (props) => {
 
 const SettingsActivity: VoidComponent<PrimeActivityProps> = (props) => {
   const [device] = createResource(() => props.dongleId, getDevice)
-  const deviceName = createMemo(() => getDeviceName(device(), props.shared))
+  const deviceName = createMemo(() => getDeviceName(device()))
 
   const [unpair, unpairData] = useAction(async () => {
     const { success } = await unpairDevice(props.dongleId)

src/pages/dashboard/components/DeviceList.tsx

@@ -37,7 +37,7 @@ const DeviceList: VoidComponent<DeviceListProps> = (props) => {
               activeClass="before:bg-primary"
             >
               <ListItemContent
-                headline={getDeviceName(device, false)}
+                headline={getDeviceName(device)}
                 subhead={<span class="font-mono text-label-sm lowercase">{device.dongle_id}</span>}
               />
             </ListItem>

src/utils/device.ts

@@ -2,9 +2,8 @@ import type { Device } from '~/api/types'
 
 const SHARED_DEVICE = 'Shared Device'
 
-export function getDeviceName(device: Device | undefined, shared: boolean) {
-  if (shared) return SHARED_DEVICE
-  if (!device) return ''
+export function getDeviceName(device: Device | undefined) {
+  if (!device) return SHARED_DEVICE
   if (device.alias) return device.alias
   return `comma ${device.device_type}`
 }