[CHE-7] Create EditProfile Page

client/src/AuthenticatedApp.tsx

@@ -7,6 +7,7 @@ import MainPage from "./pages/MainPage/MainPage";
 import Forums from "./pages/Forums/Forums";
 import Profiles from "./pages/Profiles/Profiles";
 import Profile from "./pages/Profile/Profile";
+import EditProfilePage from "./pages/EditProfilePage/EditProfilePage";
 import NotFoundPage from "./pages/NotFoundPage/NotFoundPage";
 import { useNavigate } from "react-router-dom";
 
@@ -27,6 +28,7 @@ const AuthenticatedApp = () => {
         <Route path="main" element={<MainPage />} />
         <Route path="/profiles" element={<Profiles />} />
         <Route path="/profile" element={<Profile />} />
+        <Route path="/editProfile" element={<EditProfilePage />} />
         <Route path="/forums" element={<Forums />} />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>

client/src/components/Banner/Banner.test.tsx

@@ -62,7 +62,7 @@ describe("Banner Component", () => {
     const optionsButton = screen.getByRole("button", { name: "Options" });
     fireEvent.click(optionsButton);
 
-    const profileOption = screen.getByText("Go to Profile");
+    const profileOption = screen.getByText("Edit Profile");
     const logoutOption = screen.getByText("Logout");
 
     expect(profileOption).toBeInTheDocument();
@@ -74,10 +74,10 @@ describe("Banner Component", () => {
     const optionsButton = screen.getByRole("button", { name: "Options" });
     fireEvent.click(optionsButton);
 
-    const profileOption = screen.getByText("Go to Profile");
+    const profileOption = screen.getByText("Edit Profile");
     fireEvent.click(profileOption);
 
-    expect(mockNavigate).toHaveBeenCalledWith("profile");
+    expect(mockNavigate).toHaveBeenCalledWith("editProfile");
   });
 
   it("handles logout on clicking Logout", () => {

client/src/components/Banner/Banner.tsx

@@ -16,8 +16,8 @@ const Banner = (): JSX.Element => {
     //TODO CLEAR ALL STATE
   };
 
-  const goToProfile = () => {
-    navigate("profile");
+  const goToEditProfile = () => {
+    navigate("editProfile");
     setShowDropdown(false);
   };
   return (
@@ -40,9 +40,9 @@ const Banner = (): JSX.Element => {
             <a
               href="#!"
               className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-              onClick={goToProfile}
+              onClick={goToEditProfile}
             >
-              Go to Profile
+              Edit Profile
             </a>
             <a
               href="#!"

client/src/features/userProfile/userProfileSlice.ts

@@ -4,7 +4,7 @@ import { IProfile } from "../../../types/profile";
 
 export interface ProfileState {
   profile: IProfile | null;
-  status: "idle" | "loading" | "failed";
+  status: "idle" | "loading" | "failed" | "updating";
   error: string | null;
 }
 
@@ -31,6 +31,25 @@ export const fetchUserProfile = createAsyncThunk(
   }
 );
 
+export const updateUserProfile = createAsyncThunk(
+  "profile/updateUserProfile",
+  async (
+    { userID, ...updateData }: Partial<IProfile> & { userID: string },
+    thunkAPI
+  ) => {
+    try {
+      const response = await axios.put(`/api/profiles/${userID}`, updateData);
+      return response.data;
+    } catch (error) {
+      let errorMessage = "An error occurred during profile update";
+      if (axios.isAxiosError(error)) {
+        errorMessage = error.response?.data || errorMessage;
+      }
+      return thunkAPI.rejectWithValue(errorMessage);
+    }
+  }
+);
+
 const userProfileSlice = createSlice({
   name: "profile",
   initialState,
@@ -53,6 +72,17 @@ const userProfileSlice = createSlice({
       .addCase(fetchUserProfile.rejected, (state, action) => {
         state.status = "failed";
         state.error = action.payload as string;
+      })
+      .addCase(updateUserProfile.pending, (state) => {
+        state.status = "updating";
+      })
+      .addCase(updateUserProfile.fulfilled, (state, action) => {
+        state.profile = action.payload; // Assuming the backend returns the updated profile
+        state.status = "idle";
+      })
+      .addCase(updateUserProfile.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload as string;
       });
   },
 });

client/src/pages/EditProfilePage/EditProfilePage.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState, ChangeEvent, FormEvent } from "react";
+import { useAppSelector, useAppDispatch } from "../../app/hooks";
+import {
+  fetchUserProfile,
+  updateUserProfile,
+} from "../../features/userProfile/userProfileSlice";
+
+const EditProfilePage = () => {
+  const dispatch = useAppDispatch();
+  const { profile, status } = useAppSelector((state) => state.userProfile);
+  const userID = useAppSelector((state) => state.user.userData?._id);
+
+  const [formData, setFormData] = useState({
+    fullName: "",
+    email: "",
+    personalBio: "",
+  });
+
+  useEffect(() => {
+    if (userID) dispatch(fetchUserProfile(userID as string));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (profile) {
+      setFormData({
+        fullName: profile.fullName || "",
+        email: profile.email || "",
+        personalBio: profile.personalBio || "",
+      });
+    }
+  }, [profile]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!userID) {
+      console.error("UserID is undefined.");
+      return;
+    }
+    dispatch(updateUserProfile({ ...formData, userID }));
+  };
+
+  if (status === "loading" || !userID) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h2>Edit Profile</h2>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="fullName">Full Name:</label>
+          <input
+            type="text"
+            id="fullName"
+            name="fullName"
+            value={formData.fullName}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label htmlFor="email">Email:</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            value={formData.email}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label htmlFor="personalBio">Personal Bio:</label>
+          <input
+            type="text"
+            id="personalBio"
+            name="personalBio"
+            value={formData.personalBio}
+            onChange={handleChange}
+          />
+        </div>
+
+        <button type="submit">Save Changes</button>
+      </form>
+    </div>
+  );
+};
+
+export default EditProfilePage;

client/src/pages/Profiles/Profiles.tsx

@@ -17,8 +17,9 @@ const Profiles = (): JSX.Element => {
         <h1 className="text-4xl font-extrabold mb-4">PROFILES</h1>
       </div>
       <div>
-        {profiles.map((profile) => (
-          <ProfileThumb key={profile._id} profile={profile} />
+        {/* TODO Look at better key for this */}
+        {profiles.map((profile, index) => (
+          <ProfileThumb key={index} profile={profile} />
         ))}
       </div>
     </>

server/controllers/profileController.ts

@@ -78,7 +78,7 @@ const createProfile = async (
   }
 };
 
-// ENDPOINT  PATCH api/profiles/:UserID
+// ENDPOINT  PUT api/profiles/:UserID
 // PURPOSE   Update an existing profile
 // ACCESS    Private
 const updateProfile = async (
@@ -87,13 +87,11 @@ const updateProfile = async (
   next: NextFunction
 ) => {
   const { userID } = req.params;
-  const { firstName, lastName, bio, job, socials } = req.body;
+  const { fullName, email, personalBio } = req.body;
   const newProfile = {
-    firstName,
-    lastName,
-    bio,
-    job,
-    socials,
+    fullName,
+    email,
+    personalBio,
   };
 
   try {

server/models/profileModel.ts

@@ -1,4 +1,3 @@
-// profileModel.ts
 import mongoose, { Schema } from "mongoose";
 import { IProfile } from "../types/profile";
 

server/routes/profileRoutes.ts

@@ -10,7 +10,7 @@ import {
 const router = express.Router();
 
 router.post("/", createProfile);
-router.patch("/:userID", updateProfile);
+router.put("/:userID", updateProfile);
 router.get("/:userID", getProfileById);
 router.get("/", getAllProfiles);