Merge branch 'dev' of github.com:rubydevi/react-group-project into f/rocket-test

Author: rubydevi

src/components/JoinedMissions.js

@@ -1,7 +1,21 @@
-import React from 'react';
+import { ListGroup } from 'react-bootstrap';
+import { useSelector } from 'react-redux/es/hooks/useSelector';
 
-const JoinedMissions = () => (
-  <div>JoinedMissions</div>
-);
+const JoinedMissions = () => {
+  const missions = useSelector((state) => state.missions.missions);
+  const joinmission = missions.filter((mission) => mission.reserved === true);
+
+  return (
+    <>
+      {joinmission.length > 0 ? (
+        <ListGroup>
+          {joinmission.map((mission) => (
+            <ListGroup.Item key={mission.mission_id}>{mission.mission_name}</ListGroup.Item>
+          ))}
+        </ListGroup>
+      ) : (<div>You have no Reserved Missions</div>)}
+    </>
+  );
+};
 
 export default JoinedMissions;

src/components/MyProfile.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const MyProfile = () => (
-  <div>MyProfile</div>
-);
-
-export default MyProfile;

src/components/ReservedDragons.js

@@ -1,7 +1,42 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+import ListGroup from 'react-bootstrap/ListGroup';
+import { Container } from 'react-bootstrap';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Badge from 'react-bootstrap/Badge';
 
-const ReservedDragons = () => (
-  <div>ReservedDragons</div>
-);
+const ReservedDragons = () => {
+  const { dragons } = useSelector((state) => state.dragons);
+  const reservedDragons = dragons.filter((dragon) => dragon.reserved === true);
+
+  return (
+    <Container className="mt-4">
+      <Row>
+        {reservedDragons.length > 0 ? (
+          <Col>
+            <ListGroup>
+              {
+            reservedDragons.map((dragon) => (
+              <ListGroup.Item key={dragon.id}>{dragon.name}</ListGroup.Item>
+            ))
+              }
+            </ListGroup>
+          </Col>
+        ) : (
+          <Col>
+            <h5>
+              Dragons
+              {' '}
+              <Badge bg="info">No dragon reserved</Badge>
+            </h5>
+          </Col>
+        )}
+
+      </Row>
+    </Container>
+
+  );
+};
 
 export default ReservedDragons;