From 960b1f5aae77bc39c703569cd952093a66176f2d Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 16 Dec 2021 19:08:29 -0600 Subject: [PATCH 1/9] adding accidently untracked files --- .eslintrc.json | 22 ++++++++++++++++++++++ src/components/home/HomepageBanner.js | 11 +++++++++++ 2 files changed, 33 insertions(+) create mode 100644 .eslintrc.json create mode 100644 src/components/home/HomepageBanner.js diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..88b65a6 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,22 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended" + ], + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": [ + "react" + ], + "rules": { + } +} 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 -- 2.47.3 From e12b0aba039371ccf0bd19524e5164cbc84679fb Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 16 Dec 2021 19:30:00 -0600 Subject: [PATCH 2/9] saving progress on creating React state components for profile --- src/components/pricing/GPUDataInterface.js | 21 +++++++++++---------- src/components/profile/Profile.js | 18 +++++++++++++----- 2 files changed, 24 insertions(+), 15 deletions(-) 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..ae9ad43 100644 --- a/src/components/profile/Profile.js +++ b/src/components/profile/Profile.js @@ -2,8 +2,9 @@ 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")) + const [Users, fetchUsers] = useState([]) + const [currentuser, setcurrentuser] = useState(localStorage.getItem("graphicsbaytracker_customer")) + const [currentUsertrackedcards, setcurrentUsertrackedcards] = useState([])) useEffect( () => { @@ -11,9 +12,16 @@ export const Profile = () => { .then(res => res.json()) .then(setcurrentUsertrackedcards) },[]) - + useEffect( + () => { + fetch("http://localhost:8088/users") + .then(res => res.json()) + .then(fetchUsers) + },[]) return( - -

My Tracked Cards

+ <> + {/* why is this returning duplicate elements?*/} +

returning something. This is a test

+ ) } \ No newline at end of file -- 2.47.3 From 1bbeff7b92bf5c36392b8892345affacd42e5665 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 16 Dec 2021 20:22:05 -0600 Subject: [PATCH 3/9] saving changes before trying link call method instead of history.push --- src/components/profile/Profile.js | 45 +++++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js index ae9ad43..e456295 100644 --- a/src/components/profile/Profile.js +++ b/src/components/profile/Profile.js @@ -1,27 +1,62 @@ -import react from "react"; +import { React } from "react" import { useState, useEffect } from "react"; export const Profile = () => { const [Users, fetchUsers] = useState([]) const [currentuser, setcurrentuser] = useState(localStorage.getItem("graphicsbaytracker_customer")) - const [currentUsertrackedcards, setcurrentUsertrackedcards] = useState([])) + const [currentUsertrackedcards, setcurrentUsertrackedcards] = useState([]) useEffect( () => { fetch("http://localhost:8088/trackedCards?_expand=cardDataId") .then(res => res.json()) .then(setcurrentUsertrackedcards) - },[]) + }, []) useEffect( () => { fetch("http://localhost:8088/users") .then(res => res.json()) .then(fetchUsers) - },[]) + }, []) return( <> - {/* why is this returning duplicate elements?*/} + {/* why is my code returning duplicate elements?*/}

returning something. This is a test

+
+ + + + + + < tr > + + + { + currentUsertrackedcards.map( + gpudataobj => { + + return ( <> +

{ + gpudataobj.cardDataId.oem + } { + gpudataobj.cardDataId.brand + } { + gpudataobj.cardDataId.model + } { + gpudataobj.cardDataId.price + }

{ + + } + + ) + + } ) + } + + +
BrandModelPrice
) } \ No newline at end of file -- 2.47.3 From 36f7eb0d97445fd51aeadd0e049dfeaa1e37d02c Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 16 Dec 2021 22:14:34 -0600 Subject: [PATCH 4/9] saving night work --- src/components/profile/Profile.js | 57 +++++++++++++++++++++++++------ 1 file changed, 46 insertions(+), 11 deletions(-) diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js index e456295..7924023 100644 --- a/src/components/profile/Profile.js +++ b/src/components/profile/Profile.js @@ -8,7 +8,7 @@ export const Profile = () => { useEffect( () => { - fetch("http://localhost:8088/trackedCards?_expand=cardDataId") + fetch("http://localhost:8088/trackedCards?_expand=cardData") .then(res => res.json()) .then(setcurrentUsertrackedcards) }, []) @@ -18,10 +18,44 @@ export const Profile = () => { .then(res => res.json()) .then(fetchUsers) }, []) + + // useEffect = ( + // () = { + + // }, [currentUsertrackedcards] + // ) +// const showprofileinfo = () => { +// Users.filter((user) => { +// if (user.id === currentuser) +// } + + + + + + + const removetrackedcard = (gpudataobj) => { + + const trackedcardtodeleteobj = { + id: gpudataobj.id, + userId: gpudataobj.userId, + cardDataId: gpudataobj.txt + } + const deletefetchfortrackedcards = { + method: "DELETE", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(trackedcardtodeleteobj), + } + + return fetch("http://localhost:8088/trackedCards", deletefetchfortrackedcards) + } return( <> {/* why is my code returning duplicate elements?*/} -

returning something. This is a test

+

My Tracked Cards

+

{}

@@ -36,18 +70,19 @@ export const Profile = () => { gpudataobj => { return ( <> -

{ - gpudataobj.cardDataId.oem + { + gpudataobj.cardData.oem } { - gpudataobj.cardDataId.brand + gpudataobj.cardData.brand } { - gpudataobj.cardDataId.model + gpudataobj.cardData.model } { - gpudataobj.cardDataId.price - }

{ - + gpudataobj.cardData.price.toLocaleString('en-US', { + style: 'currency', + currency: 'USD' + }) + } { + } ) -- 2.47.3 From 9cf596d55d0fb5e86a82c7487affb990ab8f247f Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Sat, 18 Dec 2021 13:02:09 -0600 Subject: [PATCH 5/9] saving progress --- src/components/ApplicationViews.js | 5 +- src/components/profile/Profile.js | 71 +++++++++++++++++++-------- src/components/profile/ProfileData.js | 0 3 files changed, 54 insertions(+), 22 deletions(-) delete mode 100644 src/components/profile/ProfileData.js 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/profile/Profile.js b/src/components/profile/Profile.js index 7924023..ae35fd7 100644 --- a/src/components/profile/Profile.js +++ b/src/components/profile/Profile.js @@ -1,10 +1,12 @@ import { React } from "react" import { useState, useEffect } from "react"; +import { ProfileForm } from "./ProfileForm"; export const Profile = () => { const [Users, fetchUsers] = useState([]) const [currentuser, setcurrentuser] = useState(localStorage.getItem("graphicsbaytracker_customer")) const [currentUsertrackedcards, setcurrentUsertrackedcards] = useState([]) + const [formactive, setformstate] = useState(false) useEffect( () => { @@ -24,38 +26,67 @@ export const Profile = () => { // }, [currentUsertrackedcards] // ) -// const showprofileinfo = () => { -// Users.filter((user) => { -// if (user.id === currentuser) -// } - - +const showprofileinfo = () => { + const founduser = Users.find((user) => user.id === parseInt(currentuser)) + + return (

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

) +} + +const toggleForm = () => { + setformstate(true) + formactive === true ? : +} + useEffect(() => { + Users.filter( + ({ + id, + name, + email + }) => { + if (Users.id === parseInt(currentuser)) + return ( + + ) + } + ) + } + ) const removetrackedcard = (gpudataobj) => { - const trackedcardtodeleteobj = { - id: gpudataobj.id, - userId: gpudataobj.userId, - cardDataId: gpudataobj.txt - } + const deletefetchfortrackedcards = { method: "DELETE", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(trackedcardtodeleteobj), - } - - return fetch("http://localhost:8088/trackedCards", deletefetchfortrackedcards) + + } + return fetch(`http://localhost:8088/trackedCards/${gpudataobj.id}`, deletefetchfortrackedcards) + .then(() => { + fetch("http://localhost:8088/trackedCards?_expand=cardData") + .then(res => res.json()) + .then(setcurrentUsertrackedcards) + }) } return( <> - {/* why is my code returning duplicate elements?*/} +

My Tracked Cards

-

{}

+

{showprofileinfo()}

+
Brand
diff --git a/src/components/profile/ProfileData.js b/src/components/profile/ProfileData.js deleted file mode 100644 index e69de29..0000000 -- 2.47.3 From 19bcd0b5cd4e07ee21a35bab112df392c89b21fb Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Sun, 19 Dec 2021 16:04:46 -0600 Subject: [PATCH 6/9] committing fixed changes --- .eslintrc.json | 22 ---------------------- package-lock.json | 4 ---- package.json | 4 ---- 3 files changed, 30 deletions(-) delete mode 100644 .eslintrc.json diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 88b65a6..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - "eslint:recommended", - "plugin:react/recommended" - ], - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 12, - "sourceType": "module" - }, - "plugins": [ - "react" - ], - "rules": { - } -} 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" } } -- 2.47.3 From 47739caa54d38413de2c19ef098acf8182b8314e Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Sun, 19 Dec 2021 18:39:03 -0600 Subject: [PATCH 7/9] saving prototype code for change profile info code --- src/components/profile/Profile.js | 36 ++------------ src/components/profile/ProfileForm.js | 60 ++++++++++++++++++++++++ src/components/profile/ProfileFormv2.txt | 32 +++++++++++++ 3 files changed, 96 insertions(+), 32 deletions(-) create mode 100644 src/components/profile/ProfileForm.js create mode 100644 src/components/profile/ProfileFormv2.txt diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js index ae35fd7..0e4551d 100644 --- a/src/components/profile/Profile.js +++ b/src/components/profile/Profile.js @@ -1,12 +1,14 @@ import { React } from "react" import { useState, useEffect } from "react"; +import { useHistory } from "react-router-dom"; import { ProfileForm } from "./ProfileForm"; export const Profile = () => { const [Users, fetchUsers] = useState([]) const [currentuser, setcurrentuser] = useState(localStorage.getItem("graphicsbaytracker_customer")) const [currentUsertrackedcards, setcurrentUsertrackedcards] = useState([]) - const [formactive, setformstate] = useState(false) + const history = useHistory() + useEffect( () => { @@ -32,37 +34,7 @@ const showprofileinfo = () => { return (

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

) } -const toggleForm = () => { - setformstate(true) - formactive === true ? : -} - - useEffect(() => { - Users.filter( - ({ - id, - name, - email - }) => { - if (Users.id === parseInt(currentuser)) - return ( - - ) - } - ) - } - ) const removetrackedcard = (gpudataobj) => { @@ -84,7 +56,7 @@ const toggleForm = () => {

My Tracked Cards

{showprofileinfo()}

-
Brand
diff --git a/src/components/profile/ProfileForm.js b/src/components/profile/ProfileForm.js new file mode 100644 index 0000000..e13629b --- /dev/null +++ b/src/components/profile/ProfileForm.js @@ -0,0 +1,60 @@ +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 history = useHistory() + + + const editprofileinfocall = (editedprofileinfo) => { + fetch('https://localhost:8088/users', { + method: 'PUT', + body: JSON.stringify({ + id: founduser.id, + name: editedprofileinfo.name, + email: editedprofileinfo.email, + + }), + 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")) + + } + 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

+ +
+
+
+ + editprofileinfocall(editedprofileinfo)}/> + + + + ) +} + 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 -- 2.47.3 From e2cfc6984e1b14110f030aa73b225ac10568ce6f Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Tue, 21 Dec 2021 12:27:20 -0600 Subject: [PATCH 8/9] saving draft changes to profile form --- src/components/profile/ProfileForm.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/profile/ProfileForm.js b/src/components/profile/ProfileForm.js index e13629b..e6af57d 100644 --- a/src/components/profile/ProfileForm.js +++ b/src/components/profile/ProfileForm.js @@ -6,16 +6,17 @@ 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 = (editedprofileinfo) => { - fetch('https://localhost:8088/users', { + const editprofileinfocall = () => { + fetch(`https://localhost:8088/users/${founduser.id}`, { method: 'PUT', body: JSON.stringify({ - id: founduser.id, - name: editedprofileinfo.name, - email: editedprofileinfo.email, + name: editedusername, + email: editeduseremail, }), headers: { @@ -35,8 +36,7 @@ export const ProfileForm = () => { () => { const desireduser = userpool.find((userobj) => userobj.id === parseInt(usertoedit)) return setfounduser(desireduser) - } - ) + }, ) useEffect( () => { fetch("http://localhost:8088/users") @@ -46,12 +46,12 @@ export const ProfileForm = () => { return ( <>

Edit Profile Data

-
+
-
+ {seteditedusername(e.target.editedusername)}}/>

- - editprofileinfocall(editedprofileinfo)}/> + { setediteduseremail(e.target.editeduseremail)}}/> + -- 2.47.3 From 2f30b5c802f578dbb4148f7cf2f0a04f5ea8731e Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Tue, 21 Dec 2021 13:48:33 -0600 Subject: [PATCH 9/9] saving MVP for review --- src/components/profile/ProfileForm.js | 34 ++++++++++++++++++++------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/src/components/profile/ProfileForm.js b/src/components/profile/ProfileForm.js index e6af57d..5605af0 100644 --- a/src/components/profile/ProfileForm.js +++ b/src/components/profile/ProfileForm.js @@ -7,12 +7,12 @@ export const ProfileForm = () => { const [userpool, setuserpool] = useState([]) const [ founduser, setfounduser] = useState({}) const [ editedusername, seteditedusername ] = useState("") - const [ editeduseremail, setediteduseremail ] = useState("") + const [editeduseremail, setediteduseremail] = useState("") const history = useHistory() const editprofileinfocall = () => { - fetch(`https://localhost:8088/users/${founduser.id}`, { + fetch(`http://localhost:8088/users/${founduser.id}`, { method: 'PUT', body: JSON.stringify({ name: editedusername, @@ -24,14 +24,30 @@ export const ProfileForm = () => { } }).then(response => { return response.json() - }).then(json => { - console.log(json) - this.setState({ - user: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)) @@ -48,9 +64,9 @@ export const ProfileForm = () => {

Edit Profile Data


- {seteditedusername(e.target.editedusername)}}/>
+ {seteditedusername(e.target.value)}}/>

- { setediteduseremail(e.target.editeduseremail)}}/> + { setediteduseremail(e.target.value)}}/> -- 2.47.3