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 (<p>{founduser?.name} <br/> {founduser?.email}</p>)
 }
 
-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
-                             }
-                             />
-                             )
-                         }
-                    )
-              }
-         )
     
 
     const removetrackedcard = (gpudataobj) => {
@@ -84,7 +56,7 @@ const toggleForm = () => {
           
         <h2>My Tracked Cards</h2>
         <p>{showprofileinfo()}</p>
-        <button onClick={ () => { toggleForm()
+        <button onClick={ () => { history.push("/profile/ProfileForm")
         }
     }>Edit Profile Info </button>
         <table>

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 (
+        <>
+    <h2>Edit Profile Data</h2>
+        <form>
+  <label for="fandlname">First and Last Name</label><br/>
+  <input type="text" id="fndlname" name="fandlname"/><br/>
+  <label for="email">Email</label><br/>
+  <input type="text" id="email" name="email"/>
+  <input type="submit" id="submitbutton" name="submitbutton" onClick={(editedprofileinfo) => editprofileinfocall(editedprofileinfo)}/>
+
+    </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
+                             }
+                             />
+                             )
+                         }
+                    )
+              }
+         )