Merge pull request #34 from NitBravoA92/render-rockets-list

Render the Rockets lists in the UI

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;
+}

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;

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) {

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;

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;

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;
+        }
       });
   },
 });

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>
   );
 };