driver site

Satora1 · Oct 3, 2024 · 203be0c · 203be0c
1 parent 39ff369
commit 203be0c
Show file tree

Hide file tree

Showing 5 changed files with 342 additions and 125 deletions.
diff --git a/.env.local b/.env.local
@@ -1,3 +1,4 @@
 EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cHJvbXB0LW1hZ2dvdC02MC5jbGVyay5hY2NvdW50cy5kZXYk
 DATABASE_URL=postgresql://ryde_owner:0OwLX1QrRPqT@ep-rapid-water-a2owt30g.eu-central-1.aws.neon.tech/ryde?sslmode=require
-EXPO_PUBLIC_SERVER_URL=https://uber.dev/
+EXPO_PUBLIC_SERVER_URL=https://uber.dev/
+EXPO_PUBLIC_GEOAPIFY_API_KEY=3cee4c13411d467c8357a8eca4aa99d7
diff --git a/app/(root)/(tabs)/home.tsx b/app/(root)/(tabs)/home.tsx
@@ -1,26 +1,116 @@
-import { SignedIn, SignedOut, useUser } from '@clerk/clerk-expo'
-import { Link } from 'expo-router'
-import { Text, View } from 'react-native'
+import RideCard from '@/components/RideCard'
+import { useUser } from '@clerk/clerk-expo'
+import { FlatList } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-
+const recentRides = [
+  [
+    {
+      "ride_id": "1",
+      "origin_address": "Kathmandu, Nepal",
+      "destination_address": "Pokhara, Nepal",
+      "origin_latitude": "27.717245",
+      "origin_longitude": "85.323961",
+      "destination_latitude": "28.209583",
+      "destination_longitude": "83.985567",
+      "ride_time": 391,
+      "fare_price": "19500.00",
+      "payment_status": "paid",
+      "driver_id": 2,
+      "user_id": "1",
+      "created_at": "2024-08-12 05:19:20.620007",
+      "driver": {
+        "driver_id": "2",
+        "first_name": "David",
+        "last_name": "Brown",
+        "profile_image_url": "https://ucarecdn.com/6ea6d83d-ef1a-483f-9106-837a3a5b3f67/-/preview/1000x666/",
+        "car_image_url": "https://ucarecdn.com/a3872f80-c094-409c-82f8-c9ff38429327/-/preview/930x932/",
+        "car_seats": 5,
+        "rating": "4.60"
+      }
+    },
+    {
+      "ride_id": "2",
+      "origin_address": "Jalkot, MH",
+      "destination_address": "Pune, Maharashtra, India",
+      "origin_latitude": "18.609116",
+      "origin_longitude": "77.165873",
+      "destination_latitude": "18.520430",
+      "destination_longitude": "73.856744",
+      "ride_time": 491,
+      "fare_price": "24500.00",
+      "payment_status": "paid",
+      "driver_id": 1,
+      "user_id": "1",
+      "created_at": "2024-08-12 06:12:17.683046",
+      "driver": {
+        "driver_id": "1",
+        "first_name": "James",
+        "last_name": "Wilson",
+        "profile_image_url": "https://ucarecdn.com/dae59f69-2c1f-48c3-a883-017bcf0f9950/-/preview/1000x666/",
+        "car_image_url": "https://ucarecdn.com/a2dc52b2-8bf7-4e49-9a36-3ffb5229ed02/-/preview/465x466/",
+        "car_seats": 4,
+        "rating": "4.80"
+      }
+    },
+    {
+      "ride_id": "3",
+      "origin_address": "Zagreb, Croatia",
+      "destination_address": "Rijeka, Croatia",
+      "origin_latitude": "45.815011",
+      "origin_longitude": "15.981919",
+      "destination_latitude": "45.327063",
+      "destination_longitude": "14.442176",
+      "ride_time": 124,
+      "fare_price": "6200.00",
+      "payment_status": "paid",
+      "driver_id": 1,
+      "user_id": "1",
+      "created_at": "2024-08-12 08:49:01.809053",
+      "driver": {
+        "driver_id": "1",
+        "first_name": "James",
+        "last_name": "Wilson",
+        "profile_image_url": "https://ucarecdn.com/dae59f69-2c1f-48c3-a883-017bcf0f9950/-/preview/1000x666/",
+        "car_image_url": "https://ucarecdn.com/a2dc52b2-8bf7-4e49-9a36-3ffb5229ed02/-/preview/465x466/",
+        "car_seats": 4,
+        "rating": "4.80"
+      }
+    },
+    {
+      "ride_id": "4",
+      "origin_address": "Okayama, Japan",
+      "destination_address": "Osaka, Japan",
+      "origin_latitude": "34.655531",
+      "origin_longitude": "133.919795",
+      "destination_latitude": "34.693725",
+      "destination_longitude": "135.502254",
+      "ride_time": 159,
+      "fare_price": "7900.00",
+      "payment_status": "paid",
+      "driver_id": 3,
+      "user_id": "1",
+      "created_at": "2024-08-12 18:43:54.297838",
+      "driver": {
+        "driver_id": "3",
+        "first_name": "Michael",
+        "last_name": "Johnson",
+        "profile_image_url": "https://ucarecdn.com/0330d85c-232e-4c30-bd04-e5e4d0e3d688/-/preview/826x822/",
+        "car_image_url": "https://ucarecdn.com/289764fb-55b6-4427-b1d1-f655987b4a14/-/preview/930x932/",
+        "car_seats": 4,
+        "rating": "4.70"
+      }
+    }
+  ]
+]
 export default function Page() {
   const { user } = useUser()
 
   return (
-    <SafeAreaView>
-    <View>
-      <SignedIn>
-        <Text>Hello {user?.emailAddresses[0].emailAddress}</Text>
-      </SignedIn>
-      <SignedOut>
-        <Link href="/sign-in">
-          <Text>Sign In</Text>
-        </Link>
-        <Link href="/sign-up">
-          <Text>Sign Up</Text>
-        </Link>
-      </SignedOut>
-    </View>
+    <SafeAreaView className='bg-general-500'>
+      <FlatList
+        data={recentRides?.slice(0, 5)}
+        renderItem={({ item }) => <RideCard ride={item} />}
+      />
     </SafeAreaView>
   )
 }
diff --git a/components/RideCard.tsx b/components/RideCard.tsx
@@ -0,0 +1,80 @@
+import { Image, Text, View } from "react-native";
+
+import { icons } from "@/constants";
+import { formatDate, formatTime } from "@/lib/utils";
+import { Ride } from "@/types/type";
+
+const RideCard = ({ ride }: { ride: Ride }) => {
+  return (
+    <View className="flex flex-row items-center justify-center bg-white rounded-lg shadow-sm shadow-neutral-300 mb-3">
+      <View className="flex flex-col items-start justify-center p-3">
+        <View className="flex flex-row items-center justify-between">
+          <Image
+            source={{
+              uri: `https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=400&center=lonlat:${ride.destination_longitude},${ride.destination_latitude}&zoom=14&apiKey=${process.env.EXPO_PUBLIC_GEOAPIFY_API_KEY}`,
+            }}
+            className="w-[80px] h-[90px] rounded-lg"
+          />
+
+          <View className="flex flex-col mx-5 gap-y-5 flex-1">
+            <View className="flex flex-row items-center gap-x-2">
+              <Image source={icons.to} className="w-5 h-5" />
+              <Text className="text-md font-JakartaMedium" numberOfLines={1}>
+                {ride.origin_address}
+              </Text>
+            </View>
+
+            <View className="flex flex-row items-center gap-x-2">
+              <Image source={icons.point} className="w-5 h-5" />
+              <Text className="text-md font-JakartaMedium" numberOfLines={1}>
+                {ride.destination_address}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View className="flex flex-col w-full mt-5 bg-general-500 rounded-lg p-3 items-start justify-center">
+          <View className="flex flex-row items-center w-full justify-between mb-5">
+            <Text className="text-md font-JakartaMedium text-gray-500">
+              Date & Time
+            </Text>
+            <Text className="text-md font-JakartaBold" numberOfLines={1}>
+              {formatDate(ride.created_at)}, {formatTime(ride.ride_time)}
+            </Text>
+          </View>
+
+          <View className="flex flex-row items-center w-full justify-between mb-5">
+            <Text className="text-md font-JakartaMedium text-gray-500">
+              Driver
+            </Text>
+            <Text className="text-md font-JakartaBold">
+              {ride.driver.first_name} {ride.driver.last_name}
+            </Text>
+          </View>
+
+          <View className="flex flex-row items-center w-full justify-between mb-5">
+            <Text className="text-md font-JakartaMedium text-gray-500">
+              Car Seats
+            </Text>
+            <Text className="text-md font-JakartaBold">
+              {ride.driver.car_seats}
+            </Text>
+          </View>
+
+          <View className="flex flex-row items-center w-full justify-between">
+            <Text className="text-md font-JakartaMedium text-gray-500">
+              Payment Status
+            </Text>
+            <Text
+              className={`text-md capitalize font-JakartaBold ${ride.payment_status === "paid" ? "text-green-500" : "text-red-500"}`}
+            >
+              {ride.payment_status}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default RideCard;
diff --git a/lib/utils.ts b/lib/utils.ts
@@ -0,0 +1,46 @@
+import {Ride} from "@/types/type";
+
+export const sortRides = (rides: Ride[]): Ride[] => {
+    const result = rides.sort((a, b) => {
+        const dateA = new Date(`${a.created_at}T${a.ride_time}`);
+        const dateB = new Date(`${b.created_at}T${b.ride_time}`);
+        return dateB.getTime() - dateA.getTime();
+    });
+
+    return result.reverse();
+};
+
+export function formatTime(minutes: number): string {
+    const formattedMinutes = +minutes?.toFixed(0) || 0;
+
+    if (formattedMinutes < 60) {
+        return `${minutes} min`;
+    } else {
+        const hours = Math.floor(formattedMinutes / 60);
+        const remainingMinutes = formattedMinutes % 60;
+        return `${hours}h ${remainingMinutes}m`;
+    }
+}
+
+export function formatDate(dateString: string): string {
+    const date = new Date(dateString);
+    const day = date.getDate();
+    const monthNames = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+    ];
+    const month = monthNames[date.getMonth()];
+    const year = date.getFullYear();
+
+    return `${day < 10 ? "0" + day : day} ${month} ${year}`;
+}