diff --git a/package-lock.json b/package-lock.json index f205360..706abc8 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index c8f4e86..22103cf 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/ApplicationViews.js b/src/components/ApplicationViews.js index f2a8b36..6ea5fad 100644 --- a/src/components/ApplicationViews.js +++ b/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 = () => { - - + + diff --git a/src/components/home/HomepageBanner.js b/src/components/home/HomepageBanner.js new file mode 100644 index 0000000..eea600c --- /dev/null +++ b/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 ( +

GraphicsBay Tracker

+ ) +} \ No newline at end of file diff --git a/src/components/pricing/GPUDataInterface.js b/src/components/pricing/GPUDataInterface.js index 11d5106..47fee8a 100644 --- a/src/components/pricing/GPUDataInterface.js +++ b/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 = () => { <>

Graphics Card Prices

<> -
+ {/* unfinished feature, will implement in production version*/} + {/*
Filter by OEM
-
+
*/} diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js index accffb9..0e4551d 100644 --- a/src/components/profile/Profile.js +++ b/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 (

{founduser?.name}
{founduser?.email}

) +} + + + + + 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( + <> + +

My Tracked Cards

+

{showprofileinfo()}

+ +
+ + + + + + < tr > -

My Tracked Cards

+ + { + currentUsertrackedcards.map( + gpudataobj => { + + return ( <> + { + gpudataobj.cardData.oem + } { + gpudataobj.cardData.brand + } { + gpudataobj.cardData.model + } { + gpudataobj.cardData.price.toLocaleString('en-US', { + style: 'currency', + currency: 'USD' + }) + } { + + } + + ) + + } ) + } + + +
BrandModelPrice
+ ) } \ No newline at end of file diff --git a/src/components/profile/ProfileData.js b/src/components/profile/ProfileData.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/profile/ProfileForm.js b/src/components/profile/ProfileForm.js new file mode 100644 index 0000000..5605af0 --- /dev/null +++ b/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 ( + <> +

Edit Profile Data

+
+
+ {seteditedusername(e.target.value)}}/>
+
+ { setediteduseremail(e.target.value)}}/> + + +
+ + ) +} + diff --git a/src/components/profile/ProfileFormv2.txt b/src/components/profile/ProfileFormv2.txt new file mode 100644 index 0000000..ccb88d4 --- /dev/null +++ b/src/components/profile/ProfileFormv2.txt @@ -0,0 +1,32 @@ +const [formactive, setformstate] = useState(false) +const toggleForm = () => { + setformstate(true) + formactive === true ? : +} + + + useEffect(() => { + Users.filter( + ({ + id, + name, + email + }) => { + if (Users.id === parseInt(currentuser)) + return ( + + ) + } + ) + } + ) \ No newline at end of file