Implement mission joining functionality

README.md

@@ -166,8 +166,10 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 - [x] **Create Rockets view**
 - [x] **Use Redux to manage the states of rockets, missions**
 - [x] **Fetch data using the spaceX API**
-- [ ] **Add actions and other functionality to Join/Leave Missions**
-- [ ] **Add actions and other functionality to Reserve Rocket and Cancel Reservation**
+- [x] **Add actions and other functionality to Reserve Rocket**
+- [ ] **Add actions and other functionality to Cancel Reservation**
+- [x] **Add actions and other functionality to Join Missions**
+- [ ] **Add actions and other functionality to Leave Missions**
 - [ ] **Create the list of My Missions and My Rockets in the My Profile view**
 - [ ] **Add CSS styles to the UI following the mobile first approach**
 - [ ] **Create Unit tests using Jest and React testing library**

src/components/MissionItem.jsx

@@ -1,23 +1,33 @@
+import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
+import { addReservedMission } from '../redux/missions/missionsSlice';
 
-const MissionItem = ({ mission }) => (
-  <tr>
-    <td className="mission-name">{ mission.mission_name }</td>
-    <td className="mission-description">{ mission.description}</td>
-    <td className="mission-status">
-      <span className="badge badge-gray">Not a member</span>
-    </td>
-    <td className="mission-join-button">
-      <button type="button" className="btn btn-gray">Join Mission</button>
-    </td>
-  </tr>
-);
+const MissionItem = ({ mission }) => {
+  const dispatch = useDispatch();
+  const handleClickAddReservedMission = () => {
+    dispatch(addReservedMission(mission.mission_id));
+  };
+
+  return (
+    <tr>
+      <td className="mission-name">{ mission.mission_name }</td>
+      <td className="mission-description">{ mission.description}</td>
+      <td className="mission-status">
+        <span className="badge badge-gray">Not a member</span>
+      </td>
+      <td className="mission-join-button">
+        <button type="button" className="btn btn-gray" onClick={handleClickAddReservedMission}>Join Mission</button>
+      </td>
+    </tr>
+  );
+};
 
 MissionItem.propTypes = {
   mission: PropTypes.shape({
     mission_id: PropTypes.string.isRequired,
     mission_name: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
+    reserved: PropTypes.bool,
   }).isRequired,
 };
 

src/redux/missions/missionsSlice.js

@@ -23,7 +23,17 @@ const initialState = {
 const missionsSlice = createSlice({
   name: 'missions',
   initialState,
-  reducers: {},
+  reducers: {
+    addReservedMission: (state, action) => {
+      const newMissionState = state.missions.map((mission) => {
+        if (mission.mission_id === action.payload) {
+          return { ...mission, reserved: true };
+        }
+        return mission;
+      });
+      state.missions = newMissionState;
+    },
+  },
   extraReducers: (builder) => {
     builder
       .addCase(getAllMissions.pending, (state) => {
@@ -50,4 +60,5 @@ const missionsSlice = createSlice({
   },
 });
 
+export const { addReservedMission } = missionsSlice.actions;
 export default missionsSlice.reducer;