refactor: router.replace to router.push and fix typos

app/(auth)/sign-in.tsx

@@ -27,7 +27,7 @@ const SignIn = () => {
 
       if (signInAttempt.status === "complete") {
         await setActive({ session: signInAttempt.createdSessionId });
-        router.replace("/");
+        router.push("/");
       } else {
         Alert.alert("Error", "Invalid email or password.");
         setForm((prevForm) => ({

app/(auth)/sign-up.tsx

@@ -235,7 +235,7 @@ const SignUp = () => {
 
             <CustomButton
               title="Browse Home"
-              onPress={() => router.replace("/(root)/(tabs)/home")}
+              onPress={() => router.push("/(root)/(tabs)/home")}
               className="mt-5"
             />
           </View>

app/(auth)/welcome.tsx

@@ -15,7 +15,7 @@ const Welcome = () => {
   return (
     <SafeAreaView className="flex h-full items-center justify-between bg-white">
       <TouchableOpacity
-        onPress={() => router.replace("/(auth)/sign-up")}
+        onPress={() => router.push("/(auth)/sign-up")}
         className="w-full flex justify-end items-end p-5"
       >
         <Text className="text-black text-base font-JakartaBold">Skip</Text>
@@ -54,7 +54,7 @@ const Welcome = () => {
       <CustomButton
         onPress={() =>
           isLastSlide
-            ? router.replace("/(auth)/sign-up")
+            ? router.push("/(auth)/sign-up")
             : swiperRef.current?.scrollBy(1)
         }
         title={isLastSlide ? "Get Started" : "Next"}

app/(root)/confirm-ride.tsx

@@ -24,7 +24,7 @@ const ConfirmRide = () => {
           <View className="mx-5 mt-10">
             <CustomButton
               title="Select Ride"
-              onPress={() => router.replace("/(root)/book-ride")}
+              onPress={() => router.push("/(root)/book-ride")}
             />
           </View>
         )}

app/(root)/find-ride.tsx

@@ -42,7 +42,7 @@ const FindRide = () => {
 
       <CustomButton
         title="Find now"
-        onPress={() => router.replace("/(root)/confirm-ride")}
+        onPress={() => router.push("/(root)/confirm-ride")}
         className="mt-5"
       />
     </RideLayout>

components/driver-card.tsx

@@ -24,7 +24,9 @@ export const DriverCard = ({
 
       <View className="flex-1 flex flex-col items-start justify-center mx-3">
         <View className="flex flex-row items-center justify-start mb-1">
-          <Text className="text-lg font-JakartaRegular">{item.title}</Text>
+          <Text className="text-lg font-JakartaRegular">
+            {item.title ?? `${item.first_name} ${item.last_name}`}
+          </Text>
 
           <View className="flex flex-row items-center space-x-1 ml-2">
             <Image source={icons.star} alt="Star" className="w-3.5 h-3.5" />
@@ -45,7 +47,7 @@ export const DriverCard = ({
           </Text>
 
           <Text className="text-sm font-JakartaRegular text-general-800">
-            {formatTime(item.time!)}
+            {formatTime(parseInt(`${item.time}`))}
           </Text>
 
           <Text className="text-sm font-JakartaRegular text-general-800 mx-1">

components/google-text-input.tsx

@@ -64,6 +64,7 @@ export const GoogleTextInput = ({
           language: "en",
         }}
         renderLeftButton={() => (
+          // TODO: replace later with View and remove onPress
           <TouchableOpacity
             onPress={() => {
               handlePress({

components/map.tsx

@@ -1,12 +1,20 @@
 import { useEffect, useState } from "react";
+import { ActivityIndicator, Text, View } from "react-native";
 import MapView, { Marker, PROVIDER_DEFAULT } from "react-native-maps";
+import MapViewDirections from "react-native-maps-directions";
 
-import { calculateRegion, generateMarkersFromData } from "@/lib/map";
-import { useDriverStore, useLocationStore } from "@/store";
-import type { MarkerData } from "@/types/type";
 import { icons } from "@/constants";
+import { useFetch } from "@/lib/fetch";
+import {
+  calculateDriverTimes,
+  calculateRegion,
+  generateMarkersFromData,
+} from "@/lib/map";
+import { useDriverStore, useLocationStore } from "@/store";
+import type { Driver, MarkerData } from "@/types/type";
 
-const drivers = [
+// TODO: Remove mocked drivers later
+const mockedDrivers = [
   {
     id: 1,
     driver_id: 1,
@@ -20,7 +28,6 @@ const drivers = [
     rating: 4.8,
     latitude: 0,
     longitude: 0,
-    title: "",
     price: "45",
     time: 5,
   },
@@ -37,7 +44,6 @@ const drivers = [
     rating: 4.6,
     latitude: 0,
     longitude: 0,
-    title: "",
     price: "45",
     time: 5,
   },
@@ -54,7 +60,6 @@ const drivers = [
     rating: 4.7,
     latitude: 0,
     longitude: 0,
-    title: "",
     price: "45",
     time: 5,
   },
@@ -71,13 +76,14 @@ const drivers = [
     rating: 4.9,
     latitude: 0,
     longitude: 0,
-    title: "",
     price: "45",
     time: 5,
   },
 ];
 
 export const Map = () => {
+  const { data: drivers, loading, error } = useFetch<Driver[]>("/(api)/driver");
+
   const {
     userLatitude,
     userLongitude,
@@ -96,8 +102,6 @@ export const Map = () => {
 
   useEffect(() => {
     if (Array.isArray(drivers)) {
-      setDrivers(drivers);
-
       if (!userLatitude || !userLongitude) return;
 
       const newMarkers = generateMarkersFromData({
@@ -111,6 +115,49 @@ export const Map = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [drivers]);
 
+  useEffect(() => {
+    if (markers.length > 0 && destinationLatitude && destinationLatitude) {
+      // TODO: Uncomment this code block
+
+      /* calculateDriverTimes({
+        markers,
+        userLatitude,
+        userLongitude,
+        destinationLatitude,
+        destinationLongitude,
+      })
+        .then((drivers) => {
+          setDrivers(drivers as MarkerData[]);
+        }) */
+
+      // TODO: Remove this line
+      setDrivers(mockedDrivers);
+    }
+  }, [
+    markers,
+    destinationLatitude,
+    destinationLongitude,
+    userLatitude,
+    userLongitude,
+    setDrivers,
+  ]);
+
+  if (loading || !userLatitude || !userLongitude) {
+    return (
+      <View className="flex justify-between items-center w-full">
+        <ActivityIndicator size="small" color="#000" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View className="flex justify-between items-center w-full">
+        <Text>Error: {error}</Text>
+      </View>
+    );
+  }
+
   return (
     <MapView
       provider={PROVIDER_DEFAULT}
@@ -135,6 +182,34 @@ export const Map = () => {
           }
         />
       ))}
+
+      {destinationLatitude && destinationLongitude && (
+        <>
+          <Marker
+            key="destination"
+            coordinate={{
+              latitude: destinationLatitude,
+              longitude: destinationLongitude,
+            }}
+            title="Destination"
+            image={icons.pin}
+          />
+
+          <MapViewDirections
+            origin={{
+              latitude: userLatitude,
+              longitude: userLongitude,
+            }}
+            destination={{
+              latitude: destinationLatitude,
+              longitude: destinationLongitude,
+            }}
+            apikey={process.env.EXPO_PUBLIC_GOOGLE_API_KEY!}
+            strokeColor="#0286FF"
+            strokeWidth={3}
+          />
+        </>
+      )}
     </MapView>
   );
 };

lib/map.ts

@@ -106,6 +106,7 @@ export const calculateDriverTimes = async ({
         `https://maps.googleapis.com/maps/api/directions/json?origin=${userLatitude},${userLongitude}&destination=${destinationLatitude},${destinationLongitude}&key=${directionsAPI}`,
       );
       const dataToDestination = await responseToDestination.json();
+
       const timeToDestination =
         dataToDestination.routes[0].legs[0].duration.value; // Time in seconds