Implement the action: addReservedMission in the Join Mission button u…

…sing onClick event

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,
 };