Implement rocket booking cancelation

README.md

@@ -167,9 +167,9 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 - [x] **Use Redux to manage the states of rockets, missions**
 - [x] **Fetch data using the spaceX API**
 - [x] **Add actions and other functionality to Reserve Rocket**
-- [ ] **Add actions and other functionality to Cancel Reservation**
+- [x] **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**
+- [x] **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/RocketItem.jsx

@@ -1,13 +1,17 @@
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { addReserve } from '../redux/rockets/rocketsSlice';
+import { addReserve, cancelReserve } from '../redux/rockets/rocketsSlice';
 
 const RocketItem = ({ rocket }) => {
   const dispatch = useDispatch();
   const handleClickAddReserve = () => {
     dispatch(addReserve(rocket.id));
   };
 
+  const handleClickCancelReserve = () => {
+    dispatch(cancelReserve(rocket.id));
+  };
+
   return (
     <div className="rocket-item">
       <div className="rocket-image">
@@ -20,6 +24,7 @@ const RocketItem = ({ rocket }) => {
         </p>
         <div className="reserve">
           <button type="button" className="btn btn-blue" onClick={handleClickAddReserve}>Reserve Rocket</button>
+          <button type="button" className="btn btn-gray" onClick={handleClickCancelReserve}>Cancel Reservation</button>
         </div>
       </div>
     </div>

src/redux/rockets/rocketsSlice.js

@@ -33,6 +33,15 @@ const rocketsSlice = createSlice({
       });
       state.rockets = newRocketState;
     },
+    cancelReserve: (state, action) => {
+      const newRocketState = state.rockets.map((rocket) => {
+        if (rocket.id === action.payload) {
+          return { ...rocket, reserved: false };
+        }
+        return rocket;
+      });
+      state.rockets = newRocketState;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -61,5 +70,5 @@ const rocketsSlice = createSlice({
   },
 });
 
-export const { addReserve } = rocketsSlice.actions;
+export const { addReserve, cancelReserve } = rocketsSlice.actions;
 export default rocketsSlice.reducer;