Mission subscription

src/components/Mission.js

@@ -1,28 +1,70 @@
-import React from 'react';
+import { useDispatch } from 'react-redux';
+import { memberStatusFunc, memberActivated } from '../redux/Missions/Missions';
 
 const Mission = ((props) => {
+  const dispatch = useDispatch();
+
+  const onClick = ((e) => {
+    const missionId = e.target.parentElement.id;
+    if (e.target.value === 'Join') {
+      const activeMember = true;
+      dispatch(memberStatusFunc({ missionId, activeMember }));
+    } else if (e.target.value === 'leave') {
+      const notActive = false;
+      dispatch(memberActivated({ missionId, notActive }));
+    }
+  });
+
   const data = props;
   return (
-    <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
+    <tr className="bg-white odd:bg-gray-100 border-b transition duration-300 ease-in-out hover:bg-lime-100">
       <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 man-w-fit">{data.name}</td>
       <td className="text-sm text-gray-900 font-light px-6 py-4 w-1/2 max-h-36">
         {data.description}
       </td>
       <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap max-w-fit">
-        <span className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
-      dark:bg-blue-200 dark:text-blue-800"
-        >
-          Not a Member
-        </span>
+        {
+              data.memberActive === true
+                ? (
+                  <span className="bg-blue-400 text-white text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
+      dark:bg-blue-400 dark:text-white"
+                  >
+                    Active Member
+                  </span>
+                )
+                : (
+                  <span className="bg-gray-300 text-white text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
+      dark:bg-gray-500 dark:text-white"
+                  >
+                    Not a Member
+                  </span>
+                )
+          }
       </td>
-      <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap man-w-fit">
-        <button
-          className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border
-      border-blue-500 hover:border-transparent rounded"
-          type="button"
-        >
-          Join Mission
-        </button>
+      <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap man-w-fit" id={data.idx}>
+        {data.memberActive === true
+          ? (
+            <button
+              className="bg-transparent hover:bg-red-500 text-red-700 font-semibold hover:text-white py-2 px-4 border
+      border-red-500 hover:border-transparent rounded"
+              type="button"
+              value="leave"
+              onClick={onClick}
+            >
+              Leave Mission
+            </button>
+          )
+          : (
+            <button
+              className="bg-transparent hover:bg-gray-500 text-gray-700 font-semibold hover:text-white py-2 px-4 border
+      border-gray-500 hover:border-transparent rounded"
+              type="button"
+              value="Join"
+              onClick={onClick}
+            >
+              Join Mission
+            </button>
+          )}
       </td>
     </tr>
   );

src/components/MissionList.js

@@ -33,6 +33,8 @@ const MissionList = (() => {
             key={data.mission_id}
             name={data.mission_name}
             description={data.description}
+            memberActive={data.member}
+            idx={data.mission_id}
           />
         ))}
       </tbody>

src/redux/Missions/Missions.js

@@ -1,4 +1,6 @@
 const MISSIONS_FETCHED = 'space_travellers/Missions/MISSIONS_FETCHED';
+const MEMBER_STATUS = 'space_travellers/Missions/MEMBER_STATUS';
+const MEMBER_ACTIVE = 'space_travellers/Missions/MEMBER_ACTIVE';
 
 const initialState = {
   missions: [],
@@ -9,11 +11,34 @@ export const missionsFetched = (payload) => ({
   payload,
 });
 
+export const memberStatusFunc = (payload) => ({
+  type: MEMBER_STATUS,
+  payload,
+});
+
+export const memberActivated = (payload) => ({
+  type: MEMBER_ACTIVE,
+  payload,
+});
+
 const reducer = (state = initialState, action) => {
   switch (action.type) {
     case MISSIONS_FETCHED:
       return { missions: [...action.payload] };
-
+    case MEMBER_STATUS:
+      return {
+        missions:
+        [...state.missions].map((mission) => (mission.mission_id === action.payload.missionId
+          ? { ...mission, member: action.payload.activeMember }
+          : mission)),
+      };
+    case MEMBER_ACTIVE:
+      return {
+        missions:
+        [...state.missions].map((mission) => (mission.mission_id === action.payload.missionId
+          ? { ...mission, member: action.payload.notActive }
+          : mission)),
+      };
     default:
       return state;
   }