made changes to diner

front-end/src/App.js

@@ -3,6 +3,7 @@ import { Router, Switch, Route } from 'react-router-dom'
 import history from './components/history'
 import PrivateRoute from './components/PrivateRoute'
 import './App.css';
+import diner from "./components/User/diner"
 import FoodTruckForm from './components/Operator/FoodTruckForm';
 import DinerTruckMenu from './components/User/DinerTruckMenu'
 import OperatorDashboard from './components/Operator/OperatorDashboard'
@@ -18,7 +19,7 @@ function App() {
     <>
       <Router history={history}>
         <Switch>
-          <PrivateRoute exact path='/diner/dashboard' component={TestDiner} />
+          <PrivateRoute exact path='/diner/dashboard' component={diner} />
           <PrivateRoute exact path='/diner/trucks' component={TruckList} />
           <PrivateRoute exact path='/diner/trucks/:id' component={DinerTruckMenu} />
           <PrivateRoute exact path='/operator/dashboard' component={OperatorDashboard} />
@@ -30,7 +31,6 @@ function App() {
         </Switch>
       </Router>
     </>
-
   );
 }
 

front-end/src/components/User/diner.js

@@ -1,15 +1,36 @@
 import React, {useState, useEffect } from "react";
-import axios from "axios";
-import style from "styled-components";
+import ReactDOM from "react-dom"
+import axiosWithAuth from "../axiosWithAuth";
+import styled from "styled-components";
 
-const diner = () => {
-    const [ truck, setTruck] = useState ({})
+const Ft = styled.div`
+     background: #ECA564;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding:5%;
+    margin-left: 60px;
+    margin-right: 60px;
+`;
+const Photo = styled.img`
+width: 30%;
+margin: 20px 2.5%;
+border-radius: 20px;`
+const Para = styled.p`
+margin-top: 50px;`
+
+const Diner = () => {
+    const [ truck, setTruck] = useState ([])
+    const [results, setResults]= useState([])
     const [ search, setSearch] = useState("")
 useEffect( ()=>{
-    axios.get ();
+    axiosWithAuth().get ("/trucks")
     .then(response => {
-        const foodTruck = response.data;
-        setTruck(truck);
+        console.log(response)
+        setTruck(response.data);
+        setResults(response.data);
     })
     .catch(error => {
         console.log("Sorry, you've got an error", error)
@@ -21,42 +42,42 @@ const handleChange= event =>{
 }
 const handleSubmit= event =>{
     event.preventDefault()
-    axios.get()
-        .then(res => {
-            console.log(res.data.message);
-            setTruck(res.data.message)
-        })
+    setResults(
+    truck.filter( data =>
+    data.cuisineType.includes(search.toLowerCase())))
 
 }
 return(
     <div className = "foodtruck">
-        <form onSubmit={handelSubmit}></form>
-        <input
-        placeholder="search"
-        name= "name"
-        onChange= {handleChange}
-        />
-        {trucks.map(food_truck, index) => {
-            (
-                <FoodTruckCard
-                key= {index}
-                name= {food_truck.name}
-                cuisine={food_truck.cusine}
-                customerRatingAvg={food_truck.customerRatingAvg}
-                radSize 
-                />
-            )
-        }}
-
-
-
-
+        <form
+        onSubmit={handleSubmit}>
+      <input
+       name="search"
+       placeholder= "Search"
+       onChange={handleChange}
+
+       /> 
+      </form> 
+        <h1></h1>
+   {results.map(data=> <Ft key={data.id}>
+       <h1>{data.name}</h1>
+       <Photo src= {data.imgUrl}></Photo>
+       <h2>Cusine: {data.cuisineType}</h2>
+       <Para>Customer Rating:{data.customerRatingAvg}</Para>
+       <p>
+       Location: {data.currentLocation}
+       </p>
+       <p>
+       Departure: {data.currentDepartureTime}
+       </p>
+       <p>
+       Arrival: {data.arrivalTime}
+       </p>
 
+   </Ft>)
+     }
 
+    </div>)
 
-    </div>
-)
-
-
-
-}
+}
+export default Diner