From f8a7ca122edd59164ab608a7ec11a0401d8b6e95 Mon Sep 17 00:00:00 2001
From: Kidd254 <lorenkioko@gmail.com>
Date: Tue, 25 Jul 2023 19:33:51 +0300
Subject: [PATCH] Implement the action: LeaveMission in the Leave Mission
 button using onClick event

---
 src/components/MissionItem.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/MissionItem.jsx b/src/components/MissionItem.jsx
index 8d40c34..2361469 100644
--- a/src/components/MissionItem.jsx
+++ b/src/components/MissionItem.jsx
@@ -1,6 +1,6 @@
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { addReservedMission } from '../redux/missions/missionsSlice';
+import { addReservedMission, LeaveMission } from '../redux/missions/missionsSlice';
 
 const MissionItem = ({ mission }) => {
   const dispatch = useDispatch();
@@ -8,6 +8,10 @@ const MissionItem = ({ mission }) => {
     dispatch(addReservedMission(mission.mission_id));
   };
 
+  const handleClickLeaveMission = () => {
+    dispatch(LeaveMission(mission.mission_id));
+  };
+
   return (
     <tr>
       <td className="mission-name">{ mission.mission_name }</td>
@@ -17,6 +21,7 @@ const MissionItem = ({ mission }) => {
       </td>
       <td className="mission-join-button">
         <button type="button" className="btn btn-gray" onClick={handleClickAddReservedMission}>Join Mission</button>
+        <button type="button" className="btn btn-pink" onClick={handleClickLeaveMission}>Leave Mission</button>
       </td>
     </tr>
   );