From 114b07b9d9854594b600ff1f11a92f8e8eb55ee9 Mon Sep 17 00:00:00 2001 From: Pierre-Louis Guhur Date: Wed, 30 Nov 2022 10:00:42 +0100 Subject: [PATCH] fix: ballot --- components/WaitingBallot.tsx | 47 +++++++++++++++++++++++---- components/ballot/BallotDesktop.tsx | 50 +++-------------------------- components/ballot/BallotMobile.tsx | 43 +++++++------------------ pages/ballot/[pid]/[[...tid]].tsx | 46 ++++++++++++++++++++------ public/locales/en/resource.json | 10 +++++- public/locales/fr/resource.json | 8 ++++- services/api.ts | 12 ++++--- services/constants.ts | 16 +++++---- 8 files changed, 127 insertions(+), 105 deletions(-) diff --git a/components/WaitingBallot.tsx b/components/WaitingBallot.tsx index 18557f9..c2ebda3 100644 --- a/components/WaitingBallot.tsx +++ b/components/WaitingBallot.tsx @@ -14,6 +14,8 @@ import {useAppContext} from '@services/context'; import {getUrlResults} from '@services/routes'; import urne from '../public/urne.svg' import star from '../public/star.svg' +import Logo from './Logo'; +import {FORM_FEEDBACK} from '@services/constants'; export interface WaitingBallotInterface { @@ -43,9 +45,9 @@ const ButtonResults = ({election}) => { const DiscoverMajorityJudgment = () => { const {t} = useTranslation(); return ( -
+
{t('vote.discover-mj')}
-
{t('vote.discover-mj-desc')}
+

{t('vote.discover-mj-desc')}

{t('common.about')}
@@ -55,6 +57,40 @@ const DiscoverMajorityJudgment = () => {
) } +const SupportBetterVote = () => { + const {t} = useTranslation(); + return ( +
+
+
{t('vote.support-better-vote')}
+ +
+

{t('vote.support-desc')}

+ +
+
{t('common.donation')}
+ +
+ +
) +} + + +const Thanks = () => { + const {t} = useTranslation(); + return (<> +
{t('vote.thanks')}
+

{t('vote.form-desc')}

+ + + + ) +} + interface InfoInterface extends WaitingBallotInterface { display: string; } @@ -81,10 +117,12 @@ const Info = ({ballot, error, display}: InfoInterface) => { - + + +
) } @@ -154,9 +192,6 @@ export default ({ballot, error}: WaitingBallotInterface) => { return (
{ - const {t} = useTranslation(); - const [ballot, dispatch] = useBallot(); const numGrades = ballot.election.grades.length; const disabled = ballot.votes.length !== ballot.election.candidates.length; - const router = useRouter(); - - const [candidate, setCandidate] = useState(null); - - const handleSubmit = (event: MouseEvent) => { - 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, election.id.toString(), token, () => { - router.push(`/confirm/${ballot.election.id}`); - // }); - }; + const [candidate, setCandidate] = useState(null); - console.log(candidate) return (
@@ -66,20 +39,7 @@ const BallotDesktop = () => { ); })} setCandidate(null)} candidate={candidate} /> - - - - +
) } diff --git a/components/ballot/BallotMobile.tsx b/components/ballot/BallotMobile.tsx index 2cd1501..ab0e607 100644 --- a/components/ballot/BallotMobile.tsx +++ b/components/ballot/BallotMobile.tsx @@ -1,13 +1,11 @@ -import {MouseEvent, useState} from 'react' -import {useRouter} from 'next/router'; -import {useTranslation} from 'next-i18next'; -import Button from '@components/Button'; -import {Col, Row, Container} from 'reactstrap'; +import {useState} from 'react' import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import {faCheck, faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons'; -import {useBallot, BallotTypes, BallotProvider} from '@services/BallotContext'; +import {faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons'; +import {useBallot} from '@services/BallotContext'; import CandidateCard from '@components/ballot/CandidateCard' import GradeInput from '@components/ballot/GradeInput' +import {CandidatePayload} from '@services/api'; +import CandidateModal from '@components/CandidateModalGet'; interface TitleInterface { @@ -23,19 +21,12 @@ const TitleName = ({name}: TitleInterface) => { } const BallotMobile = () => { - const {t} = useTranslation(); - const [ballot, _] = useBallot(); const [offset, setOffset] = useState(0); const numGrades = ballot.election.grades.length; - const disabled = ballot.votes.length !== ballot.election.candidates.length; - const router = useRouter(); - const handleSubmit = (event: MouseEvent) => { - event.preventDefault(); - router.push(`/confirm/${ballot.election.id}`); - }; + const [candidate, setCandidate] = useState(null); const moveRight = (right: boolean) => { if (right) setOffset(o => o - 247); @@ -43,8 +34,7 @@ const BallotMobile = () => { } return ( -
- +
{ballot.election.candidates.map((candidate, candidateId) => { @@ -57,7 +47,10 @@ const BallotMobile = () => { >
: null} - + setCandidate(candidate)} + candidate={candidate} + /> {candidateId !== ballot.election.candidates.length - 1 ?
moveRight(true)}>
: null} @@ -77,20 +70,8 @@ const BallotMobile = () => {
); })} + setCandidate(null)} candidate={candidate} />
- - -
) } diff --git a/pages/ballot/[pid]/[[...tid]].tsx b/pages/ballot/[pid]/[[...tid]].tsx index 90ef06d..e1bcd23 100644 --- a/pages/ballot/[pid]/[[...tid]].tsx +++ b/pages/ballot/[pid]/[[...tid]].tsx @@ -2,10 +2,13 @@ import {useEffect, useState} from 'react'; import Head from 'next/head'; import {serverSideTranslations} from 'next-i18next/serverSideTranslations'; import {useTranslation} from 'next-i18next'; -import {getElection, castBallot, ElectionPayload, BallotPayload, ErrorPayload} from '@services/api'; +import {Container} from 'reactstrap'; +import {faCheck} from '@fortawesome/free-solid-svg-icons'; import BallotDesktop from '@components/ballot/BallotDesktop' +import Button from '@components/Button'; import BallotMobile from '@components/ballot/BallotMobile' import Blur from '@components/Blur' +import {getElection, castBallot, ElectionPayload, BallotPayload, ErrorPayload} from '@services/api'; import {useBallot, BallotTypes, BallotProvider} from '@services/BallotContext'; import {ENDED_VOTE} from '@services/routes'; import WaitingBallot from '@components/WaitingBallot'; @@ -58,6 +61,26 @@ export async function getServerSideProps({query: {pid, tid}, locale}) { } +const ButtonSubmit = () => { + const {t} = useTranslation(); + + const [ballot, dispatch] = useBallot(); + const disabled = ballot.votes.length !== ballot.election.candidates.length; + return ( + + + ) +} interface VoteInterface { @@ -85,6 +108,12 @@ const VoteBallot = ({election, token}: VoteInterface) => { return
"Loading..."
; } + if (voting) { + return + + + } + const handleSubmit = async (event) => { event.preventDefault(); setVoting(true); @@ -92,7 +121,7 @@ const VoteBallot = ({election, token}: VoteInterface) => { try { const res = await castBallot( ballot.votes, - ballot.election.ref, ballot.election.restricted, token) + ballot.election, ballot.election.restricted, token) if (res.status !== 200) { console.error(res); const msg = await res.json(); @@ -108,12 +137,6 @@ const VoteBallot = ({election, token}: VoteInterface) => { } }; - if (voting) { - return - - - } - return (
@@ -128,8 +151,11 @@ const VoteBallot = ({election, token}: VoteInterface) => { - - +
+ + + +
); }; diff --git a/public/locales/en/resource.json b/public/locales/en/resource.json index fdb2381..bee48e0 100644 --- a/public/locales/en/resource.json +++ b/public/locales/en/resource.json @@ -28,6 +28,7 @@ "menu.contact-us": "Contact us", "common.about": "Read more", "common.about-mj": "Read more about Better Vote", + "common.donation": "Make a donation", "common.error": "Oh no... An error has occured...", "common.better-vote": "Better Vote", "common.share": "Share the application Better Vote", @@ -107,11 +108,18 @@ "admin.success-copy-result": "Copy the result link", "admin.success-copy-admin": "Copy the admin link", "admin.go-to-admin": "Manage the vote", + "vote.discover-mj": "Discover majority judgment", + "vote.discover-mj-desc": "Developed by French researchers, majority judgment is a voting system that improves voter expressiveness and provides the best consensus.", + "vote.form": "Your opinion is important to us", + "vote.form-desc": "Help us to improve the application by clicking below", "vote.go-to-results": "Show results", "vote.home-desc": "Participate in the vote and discover majority judgment", "vote.home-start": "I participate", "vote.open-until": "Vote open until", "vote.more-details": "More details...", "vote.submit": "Cast my ballot", - "vote.success-ballot": "Your vote has successfully been taken into account!" + "vote.success-ballot": "Your vote has successfully been taken into account!", + "vote.support-better-vote": "Support Better Vote", + "vote.support-desc": "Better Vote is a transparent and non-profit association. By joining the association, you contribute to finance its functioning and activities.", + "vote.thanks": "Thanks for your participation!" } diff --git a/public/locales/fr/resource.json b/public/locales/fr/resource.json index 6e4628b..b31ad4a 100644 --- a/public/locales/fr/resource.json +++ b/public/locales/fr/resource.json @@ -28,6 +28,7 @@ "menu.contact-us": "Nous contacter", "common.about": "En savoir plus...", "common.about-mj": "En savoir plus sur Mieux voter", + "common.donation": "Faire une donation", "common.error": "Oh non ! Une erreur s'est produite...", "common.better-vote": "Mieux Voter", "common.share": "Partagez l'application Mieux voter", @@ -110,10 +111,15 @@ "vote.discover-mj": "Découvrez le jugement majoritaire", "vote.discover-mj-desc": "Créé par des chercheurs français, le jugement majoritaire est un mode de scrutin qui améliore l'expressivité des électeurs et fournit le meilleur consensus.", "vote.go-to-results": "Voir les résultats", + "vote.form": "Votre avis nous intéresse", + "vote.form-desc": "Aidez nous à améliorer l’application en cliquant ci-dessous", "vote.home-desc": "Participez au vote et découvrez le jugement majoritaire.", "vote.home-start": "Je participe", "vote.open-until": "Vote ouvert jusqu'au", "vote.more-details": "Cliquez ici pour en savoir plus", "vote.submit": "Déposer mon bulletin de vote", - "vote.success-ballot": "Votre vote a bien été pris en compte !" + "vote.success-ballot": "Votre vote a bien été pris en compte !", + "vote.support-better-vote": "Soutenez Mieux Voter", + "vote.support-desc": "Mieux Voter est une association transpartisane et sans but lucratif. En adhérant à l’association, vous contribuez à financer son fonctionnement et ses activités.", + "vote.thanks": "Merci de votre participation !" } diff --git a/services/api.ts b/services/api.ts index 2cefa4f..e3069fd 100644 --- a/services/api.ts +++ b/services/api.ts @@ -132,8 +132,7 @@ export const getElection = async ( export const castBallot = ( votes: Array, - electionRef: string, - restricted: boolean, + election: ElectionPayload, token?: string, ) => { /** @@ -143,11 +142,14 @@ export const castBallot = ( const endpoint = new URL(api.routesServer.voteElection, api.urlServer); const payload = { - election_ref: electionRef, - votes: votes, + election_ref: election.ref, + votes: votes.map(v => ({ + "candidate_id": election.candidates[v.candidateId].id, + "grade_id": election.grades[v.gradeId].id + })) }; - if (!restricted) { + if (!election.restricted) { return fetch(endpoint.href, { method: 'POST', headers: {'Content-Type': 'application/json'}, diff --git a/services/constants.ts b/services/constants.ts index 2f10935..0e0f0c5 100644 --- a/services/constants.ts +++ b/services/constants.ts @@ -7,12 +7,12 @@ export const CONTACT_MAIL = process.env.CONTACT_MAIL || 'app@mieuxvoter.fr'; export const DEFAULT_GRADES = process.env.DEFAULT_GRADES ? process.env.DEFAULT_GRADES.split(',') : [ - 'grades.very-good', - 'grades.good', - 'grades.passable', - 'grades.inadequate', - 'grades.mediocre', - ]; + 'grades.very-good', + 'grades.good', + 'grades.passable', + 'grades.inadequate', + 'grades.mediocre', + ]; export const IMGPUSH_URL = process.env.IMGPUSH_URL || 'https://imgpush.mieuxvoter.fr'; export const GRADE_COLORS = [ @@ -24,3 +24,7 @@ export const GRADE_COLORS = [ '#C23D13', '#F2F0FF', ]; + +export const FORM_FEEDBACK = process.env.FORM_FEEDBACK || "https://forms.gle/JZ1Mtbz8gt3Fpwnx5"; + +export const PAYPAL = process.env.FORM_FEEDBACK || "https://www.paypal.com/donate/?hosted_button_id=QD6U4D323WV4S";