diff options
Diffstat (limited to 'driver/src/pages/Home.tsx')
| -rw-r--r-- | driver/src/pages/Home.tsx | 136 |
1 files changed, 86 insertions, 50 deletions
diff --git a/driver/src/pages/Home.tsx b/driver/src/pages/Home.tsx index 5a2d981..37727e7 100644 --- a/driver/src/pages/Home.tsx +++ b/driver/src/pages/Home.tsx @@ -28,46 +28,65 @@ interface IPassengerRequest { dropOff: string, } -interface ITrip { - pickUp: string, - dropOff: string, -} - -function PassengerRequestCard({ passengerName, pickUp, dropOff, status, phoneNumber }: IPassengerRequest) { - return ( - <li className="py-2"> - <p> - <strong>Passenger:</strong> {passengerName} - </p> - <p> - <strong>Phone number:</strong> {phoneNumber} - </p> - <p> - <strong>Status:</strong> {status} - </p> - <p> - <strong>Pickup:</strong> {pickUp} - </p> - <p> - <strong>Dropoff:</strong> {dropOff} - </p> - <div className="flex justify-between mt-2"> - <Button className="text-green-500 border-green-500" variant="outline"> - Accept - </Button> - <Button className="border-red-500 text-red-500" variant="outline"> - Reject - </Button> - </div> - </li> - ) - -} export default function Home() { const [driverData, setDriverData] = useState<IDriver | null | undefined>() - const [rideRequests, setRideRequests] = useState<any[] | undefined>([]) - const [currentTrip, setCurrentTrip] = useState<ITrip>() + const [rideRequests, setRideRequests] = useState<IPassengerRequest[]>([]) + const [currentTrip, setCurrentTrip] = useState<IPassengerRequest>() + const [isLoggedIn, setIsLoggedIn] = useState(true) + + + function PassengerRequestCard({ passengerName, pickUp, dropOff, status, phoneNumber }: IPassengerRequest) { + return ( + <li className="py-2"> + <p> + <strong>Passenger:</strong> {passengerName} + </p> + <p> + <strong>Phone Number:</strong> {phoneNumber} + </p> + <p> + <strong>Status:</strong> {status} + </p> + <p> + <strong>Pickup:</strong> {pickUp} + </p> + <p> + <strong>Dropoff:</strong> {dropOff} + </p> + <div className="flex justify-between mt-2"> + <Button onClick={ + () => { + const newRideReqs = rideRequests.map((request) => { + if (request.phoneNumber === phoneNumber) { + return { ...request, status: 'Accepted' }; + } + return request; + }) + const curTrip = newRideReqs.find((req) => req.phoneNumber == phoneNumber) + setCurrentTrip(curTrip) + setRideRequests(newRideReqs) + } + } + className="text-green-500 border-green-500" variant="outline"> + Accept + </Button> + <Button onClick={() => { + const newRideReqs = rideRequests.map((request) => { + if (request.phoneNumber === phoneNumber) { + return { ...request, status: 'Cancelled' }; + } + return request; + }) + setRideRequests(newRideReqs) + }} className="border-red-500 text-red-500" variant="outline"> + Reject + </Button> + </div> + </li> + ) + + } useEffect(() => { const user = auth.currentUser; @@ -83,7 +102,7 @@ export default function Home() { }, [auth.currentUser, db]); return ( - !auth.currentUser ? <Navigate to="/login" /> : + !isLoggedIn ? <Navigate to="/login" /> : ( <main className="flex flex-col gap-6 p-6 bg-gray-900 text-white min-h-screen"> <header className="flex justify-between items-center"> @@ -96,7 +115,14 @@ export default function Home() { </Badge> </div> <div className="flex gap-4 items-center"> - <Button className="text-black bg-white" variant="outline"> + <Button onClick={ + () => { + console.log("Loging out") + setIsLoggedIn(false) + auth.signOut() + } + } + className="text-black bg-white" variant="outline"> Log Out </Button> </div> @@ -126,6 +152,15 @@ export default function Home() { </CardHeader> <CardContent className="mt-5"> <p> + <strong>Passenger:</strong> {currentTrip?.passengerName} + </p> + <p> + <strong>Phone Number:</strong> {currentTrip?.phoneNumber} + </p> + <p> + <strong>Status:</strong> {currentTrip?.status} + </p> + <p> <strong>Pickup:</strong> {currentTrip?.pickUp} </p> <p> @@ -148,17 +183,18 @@ export default function Home() { </CardHeader> <CardContent className="mt-3"> <ul className="divide-y divide-gray-600"> - {rideRequests?.map((rideReq) => { - return ( - < PassengerRequestCard - passengerName={rideReq?.name} - pickUp={rideReq?.pickUp} - dropOff={rideReq?.dropOff} - phoneNumber={rideReq?.phoneNumber} - status={rideReq?.status} - /> - ) - })} + {rideRequests?.filter((rideReq) => rideReq?.status == "Pending") + .map((rideReq) => { + return ( + < PassengerRequestCard + passengerName={rideReq?.passengerName} + pickUp={rideReq?.pickUp} + dropOff={rideReq?.dropOff} + phoneNumber={rideReq?.phoneNumber} + status={rideReq?.status} + /> + ) + })} </ul> </CardContent> </Card> |