package-lock.json

@@ -16,6 +16,10 @@
         "react-router-dom": "5.3",
         "react-scripts": "4.0.3",
         "web-vitals": "^1.1.2"
+      },
+      "devDependencies": {
+        "eslint": "^7.32.0",
+        "eslint-plugin-react": "^7.27.1"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -6141,9 +6145,9 @@
       }
     },
     "node_modules/confusing-browser-globals": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz",
-      "integrity": "sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA=="
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
+      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA=="
     },
     "node_modules/connect-history-api-fallback": {
       "version": "1.6.0",
@@ -26267,9 +26271,9 @@
       }
     },
     "confusing-browser-globals": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz",
-      "integrity": "sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA=="
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
+      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA=="
     },
     "connect-history-api-fallback": {
       "version": "1.6.0",

package.json

@@ -35,5 +35,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.27.1"
   }
 }

src/components/ApplicationViews.js

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

src/components/GraphicsBayTracker.js

@@ -4,6 +4,7 @@ import { ApplicationViews } from "./ApplicationViews";
 import { NavBar } from "./nav/NavBar";
 import { Login } from "./auth/Login";
 import { Register } from "./auth/Register";
+import { HomepageBanner } from "./home/HomepageBanner";
 
 export const GraphicsBayTracker = () => {
   return ( <>
@@ -13,6 +14,7 @@ export const GraphicsBayTracker = () => {
         if (localStorage.getItem("graphicsbaytracker_customer")) {
           return (
             <>
+             <HomepageBanner />
               <NavBar />
               <ApplicationViews />
             </>

src/components/home/GraphicsBayTrackerHome.js

@@ -22,7 +22,7 @@ export const GraphicsBayTrackerHome = () => {
     
     return ( <>
 
-        <h1><Link to="/">GraphicsBay Tracker</Link></h1>  <div> 
+          <div> 
             <button onClick={() => history.push("/pricing/GPUDataInterface")}>Graphics Card Pricing Tool</button>
             {NewsStories()} 
         </div>  

src/components/nav/NavBar.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"
 import { Link, useHistory } from "react-router-dom"
 import { Login } from "../auth/Login"
 
+
 import { Profile } from "../profile/Profile"
 import { GPUDataInterface } from "../pricing/GPUDataInterface"
 import { Props } from "react"
@@ -10,6 +11,7 @@ import "./NavBar.css"
 
 
 export const NavBar = (props) => {
+    const history = useHistory()
     
   
    
@@ -24,10 +26,10 @@ export const NavBar = (props) => {
                 <div id="navbarNavDropdown" className="navbar-collapse collapse">
                     <ul className="navbar-nav mr-auto">
                         <li className="nav-item active">
-                        <button onClick={ GPUDataInterface }> Pricing Data</button>
+                        <button onClick={() => history.push("/pricing/GPUDataInterface")}> Pricing Data</button>
                         </li>
                         <li className="nav-item">
-                            <button onClick={ Profile }> Profile and Tracked Cards</button>
+                            <button onClick={ () => history.push("/profile/Profile") }> Profile and Tracked Cards</button>
                         </li>
                     </ul>
                     <ul className="navbar-nav">

src/components/pricing/GPUDataInterface.js

@@ -1,8 +1,13 @@
 import { React } from "react"
-import { useState,useEffect } from "react"
+import { useState, useEffect, } from "react"
 import { Link } from "react-router-dom"
 export const GPUDataInterface = () => {
     const [gpucarddata, fetchgpucarddata] = useState([])
+    const [addedtrackedcards, addtotrackedcards] = useState(0)
+    const [currentUser, setcurrentuser] = useState(parseInt(localStorage.getItem("graphicsbaytracker_customer")))
+    
+
+    // const [selectedOEM, setselectedOEM]= useState("")
     useEffect(
         () => {
             fetch("http://localhost:8088/cardData")
@@ -13,19 +18,98 @@ export const GPUDataInterface = () => {
         },
         []
     )
-    return (
-        <>
-        <h1>GPUDataInterface</h1>
+   
+
+    const selectOEM = (event) => {
+        if (event.target.value === "1") {
+            return (fetchgpucarddata(gpucarddata.filter((gpudataobj) => gpudataobj.oem === "AMD")))
+        } else if (event.target.value === "2") {
+            return (fetchgpucarddata(gpucarddata.filter((gpudataobj) => gpudataobj.oem === "NVIDIA")))
+        }
+    }
+
+    
+    const saveTrackedCards = (gpudataobj) => {
         
-        <table>
+
+       const trackedCardOBJ = {
+                userId: currentUser,
+                cardDataId: gpudataobj.id
+        }
+        const postfetchfortrackedcards = {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(trackedCardOBJ),
+        }
+        return fetch("http://localhost:8088/trackedCards", postfetchfortrackedcards)
+    }
+
+    
+    return(
+        <>
+        <h1>Graphics Card Prices</h1>
+                <>
+              <div>
+              <form>
+                    <b> Filter by OEM</b>
+                <select defaultValue= "Select an OEM"
+
+                onChange={(event) => selectOEM(event)} >
+                <option value="1">AMD</option>
+                <option value="2">NVIDIA</option>
+                </select>
+                </form>
+              </div>
+
+                </>
+             <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>
+        < tr > 
+        
+        
+            {
+                gpucarddata.map(
+                    gpudataobj => {
+
+                        return ( <>
+                            <p key = {
+                                `gpudataobj--${gpudataobj.id}`
+                            } > {
+                                gpudataobj.oem
+                            } {
+                                gpudataobj.brand
+                            } {
+                                gpudataobj.model
+                            } {
+                                gpudataobj.price.toLocaleString('en-US', {
+                                    style: 'currency',
+                                    currency: 'USD'
+                                })
+                            } </p>   {
+                                 <button onClick={() => saveTrackedCards(gpudataobj) }>Add to Tracked Cards</button>
+                                } 
+                                </>
+                                )
+
+                            }  )
+                        }
+                    
+</tr> 
+                    </table>
           
-        </>
-    )}
+        </> 
+        )
+}
+
+
+
+
+
+
+

src/components/pricing/OEMSelector.js

@@ -0,0 +1,2 @@
+import react from "react";
+import { useEffect,useState,useHistory } from "react";

src/components/profile/Profile.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { useState, useEffect } from "react";
+
+export const Profile = () => {
+    const [currentUser, changecurrentUser] = useState(localStorage.getItem("graphicsbaytracker_customer"))
+    const [currentUsertrackedcards, setcurrentUsertrackedcards] = useState(localStorage.getItem("graphicsbaytracker_customer"))
+
+    useEffect(
+        () => {
+            fetch("http://localhost:8088/trackedCards?_expand=cardDataId")
+                .then(res => res.json())
+                .then(setcurrentUsertrackedcards)
+        },[])
+
+        return(
+
+            <h2>My Tracked Cards</h2>
+        )
+}