import { useState } from "react"; import Head from "next/head"; import { useRouter } from "next/router"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { useTranslation } from "next-i18next"; import { Button, Col, Container, Row } from "reactstrap"; import { toast, ToastContainer } from "react-toastify"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCheck } from "@fortawesome/free-solid-svg-icons"; import { getDetails, castBallot, apiErrors } from "@services/api"; import Error from "@components/Error"; import { translateGrades } from "@services/grades"; import config from "../../../next-i18next.config.js"; const shuffle = (array) => array.sort(() => Math.random() - 0.5); export async function getServerSideProps({ query: { pid, tid }, locale }) { const [details, translations] = await Promise.all([ getDetails(pid), serverSideTranslations(locale, [], config), ]); if (typeof details === "string" || details instanceof String) { return { props: { err: details, ...translations } }; } if (!details.candidates || !Array.isArray(details.candidates)) { return { props: { err: "Unknown error", ...translations } }; } shuffle(details.candidates); return { props: { ...translations, invitationOnly: details.on_invitation_only, restrictResults: details.restrict_results, candidates: details.candidates.map((name, i) => ({ id: i, label: name })), title: details.title, numGrades: details.num_grades, pid: pid, token: tid || null, }, }; } const VoteBallot = ({ candidates, title, numGrades, pid, err, token }) => { const { t } = useTranslation(); if (err) { return ; } const [judgments, setJudgments] = useState([]); const colSizeCandidateLg = 4; const colSizeCandidateMd = 6; const colSizeCandidateXs = 12; const colSizeGradeLg = Math.floor((12 - colSizeCandidateLg) / numGrades); const colSizeGradeMd = Math.floor((12 - colSizeCandidateMd) / numGrades); const colSizeGradeXs = Math.floor((12 - colSizeCandidateXs) / numGrades); const router = useRouter(); const allGrades = translateGrades(t); const grades = allGrades.filter( (grade) => grade.value >= allGrades.length - numGrades ); const handleGradeClick = (event) => { let data = { id: parseInt(event.currentTarget.getAttribute("data-id")), value: parseInt(event.currentTarget.value), }; //remove candidate const newJudgments = judgments.filter( (judgment) => judgment.id !== data.id ); newJudgments.push(data); setJudgments(newJudgments); }; const handleSubmitWithoutAllRate = () => { toast.error(t("You have to judge every candidate/proposal!"), { position: toast.POSITION.TOP_CENTER, }); }; const handleSubmit = (event) => { event.preventDefault(); const gradesById = {}; judgments.forEach((c) => { gradesById[c.id] = c.value; }); const gradesByCandidate = []; Object.keys(gradesById).forEach((id) => { gradesByCandidate.push(gradesById[id]); }); castBallot(gradesByCandidate, pid, token, () => { router.push(`/vote/${pid}/confirm`); }); }; return ( {title} {title}

{title}

 
{grades.map((grade, gradeId) => { return gradeId < numGrades ? ( {grade.label} ) : null; })}
{candidates.map((candidate, candidateId) => { return (
{candidate.label}

{grades.map((grade, gradeId) => { console.assert(gradeId < numGrades); const gradeValue = grade.value; return ( ); })}
); })} {judgments.length !== candidates.length ? ( ) : ( )}
); }; export default VoteBallot;