Merge branch 'master' into heatmap-element

client-app/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext } from "react";
 import "./App.css";
 import Landing from "./components/shared/landing.js";
 import Header from "./components/shared/header.js";
@@ -8,52 +8,32 @@ import Login from "./components/shared/login.js";
 import Home from "./components/vendor/home.js";
 import Heatmap from "./components/vendor/heatmap.js";
 import Timetable from "./components/vendor/timetable.js";
+import CustomerMap from "./components/customer/map.js";
 // For react router
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 // For React context management
 import { AppContextProvider } from "./components/AppContext";
 
 function App() {
-  const [isVendor, setIsVendor] = useState(true);
-
   return (
     <AppContextProvider>
       <Router>
         <div className="App">
           <Header />
           <Switch>
-            <Route path="/" exact render={() => <Landing />} />
+            <Route exact path="/" component={() => <Landing />} />
             <Route path="/user" component={() => <User />} />
-            <Route
-              path="/signup"
-              component={() => <Signup isVendor={isVendor} />}
-            />
-            <Route
-              path="/login"
-              component={() => <Login isVendor={isVendor} />}
-            />
+            <Route path="/signup" component={() => <Signup />} />
+            <Route path="/login" component={() => <Login />} />
             <Route path="/home" component={() => <Home />} />
             <Route path="/heatmap" component={() => <Heatmap />} />
+            <Route path="/map" component={() => <CustomerMap />} />
+            <Route path="/timetable" component={() => <Timetable />} />
           </Switch>
         </div>
       </Router>
     </AppContextProvider>
   );
 }
 
-/* <Route exact path="/props-through-render" render={(props) => <PropsPage {...props} title={`Props through render`} />} />
-
-<Route
-  path='/dashboard'
-  component={() => <Dashboard isAuthed={true} />}
-/> */
-
-/* <Route
-  path='/dashboard'
-  render={(props) => <Dashboard {...props} isAuthed={true} />}
-/> */
-
 export default App;
-
-/* <Route path="/signup-c" component={signupCustomer} />
-<Route path="/signup-v" component={signupVendor} /> */

client-app/src/components/AppContext.js

@@ -3,7 +3,7 @@ import React, { useState, createContext } from "react";
 const AppContext = createContext();
 
 function AppContextProvider(props) {
-  const [logInStatus, setLogInStatus] = useState(true);
+  const [logInStatus, setLogInStatus] = useState(false);
   const [isVendor, setIsVendor] = useState(true);
   const [signUpStateVendor, setSignUpStateVendor] = useState({
     name: "",

client-app/src/components/customer/map.js

@@ -3,17 +3,17 @@ import React from "react";
 import LondonMap from "../../utils/london-map.js";
 
 export default function CustomerMap() {
-  function signalInterest(e) {
-    e.preventDefault;
-    //API post request to customer location table INSERT INTO customer_location
-  }
+  // function signalInterest(e) {
+  //   e.preventDefault;
+  //   //API post request to customer location table INSERT INTO customer_location
+  // };
 
-  return (
-    <section>
-      <LondonMap />
-      <button onClick={signalInterest}>
-        Let Vendors Know You Would Like Some Ice Cream
-      </button>
-    </section>
-  );
+  return <h1>Customer map</h1>;
 }
+
+/* // <section>
+    //   <LondonMap />
+    //   <button onClick={signalInterest()}>
+    //     Let Vendors Know You Would Like Some Ice Cream
+    //   </button>
+    // </section> */

client-app/src/components/shared/header.js

@@ -1,14 +1,33 @@
-import React, { useContext } from "react"
-import { AppContext } from "../AppContext"
-import { Title, HeaderArea } from "../../styles/header.js"
+import React, { useContext } from "react";
+import { AppContext } from "../AppContext";
+import { Title, HeaderArea, LogInOption } from "../../styles/header.js";
 
 export default function Header() {
-  const { logInStatus } = useContext(AppContext)
+  const { logInStatus, setLogInStatus } = useContext(AppContext);
+
+  function removeToken() {
+    window.localStorage.removeItem("token");
+  }
+
+  function headerStatus() {
+    let token = localStorage.getItem("token");
+    if (!token) {
+      setLogInStatus(false);
+      return <LogInOption href="/">Log In or Sign Up Here!</LogInOption>;
+    } else {
+      setLogInStatus(true);
+      return (
+        <LogInOption onClick={removeToken} href="/">
+          Log Out
+        </LogInOption>
+      );
+    }
+  }
 
   return (
     <HeaderArea>
       <Title>Where's Whippy</Title>
-      {!logInStatus ? <a href="#">Log In</a> : <a href="#">Log Out</a>}
+      {headerStatus()}
     </HeaderArea>
-  )
+  );
 }

client-app/src/components/shared/landing.js

@@ -7,30 +7,16 @@ import { BlueButton, PinkButton, PageContainer } from "../../styles/buttons.js";
 export default function Landing() {
   const { isVendor, setIsVendor } = useContext(AppContext);
 
-  console.log("landing state: ", isVendor);
-
   return (
     <PageContainer>
-      <h2 className="landing-subtitle">Tired of waiting for the jingle?</h2>
-      <img className="landing-img" src="#" alt="illustation" />
+      <h2>Tired of waiting for the jingle?</h2>
+      <img src="#" alt="illustation" />
       <Link to="/user" onClick={() => setIsVendor(true)}>
-        <PinkButton className="landing-btn-vendors">Vendors</PinkButton>
+        <PinkButton>Vendors</PinkButton>
       </Link>
       <Link to="/user" onClick={() => setIsVendor(false)}>
-        <BlueButton className="landing-btn-customers">Customers</BlueButton>
+        <BlueButton>Customers</BlueButton>
       </Link>
     </PageContainer>
   );
-
-  // function handleLoginLinkVendor() {
-  //   alert("Vendor login button clicked")
-  //   setIsVendor(true)
-  // }
-
-  // function handleLoginLinkCustomer() {
-  //   console.log(isVendor)
-  //   setIsVendor(false)
-  //   console.log(isVendor)
-  //   // alert("Customer login button clicked")
-  // }
 }