package-lock.json

@@ -16,10 +16,6 @@
         "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": {

package.json

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

src/components/ApplicationViews.js

@@ -4,6 +4,7 @@ import { GraphicsBayTrackerHome } from "./home/GraphicsBayTrackerHome"
 import { Profile } from "./profile/Profile"
 import { GPUDataInterface } from "./pricing/GPUDataInterface"
 import { HomepageBanner } from "./home/HomepageBanner"
+import { ProfileForm } from "./profile/ProfileForm"
 
 
 
@@ -20,8 +21,8 @@ export const ApplicationViews = () => {
             <Route path="/pricing/GPUDataInterface" >
                 <GPUDataInterface />
             </Route>
-            <Route path="/profile/Profile">
-                <Profile />
+            <Route path="/profile/ProfileForm" >
+                <ProfileForm />
             </Route>
             
         </>

src/components/home/HomepageBanner.js

@@ -0,0 +1,11 @@
+import react from "react";
+import { useState, useEffect, useHistory } from "react";
+import { GraphicsBayTrackerHome } from "./GraphicsBayTrackerHome";
+import { Link } from "react-router-dom";
+
+export const HomepageBanner = () => {
+    
+    return (
+        <h1><Link to="/">GraphicsBay Tracker</Link></h1>
+    )
+}

src/components/pricing/GPUDataInterface.js

@@ -19,14 +19,14 @@ export const GPUDataInterface = () => {
         []
     )
    
-
-    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")))
-        }
-    }
+{/* unfinished feature, will implement in production version*/}
+    // 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) => {
@@ -51,7 +51,8 @@ export const GPUDataInterface = () => {
         <>
         <h1>Graphics Card Prices</h1>
                 <>
-              <div>
+            {/* unfinished feature, will implement in production version*/}
+              {/* <div>
               <form>
                     <b> Filter by OEM</b>
                 <select defaultValue= "Select an OEM"
@@ -61,7 +62,7 @@ export const GPUDataInterface = () => {
                 <option value="2">NVIDIA</option>
                 </select>
                 </form>
-              </div>
+              </div> */}
 
                 </>
              <table>

src/components/profile/Profile.js

@@ -1,19 +1,100 @@
-import react from "react";
+import { React } from "react"
 import { useState, useEffect } from "react";
+import { useHistory } from "react-router-dom";
+import { ProfileForm } from "./ProfileForm";
 
 export const Profile = () => {
-    const [currentUser, changecurrentUser] = useState(localStorage.getItem("graphicsbaytracker_customer"))
-    const [currentUsertrackedcards, setcurrentUsertrackedcards] = useState(localStorage.getItem("graphicsbaytracker_customer"))
+    const [Users, fetchUsers] = useState([])
+    const [currentuser, setcurrentuser] = useState(localStorage.getItem("graphicsbaytracker_customer"))
+    const [currentUsertrackedcards, setcurrentUsertrackedcards] = useState([])
+    const history = useHistory()
+
 
     useEffect(
         () => {
-            fetch("http://localhost:8088/trackedCards?_expand=cardDataId")
+            fetch("http://localhost:8088/trackedCards?_expand=cardData")
                 .then(res => res.json())
                 .then(setcurrentUsertrackedcards)
-        },[])
+        }, [])
+        useEffect(
+            () => {
+                fetch("http://localhost:8088/users")
+                    .then(res => res.json())
+                    .then(fetchUsers)
+            }, [])
 
+            // useEffect =  (
+            //     () = {
+
+            //     }, [currentUsertrackedcards]
+            //     )
+const showprofileinfo = () => {
+  const founduser =  Users.find((user) => user.id === parseInt(currentuser)) 
+        
+  return (<p>{founduser?.name} <br/> {founduser?.email}</p>)
+}
+
+
+    
+
+    const removetrackedcard = (gpudataobj) => {
+
+    
+        const deletefetchfortrackedcards = {
+                method: "DELETE",
+                
+        }   
+                return fetch(`http://localhost:8088/trackedCards/${gpudataobj.id}`, deletefetchfortrackedcards)
+                .then(() => {
+                    fetch("http://localhost:8088/trackedCards?_expand=cardData")
+                        .then(res => res.json())
+                        .then(setcurrentUsertrackedcards)
+                })
+        }   
         return(
+          <>
+          
+        <h2>My Tracked Cards</h2>
+        <p>{showprofileinfo()}</p>
+        <button onClick={ () => { history.push("/profile/ProfileForm")
+        }
+    }>Edit Profile Info </button>
+        <table>
+            <tr>
+            <th>Brand</th>
+            <th>Model</th>
+            <th>Price</th>
+            </tr>
+        < tr >
 
-            <h2>My Tracked Cards</h2>
+
+            {
+                currentUsertrackedcards.map(
+                    gpudataobj => {
+
+                        return ( <>
+                              {
+                                gpudataobj.cardData.oem
+                            } {
+                                gpudataobj.cardData.brand
+                            } {
+                                gpudataobj.cardData.model
+                            } {
+                                gpudataobj.cardData.price.toLocaleString('en-US', {
+                                    style: 'currency',
+                                    currency: 'USD'
+                                })
+                            }   {
+                                 <button onClick={ () => removetrackedcard(gpudataobj)} >Remove from Tracked Cards</button>
+                                }
+                                </>
+                                )
+
+                            }  )
+                        }
+          
+</tr>
+                    </table>
+          </>  
         )
 }

src/components/profile/ProfileForm.js

@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react"
+import { useHistory } from "react-router-dom"
+
+
+export const ProfileForm = () => {
+   const[usertoedit, setediteduser ] = useState(localStorage.getItem("graphicsbaytracker_customer"))
+   const [userpool, setuserpool] = useState([])
+   const [ founduser, setfounduser] = useState({})
+   const [ editedusername, seteditedusername ] = useState("")
+   const [editeduseremail, setediteduseremail] = useState("")
+   const history = useHistory()
+
+
+    const editprofileinfocall = () => {
+        fetch(`http://localhost:8088/users/${founduser.id}`, {
+                method: 'PUT',
+                body: JSON.stringify({
+                    name: editedusername,
+                    email: editeduseremail,
+                    
+                }),
+                headers: {
+                  "Content-type": "application/json; charset=UTF-8"
+                }
+            }).then(response => {
+                            return response.json()
+            // }).then(json => {
+            //     console.log(json)
+            //     this.setState({
+            //         user:json
+            //     });
+            }).then(() => history.push("profile/Profile"))
+        
+    }
+ 
+        // PUT request using fetch inside useEffect React hook
+        // const editprofileinfocall = () => {
+        // const requestOptions = {
+        //     method: 'PUT',
+        //     // headers: { 'Content-Type': 'application/json' },
+        //     // body: JSON.stringify({ name: 'React Hooks PUT Request Example', email:'This string' })
+        // };
+        // fetch(`http://localhost:8088/`, requestOptions)
+        //     .then(response => response.json())
+        //     .then(data => this.setState({ postId: data.id }));
+
+    
+    // empty dependency array means this effect will only run once (like componentDidMount in classes)
+    // };
+
+    useEffect(
+        () => {
+           const desireduser = userpool.find((userobj) => userobj.id === parseInt(usertoedit))
+            return setfounduser(desireduser)
+        }, )
+    useEffect(
+        () => {
+            fetch("http://localhost:8088/users")
+                .then(res => res.json())
+                .then(setuserpool)
+        }, [])
+    return (
+        <>
+    <h2>Edit Profile Data</h2>
+        <form id="edituserform">
+  <label for="fandlname">First and Last Name</label><br/>
+  <input type="text" id="fndlname" name="fandlname"  onChange={(e) => {seteditedusername(e.target.value)}}/><br/>
+  <label for="email">Email</label><br/>
+  <input type="text" id="email" name="email" onChange={(e) => { setediteduseremail(e.target.value)}}/>
+  <button type="button" id="submitbutton" name="submitbutton" form="edituserform" onClick={()=> editprofileinfocall()}>Submit</button>
+
+    </form>
+        </>
+    )
+}
+

src/components/profile/ProfileFormv2.txt

@@ -0,0 +1,32 @@
+const [formactive, setformstate] = useState(false)
+const toggleForm = () => {
+    setformstate(true)  
+    formactive === true ? <ProfileForm /> : <Profile />
+}
+
+
+ useEffect(() => {
+             Users.filter(
+                 ({
+                     id,
+                     name,
+                     email
+                 }) => {
+                     if (Users.id === parseInt(currentuser))
+                         return ( 
+                         <ProfileForm 
+                            id = {
+                                 id
+                             }
+                             name = {
+                                 name
+                             }
+                             email = {
+                                 email
+                             }
+                             />
+                             )
+                         }
+                    )
+              }
+         )