fix: address option migration to react query v5

CP23PL1 · Feb 19, 2024 · 57c027c · 57c027c
1 parent 2363adb
commit 57c027c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 25 deletions.
diff --git a/app/(protected)/index.tsx b/app/(protected)/index.tsx
@@ -87,28 +87,30 @@ function Home() {
       <View row>
         <Card
           row
-          center
           padding-15
           containerStyle={{ width: '100%', elevation: 20, shadowColor: Colors.black }}
         >
-          <View row centerV gap-24>
-            <Image
-              borderRadius={100}
-              style={{ height: 70, width: 70 }}
-              src={driverInfo.profileImage}
-            />
-            <View>
-              <Text bodyB>
-                {driverInfo.firstName} {driverInfo.lastName}
-              </Text>
-              <Text color="gray">{driverInfo.vehicle.plate}</Text>
-              <View row gap-5 centerV>
-                <AntDesign name="enviroment" size={18} color={Colors.red30} />
-                <Text color="gray">
-                  {driverInfo.serviceSpot ? driverInfo.serviceSpot.name : 'ยังไม่มีซุ้มวิน'}
+          <View row centerV spread width="100%" paddingH-4>
+            <View row gap-12>
+              <Image
+                borderRadius={100}
+                style={{ height: 70, width: 70 }}
+                src={driverInfo.profileImage}
+              />
+              <View>
+                <Text bodyB>
+                  {driverInfo.firstName} {driverInfo.lastName}
                 </Text>
+                <Text color="gray">{driverInfo.vehicle.plate}</Text>
+                <View row gap-5 centerV>
+                  <AntDesign name="enviroment" size={18} color={Colors.red30} />
+                  <Text color="gray">
+                    {driverInfo.serviceSpot ? driverInfo.serviceSpot.name : 'ยังไม่มีซุ้มวิน'}
+                  </Text>
+                </View>
               </View>
             </View>
+
             <Text>{driverInfo.no ? <Text h1B>{driverInfo.no}</Text> : ''}</Text>
           </View>
         </Card>

diff --git a/hooks/useAddressOptions.ts b/hooks/useAddressOptions.ts
@@ -1,25 +1,24 @@
-import { GetNextPageParamFunction, useInfiniteQuery } from '@tanstack/react-query'
+import { useInfiniteQuery } from '@tanstack/react-query'
 import { addressesApi } from '../apis/addresses'
 import { AddressInfoResponse } from '../apis/addresses/type'
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 
 export type AddressOptionFilter = {
   provinceId: number
   districtId: number
 }
 
 export const useAddressOptions = (filter: AddressOptionFilter) => {
-  // TODO: Implement this function
-  const getNextPageParam: GetNextPageParamFunction<number, AddressInfoResponse> = (lastPage) => {
+  const getNextPageParam = useCallback((lastPage: AddressInfoResponse) => {
     const nextPage = lastPage.meta.currentPage + 1
-    return nextPage < lastPage.meta.totalPages ? nextPage : undefined
-  }
+    return nextPage <= lastPage.meta.totalPages ? nextPage : undefined
+  }, [])
 
   const { data: provinceQuery, fetchNextPage: fetchNextProvinces } = useInfiniteQuery({
     queryKey: ['province-options'],
     queryFn: ({ pageParam }) => addressesApi.getProvinces({ page: pageParam }),
     getNextPageParam,
-    initialPageParam: 1,
+    initialPageParam: 0,
   })
 
   const {
@@ -30,7 +29,7 @@ export const useAddressOptions = (filter: AddressOptionFilter) => {
     queryKey: ['district-options'],
     queryFn: ({ pageParam }) => addressesApi.getDistricts(filter!.provinceId, { page: pageParam }),
     getNextPageParam,
-    initialPageParam: 1,
+    initialPageParam: 0,
     enabled: !!filter?.provinceId,
   })
 
@@ -43,7 +42,7 @@ export const useAddressOptions = (filter: AddressOptionFilter) => {
     queryFn: ({ pageParam }) =>
       addressesApi.getSubDistricts(filter!.districtId, { page: pageParam }),
     getNextPageParam,
-    initialPageParam: 1,
+    initialPageParam: 0,
     enabled: !!filter?.districtId,
   })