Display Joined Missions in My Profile page.

src/components/Missions.js

@@ -10,6 +10,7 @@ import './styles/Missions.css';
 function Missions() {
   const dispatch = useDispatch();
   const missions = useSelector((state) => state.mission.missions);
+  const joinedMissions = useSelector((state) => state.mission.joinedMissions);
 
   useEffect(() => {
     const fetchMissions = async () => {
@@ -33,6 +34,9 @@ function Missions() {
     dispatch(leaveMission(missionId));
   };
 
+  const isMissionJoined = (missionId) => joinedMissions
+    .some((mission) => mission.mission_id === missionId);
+
   return (
     <div className="table-container">
       <table className="missions-table">
@@ -51,31 +55,41 @@ function Missions() {
               <td>
                 <div className="status-container">
                   <span
-                    className={`status ${mission.reserved ? 'active' : ''}`}
+                    className={`status ${
+                      isMissionJoined(mission.mission_id) ? 'active' : ''
+                    }`}
                     style={{
-                      backgroundColor: mission.reserved ? '#0290ff' : 'grey',
+                      backgroundColor: isMissionJoined(mission.mission_id)
+                        ? '#0290ff'
+                        : 'grey',
                     }}
                   >
-                    {mission.reserved ? 'ACTIVE MEMBER' : 'NOT A MEMBER'}
+                    {isMissionJoined(mission.mission_id)
+                      ? 'ACTIVE MEMBER'
+                      : 'NOT A MEMBER'}
                   </span>
                 </div>
               </td>
               <td>
                 <button
                   type="button"
-                  onClick={() => (mission.reserved
+                  onClick={() => (isMissionJoined(mission.mission_id)
                     ? handleLeaveMission(mission.mission_id)
                     : handleJoinMission(mission.mission_id))}
-                  className={`join-button ${mission.reserved ? 'active' : ''}`}
+                  className={`join-button ${
+                    isMissionJoined(mission.mission_id) ? 'active' : ''
+                  }`}
                   style={{
-                    border: mission.reserved
+                    border: isMissionJoined(mission.mission_id)
                       ? '2px solid red'
                       : '2px solid grey',
                     background: 'transparent',
-                    color: mission.reserved ? 'red' : 'grey',
+                    color: isMissionJoined(mission.mission_id) ? 'red' : 'grey',
                   }}
                 >
-                  {mission.reserved ? 'Leave Mission' : 'Join Mission'}
+                  {isMissionJoined(mission.mission_id)
+                    ? 'Leave Mission'
+                    : 'Join Mission'}
                 </button>
               </td>
             </tr>

src/components/Profile.js

@@ -1,7 +1,26 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import './styles/Profile.css';
+
 function Profile() {
+  const joinedMissions = useSelector(
+    (state) => state.mission.joinedMissions,
+  );
+
   return (
-    <div className="container">
-      <h2>Profile Page</h2>
+    <div className="profile-container">
+      <h2>My Missions</h2>
+      <div className="joined-missions">
+        {joinedMissions.length === 0 ? (
+          <p>No missions joined.</p>
+        ) : (
+          <ul>
+            {joinedMissions.map((mission) => (
+              <li key={mission.mission_id}>{mission.mission_name}</li>
+            ))}
+          </ul>
+        )}
+      </div>
     </div>
   );
 }

src/components/styles/Profile.css

@@ -0,0 +1,32 @@
+.profile-container {
+  width: 50%;
+  text-align: left;
+}
+
+.profile-container h2 {
+  margin: 0 auto;
+  width: 70%;
+}
+
+.joined-missions {
+  width: 70%;
+  margin: 20px auto;
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+
+.joined-missions h3 {
+  margin: 0 0 1.5rem 0;
+}
+
+.joined-missions ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.joined-missions li {
+  border-bottom: 1px solid #ccc;
+  padding: 1rem  0 1rem 1rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+}

src/redux/missions/missionSlice.js

@@ -2,22 +2,32 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const missionSlice = createSlice({
   name: 'mission',
-  initialState: { missions: [] },
+  initialState: {
+    missions: [],
+    joinedMissions: [],
+  },
   reducers: {
     setMissions: (state, action) => {
       state.missions = action.payload;
     },
     joinMission: (state, action) => {
       const missionId = action.payload;
-      state.missions = state.missions.map((mission) => (mission.mission_id === missionId
-        ? { ...mission, reserved: true }
-        : mission));
+      const mission = state.missions.find(
+        (mission) => mission.mission_id === missionId,
+      );
+      if (mission) {
+        mission.reserved = true;
+        state.joinedMissions.push(mission);
+      }
     },
     leaveMission: (state, action) => {
       const missionId = action.payload;
       state.missions = state.missions.map((mission) => (mission.mission_id === missionId
         ? { ...mission, reserved: false }
         : mission));
+      state.joinedMissions = state.joinedMissions.filter(
+        (mission) => mission.mission_id !== missionId,
+      );
     },
   },
 });