OpenEcoLab-LasAlpujarras/qpa-client
5
0
Fork 0
mirror of https://github.com/quepasaevents/qpa-client.git synced 2023-12-14 05:33:02 +01:00
Code Issues Projects Releases Wiki Activity

Add language support to events

Browse source
This commit is contained in:
Amit Jakubowicz 2019-10-06 17:08:47 +02:00
parent f492028736
commit 762f9aee9a
5 changed files with 90 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/qpa/App/Context/AppContext.tsx
View file

@ -5,6 +5,7 @@ import MeQuery, { UserData } from "./MeQuery"
interface IAppContext { interface IAppContext {
me: UserData me: UserData
isSSR: boolean isSSR: boolean
supportedLanguages: string[]
} }
interface Props { interface Props {
@ -12,7 +13,8 @@ interface Props {
children: React.ReactChild children: React.ReactChild
} }
const AppContext = React.createContext<IAppContext>({ me: null, isSSR: false }) const SUPPORTED_LANGUAGES = ['en', 'es']
const AppContext = React.createContext<IAppContext>({ me: null, isSSR: false, supportedLanguages: SUPPORTED_LANGUAGES })
const { Provider, Consumer } = AppContext const { Provider, Consumer } = AppContext
const AppContextProvider = (props: Props) => ( const AppContextProvider = (props: Props) => (
<MeQuery> <MeQuery>
@ -27,6 +29,7 @@ const AppContextProvider = (props: Props) => (
<Provider value={{ <Provider value={{
me: data.me, me: data.me,
isSSR: props.isSSR, isSSR: props.isSSR,
supportedLanguages: SUPPORTED_LANGUAGES
}}> }}>
{ {
props.children props.children

3
packages/qpa/Calendar/List/ListItem.tsx
View file

@ -2,7 +2,6 @@ import styled from "@emotion/styled"
import * as React from "react" import * as React from "react"
import {hot} from "react-hot-loader" import {hot} from "react-hot-loader"
import {Link} from "react-router-dom" import {Link} from "react-router-dom"
import {AppContext} from "../../App/Context/AppContext"
import {OccurrenceData} from "../../Event/OccurrencesQuery" import {OccurrenceData} from "../../Event/OccurrencesQuery"
interface Props { interface Props {
@ -25,7 +24,7 @@ const ListItem = (props: Props) => {
<Time> <Time>
{startTime} {startTime}
</Time> </Time>
<Link to={`/o/${sanitizeEventName(event.info[0].title)}/${occurrence.id}`}> <Link to={`/o/${sanitizeEventName(event.infos[0].title)}/${occurrence.id}`}>
{info.title} {info.title}
</Link> </Link>
<Location> <Location>

3
packages/qpa/Event/CreateEvent.tsx
View file

@ -1,10 +1,12 @@
import * as React from "react" import * as React from "react"
import {useMessageCenter} from "qpa-message-center" import {useMessageCenter} from "qpa-message-center"
import {useAppContext} from "../App/Context/AppContext"
import CreateEventMutation from "./CreateEventMutation" import CreateEventMutation from "./CreateEventMutation"
import EventForm, {EventFormData} from "./EventForm" import EventForm, {EventFormData} from "./EventForm"
const CreateEvent = () => { const CreateEvent = () => {
const { addMessage } = useMessageCenter() const { addMessage } = useMessageCenter()
const { supportedLanguages } = useAppContext()
return <CreateEventMutation onCompleted={() => { return <CreateEventMutation onCompleted={() => {
addMessage({ addMessage({
@ -15,6 +17,7 @@ const CreateEvent = () => {
{ {
(createEvent, { loading }) => ( (createEvent, { loading }) => (
<EventForm <EventForm
languages={supportedLanguages}
loading={loading} loading={loading}
onSubmit={(values: EventFormData) => { onSubmit={(values: EventFormData) => {
createEvent({ createEvent({

98
packages/qpa/Event/EditEvent.tsx
View file

@ -1,5 +1,6 @@
import { Spinner } from "qpa-components" import { Spinner } from "qpa-components"
import * as React from "react" import * as React from "react"
import {useAppContext} from "../App/Context/AppContext"
import removeTypename from "../App/remove-typename" import removeTypename from "../App/remove-typename"
import EditEventMutation from "./EditEventMutation" import EditEventMutation from "./EditEventMutation"
import EventForm from "./EventForm" import EventForm from "./EventForm"
@ -9,51 +10,58 @@ interface Props {
eventId: string eventId: string
} }
const EditEvent = (props: Props) => ( const EditEvent = (props: Props) => {
<EditEventMutation onCompleted={() => { const { supportedLanguages } = useAppContext()
alert("Event edited successfully")
}}>
{
(editEvent, { loading: editLoading }) => (
<GetEventQuery skip={!props.eventId} variables={{id: props.eventId}}>
{
({data, error, loading}) => {
if (loading) {
return <Spinner />
}
if (error) {
return error.message
}
const event = removeTypename(data.event)
return ( return (
<EventForm <EditEventMutation onCompleted={() => {
loading={editLoading} alert("Event edited successfully")
onSubmit={(values) => { }}>
editEvent({ {
variables: { (editEvent, { loading: editLoading }) => (
input: { <GetEventQuery skip={!props.eventId} variables={{id: props.eventId}}>
id: props.eventId, {
...values, ({data, error, loading}) => {
}, if (loading) {
}, return <Spinner />
}) }
}} if (error) {
values={{ return error.message
meta: { }
tags: event.meta.tags, const event = removeTypename(data.event)
},
time: event.time, return (
location: event.location, <EventForm
infos: event.infos, loading={editLoading}
status: event.status, languages={supportedLanguages}
}}/> onSubmit={(values) => {
) editEvent({
variables: {
input: {
id: props.eventId,
...values,
},
},
})
}}
values={{
meta: {
tags: event.meta.tags,
},
time: event.time,
location: event.location,
infos: event.infos,
status: event.status,
}}/>
)
}
}
</GetEventQuery>
)
} }
} </EditEventMutation>
</GetEventQuery> )
)
} }
</EditEventMutation>
)
export default EditEvent export default EditEvent

51
packages/qpa/Event/EventForm.tsx
View file

@ -10,6 +10,7 @@ interface Props {
values?: EventFormData values?: EventFormData
onSubmit: (values: EventFormData) => void onSubmit: (values: EventFormData) => void
loading: boolean loading: boolean
languages: string[]
} }
export interface EventFormData { export interface EventFormData {
@ -59,18 +60,13 @@ const EventForm = (props: Props) => {
start: nextWeekTenAM.toISOString().substring(0, 16), start: nextWeekTenAM.toISOString().substring(0, 16),
end: nextWeekMidday.toISOString().substring(0, 16), end: nextWeekMidday.toISOString().substring(0, 16),
}, },
infos: [ infos: props.languages.map(lang => (
{ {
language: "en", language: lang,
title: "", title: "",
description: "", description: "",
},
{
language: "es",
title: "",
description: ""
} }
], )),
location: { location: {
name: "", name: "",
}, },
@ -84,21 +80,32 @@ const EventForm = (props: Props) => {
const errors: any = {} const errors: any = {}
}} }}
> >
{({isValid, setFieldValue}) => ( {({isValid, setFieldValue, values}) => (
<StyledForm> <StyledForm>
<p>Title</p> {
<Field name="info[0].title"> props.languages.map(lang => {
{({field}) => <input {...field} placeholder="Name your event"/>} const i = values.infos.findIndex(info => info.language === lang)
</Field> return (
<p>Description</p> <section key={lang}>
<Field name="info[0].description"> <h1>{lang}</h1>
{({field}) => ( <p>Title</p>
<textarea <Field name={`info[${i}].title`}>
{...field} {({field}) => <input {...field} placeholder="Name your event"/>}
placeholder="Write a few words about your event" </Field>
/> <p>Description</p>
)} <Field name={`info[${i}].description`}>
</Field> {({field}) => (
<textarea
{...field}
placeholder="Write a few words about your event"
/>
)}
</Field>
</section>
)
})
}
<p>Start</p> <p>Start</p>
<Field name="time.start"> <Field name="time.start">
{ {