Add language support to events
This commit is contained in:
parent
f492028736
commit
762f9aee9a
|
|
@ -5,6 +5,7 @@ import MeQuery, { UserData } from "./MeQuery"
|
|||
interface IAppContext {
|
||||
me: UserData
|
||||
isSSR: boolean
|
||||
supportedLanguages: string[]
|
||||
}
|
||||
|
||||
interface Props {
|
||||
|
|
@ -12,7 +13,8 @@ interface Props {
|
|||
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 AppContextProvider = (props: Props) => (
|
||||
<MeQuery>
|
||||
|
|
@ -27,6 +29,7 @@ const AppContextProvider = (props: Props) => (
|
|||
<Provider value={{
|
||||
me: data.me,
|
||||
isSSR: props.isSSR,
|
||||
supportedLanguages: SUPPORTED_LANGUAGES
|
||||
}}>
|
||||
{
|
||||
props.children
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import styled from "@emotion/styled"
|
|||
import * as React from "react"
|
||||
import {hot} from "react-hot-loader"
|
||||
import {Link} from "react-router-dom"
|
||||
import {AppContext} from "../../App/Context/AppContext"
|
||||
import {OccurrenceData} from "../../Event/OccurrencesQuery"
|
||||
|
||||
interface Props {
|
||||
|
|
@ -25,7 +24,7 @@ const ListItem = (props: Props) => {
|
|||
<Time>
|
||||
{startTime}
|
||||
</Time>
|
||||
<Link to={`/o/${sanitizeEventName(event.info[0].title)}/${occurrence.id}`}>
|
||||
<Link to={`/o/${sanitizeEventName(event.infos[0].title)}/${occurrence.id}`}>
|
||||
{info.title}
|
||||
</Link>
|
||||
<Location>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import * as React from "react"
|
||||
import {useMessageCenter} from "qpa-message-center"
|
||||
import {useAppContext} from "../App/Context/AppContext"
|
||||
import CreateEventMutation from "./CreateEventMutation"
|
||||
import EventForm, {EventFormData} from "./EventForm"
|
||||
|
||||
const CreateEvent = () => {
|
||||
const { addMessage } = useMessageCenter()
|
||||
const { supportedLanguages } = useAppContext()
|
||||
|
||||
return <CreateEventMutation onCompleted={() => {
|
||||
addMessage({
|
||||
|
|
@ -15,6 +17,7 @@ const CreateEvent = () => {
|
|||
{
|
||||
(createEvent, { loading }) => (
|
||||
<EventForm
|
||||
languages={supportedLanguages}
|
||||
loading={loading}
|
||||
onSubmit={(values: EventFormData) => {
|
||||
createEvent({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Spinner } from "qpa-components"
|
||||
import * as React from "react"
|
||||
import {useAppContext} from "../App/Context/AppContext"
|
||||
import removeTypename from "../App/remove-typename"
|
||||
import EditEventMutation from "./EditEventMutation"
|
||||
import EventForm from "./EventForm"
|
||||
|
|
@ -9,51 +10,58 @@ interface Props {
|
|||
eventId: string
|
||||
}
|
||||
|
||||
const EditEvent = (props: Props) => (
|
||||
<EditEventMutation onCompleted={() => {
|
||||
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)
|
||||
const EditEvent = (props: Props) => {
|
||||
const { supportedLanguages } = useAppContext()
|
||||
|
||||
return (
|
||||
<EventForm
|
||||
loading={editLoading}
|
||||
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,
|
||||
}}/>
|
||||
)
|
||||
return (
|
||||
<EditEventMutation onCompleted={() => {
|
||||
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 (
|
||||
<EventForm
|
||||
loading={editLoading}
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
</GetEventQuery>
|
||||
)
|
||||
}
|
||||
</EditEventMutation>
|
||||
)
|
||||
</EditEventMutation>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default EditEvent
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ interface Props {
|
|||
values?: EventFormData
|
||||
onSubmit: (values: EventFormData) => void
|
||||
loading: boolean
|
||||
languages: string[]
|
||||
}
|
||||
|
||||
export interface EventFormData {
|
||||
|
|
@ -59,18 +60,13 @@ const EventForm = (props: Props) => {
|
|||
start: nextWeekTenAM.toISOString().substring(0, 16),
|
||||
end: nextWeekMidday.toISOString().substring(0, 16),
|
||||
},
|
||||
infos: [
|
||||
infos: props.languages.map(lang => (
|
||||
{
|
||||
language: "en",
|
||||
language: lang,
|
||||
title: "",
|
||||
description: "",
|
||||
},
|
||||
{
|
||||
language: "es",
|
||||
title: "",
|
||||
description: ""
|
||||
}
|
||||
],
|
||||
)),
|
||||
location: {
|
||||
name: "",
|
||||
},
|
||||
|
|
@ -84,21 +80,32 @@ const EventForm = (props: Props) => {
|
|||
const errors: any = {}
|
||||
}}
|
||||
>
|
||||
{({isValid, setFieldValue}) => (
|
||||
{({isValid, setFieldValue, values}) => (
|
||||
<StyledForm>
|
||||
<p>Title</p>
|
||||
<Field name="info[0].title">
|
||||
{({field}) => <input {...field} placeholder="Name your event"/>}
|
||||
</Field>
|
||||
<p>Description</p>
|
||||
<Field name="info[0].description">
|
||||
{({field}) => (
|
||||
<textarea
|
||||
{...field}
|
||||
placeholder="Write a few words about your event"
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
{
|
||||
props.languages.map(lang => {
|
||||
const i = values.infos.findIndex(info => info.language === lang)
|
||||
return (
|
||||
<section key={lang}>
|
||||
<h1>{lang}</h1>
|
||||
<p>Title</p>
|
||||
<Field name={`info[${i}].title`}>
|
||||
{({field}) => <input {...field} placeholder="Name your event"/>}
|
||||
</Field>
|
||||
<p>Description</p>
|
||||
<Field name={`info[${i}].description`}>
|
||||
{({field}) => (
|
||||
<textarea
|
||||
{...field}
|
||||
placeholder="Write a few words about your event"
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
<p>Start</p>
|
||||
<Field name="time.start">
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue