From 170fb372c47234ea68713187b268925ea724c545 Mon Sep 17 00:00:00 2001 From: Pierre-Louis Guhur Date: Fri, 2 Dec 2022 18:30:07 +0100 Subject: [PATCH] fix: result page --- components/CSVLink.tsx | 3 +- components/MeritProfile.tsx | 2 +- pages/_app.tsx | 8 +- pages/result/[pid]/[[...tid]].tsx | 209 ++++++++++++++++++++---------- public/locales/en/resource.json | 12 +- public/locales/fr/resource.json | 12 +- 6 files changed, 159 insertions(+), 87 deletions(-) diff --git a/components/CSVLink.tsx b/components/CSVLink.tsx index 44a1eda..9f1ff97 100644 --- a/components/CSVLink.tsx +++ b/components/CSVLink.tsx @@ -86,7 +86,7 @@ export const toCSV = (data, headers, separator, enclosingCharacter) => { }; -const CSVLink = ({filename, data, children}) => { +const CSVLink = ({filename, data, children, ...rest}) => { console.log("DATA", data); const buildURI = ((data, uFEFF, headers, separator, enclosingCharacter) => { @@ -115,6 +115,7 @@ const CSVLink = ({filename, data, children}) => { {children} diff --git a/components/MeritProfile.tsx b/components/MeritProfile.tsx index 11995d1..cb842e9 100644 --- a/components/MeritProfile.tsx +++ b/components/MeritProfile.tsx @@ -68,7 +68,7 @@ const DashedMedian = () => { const MajorityGrade = ({grade, left}) => { const spanRef = useRef(); - const [width, setWidth] = useState(0) + const [width, setWidth] = useState(40) useLayoutEffect(() => { diff --git a/pages/_app.tsx b/pages/_app.tsx index 487ddb7..7873a57 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,12 +6,12 @@ import '@fortawesome/fontawesome-svg-core/styles.css'; // import nextI18NextConfig from '../next-i18next.config.js' -import { appWithTranslation } from 'next-i18next'; -import { AppProvider } from '@services/context'; +import {appWithTranslation} from 'next-i18next'; +import {AppProvider} from '@services/context'; import Header from '@components/layouts/Header'; import Footer from '@components/layouts/Footer'; -function Application({ Component, pageProps }) { +function Application({Component, pageProps}) { const origin = typeof window !== 'undefined' && window.location.origin ? window.location.origin @@ -31,7 +31,7 @@ function Application({ Component, pageProps }) {
-
+
diff --git a/pages/result/[pid]/[[...tid]].tsx b/pages/result/[pid]/[[...tid]].tsx index 5c10468..139068c 100644 --- a/pages/result/[pid]/[[...tid]].tsx +++ b/pages/result/[pid]/[[...tid]].tsx @@ -30,7 +30,7 @@ import Logo from '@components/Logo'; import MeritProfile from '@components/MeritProfile'; import {getResults} from '@services/api'; import {GradeResultInterface, ResultInterface, MeritProfileInterface, CandidateResultInterface} from '@services/type'; -import {getUrlAdmin} from '@services/routes'; +import {getUrlAdmin, RESULTS} from '@services/routes'; import {displayRef} from '@services/utils'; import {getMajorityGrade} from '@services/majorityJudgment'; import avatarBlue from '../../../public/avatarBlue.svg' @@ -145,61 +145,115 @@ const ResultBanner = ({result}) => { const numVotes = getNumVotes(result) - return (
-
-
- Calendar - -
-
- Avatar -
{numVotes} {numVotes > 1 ? t('common.participants') : t('common.participant')}
-
-
+ const origin = typeof window !== 'undefined' && window.location.origin + ? window.location.origin + : 'http://localhost'; + // We hide the token! + const url = `${origin}${RESULTS}/${displayRef(result.ref)}` + + return (<> + { // MOBILE + } +
+

{result.name}

-

{result.name}

+
+
+ Calendar + +
+
+ Avatar +
{numVotes} {numVotes > 1 ? t('common.participants') : t('common.participant')}
+
+ +
- + ) } - -const BottomButtonsMobile = ({result}) => { - const {t} = useTranslation(); +const Downloader = ({result, children, ...rest}) => { const values = result.grades.map(v => v.value).sort() - // const data = result.candidates.map(c => [c.name]); const data = result.candidates.map(c => { - const grades = {} result.grades.forEach(g => grades[g.name] = g.value in c.meritProfile ? c.meritProfile[g.value].toString() : "0") return {name: c.name, ...grades} }); - console.log(data) return ( - ) } @@ -214,20 +268,39 @@ interface TitleBannerInterface { const TitleBanner = ({name, electionRef, token}: TitleBannerInterface) => { const {t} = useTranslation(); return ( -
-
- -
{name}
+ <> + { // MOBILE + } +
+
+ +
{name}
+
+ {token ? +
+ + + +
: null + }
- {token ? -
- - - -
: null + { // DESKTOP } +
+
+ +
{name}
+
+ {token ? +
+ + + +
: null + } -
+
+ ) } @@ -260,10 +333,10 @@ interface CandidateRankedInterface { const CandidateRanked = ({candidate}: CandidateRankedInterface) => { const isFirst = candidate.rank == 1; return
-
+
{candidate.rank}
-
+
{candidate.name}
@@ -388,7 +461,7 @@ const ResultPage = ({result, token, err}: ResultPageInterface) => { result.candidates.filter(c => c.rank < 4).forEach(c => candidateByRank[c.rank] = c) return ( - + {result.name} @@ -399,23 +472,21 @@ const ResultPage = ({result, token, err}: ResultPageInterface) => { -
- - - -
- {t('result.details')} -
- {Object.keys(candidateByRank).sort().map((rank, i) => { - return ( - - ); - })} - - + + +
+
+ {t('result.details')} +
+ {Object.keys(candidateByRank).sort().map((rank, i) => { + return ( + + ); + })} +
-
- + + ); }; diff --git a/public/locales/en/resource.json b/public/locales/en/resource.json index 9b99ba6..edcb472 100644 --- a/public/locales/en/resource.json +++ b/public/locales/en/resource.json @@ -5,16 +5,16 @@ "home.writeQuestion": "Write here your question or describe your vote.", "home.start": "Start a vote", "home.noAds": "No advertising or ad cookies", - "home.advantage-1-title": "Simple", + "home.advantage-1-name": "Simple", "home.advantage-1-desc": "Create a vote in less than 1 minute!", - "home.advantage-2-title": "Free", + "home.advantage-2-name": "Free", "home.advantage-2-desc": "Send invites without any limitations!", - "home.advantage-3-title": "Respecting your privacy", + "home.advantage-3-name": "Respecting your privacy", "home.advantage-3-desc": "No personal data is recorded", - "home.experience-title": "A democratic and intuitive voting experience", - "home.experience-1-title": "Express your full opinion.", + "home.experience-name": "A democratic and intuitive voting experience", + "home.experience-1-name": "Express your full opinion.", "home.experience-1-desc": "With majority judgment, each candidate is evaluated on a grid of mentions. Strategic voting has no use anymore.", - "home.experience-2-title": "Get the best possible consensus.", + "home.experience-2-name": "Get the best possible consensus.", "home.experience-2-desc": "The merit profile provides an accurate picture of the voters' opinions. The winner of the vote is the one with the best majority rating.", "home.experience-call-to-action": "Find out about the majority judgment", "home.alt-icon-ballot-box": "icon of a ballot box", diff --git a/public/locales/fr/resource.json b/public/locales/fr/resource.json index 7426885..232fa32 100644 --- a/public/locales/fr/resource.json +++ b/public/locales/fr/resource.json @@ -5,16 +5,16 @@ "home.writeQuestion": "Posez la question de votre vote ici.", "home.start": "C'est parti", "home.noAds": "Pas de publicités, ni de cookies publicitaires", - "home.advantage-1-title": "Simple", + "home.advantage-1-name": "Simple", "home.advantage-1-desc": "Créez un vote en moins d’une minute.", - "home.advantage-2-title": "Gratuit", + "home.advantage-2-name": "Gratuit", "home.advantage-2-desc": "Envoyez des invitations par courriel sans limite d'envoi.", - "home.advantage-3-title": "Respect de votre vie privée", + "home.advantage-3-name": "Respect de votre vie privée", "home.advantage-3-desc": "Aucune donnée personnelle n'est enregistrée", - "home.experience-title": "Une expérience de vote démocratique et intuitive", - "home.experience-1-title": "Exprimez toute votre opinion.", + "home.experience-name": "Une expérience de vote démocratique et intuitive", + "home.experience-1-name": "Exprimez toute votre opinion.", "home.experience-1-desc": "Au jugement majoritaire, chaque candidat est évalué sur une grille de mention. Vous n'aurez plus besoin de faire un vote stratégique.", - "home.experience-2-title": "Obtenez le meilleur consensus.", + "home.experience-2-name": "Obtenez le meilleur consensus.", "home.experience-2-desc": "Le profil des mérites dresse un panorama précis de l’opinion des électeurs. Le gagnant du vote est celui qui est la meilleure mention majoritaire.", "home.experience-call-to-action": "Découvrez le jugement majoritaire", "home.alt-icon-ballot-box": "icone d'urne",