Home Page nav bar will display now #3

Merged
JMR-dev merged 3 commits from jr-fixhomnavbardisplay into main 2021-12-13 00:26:27 +00:00
5 changed files with 42 additions and 21 deletions
+9 -8
View File
@@ -5,10 +5,11 @@ import { NavBar } from "./nav/NavBar";
import { Login } from "./auth/Login"; import { Login } from "./auth/Login";
import { Register } from "./auth/Register"; import { Register } from "./auth/Register";
export const GraphicsBayTracker = () => ( export const GraphicsBayTracker = () => {
<> return ( <>
<Route <Route
render={() => { render={() => {
if (localStorage.getItem("graphicsbaytracker_customer")) { if (localStorage.getItem("graphicsbaytracker_customer")) {
return ( return (
<> <>
@@ -17,10 +18,10 @@ export const GraphicsBayTracker = () => (
</> </>
); );
} else { } else {
return <Redirect to="/login" />; return( <Redirect to="/login" />
} );
}} }}}
/> />
<Route path="/login"> <Route path="/login">
<Login /> <Login />
@@ -29,4 +30,4 @@ export const GraphicsBayTracker = () => (
<Register /> <Register />
</Route> </Route>
</> </>
); )};
+21 -6
View File
@@ -1,4 +1,4 @@
import React, { useRef, useState } from "react" import React, { useCallback, useRef, useState } from "react"
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { useHistory } from "react-router-dom" import { useHistory } from "react-router-dom"
import "./Login.css" import "./Login.css"
@@ -7,6 +7,10 @@ export const Login = () => {
const [email, set] = useState("") const [email, set] = useState("")
const existDialog = useRef() const existDialog = useRef()
const history = useHistory() const history = useHistory()
const existingUserCheck = () => { const existingUserCheck = () => {
return fetch(`http://localhost:8088/users?email=${email}`) return fetch(`http://localhost:8088/users?email=${email}`)
@@ -17,7 +21,7 @@ export const Login = () => {
const handleLogin = (e) => { const handleLogin = (e) => {
e.preventDefault() e.preventDefault()
existingUserCheck() existingUserCheck()
.then(exists => { .then (exists => {
if (exists) { if (exists) {
localStorage.setItem("graphicsbaytracker_customer", exists.id) localStorage.setItem("graphicsbaytracker_customer", exists.id)
history.push("") history.push("")
@@ -27,7 +31,18 @@ export const Login = () => {
}) })
} }
const skipLogin = () => {
const setLocalStorageUser = () => localStorage.setItem("graphicsbaytracker_customer", 1)
const skipToHome = () => history.replace('./GraphicsBayTrackerHome')
return (setLocalStorageUser(), skipToHome())
}
const redirectToRegister = () => {
history.replace("./Register")
}
return ( return (
<main className="container--login"> <main className="container--login">
<dialog className="dialog dialog--auth" ref={existDialog}> <dialog className="dialog dialog--auth" ref={existDialog}>
<div>User does not exist</div> <div>User does not exist</div>
@@ -54,11 +69,11 @@ export const Login = () => {
</form> </form>
</section> </section>
<section className="link--register"> <section className="link--register">
<Link to="/register">Not a member yet?</Link> <button onClick={ redirectToRegister}>Not a member yet?</button>
</section>
<section className="link-skiplogin">
<Link to="/GraphicsBayTrackerHome">Skip Login</Link>
</section> </section>
<button onClick={ skipLogin }>Skip Login</button>
</main> </main>
) )
} }
+10 -5
View File
@@ -1,10 +1,15 @@
import React from "react" import React from "react"
import { NavBar } from "../nav/NavBar" import { useState, useEffect } from "react"
import { NewsStories } from "./NewsStories"
export const GraphicsBayTrackerHome =()=>{
const displayNavBar = NavBar()
return <div> export const GraphicsBayTrackerHome = () => {
{displayNavBar} const [ keyprices, setkeyprices] = useState({})
return (
<>
<div>
</div> </div>
</>)
} }
+1 -1
View File
@@ -1,4 +1,4 @@
export const NewsStories = () => { export const NewsStories = () => {
return <div></div> return <h1> This is a news story </h1>
} }
+1 -1
View File
@@ -29,7 +29,7 @@ export const NavBar = () => {
<ul className="navbar-nav"> <ul className="navbar-nav">
<li className="nav-item"> <li className="nav-item">
{ {
localStorage.graphicsbaytracker_customer >= 1 ? <Link className="nav-Link" to="/Logout">Logout</Link> : <Link className="nav-link" to="/Login">Login</Link> localStorage.graphicsbaytracker_customer !== 1 ? <Link className="nav-Link" to="/Logout">Logout</Link> : <Link className="nav-link" to="/Login">Login</Link>
} }