Merge pull request #41 from NitBravoA92/rockets-filter

Rockets filter

src/assets/styles/MyProfile.css

@@ -0,0 +1,7 @@
+.services-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+}

src/components/ReservationItem.jsx

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+
+const ReservationItem = ({ serviceName }) => (
+  <li className="reservation-item">
+    {serviceName}
+  </li>
+);
+
+ReservationItem.propTypes = {
+  serviceName: PropTypes.string.isRequired,
+};
+
+export default ReservationItem;

src/components/ReservedRockets.jsx

@@ -0,0 +1,21 @@
+import { useSelector } from 'react-redux';
+import ReservationItem from './ReservationItem';
+
+const ReservedRockets = () => {
+  const { rockets } = useSelector((state) => state.rockets);
+
+  return (
+    <div className="my-rockets service">
+      <h2>My Rockets</h2>
+      <ul id="reserved-rockets" className="reservation-list">
+        {rockets
+          .filter((rocket) => rocket.reserved === true)
+          .map((rocket) => (
+            <ReservationItem key={rocket.id} serviceName={rocket.name} />
+          ))}
+      </ul>
+    </div>
+  );
+};
+
+export default ReservedRockets;

src/views/MyProfile.jsx

@@ -1,8 +1,16 @@
 import Layout from './Layout';
+import ReservedRockets from '../components/ReservedRockets';
+import '../assets/styles/MyProfile.css';
 
 const MyProfile = () => (
   <Layout>
-    <section id="myProfile" />
+    <section id="myProfile">
+      <div className="container">
+        <div className="services-content">
+          <ReservedRockets />
+        </div>
+      </div>
+    </section>
   </Layout>
 );