99 lines
3.3 KiB
JavaScript
99 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import { Mutation } from 'react-apollo'
|
|
import { hostedEventsCalls } from '../GraphQL/Calls/index'
|
|
import { DateTime } from 'luxon'
|
|
|
|
import {
|
|
Button,
|
|
TextField
|
|
} from '@material-ui/core'
|
|
import { ChevronLeft, ChevronRight } from '@material-ui/icons'
|
|
import { DateTimePicker } from 'material-ui-pickers'
|
|
|
|
class New extends React.Component {
|
|
constructor (props) {
|
|
super(props)
|
|
this.state = {
|
|
name: '',
|
|
description: '',
|
|
startDatetime: DateTime.local().plus({ days: 1 }).startOf('day'),
|
|
finishDatetime: DateTime.local().plus({ days: 8 }).startOf('day')
|
|
}
|
|
}
|
|
|
|
render () {
|
|
const { name, description, startDatetime, finishDatetime } = this.state
|
|
return (
|
|
<Mutation mutation={hostedEventsCalls.HOSTS_HOSTEVENT}
|
|
update={(store, { data }) => {
|
|
const { hosts_EventsByHost: hostedEvents } = store.readQuery({ query: hostedEventsCalls.HOSTS_EVENTSBYHOST })
|
|
store.writeQuery({
|
|
query: hostedEventsCalls.HOSTS_EVENTSBYHOST,
|
|
data: { hosts_EventsByHost: hostedEvents.concat([data.hosts_HostEvent]) }
|
|
})
|
|
this.props.handleNewEvent(data.hosts_HostEvent)
|
|
}
|
|
}
|
|
>
|
|
{(hostEvent, { data }) => (
|
|
<div className='container'>
|
|
<form
|
|
onSubmit={e => {
|
|
e.preventDefault()
|
|
hostEvent({ variables: {
|
|
name: name,
|
|
description: description,
|
|
startDatetime: startDatetime.valueOf() / 1000,
|
|
finishDatetime: startDatetime.valueOf() / 1000
|
|
} })
|
|
}}
|
|
>
|
|
<TextField
|
|
label='Name'
|
|
value={name}
|
|
onChange={(e) => this.setState({ name: e.target.value })}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
multiline
|
|
label='Description'
|
|
value={description}
|
|
onChange={(e) => this.setState({ description: e.target.value })}
|
|
fullWidth
|
|
/>
|
|
<DateTimePicker
|
|
autoOk
|
|
disablePast
|
|
format="DD' at 'HH:mm"
|
|
ampm={false}
|
|
showTabs={false}
|
|
leftArrowIcon={<ChevronLeft />}
|
|
rightArrowIcon={<ChevronRight />}
|
|
value={startDatetime}
|
|
onChange={(date) => this.setState({ startDatetime: date })}
|
|
helperText='Competition start date'
|
|
/>
|
|
<DateTimePicker
|
|
autoOk
|
|
disablePast
|
|
format="DD' at 'HH:mm"
|
|
ampm={false}
|
|
showTabs={false}
|
|
leftArrowIcon={<ChevronLeft />}
|
|
rightArrowIcon={<ChevronRight />}
|
|
value={finishDatetime}
|
|
onChange={(date) => this.setState({ finishDatetime: date })}
|
|
helperText='Competition finishing date'
|
|
/>
|
|
<Button type='submit' variant='contained' color='secondary'>Create New Project</Button>
|
|
</form>
|
|
<div className='form-close' onClick={() => this.clearTempStates()} />
|
|
</div>
|
|
)}
|
|
</Mutation>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default New
|