fixed select driver

Satora1 · Oct 25, 2024 · 91e650b · 91e650b
1 parent 51747fc
commit 91e650b
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 16 deletions.
diff --git a/app/(root)/_layout.tsx b/app/(root)/_layout.tsx
@@ -10,7 +10,6 @@ const Layout=()=> {
             <Stack.Screen name="find-ride" options={{ headerShown: false }} />
             <Stack.Screen name="confirm-ride" options={{ headerShown: false }} />
             <Stack.Screen name="book-ride" options={{ headerShown: false }} />
-
         </Stack>
     );
 }

diff --git a/app/(root)/book-ride.tsx b/app/(root)/book-ride.tsx
@@ -0,0 +1,96 @@
+import {useUser} from "@clerk/clerk-expo";
+import {Image, Text, View} from "react-native";
+
+import {icons} from "@/constants";
+import {formatTime} from "@/lib/utils";
+import {useDriverStore, useLocationStore} from "@/store";
+import RideLayout from "@/components/RideLayout";
+
+const BookRide = () => {
+    const {user} = useUser();
+    const {userAddress, destinationAddress} = useLocationStore();
+    const {drivers, selectedDriver} = useDriverStore();
+
+    const driverDetails = drivers?.filter(
+        (driver) => +driver.id === selectedDriver,
+    )[0];
+    console.log({drivers})//
+console.log({selectedDriver})
+
+    return (
+        <RideLayout title="Book Ride">
+            <>
+                <Text className="text-xl font-JakartaSemiBold mb-3">
+                    Ride Information
+                </Text>
+
+                <View className="flex flex-col w-full items-center justify-center mt-10">
+                    <Image
+                        source={{uri: driverDetails?.profile_image_url}}
+                        className="w-28 h-28 rounded-full"
+                    />
+
+                    <View className="flex flex-row items-center justify-center mt-5 space-x-2">
+                        <Text className="text-lg font-JakartaSemiBold">
+                            {driverDetails?.title}
+                        </Text>
+
+                        <View className="flex flex-row items-center space-x-0.5">
+                            <Image
+                                source={icons.star}
+                                className="w-5 h-5"
+                                resizeMode="contain"
+                            />
+                            <Text className="text-lg font-JakartaRegular">
+                                {driverDetails?.rating}
+                            </Text>
+                        </View>
+                    </View>
+                </View>
+
+                <View
+                    className="flex flex-col w-full items-start justify-center py-3 px-5 rounded-3xl bg-general-600 mt-5">
+                    <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
+                        <Text className="text-lg font-JakartaRegular">Ride Price</Text>
+                        <Text className="text-lg font-JakartaRegular text-[#0CC25F]">
+                            ${driverDetails?.price}
+                        </Text>
+                    </View>
+
+                    <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
+                        <Text className="text-lg font-JakartaRegular">Pickup Time</Text>
+                        <Text className="text-lg font-JakartaRegular">
+                            {formatTime(driverDetails?.time!)}
+                        </Text>
+                    </View>
+
+                    <View className="flex flex-row items-center justify-between w-full py-3">
+                        <Text className="text-lg font-JakartaRegular">Car Seats</Text>
+                        <Text className="text-lg font-JakartaRegular">
+                            {driverDetails?.car_seats}
+                        </Text>
+                    </View>
+                </View>
+
+                <View className="flex flex-col w-full items-start justify-center mt-5">
+                    <View
+                        className="flex flex-row items-center justify-start mt-3 border-t border-b border-general-700 w-full py-3">
+                        <Image source={icons.to} className="w-6 h-6"/>
+                        <Text className="text-lg font-JakartaRegular ml-2">
+                            {userAddress}
+                        </Text>
+                    </View>
+
+                    <View className="flex flex-row items-center justify-start border-b border-general-700 w-full py-3">
+                        <Image source={icons.point} className="w-6 h-6"/>
+                        <Text className="text-lg font-JakartaRegular ml-2">
+                            {destinationAddress}
+                        </Text>
+                    </View>
+                </View>
+            </>
+        </RideLayout>
+    );
+};
+
+export default BookRide;
diff --git a/app/(root)/confirm-ride.tsx b/app/(root)/confirm-ride.tsx
@@ -1,6 +1,7 @@
 import CustomButton from "@/components/CustomButton"
 import DriverCard from "@/components/DriverCard"
 import RideLayout from "@/components/RideLayout"
+import { useDriverStore } from "@/store"
 import { router } from "expo-router"
 import { FlatList, Text, View } from "react-native"
 const drivers = [
@@ -41,17 +42,24 @@ const drivers = [
         "rating": "4.90"
     }
 ]
-const ConfirmRide=()=>{
-return(
-    <RideLayout title="Choose a Driver" snapPoints={["65%","85%"]}>
-<FlatList data={drivers} renderItem={(item)=><DriverCard item={item}/>}
-ListFooterComponent={()=>(
-    <View className="mx-5 mt-10">
-        <CustomButton title="Select Ride" onPress={()=>router.push("/(root)/book-ride")}/>
-    </View>
-)}
-/>
-    </RideLayout>
-)
+const ConfirmRide = () => {
+    const { drivers, selectedDriver, setSelectedDriver } = useDriverStore()
+    return (
+        <RideLayout title="Choose a Driver" snapPoints={["65%", "85%"]}>
+            <FlatList data={drivers} 
+            renderItem={({item}) => 
+            <DriverCard
+             selected={selectedDriver!}
+             setSelected={() => setSelectedDriver(Number(item.id)!)} 
+             item={item}
+               />}
+                ListFooterComponent={() => (
+                    <View className="mx-5 mt-10">
+                        <CustomButton title="Select Ride" onPress={() => router.push("/(root)/book-ride")} />
+                    </View>
+                )}
+            />
+        </RideLayout>
+    )
 }
 export default ConfirmRide
diff --git a/components/DriverCard.tsx b/components/DriverCard.tsx
@@ -6,6 +6,7 @@ import { formatTime } from "@/lib/utils";
 import { DriverCardProps } from "@/types/type";
 
 const DriverCard = ({ item, selected, setSelected }: DriverCardProps) => {
+
   return (
     <TouchableOpacity
       onPress={setSelected}
@@ -49,13 +50,13 @@ const DriverCard = ({ item, selected, setSelected }: DriverCardProps) => {
           </Text>
 
           <Text className="text-sm font-JakartaRegular text-general-800">
-            {item.car_seats} seats
+            {item?.car_seats} seats
           </Text>
         </View>
       </View>
 
       <Image
-        source={{ uri: item.car_image_url }}
+        source={{ uri: item?.car_image_url }}
         className="h-14 w-14"
         resizeMode="contain"
       />

diff --git a/components/map.tsx b/components/map.tsx
@@ -48,6 +48,7 @@ const Map = () => {
 
     const [markers, setMarkers] = useState<MarkerData[]>([])
     useEffect(() => {
+        setDrivers(drivers)
         if (Array.isArray(drivers)) {
             if (!userLatitude || !userLongitude) return
 

diff --git a/types/type.d.ts b/types/type.d.ts
@@ -135,5 +135,5 @@ declare interface DriverStore {
 declare interface DriverCardProps {
   item: MarkerData;
   selected: number;
-  setSelected: () => void;
+  setSelected: (driver_id: number) => void;
 }