add display rockets

src/components/rockets/Rockets.module.css

@@ -0,0 +1,69 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+}
+
+.rockets-section {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  padding: 0 6rem 6rem;
+}
+
+.flex {
+  display: flex;
+}
+
+img {
+  width: 350px;
+}
+
+.rocket-description {
+  display: flex;
+  flex-direction: column;
+  gap: 1.8rem;
+}
+
+h2 {
+  font-size: 2.5rem;
+  font-weight: 500;
+}
+
+p {
+  font-size: 1.5rem;
+  line-height: 1.4;
+}
+
+span {
+  background-color: #18a2b8;
+  color: white;
+  border-radius: 5px;
+  padding: 2px 5px;
+  margin-right: 10px;
+}
+
+.add-reservation {
+  width: 15rem;
+  height: 4rem;
+  font-size: 1.5rem;
+  background-color: #007bff;
+  cursor: pointer;
+  border: 0;
+  border-radius: 5px;
+  color: white;
+  transition: background-color linear 0.2s;
+}
+
+.remove-reservation {
+  width: 16rem;
+  height: 4rem;
+  font-size: 1.5rem;
+  background-color: transparent;
+  cursor: pointer;
+  border: 1px solid gray;
+  border-radius: 5px;
+  color: gray;
+  transition: color linear 0.2s, border-color;
+}

src/components/rockets/elementRockets.js

@@ -0,0 +1,51 @@
+import { useDispatch } from 'react-redux';
+import { PropTypes } from 'prop-types';
+import { addRocketReservation, removeRocketReservation } from '../../redux/rockets/rockets';
+
+const elementRockets = (props) => {
+  const dispatch = useDispatch();
+
+  const {
+    id, name, image, desc, reserved,
+  } = props;
+
+  const handleReserveClick = () => {
+    dispatch(addRocketReservation(id));
+  };
+
+  const handleRemoveReserveClick = () => {
+    dispatch(removeRocketReservation(id));
+  };
+
+  return (
+    <li className="rocket-container" id={id}>
+      <img src={image} alt="rocket" />
+      <div className="rocket-description">
+        <h2>{name}</h2>
+        <p>
+          { reserved && <span>Reserved</span>}
+          {`${desc}`}
+        </p>
+        { reserved ? (
+          <button type="button" className="remove-reservation" onClick={handleRemoveReserveClick}>
+            Cancel Reservation
+          </button>
+        ) : (
+          <button type="button" className="add-reservation" onClick={handleReserveClick}>
+            Reserve Rocket
+          </button>
+        )}
+      </div>
+    </li>
+  );
+};
+
+elementRockets.propTypes = {
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  image: PropTypes.string.isRequired,
+  desc: PropTypes.string.isRequired,
+  reserved: PropTypes.bool.isRequired,
+};
+
+export default elementRockets;

src/index.css

@@ -1,5 +1,7 @@
 body {
   margin: 0;
+  height: 100vh;
+  overflow-x: hidden;
 }
 
 code {
@@ -9,3 +11,14 @@ code {
 .active {
   border-bottom: 3px solid red;
 }
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+  font-family: "Poppins", sans-serif;
+}

src/pages/Rockets.js

@@ -1,10 +1,24 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+import RocketItem from '../components/rockets/elementRockets';
+import styles from '../components/rockets/Rockets.module.css';
+
+const rocketList = useSelector((state) => state.rocketReducer);
 
 function Rockets() {
   return (
-    <div>
-      Rockets
-    </div>
+    <ul className={styles.flex}>
+      { rocketList.map((item) => (
+        <RocketItem
+          desc={item.desc}
+          key={item.id}
+          id={item.id}
+          name={item.name}
+          image={item.flickr_images}
+          reserved={item.reservation}
+        />
+      ))}
+    </ul>
   );
 }
 

src/redux/rockets/rockets.js

@@ -5,14 +5,18 @@ const baseURL = 'https://api.spacexdata.com/v3/rockets';
 
 const initialState = [];
 
-export const addRocketReservation = (payload) => ({
+export const addRocketReservation = (id) => ({
   type: ADD_RESERVATION,
-  payload,
+  payload: {
+    id,
+  },
 });
 
-export const removeRocketReservation = (payload) => ({
+export const removeRocketReservation = (id) => ({
   type: REMOVE_RESERVATION,
-  payload,
+  payload: {
+    id,
+  },
 });
 
 export const getRockets = (payload) => ({
@@ -27,6 +31,7 @@ export const fetchRocketsAPI = () => async (dispatch) => {
       const arrangedList = rocketList.map((rocket) => ({
         id: rocket.rocket_id,
         name: rocket.rocket_name,
+        desc: rocket.description,
         type: rocket.rocket_type,
         flickr_images: rocket.flickr_images,
         reservation: false,
@@ -40,10 +45,23 @@ export const fetchRocketsAPI = () => async (dispatch) => {
 // reducer
 const reducer = (state = initialState, action) => {
   switch (action.type) {
-    case ADD_RESERVATION:
-      return [...state, action.payload];
-    case REMOVE_RESERVATION:
-      return state.filter((book) => book.item_id !== action.payload);
+    case ADD_RESERVATION: {
+      const newState = state.map((rocket) => {
+        if (rocket.id !== action.payload.id) return rocket;
+
+        return { ...rocket, reservation: true };
+      });
+      return [...newState];
+    }
+    case REMOVE_RESERVATION: {
+      const newState = state.map((rocket) => {
+        if (rocket.id !== action.payload.id) return rocket;
+
+        return { ...rocket, reservation: false };
+      });
+
+      return [...newState];
+    }
     case GET_ROCKETS:
       return [...action.payload];
     default: