summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authoromagdy7 <omar.professional8777@gmail.com>2023-12-22 21:02:11 +0200
committeromagdy7 <omar.professional8777@gmail.com>2023-12-22 21:02:11 +0200
commitd34ed45d110be3df1436519594cf6cfd55a55ead (patch)
treeafd73deacc781a67c6edfa6194097c505dd783d2
parent2548273d89e55efc24a2df101b621b06a6a83313 (diff)
downloadcarpool-d34ed45d110be3df1436519594cf6cfd55a55ead.tar.xz
carpool-d34ed45d110be3df1436519594cf6cfd55a55ead.zip
Drive side done.
-rw-r--r--driver/index.html2
-rw-r--r--driver/src/App.tsx5
-rw-r--r--driver/src/components/RideDialog.tsx13
-rw-r--r--driver/src/pages/Home.tsx136
-rw-r--r--driver/src/utils/fetchRideRequests.ts2
5 files changed, 88 insertions, 70 deletions
diff --git a/driver/index.html b/driver/index.html
index e4b78ea..5fc871e 100644
--- a/driver/index.html
+++ b/driver/index.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Vite + React + TS</title>
+ <title>Carpool</title>
</head>
<body>
<div id="root"></div>
diff --git a/driver/src/App.tsx b/driver/src/App.tsx
index 9b3bb03..d0fa20f 100644
--- a/driver/src/App.tsx
+++ b/driver/src/App.tsx
@@ -1,13 +1,8 @@
-import RideDialog from "./components/RideDialog"
-import Home from "./pages/Home"
import LandingPage from "./pages/LandingPage"
-
function App() {
return (
<LandingPage />
- // <Home />
- // <RideDialog />
)
}
diff --git a/driver/src/components/RideDialog.tsx b/driver/src/components/RideDialog.tsx
index ff3aa98..e57fc89 100644
--- a/driver/src/components/RideDialog.tsx
+++ b/driver/src/components/RideDialog.tsx
@@ -14,19 +14,6 @@ import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useState } from "react"
import { useToast } from "./ui/use-toast"
-import { ToastAction } from "./ui/toast"
-
-interface RideOrder {
- driverName: string
- carBrand: string
- carModel: string
- carColor: string
- plateNumber: string
- status: string
- orderTime: Date
- pickUpLocation: string
- dropOffLocation: string
-}
function RideDialog({ name, brand, model, color, plateNumber, phoneNumber }: any) {
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>
diff --git a/driver/src/utils/fetchRideRequests.ts b/driver/src/utils/fetchRideRequests.ts
index ec28471..53e6006 100644
--- a/driver/src/utils/fetchRideRequests.ts
+++ b/driver/src/utils/fetchRideRequests.ts
@@ -19,7 +19,7 @@ export const fetchRideRequests = async () => {
const rideReqs = data?.map(async (rideReq) => {
const passengerData: any = await fetchUserDetails(rideReq.passengerID);
return {
- name: passengerData?.name,
+ passengerName: passengerData?.name,
phoneNumber: passengerData?.phoneNumber,
status: rideReq.status,
pickUp: rideReq.pickUp,