src/components/ApplicationViews.js

@@ -2,17 +2,24 @@ 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 = () => {
     return (
         <>
-            <Route path="/GraphicsBayTrackerHome">
+
+            <Route exact path="/">
                 <GraphicsBayTrackerHome />
             </Route>
-            <Route path="profile/Profile" >
+            <Route path="/profile/Profile" >
                 <Profile />
             </Route>
+            <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,16 +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.graphicsbaytracker_customer)
-    return (
-        <>
-        <div>
-        <button onClick={() => setloggedincustomer(localStorage.removeItem("graphicsbaytracker_customer"))}>Log Out</button>
-        </div>
-        </>
-    ) 
+export const Logout = (props) => {
+     const [loggedIn, setLoggedIn] = useState(true)
+
+ 
+
+    useEffect(() => {
+      if (localStorage.getItem("graphicsbaytracker_customer") !== "1") {
+          setLoggedIn(true)
+          }
+    }, []);
+  
+  const logOutCustomer = () => {
+        localStorage.removeItem("graphicsbaytracker_customer");
+        setLoggedIn(false)
+  
     
+  }
+
     
 }

src/components/home/GraphicsBayTrackerHome.js

@@ -1,15 +1,50 @@
 import React from "react"
-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"
+import { GPUDataInterface } from "../pricing/GPUDataInterface"
+import { useHistory } from "react-router-dom/cjs/react-router-dom.min"
 
 
 export const GraphicsBayTrackerHome = () => {
-    const [ keyprices, setkeyprices] = useState({})
-    return (
-    <>
+    const [keyprices, fetchkeyprices] = useState([])
+    const history = useHistory()
+
+    useEffect(
+        () => {
+            fetch("http://localhost:8088/cardData")
+                .then(res => res.json())
+                .then(fetchkeyprices)
+        },[])
+                            
+     
     
-    <div>
-         
-    </div>
-    </>)
+    return ( <>
+
+        <h1><Link to="/">GraphicsBay Tracker</Link></h1>  <div> 
+            <button onClick={() => history.push("/pricing/GPUDataInterface")}>Graphics Card Pricing Tool</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

@@ -1,48 +1,47 @@
 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 = () => {
-    const history = useHistory()
-
+export const NavBar = (props) => {
+    
+  
+   
+        
+    
     
 
     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>
-                               
-                                   
-                            }
-                        </li>
-                        <li className="nav-item">
-                            {
-                            
-                                 
-                            }
-                        </li>
-                    </ul>
-                </div>
-            </nav>
-        </div>
+                        < li className = "nav-item" > {
+                                                <button onClick = {
+                                                    () => {localStorage.removeItem("graphicsbaytracker_customer")}}> Log Out </button>
+
+    }
+                            </li>
+
+</ul>
+</div>
+</nav>
+</div>
+</>
     )
 }

src/components/pricing/GPUDataInterface.js

@@ -0,0 +1,31 @@
+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>
+        
+        <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>
+          
+        </>
+    )}