fix: results page

components/admin/CandidateField.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'next-i18next';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faPlus, faTrashCan} from '@fortawesome/free-solid-svg-icons';
 import {useSortable} from '@dnd-kit/sortable';
-import { ElectionTypes, useElection } from '@services/ElectionContext';
+import {ElectionTypes, useElection, isCreated} from '@services/ElectionContext';
 import VerticalGripDots from '@components/VerticalGripDots';
 import whiteAvatar from '../../public/avatar.svg';
 import CandidateModalSet from './CandidateModalSet';
@@ -42,7 +42,9 @@ const CandidateField = ({
     useSortable({id: position + 1});
 
   const addCandidate = () => {
+    if (!isCreated(election)) {
       dispatch({type: ElectionTypes.CANDIDATE_PUSH, value: 'default'});
+    }
   };
 
   const toggleSet = () => setModalSet((m) => !m);
@@ -74,8 +76,7 @@ const CandidateField = ({
           src={image}
           width={24}
           height={24}
-          className={`${
-            image == defaultAvatar ? 'default-avatar' : ''
+          className={`${image == defaultAvatar ? 'default-avatar' : ''
             } bg-primary`}
           alt={t('common.thumbnail')}
         />

pages/results/[pid]/[[...tid]].tsx

@@ -51,7 +51,7 @@ export async function getServerSideProps({query, locale}) {
   const numGrades = payload.grades.length;
   const grades = payload.grades.map((g, i) => ({
     ...g,
-    color: getGradeColor(i, numGrades),
+    color: getGradeColor(g.value, numGrades),
   }));
   const gradesByValue: {[key: number]: GradeResultInterface} = {};
   grades.forEach((g) => (gradesByValue[g.value] = g));
@@ -527,7 +527,6 @@ const ResultPage = ({
         <div>
           <h5 className="text-white">{t('result.details')}</h5>
           {Object.keys(candidateByRank)
-            .sort()
             .map((rank, i) => {
               return (
                 <CandidateCard

services/ElectionContext.tsx

@@ -227,6 +227,10 @@ function electionReducer(
   }
 }
 
+export const isCreated = (election: ElectionContextInterface) => {
+  return election.ref !== null && election.ref !== "" && election.ref !== undefined;
+};
+
 export const isClosed = (election: ElectionContextInterface) => {
   const dateEnd = new Date(election.dateEnd);
   const now = new Date();