Profile missions

src/components/MissionProfile/MissionProfile.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import '../../pages/MyProfile/MyProfile.css';
+
+const MissionProfile = () => {
+  const missions = useSelector((state) => state.missions.missions);
+  const joinedMissions = missions.filter((mission) => mission.reserved);
+
+  return (
+    <div>
+      <h2>My Missions</h2>
+      <table className="rocket-profile-table">
+        <tbody>
+          {joinedMissions.length === 0 ? (
+            <tr>
+              <td className="no-rocket-placeholder">No Missions Added</td>
+            </tr>
+          ) : (
+            joinedMissions.map((mission) => (
+              <tr key={mission.id}>
+                <td>{mission.mission_name}</td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default MissionProfile;

src/pages/Missions/Missions.js

@@ -1,16 +1,18 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchMissionAsync, joiningMission } from '../../redux/missionSlice';
+import { fetchMissionAsync, joiningMission, leavingMission } from '../../redux/missionSlice';
 import './Missions.css';
 
-function Missions() {
+const Missions = () => {
   const dispatch = useDispatch();
   const missions = useSelector((state) => state.missions.missions);
   const status = useSelector((state) => state.missions.status);
   const error = useSelector((state) => state.missions.error);
 
   useEffect(() => {
-    dispatch(fetchMissionAsync());
+    if (missions.length === 0) {
+      dispatch(fetchMissionAsync());
+    }
   }, [dispatch]);
 
   if (status === 'loading') {
@@ -50,6 +52,18 @@ function Missions() {
               </p>
             </td>
             <td>
+              {mission.reserved && (
+              <button
+                type="button"
+                style={{
+                  color: mission.reserved ? 'red' : '',
+                  border: mission.reserved ? '1px solid red' : '',
+                }}
+                onClick={() => dispatch(leavingMission(mission.mission_id))}
+              >
+                Leave Mission
+              </button>
+              )}
               {!mission.reserved && (
               <button
                 type="button"
@@ -68,6 +82,6 @@ function Missions() {
       </tbody>
     </table>
   );
-}
+};
 
 export default Missions;

src/pages/MyProfile/MyProfile.js

@@ -1,11 +1,11 @@
 import RocketProfile from '../../components/RocketProfile/RocketProfile';
+import MissionProfile from '../../components/MissionProfile/MissionProfile';
 import './MyProfile.css';
 
 const Profile = () => (
   <div className="main-profile-div">
     <div className="missions-profile-div">
-      <h2>My Missions</h2>
-      <div className="content">Content</div>
+      <MissionProfile />
     </div>
     <div className="rockets-profile-div">
       <div className="rocket-profile-div">

src/redux/missionSlice.js

@@ -30,13 +30,15 @@ const missionSlice = createSlice({
         return { ...mission, reserved: true };
       });
     },
-  },
-  leavingMission: (state, action) => {
-    const id = action.payload;
-    state.missions = state.missions.map((mission) => {
-      if (mission.mission_id !== id) return mission;
-      return { ...mission, reserved: false };
-    });
+    leavingMission: (state, action) => {
+      const id = action.payload;
+      state.missions = state.missions.map((mission) => {
+        if (mission.mission_id !== id) {
+          return mission;
+        }
+        return { ...mission, reserved: false };
+      });
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -54,5 +56,5 @@ const missionSlice = createSlice({
   },
 });
 
-export const { joiningMission } = missionSlice.actions;
+export const { joiningMission, leavingMission } = missionSlice.actions;
 export default missionSlice.reducer;