From 3a90460a62f3ae6301c231ea76dda434377448bd Mon Sep 17 00:00:00 2001 From: kessie Date: Wed, 28 Jun 2023 06:52:54 +0000 Subject: [PATCH 1/6] Add Profile component to display joined missions --- src/components/Profile.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/Profile.js b/src/components/Profile.js index cf73e98..9ff7f60 100644 --- a/src/components/Profile.js +++ b/src/components/Profile.js @@ -1,7 +1,25 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import './styles/Profile.css'; + function Profile() { + const joinedMissions = useSelector((state) => state.mission + .missions.filter((mission) => mission.reserved)); + return ( -
-

Profile Page

+
+

My Missions

+
+ {joinedMissions.length === 0 ? ( +

No missions joined.

+ ) : ( +
    + {joinedMissions.map((mission) => ( +
  • {mission.mission_name}
    • + ))} +
+ )} +
); } From 5876751ea1818ecf606a3e6dd0544ce2c1ea0681 Mon Sep 17 00:00:00 2001 From: kessie Date: Wed, 28 Jun 2023 06:54:26 +0000 Subject: [PATCH 2/6] Add styles to rendered missions on my profile page --- src/components/styles/Profile.css | 32 +++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/styles/Profile.css diff --git a/src/components/styles/Profile.css b/src/components/styles/Profile.css new file mode 100644 index 0000000..3c008c2 --- /dev/null +++ b/src/components/styles/Profile.css @@ -0,0 +1,32 @@ +.profile-container { + width: 50%; + text-align: left; +} + +.profile-container h2 { + margin: 0 auto; + width: 70%; +} + +.joined-missions { + width: 70%; + margin: 20px auto; + border: 1px solid #ccc; + padding: 10px; +} + +.joined-missions h3 { + margin: 0 0 1.5rem 0; +} + +.joined-missions ul { + list-style-type: none; + padding: 0; +} + +.joined-missions li { + border-bottom: 1px solid #ccc; + padding: 1rem 0 1rem 1rem; + margin-bottom: 1rem; + font-weight: 600; +} From 22df78620272c7e70646208d84b2b9285415c44c Mon Sep 17 00:00:00 2001 From: kessie Date: Wed, 28 Jun 2023 06:57:49 +0000 Subject: [PATCH 3/6] Remove mission from missions array instead of marking it as not reserved --- src/redux/missions/missionSlice.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/redux/missions/missionSlice.js b/src/redux/missions/missionSlice.js index 0d13ad8..5a6796b 100644 --- a/src/redux/missions/missionSlice.js +++ b/src/redux/missions/missionSlice.js @@ -15,10 +15,11 @@ const missionSlice = createSlice({ }, leaveMission: (state, action) => { const missionId = action.payload; - state.missions = state.missions.map((mission) => (mission.mission_id === missionId - ? { ...mission, reserved: false } - : mission)); + state.missions = state.missions.filter( + (mission) => mission.mission_id !== missionId, + ); }, + }, }); From 00c0fb2121d734f21e821fc418db0c7960e07d12 Mon Sep 17 00:00:00 2001 From: kessie Date: Wed, 28 Jun 2023 18:28:41 +0000 Subject: [PATCH 4/6] Update mission join/leave functionality --- src/components/Missions.js | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/src/components/Missions.js b/src/components/Missions.js index 7ea0b0f..713cb74 100644 --- a/src/components/Missions.js +++ b/src/components/Missions.js @@ -10,6 +10,7 @@ import './styles/Missions.css'; function Missions() { const dispatch = useDispatch(); const missions = useSelector((state) => state.mission.missions); + const joinedMissions = useSelector((state) => state.mission.joinedMissions); useEffect(() => { const fetchMissions = async () => { @@ -33,6 +34,9 @@ function Missions() { dispatch(leaveMission(missionId)); }; + const isMissionJoined = (missionId) => joinedMissions + .some((mission) => mission.mission_id === missionId); + return (
@@ -51,31 +55,41 @@ function Missions() { From 450cf628af2658e95bb554a202b9881373876828 Mon Sep 17 00:00:00 2001 From: kessie Date: Wed, 28 Jun 2023 18:31:15 +0000 Subject: [PATCH 5/6] Display joined missions --- src/components/Profile.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Profile.js b/src/components/Profile.js index 9ff7f60..370c0ec 100644 --- a/src/components/Profile.js +++ b/src/components/Profile.js @@ -3,8 +3,9 @@ import { useSelector } from 'react-redux'; import './styles/Profile.css'; function Profile() { - const joinedMissions = useSelector((state) => state.mission - .missions.filter((mission) => mission.reserved)); + const joinedMissions = useSelector( + (state) => state.mission.joinedMissions, + ); return (
From 9904c79a35d60f7006af145510e53be6bc5e345d Mon Sep 17 00:00:00 2001 From: kessie Date: Wed, 28 Jun 2023 18:32:54 +0000 Subject: [PATCH 6/6] Add joinedMissions state and update reducers --- src/redux/missions/missionSlice.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/redux/missions/missionSlice.js b/src/redux/missions/missionSlice.js index 5a6796b..6c37af9 100644 --- a/src/redux/missions/missionSlice.js +++ b/src/redux/missions/missionSlice.js @@ -2,24 +2,33 @@ import { createSlice } from '@reduxjs/toolkit'; const missionSlice = createSlice({ name: 'mission', - initialState: { missions: [] }, + initialState: { + missions: [], + joinedMissions: [], + }, reducers: { setMissions: (state, action) => { state.missions = action.payload; }, joinMission: (state, action) => { const missionId = action.payload; - state.missions = state.missions.map((mission) => (mission.mission_id === missionId - ? { ...mission, reserved: true } - : mission)); + const mission = state.missions.find( + (mission) => mission.mission_id === missionId, + ); + if (mission) { + mission.reserved = true; + state.joinedMissions.push(mission); + } }, leaveMission: (state, action) => { const missionId = action.payload; - state.missions = state.missions.filter( + state.missions = state.missions.map((mission) => (mission.mission_id === missionId + ? { ...mission, reserved: false } + : mission)); + state.joinedMissions = state.joinedMissions.filter( (mission) => mission.mission_id !== missionId, ); }, - }, });
- {mission.reserved ? 'ACTIVE MEMBER' : 'NOT A MEMBER'} + {isMissionJoined(mission.mission_id) + ? 'ACTIVE MEMBER' + : 'NOT A MEMBER'}