Homepage content completeexcept for logout button and CSS

src/components/ApplicationViews.js

@@ -2,6 +2,7 @@ import React from "react"
 import { Route } from "react-router-dom"
 import { GraphicsBayTrackerHome } from "./home/GraphicsBayTrackerHome"
 import { Profile } from "./profile/Profile"
+import { GPUDataInterface } from "./pricing/GPUDataInterface"
 
 
 export const ApplicationViews = () => {
@@ -18,6 +19,9 @@ export const ApplicationViews = () => {
             <Route path="profile/Profile" >
                 <Profile />
             </Route>
+            <Route path="pricing/GPUDataInterface" >
+                <GPUDataInterface />
+            </Route>
         </>
     )
 }

src/components/auth/Logout.js

@@ -3,11 +3,15 @@ import {useState, useEffect} from "react"
 import { useHistory } from "react-router-dom"
 
 export const Logout = () => {
-    const [loggedincustomer, setloggedincustomer] = useState(localStorage.graphicsbaytracker_customer)
+    const [loggedincustomer, setloggedincustomer] = useState(localStorage.getItem("graphicsbaytracker_customer"))
+
+    const setItemFromLocalStorage = () => {
+         setloggedincustomer()
+    }
     return (
         <>
         <div>
-        <button onClick={() => setloggedincustomer(localStorage.removeItem("graphicsbaytracker_customer"))}>Log Out</button>
+        <button onClick={() => setItemFromLocalStorage(localStorage.removeItem("graphicsbaytracker_customer"))}>Log Out</button>
         </div>
         </>
     ) 

src/components/home/GraphicsBayTrackerHome.js

@@ -1,16 +1,54 @@
 import React from "react"
-import { Route } from "react-router-dom/cjs/react-router-dom.min"
-import { useState, useEffect } from "react"
-import { NewsStories } from "./NewsStories"
+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"
 
 
 export const GraphicsBayTrackerHome = () => {
-    // const [ keyprices, setkeyprices] = useState({})
-    return (
-        <>
-    {/* <Route path="NewsStories"><NewsStories /></Route> */}
- <h1>Display</h1>
+    const [keyprices, fetchkeyprices] = useState([])
+
+    useEffect(
+        () => {
+            fetch("http://localhost:8088/cardData")
+                .then(res => res.json())
+                .then(fetchkeyprices)
+        },[])
+                            
+     
+    
+    return ( <>
+
+        <h1><Link to="/GraphicsBayTrackerHome">GraphicsBay Tracker</Link></h1>  <div> 
+            <button><Link to="/GPUDataInterface">Graphics Card Pricing Tool</Link></button>
+            {NewsStories()} 
+        </div>  
+        <aside>
+        <p>Key Prices</p>  
+        <div>
+
+        {
+            keyprices.map(
+                (cardDataObject) => {
+                    if (cardDataObject.keyPrice === true)
+                    return( 
+                    <div> 
+                        <p key = {`cardDataObject--${cardDataObject.id}`} > {cardDataObject.oem} {cardDataObject.brand} {cardDataObject.model} </p> 
+                        <p key = {`cardDataObject--${cardDataObject.id}`}> Card Price - {cardDataObject.price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })} </p> 
+                        </div>)
+                }
+                )
+        }
+        </div>
+</aside>
+</>
 
-    </>
     )
 }

src/components/home/NewsStories.js

@@ -1,4 +1,34 @@
-
+import {
+    useEffect,
+    useState
+} from "react"
 export const NewsStories = () => {
-    return <h1> This is a news story </h1>
+    const [newsstories, setNewsStories] = useState([])
+
+
+     
+        useEffect(
+            () => {
+                fetch("http://localhost:8088/newsstories")
+                    .then(res => res.json())
+                    .then((data) => {
+                        setNewsStories(data)
+                    })
+            },
+            []
+        )
+    
+        
+    return ( <>
+        <div>{newsstories.map( 
+            (newsOBJ) => {
+                 return <div><p key={`newsOBJ--${newsOBJ.id}`}>{newsOBJ.storyText} </p>
+                    <a href={newsOBJ.link} >{newsOBJ.link}</a>
+                 </div>
+            }
+        )}
+            </div>
+        </>
+        
+    )
 }

src/components/nav/NavBar.js

@@ -2,44 +2,37 @@ 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 "./NavBar.css"
 
 
 
 export const NavBar = () => {
-    const history = useHistory()
 
     
 
     return (
         <div className="container">
             <nav className="navbar navbar-expand-sm navbar-light bg-light fixed-top onTop">
-                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-                    <span className="navbar-toggler-icon"></span>
-                </button>
                 <div id="navbarNavDropdown" className="navbar-collapse collapse">
                     <ul className="navbar-nav mr-auto">
                         <li className="nav-item active">
-                            <Link className="nav-link" to="/PricingData">Pricing Data<span className="sr-only"></span></Link>
+                        <button onClick={ GPUDataInterface }> Pricing Data</button>
                         </li>
                         <li className="nav-item">
-                            <Link className="nav-link" to="/Profile">My Profile and Tracked Cards<span className="sr-only"></span></Link>
+                            <button onClick={ Profile }> Profile and Tracked Cards</button>
                         </li>
                     </ul>
                     <ul className="navbar-nav">
                         <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 ? <button onClick={ Logout }> Log Out </button> :  <Link className="nav-link" to="/Login">Log In</Link>
                                
                                    
                             }
                         </li>
-                        <li className="nav-item">
-                            {
-                            
-                                 
-                            }
-                        </li>
+        
                     </ul>
                 </div>
             </nav>

src/components/pricing/GPUDataInterface.js

@@ -0,0 +1,25 @@
+import { React } from "react"
+import { useState,useEffect } from "react"
+import { Link } from "react-router-dom"
+export const GPUDataInterface = () => {
+    const [gpucarddata, fetchgpucarddata] = useState([])
+    useEffect(
+        () => {
+            fetch("http://localhost:8088/cardData")
+                .then(res => res.json())
+                .then((data) => {
+                    fetchgpucarddata(data)
+                })
+        },
+        []
+    )
+    return (
+        <>
+        <h1>GPUDataInterface</h1>
+        <div>
+        <table>
+
+        </table>
+    </div>
+        </>
+    )}