fix: renaming children to items

island-is · Sep 6, 2024 · 50df0df · 50df0df
1 parent ccf0cd9
commit 50df0df
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 29 deletions.
diff --git a/apps/native/app/src/screens/home/air-discount-module.tsx b/apps/native/app/src/screens/home/air-discount-module.tsx
@@ -76,7 +76,7 @@ const AirDiscountModule = React.memo(
 
     const count = discounts?.length ?? 0
 
-    const children = discounts?.slice(0, 3).map(({ discountCode, user }) => (
+    const items = discounts?.slice(0, 3).map(({ discountCode, user }) => (
       <AirDiscountCard
         key={`loftbru-item-${discountCode}`}
         name={user.name}
@@ -150,8 +150,8 @@ const AirDiscountModule = React.memo(
                   link={null}
                 />
               )}
-              {count === 1 && children?.slice(0, 1)}
-              {count >= 2 && <ViewPager>{children}</ViewPager>}
+              {count === 1 && items}
+              {count >= 2 && <ViewPager>{items}</ViewPager>}
             </>
           )}
         </Host>

diff --git a/apps/native/app/src/screens/home/applications-module.tsx b/apps/native/app/src/screens/home/applications-module.tsx
@@ -71,7 +71,7 @@ const ApplicationsModule = React.memo(
       return null
     }
 
-    const children = applications.slice(0, 3).map((application) => (
+    const items = applications.slice(0, 3).map((application) => (
       <StatusCard
         key={application.id}
         title={application.name ?? ''}
@@ -168,8 +168,8 @@ const ApplicationsModule = React.memo(
                 }
               />
             )}
-            {count === 1 && children.slice(0, 1)}
-            {count >= 2 && <ViewPager>{children}</ViewPager>}
+            {count === 1 && items}
+            {count >= 2 && <ViewPager>{items}</ViewPager>}
           </>
         )}
       </SafeAreaView>

diff --git a/apps/native/app/src/screens/home/licenses-module.tsx b/apps/native/app/src/screens/home/licenses-module.tsx
@@ -121,7 +121,7 @@ const LicensesModule = React.memo(
 
     const allLicenses = [...(licenses ?? []), ...(passport ?? [])]
 
-    const children = allLicenses
+    const items = allLicenses
       .filter(
         (license) =>
           license.__typename === 'GenericUserLicense' ||
@@ -200,8 +200,8 @@ const LicensesModule = React.memo(
                   link={null}
                 />
               )}
-              {count === 1 && children?.slice(0, 1)}
-              {count >= 2 && <ViewPager>{children}</ViewPager>}
+              {count === 1 && items}
+              {count >= 2 && <ViewPager>{items}</ViewPager>}
             </>
           )}
         </Host>

diff --git a/apps/native/app/src/screens/home/vehicles-module.tsx b/apps/native/app/src/screens/home/vehicles-module.tsx
@@ -7,7 +7,7 @@ import {
   GeneralCardSkeleton,
 } from '@ui'
 
-import React from 'react'
+import React, { useMemo } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Image, SafeAreaView, TouchableOpacity } from 'react-native'
 import styled, { useTheme } from 'styled-components/native'
@@ -58,30 +58,37 @@ const VehiclesModule = React.memo(
   ({ data, loading, error }: VehiclesModuleProps) => {
     const theme = useTheme()
     const intl = useIntl()
-    if (error && !data) {
-      return null
-    }
 
     const vehicles = data?.vehiclesList?.vehicleList
 
     // Reorder vehicles so vehicles that require mileage registration are shown first
-    const reorderedVehicles = vehicles
-      ? [...vehicles]?.sort((a, b) => {
-          if (a.requiresMileageRegistration && !b.requiresMileageRegistration) {
-            return -1
-          } else if (
-            !a.requiresMileageRegistration &&
-            b.requiresMileageRegistration
-          ) {
-            return 1
-          }
-          return 0
-        })
-      : vehicles
+    const reorderedVehicles = useMemo(
+      () =>
+        vehicles
+          ? [...vehicles]?.sort((a, b) => {
+              if (
+                a.requiresMileageRegistration &&
+                !b.requiresMileageRegistration
+              ) {
+                return -1
+              } else if (
+                !a.requiresMileageRegistration &&
+                b.requiresMileageRegistration
+              ) {
+                return 1
+              }
+              return 0
+            })
+          : vehicles,
+      [vehicles],
+    )
+    if (error && !data) {
+      return null
+    }
 
     const count = reorderedVehicles?.length ?? 0
 
-    const children = reorderedVehicles?.slice(0, 3).map((vehicle, index) => (
+    const items = reorderedVehicles?.slice(0, 3).map((vehicle, index) => (
       <VehicleItem
         key={vehicle.permno}
         item={vehicle}
@@ -150,8 +157,8 @@ const VehiclesModule = React.memo(
                   link={null}
                 />
               )}
-              {count === 1 && children?.slice(0, 1)}
-              {count >= 2 && <ViewPager>{children}</ViewPager>}
+              {count === 1 && items}
+              {count >= 2 && <ViewPager>{items}</ViewPager>}
             </>
           )}
         </Host>