Configures Router for homepage & register page

React/src/App.js

@@ -1,36 +1,33 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import SigninOidc from './pages/signin-oidc';
+import SigninOidc from "./pages/signin-oidc";
-import SignoutOidc from './pages/signout-oidc';
+import SignoutOidc from "./pages/signout-oidc";
-import Home from './pages/home';
+import Home from "./pages/home";
-import Login from './pages/login';
+import Login from "./pages/login";
-import { Provider } from 'react-redux';
+import { Provider } from "react-redux";
-import store from './store';
+import store from "./store";
-import userManager, { loadUserFromStorage } from './services/userService';
+import userManager, { loadUserFromStorage } from "./services/userService";
-import AuthProvider from './utils/authProvider';
+import AuthProvider from "./utils/authProvider";
-import PrivateRoute from './utils/protectedRoute';
+import PrivateRoute from "./utils/protectedRoute";
-import './index.css';
+import "./index.css";
-import {storeUser} from './actions/authActions'
+import { storeUser } from "./actions/authActions";
 
 function App() {
   useEffect(() => {
     // Commented out not to check the localStorage for the user's existence ** Temporary **
-
     // fetch current user from cookies
     // loadUserFromStorage(store);
   }, []);
 
- 
-
   // Should be removed ** Temporary **
   const logUserIn = () => {
-    const user = {profile: {given_name: 'John Doe'}}
+    const user = { profile: { given_name: "John Doe" } };
-    console.log(`User logged in!`)
+    console.log(`User logged in!`);
-    store.dispatch(storeUser(user))
+    store.dispatch(storeUser(user));
-  }
+  };
 
-   // ** Temporary **
+  // ** Temporary **
-   logUserIn()
+  logUserIn();
 
   return (
     <Provider store={store}>

React/src/pages/RegisterVehicle.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import * as apiService from "../services/apiService";
+
+const RegisterVehicle = () => {
+  const [model, setModel] = useState("");
+  const [licensePlate, setlicensePlate] = useState("");
+  const [color, setColor] = useState("White");
+  const [type, setType] = useState(1);
+
+  const user = useSelector((state) => state.auth.user);
+
+  async function registerVehicle() {
+    await apiService.registerVehicle(
+      { model, licensePlate, color, type },
+      user.access_token
+    );
+    // await getVehicles();
+  }
+
+  return (
+    <>
+      <h3>Register Vehicle:</h3>
+      <form onSubmit={(e) => e.preventDefault()}>
+        <div className="form-group">
+          <label>Model: </label>
+          <input
+            value={model}
+            type="text"
+            name="model"
+            onChange={(e) => setModel(e.target.value)}
+          />
+          <label>License Plate: </label>
+          <input
+            value={licensePlate}
+            type="text"
+            name="licensePlate"
+            onChange={(e) => setlicensePlate(e.target.value)}
+          />
+          <label>Color: </label>
+          <input
+            value={color}
+            type="text"
+            name="color"
+            onChange={(e) => setColor(e.target.value)}
+          />
+          <label>Type: </label>
+          <select
+            value={type}
+            name="type"
+            onChange={(e) => setType(e.target.value)}
+          >
+            <option value="1">Sedan</option>
+            <option value="2">SUV</option>
+            <option value="3">Pickup</option>
+          </select>
+        </div>
+
+        <button className="btn" onClick={() => registerVehicle()}>
+          Register
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default RegisterVehicle;

React/src/pages/YourVehicles.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from "react";
+import * as apiService from "../services/apiService";
+import { useSelector } from "react-redux";
+import { prettifyJson } from "../utils/jsonUtils";
+import Navbar from "./components/Navbar";
+import Main from "./components/Main";
+
+const YourVehicles = () => {
+  const user = useSelector((state) => state.auth.user);
+  const [vehicleData, setVehicleData] = useState(null);
+
+  useEffect(() => {
+    getVehicles();
+  }, []);
+
+  async function getVehicles() {
+    console.log(user);
+    const vehicles = await apiService.getVehiclesFromApi(user.access_token);
+    setVehicleData(vehicles);
+  }
+
+  function getType(type) {
+    switch (type) {
+      case 1:
+        return "Sedan";
+      case 2:
+        return "SUV";
+      case 3:
+        return "Pickup";
+    }
+  }
+
+  return (
+    <div className="h-screen">
+      <Navbar />
+      <Main
+        Component={() => <h1>hello world! this is the "Your Vehicles Page"</h1>}
+      />
+    </div>
+    // <>
+    //   <h1>Traffic Police</h1>
+    //   <p>Hello, {user.profile.given_name}.</p>
+
+    //   <h3>Your Vehicles:</h3>
+    //   {vehicleData ? (
+    //     <ul>
+    //       {vehicleData.map((v) => (
+    //         <li key={v.id}>
+    //           {v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}
+    //         </li>
+    //       ))}
+    //     </ul>
+    //   ) : (
+    //     <p>No vehicles yet :(</p>
+    //   )}
+    //   <pre>
+    //     <code>
+    //       {prettifyJson(vehicleData ? vehicleData : "No vehicles yet :(")}
+    //     </code>
+    //   </pre>
+    //   <p>
+    //     <a
+    //       target="_blank"
+    //       rel="noopener noreferrer"
+    //       href="https://github.com/tappyy/react-IS4-auth-demo"
+    //     >
+    //       Github Repo
+    //     </a>
+    //   </p>
+    // </>
+  );
+};
+
+export default YourVehicles;

React/src/pages/components/LoginWindow.js

@@ -1,19 +1,14 @@
-import React from 'react';
+import React from "react";
-import Button from './Button';
+import Button from "./Button";
-import {storeUser} from '../../actions/authActions'
+import { storeUser } from "../../actions/authActions";
-import store from '../../store'
+import store from "../../store";
-import userManager from '../../services/userService'
 
 const LoginWindow = () => {
-
-
   const onUserLogin = () => {
-    const user = {profile: {given_name: 'John Doe'}}
+    const user = { profile: { given_name: "John Doe" } };
-    console.log(`User logged in!`)
+    console.log(`User logged in!`);
-    store.dispatch(storeUser(user))
+    store.dispatch(storeUser(user));
-    // Looks like we don't have this function even tho it's in the library installed
+  };
-    // userManager.storeUser(user).then(()=> console.log('yay')).catch(()=> console.log('nope'))
-  }
 
   return (
     <div className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-40 sm:py-36 px-20 py-16">

React/src/pages/components/Navbar.js

@@ -1,23 +1,28 @@
-import React from 'react';
+import React from "react";
-import logo from '../../images/logo.svg';
+import logo from "../../images/logo.svg";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { useSelector } from 'react-redux';
+import { useSelector } from "react-redux";
+import { signoutRedirect } from "../../services/userService";
 
 const Navbar = () => {
   const user = useSelector((state) => state.auth.user);
 
+  function signOut() {
+    signoutRedirect();
+  }
+
   return (
     <div
       className="w-100 bg-blue-custom flex justify-center items-center"
-      style={{ height: '90px' }}
+      style={{ height: "90px" }}
     >
       <nav className="flex items-center justify-between w-4/5">
         <img src={logo} alt="logo" className="h-28" />
         {user ? (
-          <ul className="list-none flex items-center justify-between w-1/5 m-0">
+          <ul className="list-none flex items-center justify-between w-2/6 m-0">
             <li className="m-0">
               <Link
-                to="/vehicles"
+                to="/"
                 className="text-white font-inter text-xl font-semibold hover:text-white"
               >
                 Your Vehicles
@@ -31,9 +36,15 @@ const Navbar = () => {
                 Register A Vehicles
               </Link>
             </li>
+            <li
+              onClick={signOut}
+              className="m-0 text-white font-inter text-xl font-semibold hover:text-white cursor-pointer"
+            >
+              Sign Out
+            </li>
           </ul>
         ) : (
-          ''
+          ""
         )}
       </nav>
     </div>

React/src/pages/home.js

@@ -1,103 +1,21 @@
-import React, { useState } from 'react'
+import React from "react";
-import { signoutRedirect } from '../services/userService'
+import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
-import { useSelector } from 'react-redux'
+import RegisterVehicle from "./RegisterVehicle";
-import * as apiService from '../services/apiService'
+import YourVehicles from "./YourVehicles";
-import { prettifyJson } from '../utils/jsonUtils'
-import { useEffect } from 'react'
 
 function Home() {
-  const user = useSelector(state => state.auth.user)
-  const [model, setModel] = useState('')
-  const [licensePlate, setlicensePlate] = useState('')
-  const [color, setColor] = useState('White')
-  const [type, setType] = useState(1)
-
-  useEffect(() => {
-    getVehicles();
-  }, []);
-
-  const [vehicleData, setVehicleData] = useState(null)
-  function signOut() {
-    signoutRedirect()
-  }
-
-  async function getVehicles() {
-    console.log(user);
-    const vehicles = await apiService.getVehiclesFromApi(user.access_token);
-    setVehicleData(vehicles);
-  }
-
-  async function registerVehicle() {
-    await apiService.registerVehicle({ model, licensePlate, color, type }, user.access_token);
-    await getVehicles();
-  }
-
-  function getType(type) {
-    switch (type){
-      case 1:
-        return "Sedan";
-      case 2:
-        return "SUV";
-        case 3:
-          return "Pickup";
-    }
-  }
-
-  // async function getDoughnuts() {
-  //   console.log(user);
-  //   const doughnuts = await apiService.getDoughnutsFromApi(user.id);
-  //   setDoughnutData(doughnuts)
-  // }
-
   return (
-    <div>
+    <Router>
-      <h1>Traffic Police</h1>
+      <Switch>
-      <p>Hello, {user.profile.given_name}.</p>
+        <Route path="/register">
-
+          <RegisterVehicle />
-      <button className="button button-outline" onClick={() => getVehicles()}>Get Vehicles</button>
+        </Route>
-      <button className="button button-clear" onClick={() => signOut()}>Sign Out</button>
+        <Route path="/">
-
+          <YourVehicles />
-      <h3>Register Vehicle:</h3>
+        </Route>
-
+      </Switch>
-      <form onSubmit={e => e.preventDefault()}>
+    </Router>
-        <div className="form-group">
+  );
-          <label>Model: </label>
-          <input value={model} type="text" name="model" onChange={e => setModel(e.target.value)} />
-          <label>License Plate: </label>
-          <input value={licensePlate} type="text" name="licensePlate" onChange={e => setlicensePlate(e.target.value)} />
-          <label>Color: </label>
-          <input value={color} type="text" name="color" onChange={e => setColor(e.target.value)} />
-          <label>Type: </label>
-          <select value={type} name="type" onChange={e => setType(e.target.value)} >
-            <option value="1">Sedan</option>
-            <option value="2">SUV</option>
-            <option value="3">Pickup</option>
-          </select>
-        </div>
-
-        <button className="btn" onClick={() => registerVehicle()} >Register</button>
-      </form>
-
-      <h3>Your Vehicles:</h3>
-
-{
-  vehicleData ?
-    <ul>
-      { vehicleData.map(v => (<li key={v.id}>{v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}</li>)) }
-    </ul>
-      :
-      <p>No vehicles yet :(</p>
 }
 
-      <pre>
+export default Home;
-        <code>
-          {prettifyJson(vehicleData ? vehicleData : 'No vehicles yet :(')}
-        </code>
-      </pre>
-      <p><a target='_blank' rel='noopener noreferrer' href='https://github.com/tappyy/react-IS4-auth-demo'>Github Repo</a></p>
-
-    </div>
-  )
-}
-
-export default Home

React/src/pages/login.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React from "react";
-import { signinRedirect } from '../services/userService';
+import { signinRedirect } from "../services/userService";
-import { Redirect } from 'react-router-dom';
+import { Redirect } from "react-router-dom";
-import { useSelector } from 'react-redux';
+import { useSelector } from "react-redux";
-import Navbar from './components/Navbar';
+import Navbar from "./components/Navbar";
-import Main from './components/Main';
+import Main from "./components/Main";
-import LoginWindow from './components/LoginWindow';
+import LoginWindow from "./components/LoginWindow";
 
 function Login() {
   const user = useSelector((state) => state.auth.user);
@@ -14,7 +14,7 @@ function Login() {
   }
 
   return user ? (
-    <Redirect to={'/'} />
+    <Redirect to={"/"} />
   ) : (
     <div className="h-screen">
       <Navbar />