From e82a3cf32147427b0325f046610f1ad15e2f295d Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Tue, 25 Jul 2023 11:21:18 -0400
Subject: [PATCH 1/7] Add extra validation to the rockets state

---
 src/redux/rockets/rocketsSlice.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/redux/rockets/rocketsSlice.js b/src/redux/rockets/rocketsSlice.js
index 35e2063..1b11367 100644
--- a/src/redux/rockets/rocketsSlice.js
+++ b/src/redux/rockets/rocketsSlice.js
@@ -27,24 +27,26 @@ const rocketsSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(getAllRockets.pending, (state) => {
-        state.isLoading = true;
+        if (state.rockets.length === 0) state.isLoading = true;
       })
       .addCase(getAllRockets.fulfilled, (state, action) => {
-        state.isLoading = false;
         if (state.rockets.length === 0) {
+          state.isLoading = false;
           state.rockets = action.payload.map((rocket) => (
             {
               id: rocket.id,
               name: rocket.name,
-              type: rocket.type,
+              description: rocket.description,
               image: rocket.flickr_images[0],
             }
           ));
         }
       })
       .addCase(getAllRockets.rejected, (state, action) => {
-        state.isLoading = false;
-        state.error = action.payload;
+        if (state.rockets.length === 0) {
+          state.isLoading = false;
+          state.error = action.payload;
+        }
       });
   },
 });

From 56fb88d6e32c36e496650046e427d44fa4db504f Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Tue, 25 Jul 2023 11:21:46 -0400
Subject: [PATCH 2/7] Create the RocketItem component to display a rocket

---
 src/components/RocketItem.jsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/components/RocketItem.jsx

diff --git a/src/components/RocketItem.jsx b/src/components/RocketItem.jsx
new file mode 100644
index 0000000..27c723c
--- /dev/null
+++ b/src/components/RocketItem.jsx
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+const RocketItem = ({ rocket }) => (
+  <div className="rocket-item">
+    <div className="rocket-image">
+      <img src={rocket.image} alt={rocket.name} />
+    </div>
+    <div className="rocket-details">
+      <h2 className="title">{rocket.name}</h2>
+      <p className="description">{rocket.description}</p>
+      <div className="reserve">
+        <button type="button" className="btn btn-blue">Reserve Rocket</button>
+      </div>
+    </div>
+  </div>
+);
+
+RocketItem.propTypes = {
+  rocket: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    image: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default RocketItem;

From ffb51bd35fb3c6848f81ee5e5a6527adae621589 Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Tue, 25 Jul 2023 11:22:04 -0400
Subject: [PATCH 3/7] Create the RocketsContent component to display the list
 of rockets in the state using useSelector

---
 src/components/RocketsContent.jsx | 32 +++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/RocketsContent.jsx

diff --git a/src/components/RocketsContent.jsx b/src/components/RocketsContent.jsx
new file mode 100644
index 0000000..790aacc
--- /dev/null
+++ b/src/components/RocketsContent.jsx
@@ -0,0 +1,32 @@
+import { useSelector } from 'react-redux';
+import RocketItem from './RocketItem';
+
+const RocketsContent = () => {
+  const { rockets, isLoading, error } = useSelector((state) => state.rockets);
+
+  if (error) {
+    return (
+      <div className="error-message">
+        <h2>{error}</h2>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="loading-message">
+        <h2>Loading Rockets...</h2>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rockets-list">
+      { rockets.map((rocket) => (
+        <RocketItem key={rocket.id} rocket={rocket} />
+      ))}
+    </div>
+  );
+};
+
+export default RocketsContent;

From 443cd0127241a82e12416f2a3bb199cd4a81e76e Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Tue, 25 Jul 2023 11:22:16 -0400
Subject: [PATCH 4/7] Add the RocketsContent component and Import the
 Rocket.css file

---
 src/views/Rockets.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/views/Rockets.jsx b/src/views/Rockets.jsx
index 987fd93..471ee5d 100644
--- a/src/views/Rockets.jsx
+++ b/src/views/Rockets.jsx
@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { getAllRockets } from '../redux/rockets/rocketsSlice';
 import Layout from './Layout';
+import RocketsContent from '../components/RocketsContent';
+import '../assets/styles/Rocket.css';
 
 const Rockets = () => {
   const dispatch = useDispatch();
@@ -12,7 +14,11 @@ const Rockets = () => {
 
   return (
     <Layout>
-      <section id="rockets" />
+      <section id="rockets">
+        <div className="container">
+          <RocketsContent />
+        </div>
+      </section>
     </Layout>
   );
 };

From b7966b2ddcae548df5b13136bb7eaf22b411d74e Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Tue, 25 Jul 2023 11:22:29 -0400
Subject: [PATCH 5/7] Update the css styles of the buttons elements

---
 src/assets/styles/index.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index ea27b5a..cfa7125 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -89,6 +89,17 @@ main {
   border-color: #d73a5c;
 }
 
+.btn-blue {
+  color: #fff;
+  background-color: #0d6efd;
+}
+
+.btn-blue:active {
+  color: #0d6efd;
+  background-color: transparent;
+  border-color: #0d6efd;
+}
+
 .badge {
   font-size: 0.8rem;
   font-weight: 600;

From 1d797ef86014d038a8903ee41700240252b8cc1e Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Tue, 25 Jul 2023 11:22:45 -0400
Subject: [PATCH 6/7] Add the css styles of the Rockets view

---
 src/assets/styles/Rocket.css | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/assets/styles/Rocket.css

diff --git a/src/assets/styles/Rocket.css b/src/assets/styles/Rocket.css
new file mode 100644
index 0000000..199f228
--- /dev/null
+++ b/src/assets/styles/Rocket.css
@@ -0,0 +1,35 @@
+.rocket-item {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  width: 100%;
+  padding: 1rem 0;
+}
+
+.rocket-image {
+  width: 100%;
+  height: auto;
+}
+
+.rocket-image img {
+  width: 100%;
+}
+
+.rocket-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.rocket-details .title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #333;
+}
+
+.rocket-details .description {
+  font-size: 1rem;
+  color: #333;
+  line-height: 1.5;
+}

From fb2148ea5e661430fdafc55ec62f6d2542498786 Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Tue, 25 Jul 2023 11:23:01 -0400
Subject: [PATCH 7/7] Update the media queries to include rocket items styles

---
 src/assets/styles/responsive.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/assets/styles/responsive.css b/src/assets/styles/responsive.css
index 35ea29c..98be181 100644
--- a/src/assets/styles/responsive.css
+++ b/src/assets/styles/responsive.css
@@ -33,6 +33,15 @@
   .missions-table {
     overflow: hidden;
   }
+
+  .rocket-item {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .rocket-image {
+    width: 350px;
+  }
 }
 
 @media (min-width: 992px) {