fix: results page

components/admin/CandidateField.tsx

@@ -1,13 +1,13 @@
 /**
  * This is the candidate field used during election creation
  */
-import { useState } from 'react';
+import {useState} from 'react';
 import Image from 'next/image';
-import { useTranslation } from 'next-i18next';
+import {useTranslation} from 'next-i18next';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import { faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import {faPlus, faTrashCan} from '@fortawesome/free-solid-svg-icons';
-import { useSortable } from '@dnd-kit/sortable';
+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';
@@ -28,7 +28,7 @@ const CandidateField = ({
   editable = true,
   ...props
 }: CandidateProps) => {
-  const { t } = useTranslation();
+  const {t} = useTranslation();
   const [election, dispatch] = useElection();
 
   const candidate = election.candidates[position];
@@ -38,11 +38,13 @@ const CandidateField = ({
   const [modalDel, setModalDel] = useState(false);
   const [modalSet, setModalSet] = useState(false);
 
-  const { attributes, listeners, setNodeRef, transform, transition } =
+  const {attributes, listeners, setNodeRef, transform, transition} =
-    useSortable({ id: position + 1 });
+    useSortable({id: position + 1});
 
   const addCandidate = () => {
-    dispatch({ type: ElectionTypes.CANDIDATE_PUSH, value: 'default' });
+    if (!isCreated(election)) {
+      dispatch({type: ElectionTypes.CANDIDATE_PUSH, value: 'default'});
+    }
   };
 
   const toggleSet = () => setModalSet((m) => !m);
@@ -74,9 +76,8 @@ const CandidateField = ({
           src={image}
           width={24}
           height={24}
-          className={`${
+          className={`${image == defaultAvatar ? 'default-avatar' : ''
-            image == defaultAvatar ? 'default-avatar' : ''
+            } bg-primary`}
-          } bg-primary`}
           alt={t('common.thumbnail')}
         />
         <div className="ps-2 fw-bold">

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

@@ -9,9 +9,9 @@ import {
   Dispatch,
   SetStateAction,
 } from 'react';
-import { useRouter } from 'next/router';
+import {useRouter} from 'next/router';
-import { CandidateItem, GradeItem } from './type';
+import {CandidateItem, GradeItem} from './type';
-import { gradeColors } from '@services/grades';
+import {gradeColors} from '@services/grades';
 
 export interface ElectionContextInterface {
   name: string;
@@ -38,7 +38,7 @@ const defaultCandidate: CandidateItem = {
 const defaultElection: ElectionContextInterface = {
   name: '',
   description: '',
-  candidates: [{ ...defaultCandidate }, { ...defaultCandidate }],
+  candidates: [{...defaultCandidate}, {...defaultCandidate}],
   grades: [],
   randomOrder: true,
   hideResults: false,
@@ -112,7 +112,7 @@ const ElectionContext = createContext<[ElectionContextInterface, DispatchType]>(
   [defaultElection, () => {}]
 );
 
-export function ElectionProvider({ children }) {
+export function ElectionProvider({children}) {
   /**
    * Provide the election and the dispatch to all children components
    */
@@ -155,25 +155,25 @@ function electionReducer(
    */
   switch (action.type) {
     case ElectionTypes.RESET: {
-      return { ...action.value };
+      return {...action.value};
     }
     case ElectionTypes.SET: {
-      return { ...election, [action.field]: action.value };
+      return {...election, [action.field]: action.value};
     }
     case ElectionTypes.CANDIDATE_PUSH: {
       if (typeof action.value === 'string' && action.value !== 'default') {
         throw Error('Unexpected action');
       }
       const candidate =
-        action.value === 'default' ? { ...defaultCandidate } : action.value;
+        action.value === 'default' ? {...defaultCandidate} : action.value;
       const candidates = [...election.candidates, candidate];
       if (candidates.filter((c) => !c.active).length === 0) {
         return {
           ...election,
-          candidates: [...candidates, { ...defaultCandidate }],
+          candidates: [...candidates, {...defaultCandidate}],
         };
       } else {
-        return { ...election, candidates };
+        return {...election, candidates};
       }
     }
     case ElectionTypes.CANDIDATE_RM: {
@@ -182,7 +182,7 @@ function electionReducer(
       }
       const candidates = [...election.candidates];
       candidates.splice(action.position, 1);
-      return { ...election, candidates };
+      return {...election, candidates};
     }
     case ElectionTypes.CANDIDATE_SET: {
       if (typeof action.position !== 'number') {
@@ -198,14 +198,14 @@ function electionReducer(
       if (candidates.filter((c) => !c.active).length === 0) {
         return {
           ...election,
-          candidates: [...candidates, { ...defaultCandidate }],
+          candidates: [...candidates, {...defaultCandidate}],
         };
       }
-      return { ...election, candidates };
+      return {...election, candidates};
     }
     case ElectionTypes.GRADE_PUSH: {
       const grades = [...election.grades, action.value];
-      return { ...election, grades };
+      return {...election, grades};
     }
     case ElectionTypes.GRADE_RM: {
       if (typeof action.position !== 'number') {
@@ -213,7 +213,7 @@ function electionReducer(
       }
       const grades = [...election.grades];
       grades.splice(action.position);
-      return { ...election, grades };
+      return {...election, grades};
     }
     case ElectionTypes.GRADE_SET: {
       if (typeof action.position !== 'number') {
@@ -222,11 +222,15 @@ function electionReducer(
       const grades = [...election.grades];
       const grade = grades[action.position];
       grade[action.field] = action.value;
-      return { ...election, grades };
+      return {...election, grades};
     }
   }
 }
 
+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();