Frontend and backend updted

client/src/App.js

@@ -17,7 +17,7 @@ function App() {
     <BrowserRouter>
       <Header />
       <Switch>
-        <PrivateDriverRoute exact path="/driver" component={Driver} />
+        <PrivateRoute exact path="/driver" component={Driver} />
         <PrivateRoute exact path="/passenger" component={Passenger} />
         {/* <PrivateRoute exact path='/map' component={Map} /> */}
         <Route exact path="/register" component={Register} />

client/src/actions/auth.js

@@ -22,3 +22,9 @@ export const getUser = async (userId) => {
   const res = await axios.get(`http://localhost:8080/api/getUser/` + userId);
   return res;
 };
+
+
+
+export const driverAddress = async (user) =>
+  await axios.post(`http://localhost:8080/api/driver-address`, user)
+

client/src/actions/ride.js

@@ -2,3 +2,15 @@ import axios from "axios";
 
 export const createRide = async (user) =>
   await axios.post(`http://localhost:8080/api/create-ride`, user);
+
+
+export const getRide = async (rideId) => {
+    const res = await axios.get(`http://localhost:8080/api/get-ride/` + rideId);
+    return res;
+};
+
+
+export const getSuggestedRides = async (driverId) => {
+  const res = await axios.get(`http://localhost:8080/api/get-suggested-ride` + driverId);
+  return res;
+}

client/src/actions/stripe.js

@@ -0,0 +1,65 @@
+import axios from "axios";
+
+export const createConnectAccount = async (token) =>
+  await axios.post(
+    `http://localhost:8080/api/create-connect-account`,
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+export const getAccountStatus = async (token) =>
+  await axios.post(
+    `http://localhost:8080/api/get-account-status`,
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+export const getAccountBalance = async (token) =>
+  await axios.post(
+    `http://localhost:8080/api/get-account-balance`,
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+export const currencyFormatter = (data) => {
+  return (data.amount / 100).toLocaleString(data.currency, {
+    style: "currency",
+    currency: data.currency,
+  });
+};
+
+export const payoutSetting = async (token) =>
+  await axios.post(
+    `http://localhost:8080/api/payout-setting`,
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+export const getSessionId = async (token, serviceId) =>
+  await axios.post(
+    `http://localhost:8080/api/stripe-session-id`,
+    {
+      serviceId,
+    },
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );

client/src/components/Header.css

@@ -2,8 +2,7 @@
     display: flex;
     background-color: white;
     border-bottom: 0.5px solid lightgray;
-;
-    width: 100%;
+    width: 100vw;
     padding: 20px;
     z-index: 3;
     /* justify-content: space-between */

client/src/components/Header.js

@@ -2,7 +2,7 @@ import "./Header.css";
 import styled from "styled-components";
 import { useHistory } from "react-router-dom";
 import { useSelector } from "react-redux";
-import logo from '../assets/ReNewLogo.png'
+// import logo from '../public/ReNewLogo.png'
 
 const Header = () => {
   const { auth } = useSelector((state) => ({ ...state }));
@@ -11,7 +11,7 @@ const Header = () => {
     <>
       <div className="header">
         <div className="header_left">
-          <img src={logo} className='logo-img' />
+          <img src="/ReNewLogo.png" className='logo-img' />
         </div>
         <div className="pages">
           <NavMenu>
@@ -30,8 +30,8 @@ const Header = () => {
               <NavMenu>
 
                 {auth.user &&
-                auth.user.isDriver ? (
-                  <a onClick={() => history.push("/seller/dashboard")}>
+                auth.isDriver ? (
+                  <a onClick={() => history.push("/driver")}>
                     <span>Driver Dashboard</span>
                   </a>
                 ) : (

client/src/components/Map.js

@@ -24,18 +24,23 @@ const center = { lat: 48.8584, lng: 2.2945 };
 
 function Map({ tD, fD }) {
   const [to, setTo] = useState("");
+
   const [from, setFrom] = useState("");
+
   useEffect(() => {
-    // const text = "hi, hello, ui";
     const tDRes = tD.replaceAll(",", "");
     const tDResult = tDRes.replaceAll(" ", "+");
     console.log(tDResult);
-    setTo(tDResult);
-
+    setTo(tDResult)
     const tFRes = fD.replaceAll(",", "");
     const fDResult = tFRes.replaceAll(" ", "+");
     console.log(fDResult);
     setFrom(fDResult);
+  }, [tD, fD])
+
+
+
+
     //const text="hi,hello,ui"
     // const result=text.replaceAll(","," ")//
     // const res=result.replaceAll(" ","+")
@@ -48,7 +53,6 @@ function Map({ tD, fD }) {
     // *******
     //  1. remove commas 2. replace spaces with +
     // console.log(text)
-  }, []);
   //   const { isLoaded } = useJsApiLoader({
   //     googleMapsApiKey: "AIzaSyAZLsIumwNVZXD1iaZha9mdc-JoiL3khCE",
   //     libraries: ["places"],

client/src/components/PastRides.js

@@ -1,5 +1,8 @@
 import Box from "@mui/material/Box";
 import { DataGrid } from "@mui/x-data-grid";
+import {getSuggestedRides} from '../actions/ride'
+import { useSelector } from "react-redux";
+import {useEffect, useState} from 'react'
 
 const columns = [
   { field: "id", headerName: "ID", width: 70 },
@@ -36,7 +39,35 @@ const rows = [
   { id: 1, name: "Vishesh 2", age: 14, price: "$4.00" },
   { id: 2, name: "Arnab 2", age: 21, price: "$3.00" },
 ];
+
 const PastRides = () => {
+  const { auth } = useSelector((state) => ({ ...state }));
+  const [rides, setRides] = useState([])
+
+  const id = auth.user._id
+
+  useEffect(() => {
+    loadPastRides()
+  }, [])
+
+  const loadPastRides = async () => {
+    const id = auth.user.
+    console.log("Past Rides -> ", id);
+    try {
+    let res = await getSuggestedRides({id})
+
+    if (res.data) {
+      console.log("LOADDD--->", res.data)
+    }
+
+    setRides(res.data)
+
+    } catch (err) {
+      console.log(err)
+    }
+
+  }
+
   return (
     <Box sx={{ height: 400, width: "100%" }}>
       <DataGrid

client/src/components/RequestingRides.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import Box from "@mui/material/Box";
 import { DataGrid } from "@mui/x-data-grid";
 import { Button } from "@mui/material";
+import {useEffect} from 'react'
 
 const columns = [
   {
@@ -68,7 +69,13 @@ const rows = [
   { id: 2, name: "Arnab", age: 21, price: "$3.00" },
 ];
 
+
 const RequestingRides = () => {
+
+  useEffect(() => {
+    // let res = getRide({ "" })
+  }, [])
+
   return (
     <Box sx={{ height: 400, width: "100%" }}>
       <DataGrid

client/src/components/VerticalTabPanel.js

@@ -72,21 +72,21 @@ export default function BasicTabs({ tD, fD }) {
           <Tab label="Current Rides" {...a11yProps(0)} />
           <Tab label="Past Rides" {...a11yProps(1)} />
           {/* <Tab label="Become a Driver" {...a11yProps(2)} /> */}
-          {tD !== null &&
+          {/* {tD !== null &&
             tD !== "" &&
             fD !== null &&
-            fD !== "" && <Tab label="Map" {...a11yProps(3)} />}
+            fD !== "" && <Tab label="Map" {...a11yProps(3)} />} */}
         </Tabs>
       </Box>
       <div style={{ width: "600px" }}>
         <TabPanel value={value} index={0}>
-          <CurrentRides />
+          <CurrentRides tD={tD} fD={fD}  />
         </TabPanel>
         <TabPanel value={value} index={1}>
           <PastRides />
         </TabPanel>
         <TabPanel value={value} index={2}>
-          <Map tD={tD} fD={fD} />
+          {/* <Map tD={tD} fD={fD} /> */}
         </TabPanel>
       </div>
     </Box>

client/src/components/passenger/CurrentRides.js

@@ -1,19 +1,70 @@
 import React, { useState, useEffect } from "react";
-import { getUser } from "../../actions/auth";
+import Map from "../Map";
+import { getRide } from "../../actions/ride";
+import {getUser} from '../../actions/auth'
 
-const CurrentRides = () => {
-  const [rideState, setRideState] = useState("noRide");
+const CurrentRides = ({ tD, fD}) => {
+
+  const [rideState, setRideState] = useState("");
+  const [rideDetails, setRideDetails] = useState({});
   useEffect(() => {
     const items = JSON.parse(localStorage.getItem("auth"));
     const userId = items.user._id;
 
     async function fetchUser() {
       let user = await getUser(userId);
-      // if(user.)
+      user = user.data;
+      console.log("Fetch user: " , user);
+      if(!user.rideId){
+        console.log("No ride");
+        setRideState("noRide");
+        return;
+      }
+
+      let ride = await getRide(user.rideId.toString());
+      console.log("Ride details ", ride);
+      setRideDetails(ride.data);
+
+      if(!ride.data.driverId){
+        setRideState("waiting");
+        return;
+      }
+
+      setRideState("confirmed");
+
+
     }
+    fetchUser();
   }, []);
 
-  return <div>CurrentRides</div>;
+  return (
+    rideState == "noRide" || rideDetails.passengerStartingAddress == null ||
+    rideDetails.passengerStartingAddress == "" ||
+    rideDetails.passengerEndingAddress == null ||
+    rideDetails.passengerEndingAddress == "" ? (<div><h3>No ride currently</h3></div>) : 
+    rideState == "waiting" ? (
+        <div>
+          <h3>Waiting for driver</h3>
+          <Map tD={rideDetails.passengerStartingAddress} fD={rideDetails.passengerEndingAddress} />
+        </div>
+    ) : 
+    rideState == "confirmed" ? (
+      <div>
+        <h3>Ride confirmed</h3>
+      </div>
+    ) : (
+      <div>
+        Loading...
+      </div>
+
+    )
+
+  )
 };
 
 export default CurrentRides;
+
+
+
+
+