diff --git a/README.md b/README.md index cd0d6ad..e5bf2b9 100644 --- a/README.md +++ b/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**
diff --git a/src/assets/styles/MyProfile.css b/src/assets/styles/MyProfile.css index 827546d..7ceee21 100644 --- a/src/assets/styles/MyProfile.css +++ b/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; +} diff --git a/src/assets/styles/responsive.css b/src/assets/styles/responsive.css index 98be181..375b481 100644 --- a/src/assets/styles/responsive.css +++ b/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) { diff --git a/src/components/JoinedMissions.jsx b/src/components/JoinedMissions.jsx new file mode 100644 index 0000000..728c75b --- /dev/null +++ b/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 ( +