Space Travelers -- Missions -- Leaving a mission

src/pages/Missions.jsx

@@ -1,14 +1,20 @@
-import { useEffect } from 'react';
-import { useSelector } from 'react-redux';
+// Path: src/pages/Missions.jsx
 
+import { useDispatch, useSelector } from 'react-redux';
+import { joinMission, leaveMission } from '../redux/missions/missionsSlice';
 import '../styles/Missions.css';
 
 const Missions = () => {
+  const dispatch = useDispatch();
   const missions = useSelector(state => state.missions);
 
-  useEffect(() => {
-    console.log(missions.missions);
-  }, [missions]);
+  const handleJoinBtn = (id) => {
+    dispatch(joinMission(id));
+  }
+
+  const handleLeaveBtn = (id) => {
+    dispatch(leaveMission(id));
+  }
 
   return (
     <div className="missions">
@@ -20,10 +26,10 @@ const Missions = () => {
       </div>
       <div className="missions-list">
         {missions.missions.map((mission, index) => {
-          let memberStatus = mission.status === true ? 'active-member' : 'not-active-member';
-          let memberStatusValue = mission.status === true ? 'Active Member' : 'NOT A MEMBER';
-          let hideJoinMissionBtn = mission.status === true ? 'hide' : '';
-          let hideLeaveMissionBtn = mission.status === false ? 'hide' : '';
+          let memberStatus = mission.reserved === true ? 'active-member' : 'not-active-member';
+          let memberStatusValue = mission.reserved === true ? 'Active Member' : 'NOT A MEMBER';
+          let hideJoinMissionBtn = mission.reserved === true ? 'hide' : '';
+          let hideLeaveMissionBtn = mission.reserved === false ? 'hide' : '';
 
           return (
             <div className="mission" key={index}>
@@ -35,8 +41,8 @@ const Missions = () => {
                 </div>
               </div>
               <div className='fourth-column btn'>
-                <button className={hideLeaveMissionBtn}>Leave Mission</button>
-                <button className={hideJoinMissionBtn}>Join Mission</button>
+                <button className={hideLeaveMissionBtn} onClick={() => handleLeaveBtn(mission.id)}>Leave Mission</button>
+                <button className={hideJoinMissionBtn} onClick={() => handleJoinBtn(mission.id)}>Join Mission</button>
               </div>
             </div>
           )

src/redux/missions/missionsSlice.js

@@ -1,3 +1,5 @@
+// Path: src/redux/missions/missionsSlice.js
+
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 
 const URL = "https://api.spacexdata.com/v3/missions";
@@ -6,7 +8,6 @@ const initialState = {
   missions: [],
 };
 
-
 const fetchMissionsAsync = async () => {
   try {
     const response = await fetch(URL);
@@ -17,33 +18,58 @@ const fetchMissionsAsync = async () => {
   }
 };
 
-const fetchMissions = createAsyncThunk("missions/fetchMissions", fetchMissionsAsync);
-
+export const fetchMissions = createAsyncThunk("missions/fetchMissions", fetchMissionsAsync);
 
 const missionsSlice = createSlice({
   name: "missions",
   initialState,
-  reducers: {},
+  reducers: {
+    joinMission: (state, action) => {
+      const missionId = action.payload;
+      const updatedMissions = state.missions.map((mission) => {
+        if (mission.id === missionId) {
+          return {
+            ...mission,
+            reserved: true,
+          };
+        }
+        return mission;
+      });
+      state.missions = updatedMissions;
+    },
+    leaveMission: (state, action) => {
+      const missionId = action.payload;
+      const updatedMissions = state.missions.map((mission) => {
+        if (mission.id === missionId) {
+          return {
+            ...mission,
+            reserved: false,
+          };
+        }
+        return mission;
+      });
+      state.missions = updatedMissions;
+    }
+  },
+
   extraReducers: (builder) => {
     builder.addCase(fetchMissions.fulfilled, (state, action) => {
       const allMissions = action.payload; 
       const firstFiveMissions = allMissions.slice(0, 5);
-      
-      const simplifiedMissions = firstFiveMissions.map((mission) => {
+
+      const simplifiedMissions = firstFiveMissions.map((mission, index) => {
         return {
+          id: index,
           name: mission.mission_name,
           description: mission.description,
-          status: false,
+          reserved: false,
         };
       });
-
       state.missions = simplifiedMissions;
     });
   },
 });
 
 
-
+export const { joinMission, leaveMission } = missionsSlice.actions;
 export default missionsSlice.reducer;
-export { fetchMissions };
-