Display joined missions in My profile view

README.md

@@ -171,8 +171,8 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 - [x] **Add actions and other functionality to Cancel Reservation**
 - [x] **Add actions and other functionality to Join Missions**
 - [x] **Add actions and other functionality to Leave Missions**
-- [ ] **Display the list of Missions Joined in the My Profile view**
-- [ ] **Display the list of Rockets reserved in the My Profile view**
+- [x] **Display the list of Missions Joined in the My Profile view**
+- [x] **Display the list of Rockets reserved in the My Profile view**
 - [ ] **Create Unit tests using Jest and React testing library**
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

src/assets/styles/MyProfile.css

@@ -5,3 +5,36 @@
   justify-content: center;
   gap: 2rem;
 }
+
+.services-content .service {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.services-content .service h2 {
+  font-size: 2rem;
+  color: #333;
+}
+
+.reservation-list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid #ccc;
+}
+
+.reservation-item {
+  padding: 0.7rem 0.8rem 1.1rem;
+  border-bottom: 1px solid #ccc;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #333;
+  transition: all 0.2s ease-out;
+}
+
+.reservation-item:hover {
+  background-color: #f1f1f1;
+}

src/assets/styles/responsive.css

@@ -42,6 +42,13 @@
   .rocket-image {
     width: 350px;
   }
+
+  .services-content {
+    flex-direction: row;
+    align-items: start;
+    justify-content: space-between;
+    gap: 3rem;
+  }
 }
 
 @media (min-width: 992px) {

src/components/JoinedMissions.jsx

@@ -0,0 +1,24 @@
+import { useSelector } from 'react-redux';
+import ReservationItem from './ReservationItem';
+
+const JoinedMissions = () => {
+  const { missions } = useSelector((state) => state.missions);
+
+  return (
+    <div className="my-missions service">
+      <h2>My Missions</h2>
+      <ul id="reserved-missions" className="reservation-list">
+        {missions
+          .filter((mission) => mission.reserved === true)
+          .map((mission) => (
+            <ReservationItem
+              key={mission.mission_id}
+              serviceName={mission.mission_name}
+            />
+          ))}
+      </ul>
+    </div>
+  );
+};
+
+export default JoinedMissions;

src/views/MyProfile.jsx

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