Completed Home page, some progress done on main priciingview

src/components/ApplicationViews.js

@@ -5,6 +5,7 @@ import { Profile } from "./profile/Profile"
 import { GPUDataInterface } from "./pricing/GPUDataInterface"
 
 
+
 export const ApplicationViews = () => {
     return (
         <>
@@ -12,16 +13,13 @@ export const ApplicationViews = () => {
             <Route exact path="/">
                 <GraphicsBayTrackerHome />
             </Route>
-
-            <Route path="/GraphicsBayTrackerHome">
-                <GraphicsBayTrackerHome />
-            </Route>
-            <Route path="profile/Profile" >
+            <Route path="/profile/Profile" >
                 <Profile />
             </Route>
-            <Route path="pricing/GPUDataInterface" >
+            <Route path="/pricing/GPUDataInterface" >
                 <GPUDataInterface />
             </Route>
+            
         </>
     )
 }

src/components/auth/Login.js

@@ -42,7 +42,7 @@ const redirectToRegister = () => {
 }
 
     return (
-        
+        <>
         <main className="container--login">
             <dialog className="dialog dialog--auth" ref={existDialog}>
                 <div>User does not exist</div>
@@ -68,13 +68,9 @@ const redirectToRegister = () => {
                     </fieldset>
                 </form>
             </section>
-            <section className="link--register">
                 <button onClick={ redirectToRegister}>Not a member yet?</button>
-            </section>
-            <button onClick={ skipLogin }>Skip Login</button>
-            
-    
-        </main>
+           </main>
+        </>
     )
 }
 

src/components/auth/Logout.js

@@ -1,20 +1,25 @@
 import React from "react"
 import {useState, useEffect} from "react"
 import { useHistory } from "react-router-dom"
+import { props } from "react"
 
-export const Logout = () => {
-    const [loggedincustomer, setloggedincustomer] = useState(localStorage.getItem("graphicsbaytracker_customer"))
+export const Logout = (props) => {
+     const [loggedIn, setLoggedIn] = useState(true)
 
-    const setItemFromLocalStorage = () => {
-         setloggedincustomer()
-    }
-    return (
-        <>
-        <div>
-        <button onClick={() => setItemFromLocalStorage(localStorage.removeItem("graphicsbaytracker_customer"))}>Log Out</button>
-        </div>
-        </>
-    ) 
+ 
+
+    useEffect(() => {
+      if (localStorage.getItem("graphicsbaytracker_customer") !== "1") {
+          setLoggedIn(true)
+          }
+    }, []);
+  
+  const logOutCustomer = () => {
+        localStorage.removeItem("graphicsbaytracker_customer");
+        setLoggedIn(false)
+  
+    
+  }
 
     
 }

src/components/home/GraphicsBayTrackerHome.js

@@ -1,19 +1,15 @@
 import React from "react"
 import { Link } from "react-router-dom"
-import {
-    Route
-} from "react-router-dom/cjs/react-router-dom.min"
-import {
-    useState,
-    useEffect
-} from "react"
-import {
-    NewsStories
-} from "./NewsStories"
+import {Route} from "react-router-dom/cjs/react-router-dom.min"
+import {useState,useEffect } from "react"
+import {NewsStories} from "./NewsStories"
+import { GPUDataInterface } from "../pricing/GPUDataInterface"
+import { useHistory } from "react-router-dom/cjs/react-router-dom.min"
 
 
 export const GraphicsBayTrackerHome = () => {
     const [keyprices, fetchkeyprices] = useState([])
+    const history = useHistory()
 
     useEffect(
         () => {
@@ -26,8 +22,8 @@ export const GraphicsBayTrackerHome = () => {
     
     return ( <>
 
-        <h1><Link to="/GraphicsBayTrackerHome">GraphicsBay Tracker</Link></h1>  <div> 
-            <button><Link to="/GPUDataInterface">Graphics Card Pricing Tool</Link></button>
+        <h1><Link to="/">GraphicsBay Tracker</Link></h1>  <div> 
+            <button onClick={() => history.push("/pricing/GPUDataInterface")}>Graphics Card Pricing Tool</button>
             {NewsStories()} 
         </div>  
         <aside>
@@ -36,7 +32,7 @@ export const GraphicsBayTrackerHome = () => {
 
         {
             keyprices.map(
-                (cardDataObject) => {
+                cardDataObject => {
                     if (cardDataObject.keyPrice === true)
                     return( 
                     <div> 

src/components/nav/NavBar.js

@@ -1,18 +1,24 @@
 import React, { useEffect, useState } from "react"
 import { Link, useHistory } from "react-router-dom"
 import { Login } from "../auth/Login"
-import { Logout } from "../auth/Logout"
+
 import { Profile } from "../profile/Profile"
 import { GPUDataInterface } from "../pricing/GPUDataInterface"
+import { Props } from "react"
 import "./NavBar.css"
 
 
 
-export const NavBar = () => {
+export const NavBar = (props) => {
+    
+  
+   
+        
     
     
 
     return (
+        <>
         <div className="container">
             <nav className="navbar navbar-expand-sm navbar-light bg-light fixed-top onTop">
                 <div id="navbarNavDropdown" className="navbar-collapse collapse">
@@ -25,17 +31,17 @@ export const NavBar = () => {
                         </li>
                     </ul>
                     <ul className="navbar-nav">
-                        <li className="nav-item">
-                            {
-                            localStorage.graphicsbaytracker_customer !== 1 ? <button onClick={ Logout }> Log Out </button> :  <Link className="nav-link" to="/Login">Log In</Link>
+                        < li className = "nav-item" > {
+                                                <button onClick = {
+                                                    () => {localStorage.removeItem("graphicsbaytracker_customer")}}> Log Out </button>
 
+    }
+                            </li>
 
-                            }
-                        </li>
-        
-                    </ul>
-                </div>
-            </nav>
-        </div>
+</ul>
+</div>
+</nav>
+</div>
+</>
     )
 }

src/components/pricing/GPUDataInterface.js

@@ -16,10 +16,16 @@ export const GPUDataInterface = () => {
     return (
         <>
         <h1>GPUDataInterface</h1>
-        <div>
-        <table>
         
+        <table>
+            <tr> 
+            <th>Brand</th>
+            <th>Model</th>
+            <th>Price</th>
+            </tr>
+        <tr>{gpucarddata.map(gpudataobj => {return ( <p key ={`gpucardobj--${gpudataobj.id}`}> {gpudataobj.brand} {gpudataobj.model} {gpudataobj.price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</p>)})}
+        </tr>
         </table>
-    </div>
+          
         </>
     )}