making changes to scunt mission entry component to show green check f…

…or completion and points awarded
UofT-Frosh-Orientation · Aug 17, 2023 · 70d630b · 70d630b
1 parent 108c9d9
commit 70d630b
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 5 deletions.
diff --git a/client/src/assets/misc/check-solid-green.svg b/client/src/assets/misc/check-solid-green.svg
diff --git a/client/src/pages/ScuntJudgeForm/ScuntJudgeForm.jsx b/client/src/pages/ScuntJudgeForm/ScuntJudgeForm.jsx
@@ -14,6 +14,7 @@ import { scuntSettingsSelector } from '../../state/scuntSettings/scuntSettingsSl
 import { getScuntSettings } from '../../state/scuntSettings/saga';
 import { submitBribePoints } from './functions';
 import star from '../../assets/misc/star-solid.svg';
+import greenCheck from '../../assets/misc/check-solid-green.svg';
 import { scuntMissionsSelector } from '../../state/scuntMissions/scuntMissionsSlice';
 import { getScuntMissions } from '../../state/scuntMissions/saga';
 import useAxios from '../../hooks/useAxios';
@@ -637,7 +638,7 @@ ScuntMissionSelection.propTypes = {
   teamObjs: PropTypes.array,
 };
 
-export const ScuntMissionEntry = ({ mission, selected }) => {
+export const ScuntMissionEntry = ({ mission, selected, completed, pointsAwarded }) => {
   return (
     <div className={`scunt-mission-entry ${selected ? 'scunt-mission-entry-selected' : ''}`}>
       <h3 className="mission-id">{mission?.number}</h3>
@@ -650,14 +651,36 @@ export const ScuntMissionEntry = ({ mission, selected }) => {
       ) : (
         <></>
       )}
+      {completed ? (
+        <img
+          src={greenCheck}
+          alt="judging station indication"
+          className="scunt-mission-entry-judging-star"
+        />
+      ) : (
+        <></>
+      )}
       <p className="mission-name">{mission?.name}</p>
 
-      <h3 className="mission-points">{mission?.points}</h3>
+      {completed ? (
+        <h3 className="mission-points">
+          {pointsAwarded}/{mission?.points}
+        </h3>
+      ) : (
+        <h3 className="mission-points">{mission?.points}</h3>
+      )}
     </div>
   );
 };
 
 ScuntMissionEntry.propTypes = {
+  completed: PropTypes.bool,
+  pointsAwarded: PropTypes.number,
   mission: PropTypes.object,
   selected: PropTypes.bool,
 };
+
+ScuntMissionEntry.defaultProps = {
+  completed: false,
+  pointsAwarded: 0,
+};
diff --git a/client/src/pages/ScuntMissionsList/ScuntMissionsList.jsx b/client/src/pages/ScuntMissionsList/ScuntMissionsList.jsx
@@ -82,6 +82,11 @@ const PageScuntMissionsListShow = () => {
   const [selectedSort, setSelectedSort] = useState('ID');
   const [missionStatus, setMissionStatus] = useState(undefined);
   const loggedIn = useSelector(loggedInSelector);
+  const [completedMissions, setCompletedMissions] = useState({});
+
+  useEffect(() => {
+    getAllTeamTransactions(user?.scuntTeam);
+  }, [missions]); // inital run and whenever missions updated
 
   useEffect(() => {
     setMission(undefined);
@@ -148,6 +153,26 @@ const PageScuntMissionsListShow = () => {
     setMissionStatus(response?.data?.missionStatus);
   };
 
+  const getAllTeamTransactions = async (teamNumber) => {
+    const response = await axios.post('/scunt-teams/transactions', {
+      teamNumber: teamNumber,
+    });
+    // console.log(response?.data?.transactions);
+    const teamTransactions = response?.data?.transactions?.transactions || [];
+    console.log(teamTransactions);
+
+    teamTransactions.forEach((transaction) => {
+      const missionNum = transaction?.missionNumber;
+      console.log(transaction);
+
+      if (missionNum !== -1) {
+        completedMissions[missionNum] = transaction?.points;
+      }
+    });
+
+    console.log(completedMissions);
+  };
+
   let previousCategory = '';
 
   let missionStatusText = '';
@@ -245,7 +270,12 @@ const PageScuntMissionsListShow = () => {
                 setClearText(true);
               }}
             >
-              <ScuntMissionEntry mission={mission} selected />
+              <ScuntMissionEntry
+                mission={mission}
+                selected={true}
+                completed={mission?.number in completedMissions}
+                pointsAwarded={completedMissions[mission?.number]}
+              />
             </div>
           ) : (
             searchedMissions.map((mission) => {
@@ -257,13 +287,17 @@ const PageScuntMissionsListShow = () => {
                     setMission(mission);
                   }}
                 >
-                  <ScuntMissionEntry mission={mission} />
+                  <ScuntMissionEntry
+                    mission={mission}
+                    completed={mission?.number in completedMissions}
+                    pointsAwarded={completedMissions[mission?.number]}
+                  />
                 </div>
               );
               if (previousCategory !== mission?.category) {
                 previousCategory = mission?.category;
                 return (
-                  <div className="scunt-mission-category-separator">
+                  <div key={mission?.number} className="scunt-mission-category-separator">
                     <div className="separator" />
                     <h3>{mission?.category}</h3>
                     {missionEntry}