Add profile update functionality in front end.

Author: ImranullahKhann

giftlink-frontend/src/components/Profile/Profile.js

@@ -5,129 +5,134 @@ import {urlConfig} from '../../config';
 import { useAppContext } from '../../context/AuthContext';
 
 const Profile = () => {
-  const [userDetails, setUserDetails] = useState({});
- const [updatedDetails, setUpdatedDetails] = useState({});
- const {setUserName} = useAppContext();
- const [changed, setChanged] = useState("");
+    const [userDetails, setUserDetails] = useState({});
+    const [updatedDetails, setUpdatedDetails] = useState({});
+    const {setUserName} = useAppContext();
+    const [changed, setChanged] = useState("");
 
- const [editMode, setEditMode] = useState(false);
-  const navigate = useNavigate();
-  useEffect(() => {
-    const authtoken = sessionStorage.getItem("auth-token");
-    if (!authtoken) {
-      navigate("/app/login");
-    } else {
-      fetchUserProfile();
-    }
-  }, [navigate]);
+    const [editMode, setEditMode] = useState(false);
+    const navigate = useNavigate();
+    useEffect(() => {
+        const authtoken = sessionStorage.getItem("auth-token");
+        if (!authtoken) {
+            navigate("/app/login");
+        } else {
+            fetchUserProfile();
+        }
+    }, [navigate]);
 
-  const fetchUserProfile = async () => {
-    try {
-      const authtoken = sessionStorage.getItem("auth-token");
-      const email = sessionStorage.getItem("email");
-      const name=sessionStorage.getItem('name');
-      if (name || authtoken) {
+    const fetchUserProfile = async () => {
+        try {
+            const authtoken = sessionStorage.getItem("auth-token");
+            const email = sessionStorage.getItem("email");
+            const name=sessionStorage.getItem('name');
+            if (name || authtoken) {
                 const storedUserDetails = {
-                  name: name,
-                  email:email
+                name: name,
+                email:email
                 };
 
                 setUserDetails(storedUserDetails);
                 setUpdatedDetails(storedUserDetails);
-              }
-} catch (error) {
-  console.error(error);
-  // Handle error case
-}
-};
+            }
+        } catch (error) {
+            console.error(error);
+            // Handle error case
+        }
+    };
 
-const handleEdit = () => {
-setEditMode(true);
-};
+    const handleEdit = () => {
+        setEditMode(true);
+    };
 
-const handleInputChange = (e) => {
-setUpdatedDetails({
-  ...updatedDetails,
-  [e.target.name]: e.target.value,
-});
-};
-const handleSubmit = async (e) => {
-  e.preventDefault();
+    const handleInputChange = (e) => {
+        setUpdatedDetails({
+            ...updatedDetails,
+            [e.target.name]: e.target.value,
+        });
+    };
+
+    const handleSubmit = async (e) => {
+    e.preventDefault();
 
-  try {
+    try {
     const authtoken = sessionStorage.getItem("auth-token");
     const email = sessionStorage.getItem("email");
 
     if (!authtoken || !email) {
-      navigate("/app/login");
-      return;
+        navigate("/app/login");
+        return;
     }
 
     const payload = { ...updatedDetails };
     const response = await fetch(`${urlConfig.backendUrl}/api/auth/update`, {
-      //Step 1: Task 1
-      //Step 1: Task 2
-      //Step 1: Task 3
+        method: "PUT",//Step 1: Task 1
+        headers: {//Step 1: Task 2
+        "Authorization": `Bearer ${authtoken}`,
+        "Content-Type": "application/json",
+        "Email": email,
+        },
+        body: JSON.stringify(payload),//Step 1: Task 3
     });
 
     if (response.ok) {
-      // Update the user details in session storage
-      //Step 1: Task 4
-      //Step 1: Task 5
-      setUserDetails(updatedDetails);
-      setEditMode(false);
-      // Display success message to the user
-      setChanged("Name Changed Successfully!");
-      setTimeout(() => {
+        // Update the user details in session storage
+        setUserName(updatedDetails.name);//Step 1: Task 4
+        sessionStorage.setItem("name", updatedDetails.name);//Step 1: Task 5
+        setUserDetails(updatedDetails);
+        setEditMode(false);
+        // Display success message to the user
+        setChanged("Name Changed Successfully!");
+        setTimeout(() => {
         setChanged("");
         navigate("/");
-      }, 1000);
+        }, 1000);
 
     } else {
-      // Handle error case
-      throw new Error("Failed to update profile");
+        // Handle error case
+        throw new Error("Failed to update profile");
     }
-  } catch (error) {
-    console.error(error);
+    } catch (error) {
+        console.error(error);
     // Handle error case
-  }
+    }
 };
 
-return (
-<div className="profile-container">
-  {editMode ? (
-<form onSubmit={handleSubmit}>
-<label>
-  Email
-  <input
-    type="email"
-    name="email"
-    value={userDetails.email}
-    disabled // Disable the email field
-  />
-</label>
-<label>
-   Name
-   <input
-     type="text"
-     name="name"
-     value={updatedDetails.name}
-     onChange={handleInputChange}
-   />
-</label>
+    return (
+        <div className="profile-container">
+            {editMode ? (
+            <form onSubmit={handleSubmit}>
+                <label>
+                Email
+                <input
+                    type="email"
+                    name="email"
+                    value={userDetails.email}
+                    disabled // Disable the email field
+                />
+                </label>
+                <label>
+                Name
+                <input
+                    type="text"
+                    name="name"
+                    value={updatedDetails.name}
+                    onChange={handleInputChange}
+                />
+                </label>
 
-<button type="submit">Save</button>
-</form>
-) : (
-<div className="profile-details">
-<h1>Hi, {userDetails.name}</h1>
-<p> <b>Email:</b> {userDetails.email}</p>
-<button onClick={handleEdit}>Edit</button>
-<span style={{color:'green',height:'.5cm',display:'block',fontStyle:'italic',fontSize:'12px'}}>{changed}</span>
-</div>
-)}
-</div>
-);
+                <button type="submit">Save</button>
+            </form>
+            ) : (
+            <div className="profile-details">
+                <h1>Hi, {userDetails.name}</h1>
+                <p> <b>Email:</b> {userDetails.email}</p>
+                <button onClick={handleEdit}>Edit</button>
+                <span style={{color:'green',height:'.5cm',display:'block',fontStyle:'italic',fontSize:'12px'}}>{changed}</span>
+            </div>
+            )}
+        </div>
+    );
 };
 
-export default Profile;
+export default Profile;