Merge pull request #34 from Chrissiku/profile-join-missions

Milestone 10: Add Mission to profile section
Chrissiku · Jul 19, 2022 · ce5168e · ce5168e
2 parents 9482298 + 41352f4
commit ce5168e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git a/src/App.css b/src/App.css
@@ -30,6 +30,7 @@ body {
   align-items: center;
   gap: 25px;
 }
+
 .navbar .brand span {
   font-size: 25px;
   font-weight: 600;
@@ -51,8 +52,12 @@ body {
   text-decoration: none;
 }
 
-.rockets-container{
-  padding: 20px 0px;
+.rockets-container {
+  padding: 20px 0;
+}
+
+.profile-container {
+  margin: 20px;
 }
 
 @media screen and (min-width: 800px) {

diff --git a/src/components/Profile/profile.js b/src/components/Profile/profile.js
@@ -1,29 +1,39 @@
 /* eslint-disable linebreak-style */
 /* eslint-disable no-unused-vars */
 /* eslint-disable quotes */
-import { ListGroup, Col } from "react-bootstrap";
+import {
+  Container, Row, ListGroup, Col,
+} from "react-bootstrap";
 import { useSelector } from "react-redux";
 // import { Row } from "react-bootstrap/Row";
 
 const Profile = () => {
   const profileParts = useSelector((state) => [
+    {
+      RocketTitle: "My Missions",
+      data: state.missions.filter((mission) => mission.reserved),
+    },
     {
       RocketTitle: "My Rockets",
       data: state.rockets.filter((rocket) => rocket.reserved),
     },
   ]);
   return (
     <>
-      {profileParts.map(({ RocketTitle, data }) => (
-        <Col key={RocketTitle}>
-          <h4>{RocketTitle}</h4>
-          <ListGroup>
-            {data.map((item) => (
-              <ListGroup.Item key={item.id}>{item.name}</ListGroup.Item>
-            ))}
-          </ListGroup>
-        </Col>
-      ))}
+      <Container className="profile-container">
+        <Row>
+          {profileParts.map(({ RocketTitle, data }) => (
+            <Col key={RocketTitle}>
+              <h4>{RocketTitle}</h4>
+              <ListGroup>
+                {data.map((item) => (
+                  <ListGroup.Item key={item.id}>{item.name}</ListGroup.Item>
+                ))}
+              </ListGroup>
+            </Col>
+          ))}
+        </Row>
+      </Container>
     </>
   );
 };