From 9ff0de63e8e89d01e237f3615a3d90ea1cc5b0ef Mon Sep 17 00:00:00 2001 From: Pierre-Louis Guhur Date: Fri, 18 Nov 2022 11:27:20 +0100 Subject: [PATCH] feat: waiting ballot --- components/Share.tsx | 39 ++++++++ components/WaitingBallot.tsx | 161 ++++++++++++++++++++++++++++++-- components/admin/Grades.tsx | 2 +- components/layouts/Footer.tsx | 10 +- components/layouts/Header.tsx | 12 ++- pages/admin/new.tsx | 18 +--- pages/index.tsx | 32 +------ public/locales/en/resource.json | 8 +- public/locales/fr/resource.json | 8 +- services/context.tsx | 12 ++- styles/scss/_app.scss | 4 + 11 files changed, 237 insertions(+), 69 deletions(-) create mode 100644 components/Share.tsx diff --git a/components/Share.tsx b/components/Share.tsx new file mode 100644 index 0000000..a14226d --- /dev/null +++ b/components/Share.tsx @@ -0,0 +1,39 @@ +import Image from 'next/image'; +import {useTranslation} from 'next-i18next'; +import {Row, Col} from 'reactstrap'; +import twitter from '../public/twitter.svg'; +import facebook from '../public/facebook.svg'; + + +interface ShareInterface { + title?: string; +} + +const ShareRow = ({title}: ShareInterface) => { + const {t} = useTranslation('resource'); + return ( + + {title || t('common.share')} + + + icon facebook + + + + + icon twitter + + + + ); +}; + +export default ShareRow; diff --git a/components/WaitingBallot.tsx b/components/WaitingBallot.tsx index e279596..f3e4339 100644 --- a/components/WaitingBallot.tsx +++ b/components/WaitingBallot.tsx @@ -1,14 +1,155 @@ import Image from 'next/image'; +import {useTranslation} from 'next-i18next'; +import {CSSProperties, useEffect, useState} from 'react'; +import {faArrowRight} from '@fortawesome/free-solid-svg-icons'; +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import Button from '@components/Button'; +import Share from '@components/Share'; +import {ElectionPayload} from '@services/api'; +import {useAppContext} from '@services/context'; import urne from '../public/urne.svg' +import star from '../public/star.svg' +import {Container} from 'reactstrap'; -export default () => { - return (
- urne -
) + +export interface WaitingBallotInterface { + election: ElectionPayload; +} + + +export default ({election}: WaitingBallotInterface) => { + const {setApp} = useAppContext(); + + const [urneProperties, setUrne] = useState({width: 0, height: 0, marginBottom: 0}); + const [starProperties, setStar] = useState({width: 0, height: 0, marginLeft: 100, marginBottom: 0}); + const [urneContainerProperties, setUrneContainer] = useState({height: "100vh"}); + const [electionProperties, setElection] = useState({display: "none"}); + + const {t} = useTranslation(); + + useEffect(() => { + setApp({footer: false}); + + setUrne(urne => ({ + ...urne, + width: 300, + height: 300, + })); + + const timer = setTimeout(() => { + setStar(star => ({ + ...star, + width: 150, + height: 150, + marginLeft: 150, + marginBottom: 300, + } + )); + }, 1000); + + const timer2 = setTimeout(() => { + // setElection({display: "block"}); + setUrneContainer(urneContainer => ({ + ...urneContainer, + height: "50vh", + })); + setStar(star => ({ + ...star, + width: 100, + height: 100, + marginLeft: 100, + marginBottom: 200, + })); + setUrne(urne => ({ + ...urne, + width: 200, + height: 200, + })); + }, 3000); + + const timer3 = setTimeout(() => { + setElection({display: "block"}); + }, 4500); + + return () => { + clearTimeout(timer); + clearTimeout(timer2); + clearTimeout(timer3); + }; + + }, []) + + return ( +
+
+ urne +
+
+ urne +
+
+
+

+ {t('admin.success-election')} +

+ + {election && election.private ? +
+ {t('admin.success-emails')} +
+ : null} + + +
+ ) } diff --git a/components/admin/Grades.tsx b/components/admin/Grades.tsx index f73d6a3..9bbdb3d 100644 --- a/components/admin/Grades.tsx +++ b/components/admin/Grades.tsx @@ -39,7 +39,7 @@ const AddField = () => { - + ); }; diff --git a/components/layouts/Footer.tsx b/components/layouts/Footer.tsx index 42b38d1..72adcae 100644 --- a/components/layouts/Footer.tsx +++ b/components/layouts/Footer.tsx @@ -1,11 +1,15 @@ import Link from 'next/link'; -import { useTranslation } from 'next-i18next'; -import { Button, Row, Col } from 'reactstrap'; +import {useTranslation} from 'next-i18next'; +import {Button, Row, Col} from 'reactstrap'; import Logo from '@components/Logo'; import LanguageSelector from '@components/layouts/LanguageSelector'; +import {useAppContext} from '@services/context'; const Footer = () => { - const { t } = useTranslation(); + const {t} = useTranslation(); + const {app} = useAppContext(); + + if (!app.footer) {return null;} const menu = [ { diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx index 36ebe7d..fe8bedf 100644 --- a/components/layouts/Header.tsx +++ b/components/layouts/Header.tsx @@ -1,18 +1,22 @@ /* eslint react/prop-types: 0 */ -import { useState } from 'react'; -import { Collapse, Nav, NavItem, Button } from 'reactstrap'; +import {useState} from 'react'; +import {Collapse, Nav, NavItem, Button} from 'reactstrap'; import Link from 'next/link'; import Image from 'next/image'; -import { useTranslation } from 'next-i18next'; +import {useTranslation} from 'next-i18next'; +import {useAppContext} from '@services/context'; import LanguageSelector from './LanguageSelector'; import openMenuIcon from '../../public/open-menu-icon.svg'; const Header = () => { const [isOpen, setOpen] = useState(false); + const {app} = useAppContext(); const toggle = () => setOpen(!isOpen); - const { t } = useTranslation('resource'); + const {t} = useTranslation('resource'); + + if (!app.footer) {return null;} return ( <> diff --git a/pages/admin/new.tsx b/pages/admin/new.tsx index a649a42..e62997c 100644 --- a/pages/admin/new.tsx +++ b/pages/admin/new.tsx @@ -7,13 +7,11 @@ import WaitingBallot from '@components/WaitingBallot'; import PatternedBackground from '@components/PatternedBackground'; import { ElectionProvider, - useElection, } from '@services/ElectionContext'; import {ProgressSteps, creationSteps} from '@components/CreationSteps'; import {GetStaticProps} from 'next'; import {ElectionPayload} from '@services/api'; -import {getUrlConfirm} from '@services/utils'; -import {useRouter} from 'next/router'; + export const getStaticProps: GetStaticProps = async ({locale}) => ({ props: { @@ -25,9 +23,8 @@ const CreateElectionForm = () => { /** * Manage the steps for creating an election */ - const [wait, setWait] = useState(true); - - const router = useRouter(); + const [wait, setWait] = useState(false); + const [payload, setPayload] = useState(null); const handleSubmit = () => { if (stepId < creationSteps.length - 1) { @@ -37,14 +34,9 @@ const CreateElectionForm = () => { } }; - const onCreatedElection = (election: ElectionPayload) => { - console.log("ready"); - // router.push(getUrlConfirm(election.id.toString())) - } - if (wait) { return - ; + } @@ -61,7 +53,7 @@ const CreateElectionForm = () => { Step = ( setStepId(0)} goToParams={() => setStepId(1)} /> diff --git a/pages/index.tsx b/pages/index.tsx index c9318cb..eeb04e3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,13 +6,12 @@ import {serverSideTranslations} from 'next-i18next/serverSideTranslations'; import {useTranslation} from 'next-i18next'; import {Container, Row, Col, Button, Input} from 'reactstrap'; import Logo from '@components/Logo'; +import Share from '@components/Share'; import {CREATE_ELECTION} from '@services/routes'; import ballotBox from '../public/urne.svg'; import email from '../public/email.svg'; import respect from '../public/respect.svg'; import vote from '../public/vote.svg'; -import twitter from '../public/twitter.svg'; -import facebook from '../public/facebook.svg'; import arrowRight from '../public/arrow-white.svg'; export const getStaticProps: GetStaticProps = async ({locale}) => ({ @@ -155,33 +154,6 @@ const ExperienceRow = () => { ); }; -const ShareRow = () => { - const {t} = useTranslation('resource'); - return ( - - {t('home.share')} - - - icon facebook - - - - - icon twitter - - - - ); -}; - const Home = () => { const {t} = useTranslation('resource'); return ( @@ -192,7 +164,7 @@ const Home = () => {
- +
); diff --git a/public/locales/en/resource.json b/public/locales/en/resource.json index 08a2a74..ac7b661 100644 --- a/public/locales/en/resource.json +++ b/public/locales/en/resource.json @@ -21,12 +21,13 @@ "home.alt-icon-envelop": "icon of an envelop", "home.alt-icon-respect": "icon of hands holding each other", "home.alt-icon-ballot": "icon of a ballot", - "home.share": "Share the application Better Vote", "menu.majority-judgment": "Majority judgment", "menu.whoarewe": "Who are we?", "menu.faq": "FAQ", "menu.news": "News", "menu.contact-us": "Contact us", + "common.share": "Share the application Better Vote", + "common.share-short": "Share the application", "common.save": "Save", "common.back-homepage": "Return to home page", "common.support-us": "Support us", @@ -84,5 +85,8 @@ "admin.confirm-question": "Question of your vote", "admin.confirm-candidates": "Candidates", "admin.confirm-submit": "Start the vote", - "admin.confirm-title": "Confirm your vote" + "admin.confirm-title": "Confirm your vote", + "admin.success-election": "The vote has been created with success!", + "admin.success-emails": "The voting link has been sent by emails to the participants.", + "admin.go-to-admin": "Manage the vote" } diff --git a/public/locales/fr/resource.json b/public/locales/fr/resource.json index 363516c..79e030f 100644 --- a/public/locales/fr/resource.json +++ b/public/locales/fr/resource.json @@ -17,7 +17,6 @@ "home.experience-2-title": "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.share": "Partagez l’application Mieux voter", "home.alt-icon-ballot-box": "icone d'urne", "home.alt-icon-envelop": "icone d'enveloppe", "home.alt-icon-respect": "icone de mains qui se serrent", @@ -27,6 +26,8 @@ "menu.faq": "FAQ", "menu.news": "Actualités", "menu.contact-us": "Nous contacter", + "common.share": "Partagez l'application Mieux voter", + "common.share-short": "Partagez l'application", "common.back-homepage": "Revenir sur la page d'accueil", "common.support-us": "Soutenez nous", "common.save": "Sauvegarder", @@ -84,5 +85,8 @@ "admin.confirm-question": "Question de votre vote", "admin.confirm-candidates": "Candidats", "admin.confirm-submit": "Démarrer le vote", - "admin.confirm-title": "Confirmer votre vote" + "admin.confirm-title": "Confirmer votre vote", + "admin.success-election": "Le vote a été créé avec succès", + "admin.success-emails": "Le lien du vote a été envoyé par courriel aux participants.", + "admin.go-to-admin": "Administrez le vote" } diff --git a/services/context.tsx b/services/context.tsx index 66cfd4e..166038b 100644 --- a/services/context.tsx +++ b/services/context.tsx @@ -1,16 +1,20 @@ -import {createContext, useContext} from 'react'; +import {createContext, useState, useContext, Dispatch, SetStateAction} from 'react'; +interface Application { + footer: boolean; +} interface AppContextInterface { - + app: Application; + setApp: Dispatch>; } const AppContext = createContext(null); export function AppProvider({children}) { - let state = {} + const [app, setApp] = useState({footer: true}); return ( - + {children} ); diff --git a/styles/scss/_app.scss b/styles/scss/_app.scss index 7f69114..635e30c 100644 --- a/styles/scss/_app.scss +++ b/styles/scss/_app.scss @@ -405,3 +405,7 @@ a, a:hover { .bg-blue { background-color: $mv-blue-color!important; } + +.no-shadow { + box-shadow: unset!important; +}