diff --git a/components/Advantages.tsx b/components/Advantages.tsx index 0947f0f..b69e75c 100644 --- a/components/Advantages.tsx +++ b/components/Advantages.tsx @@ -36,7 +36,7 @@ const AdvantagesRow = () => { src={item.src} alt={item.alt} height="128" - className="d-block mx-auto" + className="d-block mx-auto mb-2" />
{item.desc}
diff --git a/components/admin/AccessResults.tsx b/components/admin/AccessResults.tsx index ebca47a..ec685cb 100644 --- a/components/admin/AccessResults.tsx +++ b/components/admin/AccessResults.tsx @@ -1,10 +1,10 @@ -import {useTranslation} from 'next-i18next'; -import {ElectionTypes, useElection} from '@services/ElectionContext'; -import {Container} from 'reactstrap'; +import { useTranslation } from 'next-i18next'; +import { ElectionTypes, useElection } from '@services/ElectionContext'; +import { Container } from 'reactstrap'; import Switch from '@components/Switch'; const AccessResults = () => { - const {t} = useTranslation(); + const { t } = useTranslation(); const [election, dispatch] = useElection(); const toggle = () => { @@ -18,12 +18,15 @@ const AccessResults = () => { return ({t('admin.access-results-desc')} -
: null} + + ) : null}{t('admin.add-candidate-desc')}
{desc}
}{t('admin.order-desc')}
diff --git a/components/admin/Private.tsx b/components/admin/Private.tsx index 37c0cf4..60b3175 100644 --- a/components/admin/Private.tsx +++ b/components/admin/Private.tsx @@ -47,8 +47,8 @@ const Private = () => { <>{isCreating ? t('admin.private-desc-creating') diff --git a/components/admin/TitleModal.tsx b/components/admin/TitleModal.tsx index 1338b9a..f3a5974 100644 --- a/components/admin/TitleModal.tsx +++ b/components/admin/TitleModal.tsx @@ -1,36 +1,47 @@ -import {useState, useEffect} from 'react'; -import {Label, Input, Modal, ModalBody, Form} from 'reactstrap'; -import {faPlus, faArrowLeft} from '@fortawesome/free-solid-svg-icons'; -import {useTranslation} from 'next-i18next'; -import {ElectionTypes, useElection} from '@services/ElectionContext'; +import { useState, useEffect, useRef, KeyboardEvent, ChangeEvent } from 'react'; +import { Label, Modal, ModalBody, Form } from 'reactstrap'; +import { faPlus, faArrowLeft } from '@fortawesome/free-solid-svg-icons'; +import { useTranslation } from 'next-i18next'; +import { ElectionTypes, useElection } from '@services/ElectionContext'; import Button from '@components/Button'; -import {checkName} from '@services/ElectionContext'; -import {AppTypes, useAppContext} from '@services/context'; -import {useRouter} from 'next/router'; +import { checkName } from '@services/ElectionContext'; +import { AppTypes, useAppContext } from '@services/context'; +import { useRouter } from 'next/router'; - -const TitleModal = ({isOpen, toggle}) => { - const {t} = useTranslation(); +const TitleModal = ({ isOpen, toggle }) => { + const { t } = useTranslation(); const router = useRouter(); const [election, dispatch] = useElection(); const [_, dispatchApp] = useAppContext(); const [name, setName] = useState(election.name); - const disabled = name === ""; + const disabled = name === ''; + + const inputRef = useRef(null); useEffect(() => { setName(election.name); - }, [election.name]) + }, [election.name]); + + useEffect(() => { + // When isOpen got active, we put the focus on the input field + setTimeout(() => { + console.log(inputRef.current); + if (isOpen && inputRef && inputRef.current) { + inputRef.current.focus(); + } + }, 100); + }, [isOpen]); const save = (e) => { - e.preventDefault() + e.preventDefault(); - if (name === "") { + if (name === '') { dispatchApp({ type: AppTypes.TOAST_ADD, - status: "error", - message: t("error.empty-name") - }) - return + status: 'error', + message: t('error.empty-name'), + }); + return; } dispatch({ @@ -42,6 +53,13 @@ const TitleModal = ({isOpen, toggle}) => { toggle(); }; + // check if key down is enter + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key == 'Enter') { + save(e); + } + }; + const handleName = (e) => { setName(e.target.value); }; @@ -65,16 +83,17 @@ const TitleModal = ({isOpen, toggle}) => {