Merge branch 'development' into missions-branch

src/components/TableData.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import propTypes from 'prop-types';
+
+const TableData = ({ data }) => (<td className="table-data">{data}</td>);
+
+TableData.propTypes = {
+  data: propTypes.string.isRequired,
+};
+
+export default TableData;

src/components/TableRow.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { v4 as uuidv4 } from 'uuid';
+import propTypes from 'prop-types';
+import TableData from './TableData';
+import Styles from './TableRow.module.css';
+import { leaveJoinMission } from '../redux/missions/missions';
+
+const TableRow = ({ data }) => {
+  const {
+    member,
+    notMember,
+    active,
+    inactive,
+  } = Styles;
+  const {
+    description,
+    id,
+    name,
+    joined,
+  } = data;
+  const dispatch = useDispatch();
+  const jOrL = () => dispatch(leaveJoinMission(id));
+  const leaveOrJoin = joined ? 'Leave' : 'Join';
+  const Button = (<button onClick={jOrL} className={joined ? member : notMember} type="button">{`${leaveOrJoin} Mission`}</button>);
+  const Span = (<span className={joined ? active : inactive}>{joined ? 'Active Member' : 'NOT A MEMBER'}</span>);
+  return (
+    <tr className="table-row">
+      {[name, description, Span, Button].map((item) => (
+        <TableData key={uuidv4()} id={id} data={item} />
+      ))}
+    </tr>
+  );
+};
+
+TableRow.propTypes = {
+  data: propTypes.instanceOf(Object).isRequired,
+};
+
+export default TableRow;

src/components/TableRow.module.css

@@ -0,0 +1,41 @@
+.member {
+  border: 0.5px solid #e9858f;
+  color: #e9858f;
+  font-size: 0.8rem;
+  width: 105px;
+  height: 20px;
+  line-height: 20px;
+  font-weight: bolder;
+}
+
+.notMember {
+  border: 0.5px solid black;
+  color: black;
+  font-size: 0.8rem;
+  width: 105px;
+  height: 20px;
+  line-height: 20px;
+}
+
+.active {
+  display: inline-block;
+  background-color: #18a2b8;
+  text-align: center;
+  color: white;
+  font-size: 0.8rem;
+  width: 105px;
+  height: 20px;
+  line-height: 20px;
+}
+
+.inactive {
+  display: inline-block;
+  background-color: #6d757d;
+  font-weight: bolder;
+  color: white;
+  font-size: 0.6rem;
+  width: 105px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+}

src/pages/Missions.js

@@ -1,3 +1,46 @@
-const Missions = () => (<div>This is the missions page</div>);
+import React from 'react';
+import { useSelector } from 'react-redux';
+import TableRow from '../components/TableRow';
+
+const Missions = () => {
+  let state = useSelector((state) => state.missions);
+  if (state.missions) {
+    const temp = state.missions;
+    state = temp;
+  }
+  return (
+    <table className="mission-table">
+      <thead>
+        <tr className="table-row first-row">
+          <th className="th">Misson</th>
+          <th className="th">Description</th>
+          <th className="th">Status</th>
+          <th className="th">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        {state.map((item) => {
+          const {
+            description,
+            id,
+            name,
+            joined,
+          } = item;
+          return (
+            <TableRow
+              key={item.id}
+              data={{
+                description,
+                id,
+                name,
+                joined,
+              }}
+            />
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
 
 export default Missions;

src/redux/missions/missions.js

@@ -2,35 +2,32 @@ import initialState from '../initialState';
 
 // Constants
 const FETCH_MISSION = 'FETCH_MISSION';
-const JOIN_MISSION = 'JOIN_MISSION';
-const LEAVE_MISSION = 'LEAVE_MISSION';
+const LEAVE_JOIN_MISSION = 'LEAVE_JOIN_MISSION';
 
 // Action Creators
 export const fetchData = (payload) => ({
   type: FETCH_MISSION,
   payload,
 });
 
-export const joinMission = (id) => ({
-  type: JOIN_MISSION,
+export const leaveJoinMission = (id) => ({
+  type: LEAVE_JOIN_MISSION,
   payload: id,
 });
 
 // Reducesrs
 export const missionReducers = (state = initialState, action) => {
   const { type, payload } = action;
   switch (type) {
-    case JOIN_MISSION:
-      return state.map((mission) => {
-        if (mission.id !== payload) return mission;
-        return { ...mission, joined: !mission.joined };
+    case LEAVE_JOIN_MISSION:
+      return state.map((rocket) => {
+        if (rocket.id !== payload) return rocket;
+        return { ...rocket, joined: !rocket.joined };
       });
 
     case FETCH_MISSION:
       return payload;
 
-    case LEAVE_MISSION:
-      return state;
     default:
       return state;
   }

src/styles.css

@@ -151,3 +151,47 @@ tbody > tr:nth-child(even) { background: #fff; }
 .profile-rockets li:last-child { border-bottom: none; }
 
 /* End of profile rockets */
+.mission-table {
+  border: 0.5px solid grey;
+  border-collapse: collapse;
+}
+
+.table-row:nth-child(odd):not(.first-row) {
+  background-color: #f2f2f2;
+}
+
+.table-data,
+.th {
+  border: 0.5px solid grey;
+  padding: 10px;
+}
+
+@media screen and (max-width: 900px) {
+  .table-row {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: justify;
+  }
+
+  .table-row:not(:first-child) {
+    margin-top: 10px;
+  }
+
+  .table-row > * {
+    margin: 7px;
+  }
+
+  .table-data,
+  .th {
+    border: none;
+  }
+
+  .table-data:first-child {
+    font-size: 2rem;
+  }
+
+  .first-row {
+    display: none;
+  }
+}