diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json index 911b94a..d10f122 100644 --- a/src/i18n/locales/en/common.json +++ b/src/i18n/locales/en/common.json @@ -40,6 +40,15 @@ "Se aukeaa": "Signup opens at", + "Ilmoittauminen sulkeutuu": + "Signup closes at", + + "Ilmoittauminen on umpeutunut!": + "Signup has been closed!", + + "Ilmoittautuneet": + "Signups", + "Ilmoittautumalla hyväksyn": "By signing up I accept the", diff --git a/src/views/SignUpPage/SignUpPageView.tsx b/src/views/SignUpPage/SignUpPageView.tsx index 6ad2e53..c9bffe9 100644 --- a/src/views/SignUpPage/SignUpPageView.tsx +++ b/src/views/SignUpPage/SignUpPageView.tsx @@ -4,11 +4,12 @@ import { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form"; import { SignupForm } from "@models/Signup"; import Checkboxes from "@components/Widgets/Checkbox/Checkboxes"; import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget"; -import { TextSection } from "@components/index"; +import { TextSection, ChangeLanguageButton } from "@components/index"; import { colors } from "@theme/colors"; import FormWrapper from "@views/common/FormWrapper"; import Loader from "@components/Loader"; import { buildFormSchema, buildUISchema } from "./FormUtils"; +import { useTranslation } from "../../i18n"; const customWidgets = { radio: RadioButtonWidget, @@ -16,27 +17,12 @@ const customWidgets = { }; interface SignUpPageViewProps { - signUpForm: SignupForm; + signUpForm?: SignupForm; formData: any; onChange: (e: IChangeEvent, es?: ErrorSchema) => unknown; onSubmit: (e: ISubmitEvent) => unknown; } -const renderList = (signUpForm: SignupForm) => ( - -); - const StyledSection = styled(TextSection)` & > div { & > span { @@ -60,70 +46,96 @@ const StyledSection = styled(TextSection)` } `; +const LngButton = styled(ChangeLanguageButton)` + align-self: flex-end; + margin-right: 1rem; +`; + const SignUpPageView: React.FC = ({ signUpForm, formData, onChange, onSubmit, }) => { - const renderForm = () => { - const schema = buildFormSchema(signUpForm); - const uiSchema = buildUISchema(signUpForm); - - return ( - - ); + const { i18n, t } = useTranslation(); + const startDate = new Date(signUpForm?.start_time); + const endDate = new Date(signUpForm?.end_time); + const isFi = i18n.language === "fi"; + const { + title, startDateStr, endDateStr, + } = { + title: isFi ? signUpForm?.title_fi : signUpForm?.title_en, + startDateStr: startDate.toLocaleString(isFi ? "fi-FI" : "en-GB"), + endDateStr: endDate.toLocaleString(isFi ? "fi-FI" : "en-GB"), }; + const renderList = () => ( + + ); + let form: JSX.Element; let signups: JSX.Element = null; - const startTime = new Date(signUpForm?.start_time); - const endTime = new Date(signUpForm?.end_time); - if (!signUpForm) { // Show loader if in edit mode and form has not yet loaded. // For normal signup page, form is always defined on this level. form = ( ); - } else if (startTime > new Date()) { + } else if (startDate > new Date()) { form = ( <> -

Ilmoittauminen ei ole vielä auennut!

-

Se aukeaa {startTime.toLocaleString("fi-FI")}.

+

{t("Ilmoittautuminen ei ole vielä auki!")}

+

{`${t("Se aukeaa")} ${startDateStr}`}.

); - } else if (new Date() > endTime) { + } else if (new Date() > endDate) { form = ( -

Ilmoittauminen on umpeutunut!

+

{t("Ilmoittauminen on umpeutunut!")}

); - signups = renderList(signUpForm); + signups = renderList(); } else { - form = renderForm(); - signups = renderList(signUpForm); + form = ( + <> +

{`${t("Ilmoittauminen sulkeutuu")} ${endDateStr}`}.

+ + + ); + signups = renderList(); } return ( - -

- {signUpForm && ( - signUpForm.title_fi - )} -

+ <> + + +

+ {title} +

-
- {form} -
- {signups} -
+
+ {form} +
+ {signups} +
+ ); };