From b313417609677cf6b8157b15fa0a80d2299145fc Mon Sep 17 00:00:00 2001 From: Sanidhya Kumar Verma Date: Fri, 30 Aug 2024 12:18:27 +0000 Subject: [PATCH] home page initial ui implemented --- app/(api)/user+api.ts | 4 +- app/(auth)/sign-in.tsx | 2 +- app/(auth)/sign-up.tsx | 8 +- app/(root)/(tabs)/home.tsx | 200 ++++++++++++++++++++++++++++++- app/_layout.tsx | 3 + components/google-text-input.tsx | 16 +++ components/map.tsx | 9 ++ components/ride-card.tsx | 99 +++++++++++++++ environment.d.ts | 3 + lib/utils.ts | 46 +++++++ types/type.d.ts | 2 +- 11 files changed, 379 insertions(+), 13 deletions(-) create mode 100644 components/google-text-input.tsx create mode 100644 components/map.tsx create mode 100644 components/ride-card.tsx create mode 100644 lib/utils.ts diff --git a/app/(api)/user+api.ts b/app/(api)/user+api.ts index 10c5518..8bfbcfd 100644 --- a/app/(api)/user+api.ts +++ b/app/(api)/user+api.ts @@ -10,7 +10,7 @@ export async function POST(req: Request) { error: "Missing required fields!", }, { - status: 400, + status: 404, }, ); } @@ -33,6 +33,6 @@ export async function POST(req: Request) { } catch (error) { console.log(error); - return Response.json({ error }); + return Response.json({ error }, { status: 500 }); } } diff --git a/app/(auth)/sign-in.tsx b/app/(auth)/sign-in.tsx index e9b0e17..4512c65 100644 --- a/app/(auth)/sign-in.tsx +++ b/app/(auth)/sign-in.tsx @@ -99,7 +99,7 @@ const SignIn = () => { Don't have an account? Sign up diff --git a/app/(auth)/sign-up.tsx b/app/(auth)/sign-up.tsx index f99e069..020d3d0 100644 --- a/app/(auth)/sign-up.tsx +++ b/app/(auth)/sign-up.tsx @@ -30,6 +30,8 @@ const SignUp = () => { try { await signUp.create({ + firstName: form.name, + lastName: "", emailAddress: form.email, password: form.password, }); @@ -121,7 +123,7 @@ const SignUp = () => { name: value, })) } - autoCapitalize="sentences" + autoCapitalize="words" /> { Already have an account? Sign in @@ -228,7 +230,7 @@ const SignUp = () => { - You've succesfully verified your accound. + You've succesfully verified your account. { const { user } = useUser(); + const isLoading = false; + + const handleSignOut = () => {}; + const handleDestinationPress = () => {}; return ( - - - Hello {user?.emailAddresses[0].emailAddress} - + + } + className="px-5" + keyboardShouldPersistTaps="handled" + contentContainerStyle={{ + paddingBottom: 100, + }} + ListEmptyComponent={() => ( + + {!isLoading ? ( + <> + No recent rides found + No recent rides found. + + ) : ( + + )} + + )} + ListHeaderComponent={() => ( + <> + + + Welcome{" "} + {user?.firstName || user?.emailAddresses[0].emailAddress} 👋 + + + + Logout + + + + + + + Your current location + + + + + + + + Recent Rides + + + )} + /> ); }; diff --git a/app/_layout.tsx b/app/_layout.tsx index dd15590..9cedad9 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -2,6 +2,7 @@ import { ClerkProvider, ClerkLoaded } from "@clerk/clerk-expo"; import { useFonts } from "expo-font"; import { Stack } from "expo-router"; import * as SplashScreen from "expo-splash-screen"; +import { StatusBar } from "expo-status-bar"; import { useEffect } from "react"; import "react-native-reanimated"; @@ -43,6 +44,8 @@ const RootLayout = () => { + + ); diff --git a/components/google-text-input.tsx b/components/google-text-input.tsx new file mode 100644 index 0000000..e7db93b --- /dev/null +++ b/components/google-text-input.tsx @@ -0,0 +1,16 @@ +import type { GoogleInputProps } from "@/types/type"; +import { Text, View } from "react-native"; + +export const GoogleTextInput = ({ + icon, + initialLocation, + containerStyles, + textInputBackgroundColor, + handlePress, +}: GoogleInputProps) => ( + + Google Text Input + +); diff --git a/components/map.tsx b/components/map.tsx new file mode 100644 index 0000000..050927a --- /dev/null +++ b/components/map.tsx @@ -0,0 +1,9 @@ +import { Text, View } from "react-native"; + +export const Map = () => { + return ( + + Map + + ); +}; diff --git a/components/ride-card.tsx b/components/ride-card.tsx new file mode 100644 index 0000000..6cc87b7 --- /dev/null +++ b/components/ride-card.tsx @@ -0,0 +1,99 @@ +import { Image, Text, View } from "react-native"; + +import { icons } from "@/constants"; +import { formatDate, formatTime } from "@/lib/utils"; +import type { Ride } from "@/types/type"; + +export const RideCard = ({ ride }: { ride: Ride }) => { + const { + destination_latitude, + destination_longitude, + origin_address, + destination_address, + created_at, + ride_time, + driver, + payment_status, + } = ride; + + return ( + + + + + + + + Origin + + + {origin_address} + + + + + Destination + + + {destination_address} + + + + + + + + + Date & Time + + + + {formatDate(created_at)}, {formatTime(ride_time)} + + + + + + Driver + + + + {driver.first_name} {driver.last_name} + + + + + + Car Seats + + + + {driver.car_seats} + + + + + + Payment Status + + + + {payment_status} + + + + + + ); +}; diff --git a/environment.d.ts b/environment.d.ts index 76bd0f0..2da04ca 100644 --- a/environment.d.ts +++ b/environment.d.ts @@ -9,6 +9,9 @@ declare global { // postgres db url (neon db) DATABASE_URL: string; + + // geoapify api key + EXPO_PUBLIC_GEOAPIFY_API_KEY: string; } } } diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 0000000..2ff6c91 --- /dev/null +++ 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 = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ]; + const month = monthNames[date.getMonth()]; + const year = date.getFullYear(); + + return `${day < 10 ? "0" + day : day} ${month} ${year}`; +} diff --git a/types/type.d.ts b/types/type.d.ts index a57b80f..44c4ab5 100644 --- a/types/type.d.ts +++ b/types/type.d.ts @@ -65,7 +65,7 @@ declare interface ButtonProps extends TouchableOpacityProps { declare interface GoogleInputProps { icon?: string; initialLocation?: string; - containerStyle?: string; + containerStyles?: string; textInputBackgroundColor?: string; handlePress: ({ latitude,