server side fixes and map/auth integration

client/src/App.js

@@ -9,6 +9,7 @@ import Passenger from "./pages/RideShare/passenger/Passenger";
 import PrivateRoute from "./components/PrivateRoute";
 import Header from "./components/Header";
 import Dummy from "./components/Dummy";
+import StripeCallback from './pages/StripeCallback'
 
 // import Map from "./components/Map";
 
@@ -20,10 +21,15 @@ function App() {
         <PrivateRoute exact path="/driver" component={Driver} />
         <PrivateRoute exact path="/passenger" component={Passenger} />
         {/* <PrivateRoute exact path='/map' component={Map} /> */}
+        <PrivateRoute
+          exact
+          path="/stripe/callback"
+          component={StripeCallback}
+        />
         <Route exact path="/register" component={Register} />
         <Route exact path="/login" component={Login} />
         <Route exact path="/" component={Home} />
-        <Route exact path="/dummy" component={Dummy} />
+        <Route exact path="/budget" component={Dummy} />
       </Switch>
     </BrowserRouter>
   );

client/src/actions/ride.js

@@ -11,6 +11,6 @@ export const getRide = async (rideId) => {
 
 
 export const getSuggestedRides = async (driverId) => {
-  const res = await axios.get(`http://localhost:8080/api/get-suggested-ride` + driverId);
+  const res = await axios.get(`http://localhost:8080/api/get-suggested-ride/` + driverId);
   return res;
 }

client/src/components/Dummy.js

@@ -1,48 +1,117 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import Card from "@mui/material/Card";
 import CardActions from "@mui/material/CardActions";
 import CardContent from "@mui/material/CardContent";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
 
 import { FromAddressInput, ToAddressInput } from "./AddressInput";
 const Dummy = () => {
   const [open, setOpen] = React.useState(false);
   const [fromLocation, setFromLocation] = useState("");
   const [toDestination, setToDestination] = useState("");
-  //   const [totalDistance, setTotalDistance] = useState(0);
-  //   const [mileage, setMileage] = useState(0);
-  //   const [hours, setHours] = useState(0);
+  const [totalDistance, setTotalDistance] = useState(0);
+  const [mileage, setMileage] = useState(0);
+  const [hours, setHours] = useState(0);
+  const [price, setPrice] = useState(0);
+  const [total, setTotal] = useState(0);
+
   const handleClickOpen = () => {
     setOpen(true);
   };
-
+  const TotalPrice = () => {
+    const tp = ((totalDistance / mileage) * price + hours * 2).toFixed(2);
+    setTotal(tp);
+    handleClickOpen();
+  };
   const handleClose = () => {
     setOpen(false);
   };
+  const handleReset = () => {
+    window.location.reload();
+  };
+
   return (
     <div>
-      <Button variant="outlined" onClick={handleClickOpen}>
-        Open form dialog
-      </Button>
-      <Card open={open} onClose={handleClose}>
-        <h1>Budget Planner</h1>
+      <Card open={open} onClose={handleClose} style={{ marginTop: "50px" }}>
+        <h1 style={{ marginTop: "20px" }}>
+          <center>Budget Planner</center>
+        </h1>
         <CardContent>
-          <h5>
-            Our predictor works 99% of the time. We can 100% guarentee you that
-            the data which is entered here would never be revealed to any of the
-            sites.
+          <h5 style={{ fontSize: "11px" }}>
+            <i>
+              Our predictor works 99% of the time. We can 100% guarentee you
+              that the data which is entered here would never be revealed to any
+              of the sites.
+            </i>
           </h5>
-          <div style={{ marginBottom: 20 }}>
-            <FromAddressInput fD={fromLocation} setFD={setFromLocation} />
-            <ToAddressInput tD={toDestination} setTD={setToDestination} />
+          <div style={{ marginTop: "30px" }}>
+            <FromAddressInput
+              fD={fromLocation}
+              setFD={setFromLocation}
+              required
+            />
+
+            <div style={{ marginTop: "20px" }}></div>
+            <div>
+              <ToAddressInput
+                tD={toDestination}
+                setTD={setToDestination}
+                required
+              />
+            </div>
+            <TextField
+              placeholder="Distance"
+              type="number"
+              onChange={(e) => setTotalDistance(e.target.value)}
+              sx={{ marginTop: "30px" }}
+              required
+            />
+            <TextField
+              placeholder="Mileage"
+              type="number"
+              onChange={(e) => setMileage(e.target.value)}
+              sx={{ marginTop: "30px" }}
+              required
+            />
+            <TextField
+              placeholder="Price"
+              type="number"
+              onChange={(e) => setPrice(e.target.value)}
+              sx={{ marginTop: "30px" }}
+              required
+            />
+
+            <TextField
+              placeholder="Hours"
+              type="number"
+              onChange={(e) => setHours(e.target.value)}
+              sx={{ marginTop: "30px" }}
+              required
+            />
           </div>
         </CardContent>
         <CardActions>
-          <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleClose}>OK</Button>
+          <Button onClick={handleReset}>Reset</Button>
+          <Button onClick={TotalPrice}>Generate</Button>
         </CardActions>
       </Card>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>
+          <center>Total Amount</center>
+        </DialogTitle>
+        <DialogContent>The total money it will require is </DialogContent>
+        <h1>
+          <center>${total}</center>
+        </h1>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 };

client/src/components/Header.js

@@ -11,7 +11,7 @@ const Header = () => {
     <>
       <div className="header">
         <div className="header_left">
-          <img src="/ReNewLogo.png" className='logo-img' />
+          <img src="https://o.remove.bg/downloads/ec74a525-ff61-46e0-9e45-0e5646838504/unknown-removebg-preview.png" className='logo-img' />
         </div>
         <div className="pages">
           <NavMenu>

client/src/components/Map.js

@@ -19,6 +19,8 @@ import {
   DirectionsRenderer,
 } from "@react-google-maps/api";
 import { useEffect, useRef, useState } from "react";
+import TextField from "@mui/material/TextField";
+
 
 const center = { lat: 48.8584, lng: 2.2945 };
 
@@ -172,6 +174,7 @@ function Map({ tD, fD }) {
     //       </HStack>
     //     </Box>
     //   </Flex>
+  <>
     <iframe
       width="600"
       height="450"
@@ -183,6 +186,9 @@ function Map({ tD, fD }) {
     &origin=${from}
     &destination=${to}`}
     ></iframe>
+    {/* <TextInput variant="outlined" /> */}
+    </>
+
   );
 }
 

client/src/components/PastRides.js

@@ -54,7 +54,7 @@ const PastRides = () => {
     const id = auth.user.
     console.log("Past Rides -> ", id);
     try {
-    let res = await getSuggestedRides({id})
+    let res = await getSuggestedRides(id)
 
     if (res.data) {
       console.log("LOADDD--->", res.data)

client/src/components/PrivateRoute.js

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 const PrivateRoute = ({ ...rest }) => {
   const { auth } = useSelector((state) => ({ ...state }));
 
-  return auth && auth.token ? <Route {...rest} /> : <Redirect to="/login" />;
+  return auth && auth.token ? <Route {...rest} /> : <Route {...rest} />;
 };
 
 export default PrivateRoute;

client/src/components/RequestingRides.js

@@ -1,8 +1,10 @@
 import * as React from "react";
 import Box from "@mui/material/Box";
 import { DataGrid } from "@mui/x-data-grid";
+import {getSuggestedRides} from '../actions/ride'
 import { Button } from "@mui/material";
-import {useEffect} from 'react'
+import {useEffect, useState} from 'react'
+import {useSelector} from 'react-redux'
 
 const columns = [
   {
@@ -72,9 +74,32 @@ const rows = [
 
 const RequestingRides = () => {
 
+  const { auth } = useSelector((state) => ({ ...state }));
+  const [rides, setRides] = useState([])
+
   useEffect(() => {
-    // let res = getRide({ "" })
+    loadSuggestedRides()
   }, [])
+
+  const loadSuggestedRides = async () => {
+    const id = auth.user._id
+    const items = JSON.parse(localStorage.getItem("auth"));
+    const userId = items.user._id;
+    console.log("Suggested 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%" }}>

client/src/components/TabPanel.js

@@ -59,7 +59,7 @@ export default function BasicTabs() {
           <Tab label="Current Rides" {...a11yProps(0)} />
           <Tab label="Past Rides" {...a11yProps(1)} />
           <Tab label="Requested Rides" {...a11yProps(2)} />
-          <Tab label="Map" {...a11yProps(3)} />
+          {/* <Tab label="Map" {...a11yProps(3)} /> */}
         </Tabs>
       </Box>
       <TabPanel value={value} index={0}>
@@ -71,10 +71,6 @@ export default function BasicTabs() {
       <TabPanel value={value} index={2}>
         <RequestingRides />
       </TabPanel>
-      <TabPanel value={value} index={3}>
-        {/* <Map /> */}
-        map
-      </TabPanel>
     </Box>
   );
 }

client/src/components/UpcomingRides.js

@@ -22,14 +22,14 @@ const columns = [
     width: 120,
   },
   {
-    field: "Starting Point",
+    field: "startingPoint",
     headerName: "Starting Point",
     description: "This column gives you start address",
 
     width: 250,
   },
   {
-    field: "Ending Point",
+    field: "endingPoint",
     headerName: "Ending Point",
     description: "This column gives you end address",
 
@@ -38,8 +38,7 @@ const columns = [
 ];
 
 const rows = [
-  { id: 1, name: "Vishesh", age: 14, price: "$4.00" },
-  { id: 2, name: "Arnab", age: 21, price: "$3.00" },
+  { id: 1, name: "Vishesh", age: 14, price: "$4.00", startingPoint: "California High School, Broadmoor Drive, San Ramon, CA, USA", endingPoint: "San Francisco, CA, USA" },
 ];
 
 const UpcomingRides = () => {