From e97dbb11b30d0fe51b2ca1660e9f0d27a99a73e3 Mon Sep 17 00:00:00 2001 From: omagdy7 Date: Fri, 22 Dec 2023 18:59:16 +0200 Subject: Added most of the logic on the driver side --- driver/src/pages/Home.tsx | 150 +++++++++++++++++++++++++++++++ driver/src/pages/LandingPage.tsx | 45 ++++++++++ driver/src/pages/Login.tsx | 92 +++++++++++--------- driver/src/pages/SignUp.tsx | 184 +++++++++++++++++++++++++++++---------- 4 files changed, 383 insertions(+), 88 deletions(-) create mode 100644 driver/src/pages/Home.tsx create mode 100644 driver/src/pages/LandingPage.tsx (limited to 'driver/src/pages') diff --git a/driver/src/pages/Home.tsx b/driver/src/pages/Home.tsx new file mode 100644 index 0000000..81f1fb9 --- /dev/null +++ b/driver/src/pages/Home.tsx @@ -0,0 +1,150 @@ +import RideDialog from "@/components/RideDialog" +import { Avatar } from "@/components/ui/avatar" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { CardTitle, CardHeader, CardContent, Card } from "@/components/ui/card" +import { auth, db } from "@/firebase/firebase_config" +import { fetchUserDetails } from "@/utils/fetchUserDetails" +import { DocumentData, collection, doc, getDoc, getDocs, query, where } from "firebase/firestore" +import { useEffect, useState } from "react" +import { Navigate } from "react-router-dom" + +interface IDriver { + uid: string, + name: string, + phoneNumber: string, + plateNumber: string, + carBrand: string, + carModel: string, + carColor: string, +} + +interface IPassengerRequest { + passengerName: string, + pickUp: string, + dropOff: string, +} + +interface ITrip { + pickUp: string, + dropOff: string, +} + +function PassengerRequestCard({ passengerName, pickUp, dropOff }: IPassengerRequest) { + return ( +
  • +

    + Passenger: {passengerName} +

    +

    + Pickup: {pickUp} +

    +

    + Dropoff: {dropOff} +

    +
    + + +
    +
    • + ) + +} + +export default function Home() { + const [driverData, setDriverData] = useState() + const [currentTrip, setCurrentTrip] = useState() + + + useEffect(() => { + async function fetchData() { + const data: IDriver | null | undefined = await fetchUserDetails(); + setDriverData(data) + } + fetchData() + }, [auth.currentUser, db]); + + return ( + !auth.currentUser ? : + ( +
    +
    +
    +

    Driver Dashboard

    + +

    {driverData?.name}

    + + Active Driver + +
    +
    + +
    +
    +
    + + + Vehicle Details + + +
      +
    • + Brand: {driverData?.carBrand} +
      • +
    • + Model: {driverData?.carModel} +
      • +
    • + License Plate: {driverData?.plateNumber} +
      • +
    +     +     + + + Current Trip + + +

    + Pickup: {currentTrip?.pickUp} +

    +

    + Dropoff: {currentTrip?.dropOff} +

    + + + +     +     + + + Passenger Requests + + +
      + +
    +     +     +
    +
    + +
    +
    +
    +
    + ) + ) +} diff --git a/driver/src/pages/LandingPage.tsx b/driver/src/pages/LandingPage.tsx new file mode 100644 index 0000000..ec8b364 --- /dev/null +++ b/driver/src/pages/LandingPage.tsx @@ -0,0 +1,45 @@ +import { Button } from "@/components/ui/button" +import { CardTitle, CardDescription, CardHeader, CardContent, Card } from "@/components/ui/card" +import { Navigate, redirect } from "react-router-dom"; +import { Badge } from "@/components/ui/badge" + +export default function LandingPage() { + if (true) { + return + } + return ( +
    +
    +

    Carpool

    +
    + + +
    +
    +
    + + + Welcome to Carpool + Join our community and share your journey. + + +

    + Find or offer rides, Made by students for students ❤️ ❤️ +

    +     +     +
    + +
    +
    +
    +

    © 2023 Carpool. All rights reserved.

    +
    +
    + ) +} + diff --git a/driver/src/pages/Login.tsx b/driver/src/pages/Login.tsx index 0605dc8..1841d03 100644 --- a/driver/src/pages/Login.tsx +++ b/driver/src/pages/Login.tsx @@ -1,8 +1,10 @@ import { useState } from 'react'; import { auth } from '../firebase/firebase_config'; import { signInWithEmailAndPassword } from 'firebase/auth'; +import { Navigate, redirect } from "react-router-dom"; const Login = () => { + const [isLoggedIn, setIsLoggedIn] = useState(false) const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); @@ -10,7 +12,8 @@ const Login = () => { try { const userCredential = await signInWithEmailAndPassword(auth, email, password); console.log('User logged in:', userCredential.user); - // TODO: redirect the user to another page or perform some other action + setIsLoggedIn(true) + } catch (error) { console.error('Error logging in:', error); // TODO: Handle error messages or display them to the user. @@ -18,48 +21,53 @@ const Login = () => { }; return ( -
    -
    -

    Login

    -
    -
    - - setEmail(e.target.value)} - /> -
    -
    - - setPassword(e.target.value)} - /> -
    -
    - + isLoggedIn ? ( + + ) : + ( +
    +
    +

    Login

    + +
    + + setEmail(e.target.value)} + /> +
    +
    + + setPassword(e.target.value)} + /> +
    +
    + +
    +
    - -
    -
    +
    + ) ); }; diff --git a/driver/src/pages/SignUp.tsx b/driver/src/pages/SignUp.tsx index 3ee09dc..b73d810 100644 --- a/driver/src/pages/SignUp.tsx +++ b/driver/src/pages/SignUp.tsx @@ -1,11 +1,24 @@ +import { Label } from "@/components/ui/label" +import { Input } from "@/components/ui/input" +import { Button } from "@/components/ui/button" import { useState, useEffect } from 'react'; -import { auth } from '../firebase/firebase_config'; +import { auth, db } from '../firebase/firebase_config'; import { createUserWithEmailAndPassword } from 'firebase/auth'; - +import { Navigate, redirect } from "react-router-dom"; +import { addDoc, collection } from "firebase/firestore"; const SignUp = () => { - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); + + const [isSignedUp, setIsSignedUp] = useState(false) + + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [name, setName] = useState('') + const [phoneNumber, setPhoneNumber] = useState('') + const [carBrand, setCarBrand] = useState('') + const [carModel, setCarModel] = useState('') + const [carColor, setCarColor] = useState('') + const [plateNumber, setPlateNumber] = useState('') useEffect(() => { const unsubscribe = auth.onAuthStateChanged((user) => { @@ -28,7 +41,20 @@ const SignUp = () => { try { // The onAuthStateChanged listener will handle the signed-in user state. const userCredential = await createUserWithEmailAndPassword(auth, email, password); + const usersCollection = collection(db, 'users'); + const userUid = userCredential.user.uid; // Get the user's UID + console.log(userUid, name, phoneNumber, carBrand, carModel, carColor, plateNumber) + addDoc(usersCollection, { + uid: userUid, + name: name, + phoneNumber: phoneNumber, + carBrand: carBrand, + carModel: carModel, + carColor: carColor, + plateNumber: plateNumber, + }) console.log('User signed up:', userCredential.user); + setIsSignedUp(true) } catch (error) { // TODO: Handle error messages or display them to the user. console.error('Error signing up:', error); @@ -36,48 +62,114 @@ const SignUp = () => { }; return ( -
    -
    -

    Sign Up

    -
    -
    - - setEmail(e.target.value)} - /> -
    -
    - - setPassword(e.target.value)} - /> -
    -
    - -
    -
    -
    -
    + isSignedUp ? + () : + (
    +
    +

    Sign Up

    +
    +
    + + setEmail(e.target.value)} + /> +
    +
    + + setPassword(e.target.value)} + /> +
    +
    + + setName(e.target.value)} + /> +
    +
    + + setPhoneNumber(e.target.value)} + /> +
    +
    + + setCarBrand(e.target.value)} + /> +
    +
    + + setCarModel(e.target.value)} + /> +
    +
    + + setCarColor(e.target.value)} + /> +
    +
    + + setPlateNumber(e.target.value)} + /> +
    +
    + +
    +
    +
    +
    ) ); }; -- cgit v1.2.3