Joining mission

src/pages/Missions/Missions.css

@@ -1,3 +1,60 @@
-.mission {
-  display: flex;
+table {
+  width: 92%;
+  margin: 5% auto;
+  border-collapse: collapse;
+}
+
+td {
+  text-align: start;
+  border: 1px solid #858484;
+  padding: 8px;
+}
+
+td:first-child {
+  font-weight: bold;
+}
+
+th {
+  font-weight: bold;
+  border: 1px solid #858484;
+  padding: 8px;
+  text-align: start;
+}
+
+tr:nth-child(even) {
+  background-color: #f0f0f0;
+}
+
+td p {
+  padding: 8px;
+  border-radius: 4px;
+  width: max-content;
+  text-align: center;
+  color: white;
+  cursor: pointer;
+}
+
+td p.active {
+  background-color: #419bf9;
+}
+
+td p.not-member {
+  background-color: #6d757d;
+}
+
+button {
+  padding: 8px 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button.leave {
+  color: red;
+  border: 1px solid red;
+}
+
+button.join {
+  color: red;
+  border: 1px solid red;
 }

src/pages/Missions/Missions.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchMissionAsync } from '../../redux/missionSlice';
+import { fetchMissionAsync, joiningMission } from '../../redux/missionSlice';
 import './Missions.css';
 
 function Missions() {
@@ -25,9 +25,48 @@ function Missions() {
       </div>
     );
   }
-  console.log('=======', missions);
   return (
-    <></>
+    <table>
+      <thead>
+        <tr>
+          <th>Mission</th>
+          <th>Description</th>
+          <th>Status</th>
+          <th> </th>
+        </tr>
+      </thead>
+      <tbody className="border border-gray-300">
+        {missions.map((mission) => (
+          <tr key={mission.mission_id}>
+            <td>{mission.mission_name}</td>
+            <td>{mission.description}</td>
+            <td>
+              <p
+                style={{
+                  backgroundColor: mission.reserved ? '#419bf9' : '#6d757d',
+                }}
+              >
+                {mission.reserved ? 'ACTIVE MEMBER' : 'NOT A MEMBER'}
+              </p>
+            </td>
+            <td>
+              {!mission.reserved && (
+              <button
+                type="button"
+                style={{
+                  color: mission.reserved ? 'red' : '',
+                  border: mission.reserved ? '1px solid red' : '',
+                }}
+                onClick={() => dispatch(joiningMission(mission.mission_id))}
+              >
+                Join Mission
+              </button>
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
   );
 }
 

src/redux/missionSlice.js

@@ -20,7 +20,24 @@ export const fetchMissionAsync = createAsyncThunk(
 const missionSlice = createSlice({
   name: 'missions',
   initialState,
-  reducers: {},
+  reducers: {
+    joiningMission: (state, action) => {
+      const id = action.payload;
+      state.missions = state.missions.map((mission) => {
+        if (mission.mission_id !== id) {
+          return mission;
+        }
+        return { ...mission, reserved: true };
+      });
+    },
+  },
+  leavingMission: (state, action) => {
+    const id = action.payload;
+    state.missions = state.missions.map((mission) => {
+      if (mission.mission_id !== id) return mission;
+      return { ...mission, reserved: false };
+    });
+  },
   extraReducers: (builder) => {
     builder
       .addCase(fetchMissionAsync.pending, (state) => {
@@ -37,4 +54,5 @@ const missionSlice = createSlice({
   },
 });
 
+export const { joiningMission } = missionSlice.actions;
 export default missionSlice.reducer;