fix: sort routes without start_time/end_time

- falls back to `create_time` when start_time/end_time are unavailable
- refactor `<RouteHeader />` into its own file
- hide `<RouteStatistics />` if there's no trip data

closes commaai#60

Author: tex-murphy

src/components/RouteCard.tsx

@@ -1,34 +1,13 @@
 import { Suspense, type VoidComponent } from 'solid-js'
-import dayjs from 'dayjs'
 
-import Avatar from '~/components/material/Avatar'
-import Card, { CardContent, CardHeader } from '~/components/material/Card'
-import Icon from '~/components/material/Icon'
+import Card, { CardContent } from '~/components/material/Card'
+
 import RouteStaticMap from '~/components/RouteStaticMap'
 import RouteStatistics from '~/components/RouteStatistics'
+import { RouteHeader } from './RouteHeader'
 
 import type { RouteSegments } from '~/types'
 
-const RouteHeader = (props: { route: RouteSegments }) => {
-  const startTime = () => dayjs(props.route.start_time_utc_millis)
-  const endTime = () => dayjs(props.route.end_time_utc_millis)
-
-  const headline = () => startTime().format('ddd, MMM D, YYYY')
-  const subhead = () => `${startTime().format('h:mm A')} to ${endTime().format('h:mm A')}`
-
-  return (
-    <CardHeader
-      headline={headline()}
-      subhead={subhead()}
-      leading={
-        <Avatar>
-          <Icon>directions_car</Icon>
-        </Avatar>
-      }
-    />
-  )
-}
-
 interface RouteCardProps {
   route: RouteSegments
 }
@@ -45,10 +24,11 @@ const RouteCard: VoidComponent<RouteCardProps> = (props) => {
           <RouteStaticMap route={props.route} />
         </Suspense>
       </div>
-
-      <CardContent>
-        <RouteStatistics route={props.route} />
-      </CardContent>
+      {!!props.route.end_time_utc_millis && (
+        <CardContent>
+          <RouteStatistics route={props.route} />
+        </CardContent>
+      )}
     </Card>
   )
 }

src/components/RouteHeader.tsx

@@ -0,0 +1,29 @@
+import dayjs from 'dayjs'
+
+import Avatar from '~/components/material/Avatar'
+import { CardHeader } from '~/components/material/Card'
+import Icon from '~/components/material/Icon'
+
+import type { RouteSegments } from '~/types'
+
+export const RouteHeader = (props: { route: RouteSegments }) => {
+  const startTime = () => dayjs(props.route.start_time_utc_millis ?? props.route.create_time * 1000)
+  const endTime = () => dayjs(props.route.end_time_utc_millis)
+  const headline = () => startTime().format('ddd, MMM D, YYYY')
+  const subhead = () => {
+    const startFormatted = startTime().format('h:mm A')
+    return props.route.end_time_utc_millis ? `${startFormatted} to ${endTime().format('h:mm A')}` : startFormatted
+  }
+
+  return (
+    <CardHeader
+      headline={headline()}
+      subhead={subhead()}
+      leading={
+        <Avatar>
+          <Icon>directions_car</Icon>
+        </Avatar>
+      }
+    />
+  )
+}

src/pages/dashboard/components/RouteList.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import {
   createEffect,
+  createMemo,
   createResource,
   createSignal,
   For,
@@ -29,7 +30,9 @@ const RouteList: VoidComponent<RouteListProps> = (props) => {
   const getKey = (previousPageData?: RouteSegments[]): string | undefined => {
     if (!previousPageData) return endpoint()
     if (previousPageData.length === 0) return undefined
-    const lastSegmentEndTime = previousPageData.at(-1)!.end_time_utc_millis
+    // if route has no end time, fall back to create_time
+    const lastSegmentEndTime = 
+      previousPageData.at(-1)!.end_time_utc_millis ?? previousPageData.at(-1)!.create_time
     return `${endpoint()}&end=${lastSegmentEndTime - 1}`
   }
   const getPage = (page: number): Promise<RouteSegments[]> => {
@@ -38,7 +41,7 @@ const RouteList: VoidComponent<RouteListProps> = (props) => {
       pages[page] = new Promise(async (resolve) => {
         const previousPageData = page > 0 ? await getPage(page - 1) : undefined
         const key = getKey(previousPageData)
-        resolve(key ? fetcher<RouteSegments[]>(key) : [])
+        resolve(key ? fetcher<RouteSegments[]>(key) : [])        
       })
     }
     return pages[page]
@@ -65,6 +68,15 @@ const RouteList: VoidComponent<RouteListProps> = (props) => {
       <For each={pageNumbers()}>
         {(i) => {
           const [routes] = createResource(() => i, getPage)
+          const sortedRoutes = createMemo(() => {
+            const currentRoutes = routes() ?? []
+            // if route doesn't have start time, fall back to create_time
+            return currentRoutes.sort((a, b) => {
+              const startTimeA = a.start_time_utc_millis ?? a.create_time * 1000
+              const startTimeB = b.start_time_utc_millis ?? b.create_time * 1000
+              return startTimeB - startTimeA
+            })
+          })
           return (
             <Suspense
               fallback={
@@ -75,7 +87,7 @@ const RouteList: VoidComponent<RouteListProps> = (props) => {
                 </>
               }
             >
-              <For each={routes()}>
+              <For each={sortedRoutes()}>
                 {(route) => <RouteCard route={route} />}
               </For>
             </Suspense>

src/types.d.ts

@@ -79,7 +79,7 @@ export interface Route extends ApiResponseBase {
   procqcamera: number
   procqlog: number
   radar?: boolean
-  start_time: string
+  start_time?: string
   url: string
   user_id: string | null
   version?: string
@@ -92,9 +92,9 @@ export interface RouteShareSignature extends Record<string, string> {
 }
 
 export interface RouteSegments extends Route {
-  end_time_utc_millis: number
+  end_time_utc_millis?: number
   is_preserved: boolean
   share_exp: RouteShareSignature['exp']
   share_sig: RouteShareSignature['sig']
-  start_time_utc_millis: number
+  start_time_utc_millis?: number
 }