Cancel Rocket Booking

src/components/Rocket.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
-import { bookRocket } from '../redux/rockets/rockets';
+import { bookRocket, cancelRocketBooking } from '../redux/rockets/rockets';
 
 const Rocket = ({
   id, description, name, image, reserved,
@@ -12,6 +12,11 @@ const Rocket = ({
     dispatch(bookRocket(+id));
   };
 
+  const cancelReservation = (e) => {
+    const { id } = e.target;
+    dispatch(cancelRocketBooking(+id));
+  };
+
   return (
     <div className="rocket-container flex-center-center">
       <div className="image-container">
@@ -20,19 +25,25 @@ const Rocket = ({
       <div className="rocket-infos">
         <h3 className="rocket-name">{name}</h3>
         <p className="description">
-          {reserved && (<span className="isReserved">Reserved</span>)}
+          {reserved && <span className="isReserved">Reserved</span>}
           {description}
         </p>
-        {!reserved && (
-          <button
-            type="button"
-            id={id}
-            className="reserve-btn clickable"
-            onClick={bookingRocket}
-          >
-            Reserve Rocket
-          </button>
-        )}
+        <button
+          type="button"
+          id={id}
+          className="reserve-btn clickable"
+          onClick={bookingRocket}
+        >
+          Reserve Rocket
+        </button>
+        <button
+          type="button"
+          id={id}
+          className="cancel-reserv-btn clickable"
+          onClick={cancelReservation}
+        >
+          Cancel Reservation
+        </button>
       </div>
     </div>
   );

src/redux/rockets/rockets.js

@@ -2,6 +2,7 @@ import fetchRocketsApiData from '../../Data/fetchApiData';
 import {
   GET_ROCKETS,
   BOOKING_ROCKET,
+  CANCEL_ROCKET_BOOKING,
 } from './rocketsActions';
 
 const initialSate = {
@@ -18,6 +19,11 @@ export const bookRocket = (id) => ({
   payload: id,
 });
 
+export const cancelRocketBooking = (id) => ({
+  type: CANCEL_ROCKET_BOOKING,
+  payload: id,
+});
+
 export const getRocketsDispatcher = () => async (dispatch) => {
   const rockets = await fetchRocketsApiData();
   dispatch(getRockets(rockets));
@@ -45,6 +51,19 @@ const rocketsReducer = (state = initialSate, action) => {
         }),
       };
 
+    case CANCEL_ROCKET_BOOKING:
+      return {
+        ...state,
+        isDataStored: true,
+        data: state.data.map((rocket) => {
+          const reserved = rocket.id === action.payload
+            ? { ...rocket, reserved: false }
+            : { ...rocket };
+
+          return reserved;
+        }),
+      };
+
     default:
       return state;
   }

src/redux/rockets/rocketsActions.js

@@ -1,4 +1,5 @@
 const GET_ROCKETS = 'space-travelers-hub/rockets/GET_ROCKETS';
 const BOOKING_ROCKET = 'space-travelers-hub/BOOKING_ROCKETS';
+const CANCEL_ROCKET_BOOKING = 'space-travelers-hub/CANCEL_ROCKET_BOOKING';
 
-export { GET_ROCKETS, BOOKING_ROCKET };
+export { GET_ROCKETS, BOOKING_ROCKET, CANCEL_ROCKET_BOOKING };

src/scss/base/_rockets.scss

@@ -38,6 +38,15 @@
             border-radius: 0.2rem;
             font-size: 1rem;
           }
+
+          .cancel-reserv-btn {
+            background-color: transparent;
+            font-size: 1rem;
+            padding: 0.5rem 0.8rem;
+            border-radius: 0.2rem;
+            color: $gray-txt-color;
+            box-shadow: 1px 2px 2px $gray-txt-color, -0.5px -1px 1px $gray-txt-color;
+          }
         }
       }
     }

src/scss/base/_variables.scss

@@ -3,3 +3,4 @@ $dark-text-color: #262a2e;
 $blue-bg-isReserved: #19a3b9;
 $blue-bg-toReserve: #1278f8;
 $poppins-font: 'Poppins', sans-serif;
+$gray-txt-color: #878d94;