fix: cleanup election ref

components/WaitingBallot.tsx

@@ -11,11 +11,14 @@ import ErrorMessage from '@components/Error';
 import AdminModalEmail from '@components/admin/AdminModalEmail';
 import {BallotPayload, ErrorPayload} from '@services/api';
 import {useAppContext} from '@services/context';
-import {getUrlResults} from '@services/routes';
-import urne from '../public/urne.svg'
-import star from '../public/star.svg'
+import {displayRef} from '@services/utils';
+import {RESULTS} from '@services/routes';
 import Logo from './Logo';
 import {FORM_FEEDBACK} from '@services/constants';
+import urne from '../public/urne.svg'
+import star from '../public/star.svg'
+import logo from '../public/logo-red-blue.svg'
+import Link from 'next/link';
 
 
 export interface WaitingBallotInterface {
@@ -32,9 +35,11 @@ const ButtonResults = ({election}) => {
 
   if (!election.hideResults || isEnded) {
     return (
-      <Button className="" icon={faArrowRight} position="right">
-        {t('vote.go-to-results')}
-      </Button>
+      <Link href={`${RESULTS}/${displayRef(election.ref)}`}>
+        <Button className="" icon={faArrowRight} position="right">
+          {t('vote.go-to-results')}
+        </Button>
+      </Link>
     )
   } else {
     return null;
@@ -66,7 +71,7 @@ const SupportBetterVote = () => {
       <div>
         <div className="d-flex mb-2 align-items-center justify-content-between">
           <h5>{t('vote.support-better-vote')}</h5>
-          <Logo title={false} />
+          <Logo src={logo} title={false} />
         </div>
         <p>{t('vote.support-desc')}</p>
       </div>

components/WaitingElection.tsx

@@ -34,8 +34,8 @@ const InfoElection = ({election, error, display}: InfoElectionInterface) => {
 
   if (!election) return null;
 
-  const urlVote = getUrlVote(election.id)
-  const urlResults = getUrlResults(election.id)
+  const urlVote = getUrlVote(election.ref)
+  const urlResults = getUrlResults(election.ref)
 
   return (
     <div style={{
@@ -47,7 +47,7 @@ const InfoElection = ({election, error, display}: InfoElectionInterface) => {
       {error && error.detail ?
         <ErrorMessage msg={error.detail[0].msg} /> : null}
 
-      {election && election.id ?
+      {election && election.ref ?
         <>
           <h4 className="text-center">
             {t('admin.success-election')}
@@ -83,7 +83,7 @@ const InfoElection = ({election, error, display}: InfoElectionInterface) => {
           <AdminModalEmail
             toggle={toggleModal}
             isOpen={modal}
-            electionId={election.id}
+            electionRef={election.ref}
             adminToken={election.admin}
           />
         </> : null}

components/admin/AdminModalEmail.tsx

@@ -12,16 +12,16 @@ import {useElection} from '@services/ElectionContext';
 interface AdminModalEmailInterface {
   isOpen: boolean;
   toggle: () => void;
-  electionId: number | null;
+  electionRef: string | null;
   adminToken: string | null;
 }
 
-const AdminModalEmail = ({isOpen, toggle, electionId, adminToken}: AdminModalEmailInterface) => {
+const AdminModalEmail = ({isOpen, toggle, electionRef, adminToken}: AdminModalEmailInterface) => {
   const {t} = useTranslation();
   const [email, setEmail] = useState(undefined);
   const election = useElection();
 
-  const adminUrl = electionId && adminToken ? getUrlAdmin(electionId.toString(), adminToken) : null;
+  const adminUrl = electionRef && adminToken ? getUrlAdmin(electionRef, adminToken) : null;
 
   const handleEmail = (e) => {
     setEmail(e.target.value);

components/admin/ConfirmField.tsx

@@ -88,14 +88,13 @@ const submitElection = (
     election.restricted,
     election.randomOrder,
     async (payload: ElectionPayload) => {
-      const id = payload.id;
       const tokens = payload.invites;
       if (typeof election.emails !== 'undefined' && election.emails.length > 0) {
         if (typeof payload.invites === 'undefined' || payload.invites.length !== election.emails.length) {
           throw Error('Can not send invite emails');
         }
-        const urlVotes = payload.invites.map((token: string) => getUrlVote(id.toString(), token));
-        const urlResult = getUrlResults(id.toString());
+        const urlVotes = payload.invites.map((token: string) => getUrlVote(payload.ref, token));
+        const urlResult = getUrlResults(electionRef);
         await sendInviteMails(
           election.emails,
           election.name,

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

@@ -21,19 +21,19 @@ export async function getServerSideProps({query: {pid, tid}, locale}) {
   return {
     props: {
       ...(await serverSideTranslations(locale, ['resource'])),
-      electionId: pid,
+      electionRef: pid,
       token: tid || null,
     },
   }
 }
 
 interface VoteInterface {
-  electionId: string;
+  electionRef: string;
   token?: string;
 }
 
 
-const GoToBallotConfirm = ({electionId, token}) => {
+const GoToBallotConfirm = ({electionRef, token}) => {
 
   const {t} = useTranslation();
 
@@ -52,7 +52,7 @@ const GoToBallotConfirm = ({electionId, token}) => {
           </Row>
 
           <Row>
-            <Link href={`${BALLOT}/${electionId}/${token ? token : ""}`}>
+            <Link href={`${BALLOT}/${electionRef}/${token ? token : ""}`}>
               <Button
                 color="secondary"
                 outline={true}
@@ -79,12 +79,12 @@ const GoToBallotConfirm = ({electionId, token}) => {
   )
 }
 
-const Vote = ({electionId, token}: VoteInterface) => {
+const Vote = ({electionRef, token}: VoteInterface) => {
 
   return (
     <>
       <section>
-        <GoToBallotConfirm electionId={electionId} token={token} />
+        <GoToBallotConfirm electionRef={electionRef} token={token} />
       </section>
       <section className="sectionTwoHome">
         <AdvantagesRow />

services/routes.ts

@@ -1,7 +1,7 @@
 /**
  * This file provides the paths to the pages
  */
-import {getWindowUrl} from './utils';
+import {getWindowUrl, displayRef} from './utils';
 
 
 export const CREATE_ELECTION = '/admin/new/';
@@ -10,19 +10,20 @@ export const ENDED_VOTE = '/ballot/end';
 export const VOTE = '/vote/';
 export const RESULTS = '/result/';
 
-export const getUrlVote = (electionId: string | number, token?: string): URL => {
+export const getUrlVote = (electionRef: string | number, token?: string):  URL => {
   const origin = getWindowUrl();
   if (token)
-    return new URL(`/${VOTE}/${electionId}/${token}`, origin);
-  return new URL(`/${VOTE}/${electionId}`, origin);
+    return new URL(`/${VOTE}/${displayRef(electionRef)}/${token}`, origin);
+  return new URL(`/${VOTE}/${displayRef(electionRef)}`, origin);
 }
 
-export const getUrlResults = (electionId: string | number): URL => {
+export const getUrlResults = (electionRef: string | number): URL => {
   const origin = getWindowUrl();
-  return new URL(`/${RESULTS}/${electionId}`, origin);
+  return new URL(`/${RESULTS}/${displayRef(electionRef)}`, origin);
 }
 
-export const getUrlAdmin = (electionId: string | number, adminToken: string): URL => {
+export const getUrlAdmin = (electionRef: string | number, adminToken: string): URL => {
   const origin = getWindowUrl();
-  return new URL(`/admin/${electionId}?t=${adminToken}`, origin);
+  return new URL(`/admin/${displayRef(electionRef)}/${adminToken}`, origin);
 }
+

services/utils.ts

@@ -24,3 +24,10 @@ export const getWindowUrl = (): string => {
     : 'http://localhost';
 }
 
+
+export const displayRef = (ref: string): string => {
+  if (ref.length !== 10) {
+    throw Error("Unexpected election ref");
+  }
+
+  return `${ref.substring(0, 3)}-${ref.substring(3, 6)}-${ref.substring(6)}`