From 098808a19c34f1b87593880658739c8ba012deee Mon Sep 17 00:00:00 2001 From: Vazhin Tayeb Date: Thu, 14 Jan 2021 13:22:14 +0300 Subject: [PATCH] Configures Router for homepage & register page --- React/src/App.js | 41 ++++---- React/src/pages/RegisterVehicle.js | 67 +++++++++++++ React/src/pages/YourVehicles.js | 74 ++++++++++++++ React/src/pages/components/LoginWindow.js | 21 ++-- React/src/pages/components/Navbar.js | 27 +++-- React/src/pages/home.js | 114 +++------------------- React/src/pages/login.js | 16 +-- 7 files changed, 211 insertions(+), 149 deletions(-) create mode 100644 React/src/pages/RegisterVehicle.js create mode 100644 React/src/pages/YourVehicles.js diff --git a/React/src/App.js b/React/src/App.js index 5a978ad..d26e73b 100644 --- a/React/src/App.js +++ b/React/src/App.js @@ -1,36 +1,33 @@ -import React, { useEffect } from 'react'; -import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; -import SigninOidc from './pages/signin-oidc'; -import SignoutOidc from './pages/signout-oidc'; -import Home from './pages/home'; -import Login from './pages/login'; -import { Provider } from 'react-redux'; -import store from './store'; -import userManager, { loadUserFromStorage } from './services/userService'; -import AuthProvider from './utils/authProvider'; -import PrivateRoute from './utils/protectedRoute'; -import './index.css'; -import {storeUser} from './actions/authActions' +import React, { useEffect } from "react"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; +import SigninOidc from "./pages/signin-oidc"; +import SignoutOidc from "./pages/signout-oidc"; +import Home from "./pages/home"; +import Login from "./pages/login"; +import { Provider } from "react-redux"; +import store from "./store"; +import userManager, { loadUserFromStorage } from "./services/userService"; +import AuthProvider from "./utils/authProvider"; +import PrivateRoute from "./utils/protectedRoute"; +import "./index.css"; +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'}} - console.log(`User logged in!`) - store.dispatch(storeUser(user)) - } + const user = { profile: { given_name: "John Doe" } }; + console.log(`User logged in!`); + store.dispatch(storeUser(user)); + }; - // ** Temporary ** - logUserIn() + // ** Temporary ** + logUserIn(); return ( diff --git a/React/src/pages/RegisterVehicle.js b/React/src/pages/RegisterVehicle.js new file mode 100644 index 0000000..4fcf64d --- /dev/null +++ b/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 ( + <> +

Register Vehicle:

+
e.preventDefault()}> +
+ + setModel(e.target.value)} + /> + + setlicensePlate(e.target.value)} + /> + + setColor(e.target.value)} + /> + + +
+ + +
+ + ); +}; + +export default RegisterVehicle; diff --git a/React/src/pages/YourVehicles.js b/React/src/pages/YourVehicles.js new file mode 100644 index 0000000..76cc69d --- /dev/null +++ b/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 ( +
+ +

hello world! this is the "Your Vehicles Page"

} + /> +
+ // <> + //

Traffic Police

+ //

Hello, {user.profile.given_name}.

+ + //

Your Vehicles:

+ // {vehicleData ? ( + // + // ) : ( + //

No vehicles yet :(

+ // )} + // 
+    //     
+    //       {prettifyJson(vehicleData ? vehicleData : "No vehicles yet :(")}
+    //     
+    //
+ //

+ // + // Github Repo + // + //

+ // + ); +}; + +export default YourVehicles; diff --git a/React/src/pages/components/LoginWindow.js b/React/src/pages/components/LoginWindow.js index 6e4b8af..9dc754e 100644 --- a/React/src/pages/components/LoginWindow.js +++ b/React/src/pages/components/LoginWindow.js @@ -1,19 +1,14 @@ -import React from 'react'; -import Button from './Button'; -import {storeUser} from '../../actions/authActions' -import store from '../../store' -import userManager from '../../services/userService' +import React from "react"; +import Button from "./Button"; +import { storeUser } from "../../actions/authActions"; +import store from "../../store"; const LoginWindow = () => { - - const onUserLogin = () => { - const user = {profile: {given_name: 'John Doe'}} - console.log(`User logged in!`) - 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')) - } + const user = { profile: { given_name: "John Doe" } }; + console.log(`User logged in!`); + store.dispatch(storeUser(user)); + }; return (
diff --git a/React/src/pages/components/Navbar.js b/React/src/pages/components/Navbar.js index 6e79ccc..544fcc6 100644 --- a/React/src/pages/components/Navbar.js +++ b/React/src/pages/components/Navbar.js @@ -1,23 +1,28 @@ -import React from 'react'; -import logo from '../../images/logo.svg'; -import { Link } from 'react-router-dom'; -import { useSelector } from 'react-redux'; +import React from "react"; +import logo from "../../images/logo.svg"; +import { Link } from "react-router-dom"; +import { useSelector } from "react-redux"; +import { signoutRedirect } from "../../services/userService"; const Navbar = () => { const user = useSelector((state) => state.auth.user); + function signOut() { + signoutRedirect(); + } + return (
diff --git a/React/src/pages/home.js b/React/src/pages/home.js index 8dfe025..6aa5ebd 100644 --- a/React/src/pages/home.js +++ b/React/src/pages/home.js @@ -1,103 +1,21 @@ -import React, { useState } from 'react' -import { signoutRedirect } from '../services/userService' -import { useSelector } from 'react-redux' -import * as apiService from '../services/apiService' -import { prettifyJson } from '../utils/jsonUtils' -import { useEffect } from 'react' +import React from "react"; +import { Switch, Route, BrowserRouter as Router } from "react-router-dom"; +import RegisterVehicle from "./RegisterVehicle"; +import YourVehicles from "./YourVehicles"; 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 ( -
-

Traffic Police

-

Hello, {user.profile.given_name}.

- - - - -

Register Vehicle:

- -
e.preventDefault()}> -
- - setModel(e.target.value)} /> - - setlicensePlate(e.target.value)} /> - - setColor(e.target.value)} /> - - -
- - -
- -

Your Vehicles:

- -{ - vehicleData ? -
    - { vehicleData.map(v => (
  • {v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}
    • )) } -
- : -

No vehicles yet :(

+ + + + + + + + + + + ); } - 
-        
-          {prettifyJson(vehicleData ? vehicleData : 'No vehicles yet :(')}
-        
-
-

Github Repo

- -
- ) -} - -export default Home +export default Home; diff --git a/React/src/pages/login.js b/React/src/pages/login.js index 92c22c3..33b51b0 100644 --- a/React/src/pages/login.js +++ b/React/src/pages/login.js @@ -1,10 +1,10 @@ -import React from 'react'; -import { signinRedirect } from '../services/userService'; -import { Redirect } from 'react-router-dom'; -import { useSelector } from 'react-redux'; -import Navbar from './components/Navbar'; -import Main from './components/Main'; -import LoginWindow from './components/LoginWindow'; +import React from "react"; +import { signinRedirect } from "../services/userService"; +import { Redirect } from "react-router-dom"; +import { useSelector } from "react-redux"; +import Navbar from "./components/Navbar"; +import Main from "./components/Main"; +import LoginWindow from "./components/LoginWindow"; function Login() { const user = useSelector((state) => state.auth.user); @@ -14,7 +14,7 @@ function Login() { } return user ? ( - + ) : (