From 41a60753260df589d721fbefb9beedde9233997a Mon Sep 17 00:00:00 2001 From: Amit Jakubowicz Date: Mon, 7 Oct 2019 17:06:08 +0200 Subject: [PATCH] Style event form --- package.json | 2 +- packages/qpa/App/App.msg.json | 8 +++ packages/qpa/App/App.tsx | 49 +++++++++++------ packages/qpa/App/Context/AppContext.tsx | 8 +-- packages/qpa/App/Header/Header.tsx | 1 + packages/qpa/Event/CreateEvent.tsx | 4 +- packages/qpa/Event/EditEvent.tsx | 4 +- packages/qpa/Event/EventForm.msg.json | 36 +++++++++++++ packages/qpa/Event/EventForm.tsx | 54 ++++++++++++++----- packages/qpa/package.json | 2 + packages/qpa/tsconfig.json | 1 + packages/qpa/webpack.config.ts | 1 - tsconfig.json | 2 + yarn.lock | 72 +++++++++++++++++++++++-- 14 files changed, 202 insertions(+), 42 deletions(-) create mode 100644 packages/qpa/App/App.msg.json create mode 100644 packages/qpa/Event/EventForm.msg.json diff --git a/package.json b/package.json index 2e0311e..091b0c2 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "yarn client-build; yarn ssr-build", "client-build": "(cd packages/qpa; yarn build)", "ssr-build": "(cd packages/qpa-ssr; yarn build)", - "start": "NODE_ENV=development webpack-dev-server --config packages/qpa/webpack.config.ts --hot --progress", + "start": "(cd packages/qpa; yarn start)", "ssr": "API_URL=http://alpha.quepasaalpujarra.com/graphql ts-node packages/qpa-ssr/index.ts", "release": "docker build -t eu.gcr.io/qpa-staging-237606/web:$TAG .; docker push eu.gcr.io/qpa-staging-237606/web:$TAG", "codegen": "gql2ts ./schema.graphql -o ./@types/graphql.d.ts" diff --git a/packages/qpa/App/App.msg.json b/packages/qpa/App/App.msg.json new file mode 100644 index 0000000..c2eb51f --- /dev/null +++ b/packages/qpa/App/App.msg.json @@ -0,0 +1,8 @@ +{ + "en": { + "APP_TITLE": "Evento en la Alpujarra" + }, + "es": { + "APP_TITLE": "Events in the Alpujarra" + } +} diff --git a/packages/qpa/App/App.tsx b/packages/qpa/App/App.tsx index 55b2ef9..0441a92 100644 --- a/packages/qpa/App/App.tsx +++ b/packages/qpa/App/App.tsx @@ -5,11 +5,30 @@ import * as React from "react" import Footer from "./Footer" import Header from "./Header/Header" import Routes from "./Routes" +import * as intl from 'react-intl-universal' +import {Helmet} from 'react-helmet' +import AppMessages from './App.msg.json' -const App = () => ( - - { + const [intlInit, setIntlInit] = React.useState(false) + intl.init({ + currentLocale: 'es-ES', + locales: { + 'en-GB': AppMessages.en, + 'es-ES': AppMessages.es + } + }).then(() => setIntlInit(true)) + + if (!intlInit) { + return null + } + return ( + + + { intl.get('APP_TITLE')} + + ( height: 100%; } `} - /> - - - - - - - -) + /> + + + + + + + + ) +} const Root = styled.div` display: grid; height: 100%; @@ -39,8 +59,7 @@ const Content = styled.div` grid-row: body; display: flex; flex-direction: row; - justify-content: center; - align-items: center; + justify-self: center; ` const StyledFooter = styled(Footer)` diff --git a/packages/qpa/App/Context/AppContext.tsx b/packages/qpa/App/Context/AppContext.tsx index 8e805b0..3be846d 100644 --- a/packages/qpa/App/Context/AppContext.tsx +++ b/packages/qpa/App/Context/AppContext.tsx @@ -5,7 +5,7 @@ import MeQuery, { UserData } from "./MeQuery" interface IAppContext { me: UserData isSSR: boolean - supportedLanguages: string[] + supportedLocales: string[] } interface Props { @@ -13,8 +13,8 @@ interface Props { children: React.ReactChild } -const SUPPORTED_LANGUAGES = ['en', 'es'] -const AppContext = React.createContext({ me: null, isSSR: false, supportedLanguages: SUPPORTED_LANGUAGES }) +const SUPPORTED_LOCALES = ['en-GB', 'es-ES'] +const AppContext = React.createContext({ me: null, isSSR: false, supportedLocales: SUPPORTED_LOCALES }) const { Provider, Consumer } = AppContext const AppContextProvider = (props: Props) => ( @@ -29,7 +29,7 @@ const AppContextProvider = (props: Props) => ( { props.children diff --git a/packages/qpa/App/Header/Header.tsx b/packages/qpa/App/Header/Header.tsx index dded072..3e66464 100644 --- a/packages/qpa/App/Header/Header.tsx +++ b/packages/qpa/App/Header/Header.tsx @@ -46,6 +46,7 @@ const Root = styled.div` background: rgba(0, 0, 0, 0.1); display: flex; flex-direction: row; + padding-right: 14px; ` const LinksSection = styled.div` diff --git a/packages/qpa/Event/CreateEvent.tsx b/packages/qpa/Event/CreateEvent.tsx index c46e77a..7120561 100644 --- a/packages/qpa/Event/CreateEvent.tsx +++ b/packages/qpa/Event/CreateEvent.tsx @@ -6,7 +6,7 @@ import EventForm, {EventFormData} from "./EventForm" const CreateEvent = () => { const { addMessage } = useMessageCenter() - const { supportedLanguages } = useAppContext() + const { supportedLocales } = useAppContext() return { addMessage({ @@ -17,7 +17,7 @@ const CreateEvent = () => { { (createEvent, { loading }) => ( { createEvent({ diff --git a/packages/qpa/Event/EditEvent.tsx b/packages/qpa/Event/EditEvent.tsx index 310d6cd..1a82c4b 100644 --- a/packages/qpa/Event/EditEvent.tsx +++ b/packages/qpa/Event/EditEvent.tsx @@ -11,7 +11,7 @@ interface Props { } const EditEvent = (props: Props) => { - const { supportedLanguages } = useAppContext() + const { supportedLocales } = useAppContext() return ( { @@ -33,7 +33,7 @@ const EditEvent = (props: Props) => { return ( { editEvent({ variables: { diff --git a/packages/qpa/Event/EventForm.msg.json b/packages/qpa/Event/EventForm.msg.json new file mode 100644 index 0000000..4cee4ee --- /dev/null +++ b/packages/qpa/Event/EventForm.msg.json @@ -0,0 +1,36 @@ +{ + "en": { + "EVENT_CREATED_SUCCESSFULLY": "Event was created successfully", + "EVENT_TITLE": "Title of event", + "DESCRIPTION": "Description of the event", + "DESCRIPTION_PLACEHOLDER": "Write a few words about your event", + "LOCATION": "Location", + "LOCATION_PLACEHOLDER": "Location's name", + "ADDRESS": "Address", + "ADDRESS_PLACEHOLDER": "Address of the location", + "EDIT": "Edit Event", + "CREATE": "Create Event", + "EVENT_FORM_INFO": "Event details in", + "en-GB": "English", + "es-ES": "Spanish", + "EVENT_FORM_DETAILS_FOREWORD": "Please enter some details about your event.", + "EVENT_FORM_DETAILS_FOREWORD_MULTILINGUAL": "Please enter some details about your event. Please consider that your audience is multilingual so please do make an effort to write the description in other languages too." + }, + "es": { + "EVENT_CREATED_SUCCESSFULLY": "Evento ha sido creado correctamente", + "EVENT_TITLE": "Titulo del evento", + "DESCRIPTION": "Descripción del evento", + "DESCRIPTION_PLACEHOLDER": "Escribe unas palabras sobre tu evento", + "LOCATION": "Lugar", + "LOCATION_PLACEHOLDER": "Nombre del lugar", + "ADDRESS": "Dirección", + "ADDRESS_PLACEHOLDER": "Dirección del lugar", + "EDIT": "Modificar evento", + "CREATE": "Crear evento", + "EVENT_FORM_INFO": "Detalles del evento en", + "en-GB": "Inglés", + "es-ES": "Español", + "EVENT_FORM_DETAILS_FOREWORD": "Por favor, añade unos detalles sobre tu evento", + "EVENT_FORM_DETAILS_FOREWORD_MULTILINGUAL": "Por favor, añade unos detalles sobre tu evento. Ten en cuenta, que tu publico es multilingual así que por favor, haz el esfuerzo de escribir las descripciones en otros idiomas también" + } +} diff --git a/packages/qpa/Event/EventForm.tsx b/packages/qpa/Event/EventForm.tsx index 3edfd24..78c7191 100644 --- a/packages/qpa/Event/EventForm.tsx +++ b/packages/qpa/Event/EventForm.tsx @@ -1,3 +1,4 @@ +import {css} from "@emotion/core" import {addHours, format} from "date-fns" import {Field, Form, Formik} from "formik" import {Button} from "qpa-components" @@ -5,12 +6,14 @@ import * as React from "react" import styled from "styled-components" import {EventStatus} from "../../../@types" import DateTime from "./DateTime" +import * as intl from 'react-intl-universal' +import messages from "./EventForm.msg.json" interface Props { values?: EventFormData onSubmit: (values: EventFormData) => void loading: boolean - languages: string[] + locales: string[] } export interface EventFormData { @@ -47,6 +50,10 @@ const nextWeekMidday = new Date(nextWeekTenAM) nextWeekMidday.setUTCHours(12) const EventForm = (props: Props) => { + intl.load({ + 'es-ES': messages.es, + 'en-GB': messages.en + }) const isEdit = !!props.values return ( { start: nextWeekTenAM.toISOString().substring(0, 16), end: nextWeekMidday.toISOString().substring(0, 16), }, - infos: props.languages.map(lang => ( + infos: props.locales.map(lang => ( { language: lang, title: "", @@ -82,22 +89,27 @@ const EventForm = (props: Props) => { > {({isValid, setFieldValue, values}) => ( + + { + props.locales.length > 1 ? intl.get('EVENT_FORM_DETAILS_FOREWORD_MULTILINGUAL') : intl.get('EVENT_FORM_DETAILS_FOREWORD') + } + { - props.languages.map(lang => { + props.locales.map(lang => { const i = values.infos.findIndex(info => info.language === lang) return (
-

{lang}

-

Title

+

{intl.get('EVENT_FORM_INFO')} {intl.get(lang)}

+

{intl.get('EVENT_TITLE')}

{({field}) => } -

Description

+

{intl.get('DESCRIPTION')}

{({field}) => (