feat(native-app): update vehicle list query in app

apps/native/app/src/graphql/fragments/vehicle.fragment.graphql

@@ -1,39 +1,10 @@
-fragment VehicleFragment on VehiclesVehicle {
-  isCurrent
+fragment VehicleFragment on VehicleListed {
   permno
   regno
-  vin
-  type
-  color
-  firstRegDate
+  make
+  colorName
   modelYear
-  productYear
-  registrationType
-  role
-  operatorStartDate
-  operatorEndDate
-  outOfUse
-  otherOwners
-  termination
-  buyerPersidno
-  ownerPersidno
-  vehicleStatus
-  useGroup
-  vehGroup
-  plateStatus
-  nextInspection {
-    nextInspectionDate
-    nextInspectionDateIfPassedInspectionToday
-  }
-  operatorNumber
-  primaryOperator
-  ownerSsid
-  ownerName
-  lastInspectionResult
-  lastInspectionDate
-  lastInspectionType
-  nextInspectionDate
-  nextAvailableMileageReadDate
   requiresMileageRegistration
   canRegisterMileage
+  nextMainInspection
 }

apps/native/app/src/graphql/queries/vehicles.graphql

@@ -1,5 +1,5 @@
-query ListVehicles($input: GetVehiclesForUserInput!) {
-  vehiclesList(input: $input) {
+query ListVehiclesV2($input: GetVehiclesListV2Input!) {
+  vehiclesListV2(input: $input) {
     vehicleList {
       ...VehicleFragment
     }

apps/native/app/src/screens/home/home.tsx

@@ -55,7 +55,7 @@ import {
 } from './licenses-module'
 import { OnboardingModule } from './onboarding-module'
 import {
-  useListVehiclesQuery,
+  useListVehiclesV2Query,
   validateVehiclesInitialData,
   VehiclesModule,
 } from './vehicles-module'
@@ -174,13 +174,11 @@ export const MainHomeScreen: NavigationFunctionComponent = ({
     skip: !airDiscountWidgetEnabled,
   })
 
-  const vehiclesRes = useListVehiclesQuery({
+  const vehiclesRes = useListVehiclesV2Query({
     variables: {
       input: {
         page: 1,
         pageSize: 15,
-        showDeregeristered: false,
-        showHistory: false,
       },
     },
     skip: !vehiclesWidgetEnabled,

apps/native/app/src/screens/home/vehicles-module.tsx

@@ -17,8 +17,8 @@ import illustrationSrc from '../../assets/illustrations/le-moving-s4.png'
 import { navigateTo } from '../../lib/deep-linking'
 import { VehicleItem } from '../vehicles/components/vehicle-item'
 import {
-  ListVehiclesQuery,
-  useListVehiclesQuery,
+  ListVehiclesV2Query,
+  useListVehiclesV2Query,
 } from '../../graphql/types/schema'
 import { screenWidth } from '../../utils/dimensions'
 
@@ -30,15 +30,15 @@ const validateVehiclesInitialData = ({
   data,
   loading,
 }: {
-  data: ListVehiclesQuery | undefined
+  data: ListVehiclesV2Query | undefined
   loading: boolean
 }) => {
   if (loading) {
     return true
   }
   // Only show widget initially if there are vehicles that require mileage registration
   if (
-    data?.vehiclesList?.vehicleList?.some(
+    data?.vehiclesListV2?.vehicleList?.some(
       (vehicle) => vehicle.requiresMileageRegistration,
     )
   ) {
@@ -49,7 +49,7 @@ const validateVehiclesInitialData = ({
 }
 
 interface VehiclesModuleProps {
-  data: ListVehiclesQuery | undefined
+  data: ListVehiclesV2Query | undefined
   loading: boolean
   error?: ApolloError | undefined
 }
@@ -59,7 +59,7 @@ const VehiclesModule = React.memo(
     const theme = useTheme()
     const intl = useIntl()
 
-    const vehicles = data?.vehiclesList?.vehicleList
+    const vehicles = data?.vehiclesListV2?.vehicleList
 
     // Reorder vehicles so vehicles that require mileage registration are shown first
     const reorderedVehicles = useMemo(
@@ -170,4 +170,4 @@ const VehiclesModule = React.memo(
   },
 )
 
-export { VehiclesModule, validateVehiclesInitialData, useListVehiclesQuery }
+export { VehiclesModule, validateVehiclesInitialData, useListVehiclesV2Query }

apps/native/app/src/screens/vehicles/components/vehicle-item.tsx

@@ -3,15 +3,15 @@ import React from 'react'
 import { FormattedDate, FormattedMessage } from 'react-intl'
 import { SafeAreaView, TouchableHighlight, View, ViewStyle } from 'react-native'
 import styled, { useTheme } from 'styled-components/native'
-import { ListVehiclesQuery } from '../../../graphql/types/schema'
+import { ListVehiclesV2Query } from '../../../graphql/types/schema'
 import { navigateTo } from '../../../lib/deep-linking'
 
 function differenceInMonths(a: Date, b: Date) {
   return a.getMonth() - b.getMonth() + 12 * (a.getFullYear() - b.getFullYear())
 }
 
 type VehicleListItem = NonNullable<
-  NonNullable<ListVehiclesQuery['vehiclesList']>['vehicleList']
+  NonNullable<ListVehiclesV2Query['vehiclesListV2']>['vehicleList']
 >[0]
 
 const Cell = styled(TouchableHighlight)`
@@ -31,8 +31,8 @@ export const VehicleItem = React.memo(
     style?: ViewStyle
   }) => {
     const theme = useTheme()
-    const nextInspection = item?.nextInspection?.nextInspectionDate
-      ? new Date(item?.nextInspection.nextInspectionDate)
+    const nextInspection = item?.nextMainInspection
+      ? new Date(item?.nextMainInspection)
       : null
 
     const isInspectionDeadline =
@@ -51,14 +51,14 @@ export const VehicleItem = React.memo(
           onPress={() => {
             navigateTo(`/vehicle/`, {
               id: item.permno,
-              title: item.type,
+              title: item.make,
             })
           }}
         >
           <SafeAreaView>
             <VehicleCard
-              title={item.type}
-              color={item.color}
+              title={item.make}
+              color={item.colorName}
               number={item.regno}
               minHeight={minHeight}
               label={

apps/native/app/src/screens/vehicles/vehicles.tsx

@@ -14,8 +14,8 @@ import { useTheme } from 'styled-components/native'
 import illustrationSrc from '../../assets/illustrations/le-moving-s4.png'
 import { BottomTabsIndicator } from '../../components/bottom-tabs-indicator/bottom-tabs-indicator'
 import {
-  ListVehiclesQuery,
-  useListVehiclesQuery,
+  ListVehiclesV2Query,
+  useListVehiclesV2Query,
 } from '../../graphql/types/schema'
 import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks'
 import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator'
@@ -32,7 +32,7 @@ const { useNavigationOptions, getNavigationOptions } =
   }))
 
 type VehicleListItem = NonNullable<
-  NonNullable<ListVehiclesQuery['vehiclesList']>['vehicleList']
+  NonNullable<ListVehiclesV2Query['vehiclesListV2']>['vehicleList']
 >[0]
 
 type ListItem =
@@ -61,8 +61,6 @@ const Empty = () => (
 const input = {
   page: 1,
   pageSize: 10,
-  showDeregeristered: false,
-  showHistory: false,
 }
 
 export const VehiclesScreen: NavigationFunctionComponent = ({
@@ -77,7 +75,7 @@ export const VehiclesScreen: NavigationFunctionComponent = ({
   const scrollY = useRef(new Animated.Value(0)).current
   const loadingTimeout = useRef<ReturnType<typeof setTimeout>>()
 
-  const res = useListVehiclesQuery({
+  const res = useListVehiclesV2Query({
     variables: {
       input,
     },
@@ -135,7 +133,9 @@ export const VehiclesScreen: NavigationFunctionComponent = ({
   // Extract key of data
   const keyExtractor = useCallback(
     (item: ListItem, index: number) =>
-      item.__typename === 'Skeleton' ? String(item.id) : `${item.vin}${index}`,
+      item.__typename === 'Skeleton'
+        ? String(item.id)
+        : `${item.permno}${index}`,
     [],
   )
 
@@ -147,7 +147,7 @@ export const VehiclesScreen: NavigationFunctionComponent = ({
         __typename: 'Skeleton',
       }))
     }
-    return res?.data?.vehiclesList?.vehicleList || []
+    return res?.data?.vehiclesListV2?.vehicleList || []
   }, [res.data, res.loading])
 
   return (
@@ -184,8 +184,8 @@ export const VehiclesScreen: NavigationFunctionComponent = ({
           if (res.loading) {
             return
           }
-          const pageNumber = res.data?.vehiclesList?.paging?.pageNumber ?? 1
-          const totalPages = res.data?.vehiclesList?.paging?.totalPages ?? 1
+          const pageNumber = res.data?.vehiclesListV2?.paging?.pageNumber ?? 1
+          const totalPages = res.data?.vehiclesListV2?.paging?.totalPages ?? 1
           if (pageNumber >= totalPages) {
             return
           }
@@ -200,11 +200,11 @@ export const VehiclesScreen: NavigationFunctionComponent = ({
               },
               updateQuery(prev, { fetchMoreResult }) {
                 return {
-                  vehiclesList: {
-                    ...fetchMoreResult.vehiclesList,
+                  vehiclesListV2: {
+                    ...fetchMoreResult.vehiclesListV2,
                     vehicleList: [
-                      ...(prev.vehiclesList?.vehicleList ?? []),
-                      ...(fetchMoreResult.vehiclesList?.vehicleList ?? []),
+                      ...(prev.vehiclesListV2?.vehicleList ?? []),
+                      ...(fetchMoreResult.vehiclesListV2?.vehicleList ?? []),
                     ],
                   },
                 }