Refactor virtualized list screen and add car list

error and item components

packages/app/features/virtualized-list/screen.tsx

@@ -1,61 +1,30 @@
-import type { Car } from '@t4/api/src/db/schema'
 import { Paragraph, Spinner, VirtualList, YStack } from '@t4/ui'
-import { formatNumber, formatPrice } from 'app/utils/number'
+import { CarListError } from '@t4/ui/src/cars/CarListError'
+import { CarListItem } from '@t4/ui/src/cars/CarListItem'
 import { trpc } from 'app/utils/trpc'
+import { empty, error, loading, success } from 'app/utils/trpc/patterns'
 import React from 'react'
-import { SolitoImage } from 'solito/image'
+import { match } from 'ts-pattern'
 
 export const VirtualizedListScreen = (): React.ReactNode => {
-  const query = trpc.car.all.useQuery()
+  const carsList = trpc.car.all.useQuery()
+  const carsListLayout = match(carsList)
+    .with(error, () => <CarListError message={carsList.failureReason?.message} />)
+    .with(loading, () => (
+      <YStack fullscreen f={1} jc="center" ai="center">
+        <Paragraph pb="$3">Loading...</Paragraph>
+        <Spinner />
+      </YStack>
+    ))
+    .with(empty, () => <Paragraph>No cars found.</Paragraph>)
+    .with(success, () => (
+      <VirtualList data={carsList.data as any[]} renderItem={CarListItem} itemHeight={80} />
+    ))
+    .otherwise(() => <CarListError message={carsList.failureReason?.message} />)
 
   return (
     <YStack fullscreen f={1}>
-      {query.isInitialLoading && !query.error ? (
-        // Loading
-        <YStack fullscreen f={1} jc="center" ai="center">
-          <Paragraph pb="$3">Loading...</Paragraph>
-          <Spinner />
-        </YStack>
-      ) : query.data?.length ? (
-        // Has Data
-        <VirtualList data={query.data} renderItem={CarListItem} itemHeight={80} />
-      ) : query.error ? (
-        // Error
-        <YStack fullscreen f={1} jc="center" ai="center" p="$6">
-          <Paragraph pb="$3">Error fetching cars</Paragraph>
-          <Paragraph>{query.error.message}</Paragraph>
-        </YStack>
-      ) : (
-        // Empty State
-        <YStack fullscreen f={1} jc="center" ai="center">
-          <Paragraph>No cars found.</Paragraph>
-        </YStack>
-      )}
-    </YStack>
-  )
-}
-
-const CarListItem = (item: Car): React.ReactElement => {
-  return (
-    <YStack flexDirection="row" paddingLeft="$2">
-      <SolitoImage
-        src="/t4-logo.png"
-        width={56}
-        height={56}
-        alt="T4 Logo"
-        style={{
-          marginTop: 8,
-        }}
-      />
-      <YStack>
-        <Paragraph paddingTop="$2" paddingLeft="$3" paddingBottom="$1" fontSize={16}>
-          {item.make + ' ' + item.model}
-        </Paragraph>
-        <Paragraph paddingLeft="$3" fontSize={16} opacity={0.6}>
-          {item.color} - {item.year} - {formatNumber(item.mileage)} miles -{' '}
-          {formatPrice(item.price)}
-        </Paragraph>
-      </YStack>
+      {carsListLayout}
     </YStack>
   )
 }

packages/app/utils/env.ts

@@ -1,5 +1,5 @@
 /**
- * This is a WIP. The goal is to have a single source of truth for all environment variables.
+ * TODO: This is a WIP. The goal is to have a single source of truth for all environment variables.
  * Different prefixes for public environments across Expo & Next.js currently block this.
  */
 

packages/ui/src/cars/CarListError.tsx

@@ -0,0 +1,14 @@
+import { Paragraph, YStack } from 'tamagui'
+
+interface Props {
+  message: string | undefined
+}
+
+export const CarListError = ({ message }: Props): React.ReactElement => {
+  return (
+    <YStack fullscreen f={1} jc="center" ai="center" p="$6">
+      <Paragraph pb="$3">Error fetching cars</Paragraph>
+      <Paragraph>{message}</Paragraph>
+    </YStack>
+  )
+}

packages/ui/src/cars/CarListItem.tsx

@@ -0,0 +1,29 @@
+import { formatNumber, formatPrice } from 'app/utils/number'
+import type { Car } from '@t4/api/src/db/schema'
+import { SolitoImage } from 'solito/image'
+import { Paragraph, YStack } from 'tamagui'
+
+export const CarListItem = (item: Car): React.ReactElement => {
+  return (
+    <YStack flexDirection="row" paddingLeft="$2">
+      <SolitoImage
+        src="/t4-logo.png"
+        width={56}
+        height={56}
+        alt="T4 Logo"
+        style={{
+          marginTop: 8,
+        }}
+      />
+      <YStack>
+        <Paragraph paddingTop="$2" paddingLeft="$3" paddingBottom="$1" fontSize={16}>
+          {item.make + ' ' + item.model}
+        </Paragraph>
+        <Paragraph paddingLeft="$3" fontSize={16} opacity={0.6}>
+          {item.color} - {item.year} - {formatNumber(item.mileage)} miles -{' '}
+          {formatPrice(item.price)}
+        </Paragraph>
+      </YStack>
+    </YStack>
+  )
+}