Merge pull request #31 from HENRYKC24/joined-missions-profile

Add missions profile

src/components/MyMissionProfile.js

@@ -0,0 +1,17 @@
+import { useSelector } from 'react-redux';
+
+const MyMissionProfile = () => {
+  const missions = useSelector((state) => state.missions.filter((mission) => mission.joined));
+
+  return (
+    <div>
+      <ul className="profile-missions">
+        {missions.length > 0 ? missions.map((mission) => (
+          <li key={mission.id} mission={mission}><b>{mission.name}</b></li>
+        )) : 'No Mission Joined'}
+      </ul>
+    </div>
+  );
+};
+
+export default MyMissionProfile;

src/pages/MyProfile.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import ReservedRockets from './ReservedRockets';
+import MyMissionProfile from '../components/MyMissionProfile';
 
-const MyProfile = () => <div><ReservedRockets /></div>;
+const MyProfile = () => (
+  <div>
+    <MyMissionProfile />
+    <ReservedRockets />
+  </div>
+);
 
 export default MyProfile;

src/styles.css

@@ -166,6 +166,24 @@ tbody > tr:nth-child(even) { background: #fff; }
   padding: 10px;
 }
 
+.profile-missions {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  list-style: none;
+  padding: 0;
+  margin: 2%;
+  list-style-position: inside;
+}
+
+.profile-missions li {
+  border-bottom: 1px solid #ccc;
+  padding: 1%;
+}
+
+.profile-missions li:last-child {
+  border-bottom: none;
+}
+
 @media screen and (max-width: 900px) {
   .table-row {
     display: flex;