Create form
This commit is contained in:
Amit Jakubowicz
parent
148f3c2962
commit
4298fa3397
|
|
@ -70,5 +70,6 @@
|
|||
},
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"proxy": "https://staging.quepasaalpujarra.com"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,8 +53,6 @@ type EventTiming = {
|
|||
status?: "confirmed" | "tentative" | "cancelled"
|
||||
}
|
||||
|
||||
|
||||
|
||||
export type CalendarEventRequest = {
|
||||
title: string
|
||||
description: string
|
||||
|
|
@ -63,7 +61,6 @@ export type CalendarEventRequest = {
|
|||
timeZone?: string
|
||||
contactPhone?: string
|
||||
contactEmail?: string
|
||||
|
||||
locationAddress?: string
|
||||
location?: string
|
||||
locationCoordinate?: Array<number>,
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
"dependencies": {
|
||||
"@types/styled-components": "^3.0.0",
|
||||
"axios": "^0.18.0",
|
||||
"date-fns": "^1.29.0",
|
||||
"formik": "^1.3.0",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2",
|
||||
"react-scripts-ts": "2.17.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import './App.css';
|
||||
import { Events } from './events'
|
||||
import CreateEvent from './CreateEvent';
|
||||
import logo from './logo.svg';
|
||||
|
||||
class App extends React.Component {
|
||||
|
|
@ -12,7 +12,7 @@ class App extends React.Component {
|
|||
<h1 className="App-title">Welcome to React</h1>
|
||||
</header>
|
||||
<div className="App-intro">
|
||||
<Events />
|
||||
<CreateEvent />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,64 @@
|
|||
import axios from 'axios';
|
||||
import * as addHours from 'date-fns/add_hours';
|
||||
import * as fnsFormat from 'date-fns/format';
|
||||
import * as startOfTomorrow from 'date-fns/start_of_tomorrow';
|
||||
import {Field, FieldProps, Form, Formik, FormikProps} from 'formik';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {CalendarEventRequest} from "../../../functions/src/types";
|
||||
|
||||
const nextWeekNoon = addHours(startOfTomorrow(), 24 * 7 + 12)
|
||||
const format = (date: Date) => fnsFormat(date, 'YYYY-MM-DD')
|
||||
const InitialValues: CalendarEventRequest = {
|
||||
title: '',
|
||||
description: '',
|
||||
tags: [],
|
||||
timing: {
|
||||
end: {
|
||||
date: format(addHours(nextWeekNoon, 2)),
|
||||
dateTime: '',
|
||||
},
|
||||
start: {
|
||||
date: format(nextWeekNoon),
|
||||
dateTime: '',
|
||||
},
|
||||
recurrence: [],
|
||||
status: 'tentative',
|
||||
},
|
||||
timeZone: '',
|
||||
contactPhone: '',
|
||||
contactEmail: '',
|
||||
locationAddress: '',
|
||||
location: '',
|
||||
locationCoordinate: [0, 0],
|
||||
imageUrl: '',
|
||||
}
|
||||
|
||||
export default class CreateEvent extends React.Component {
|
||||
render() {
|
||||
|
||||
submitEvent(event: CalendarEventRequest) {
|
||||
axios.post('/api/event', event, {
|
||||
headers: {
|
||||
Accept: 'application/json'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Root>
|
||||
<Title>Post your own event</Title>
|
||||
<Formik onSubmit={this.submitEvent} initialValues={InitialValues}>
|
||||
{
|
||||
({ values }: FormikProps<CalendarEventRequest>) => (<Form>
|
||||
<Field name="title">
|
||||
{
|
||||
({field}: FieldProps) => <input {...field} />
|
||||
}
|
||||
</Field>
|
||||
<button type="submit">Submit</button>
|
||||
</Form>)
|
||||
}
|
||||
</Formik>
|
||||
</Root>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export {default as CreateEvent} from './CreateEvent'
|
||||
export {default as default} from './CreateEvent'
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
]
|
||||
},
|
||||
"rules": {
|
||||
"member-access": false
|
||||
"member-access": false,
|
||||
"object-literal-sort-keys":false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -374,7 +374,7 @@ aws4@^1.8.0:
|
|||
|
||||
axios@^0.18.0:
|
||||
version "0.18.0"
|
||||
resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
|
||||
resolved "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
|
||||
dependencies:
|
||||
follow-redirects "^1.3.0"
|
||||
is-buffer "^1.1.5"
|
||||
|
|
@ -1756,6 +1756,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
|
|||
safe-buffer "^5.0.1"
|
||||
sha.js "^2.4.8"
|
||||
|
||||
create-react-context@^0.2.2:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
|
||||
dependencies:
|
||||
fbjs "^0.8.0"
|
||||
gud "^1.0.0"
|
||||
|
||||
cross-spawn@5.1.0, cross-spawn@^5.0.1:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
|
||||
|
|
@ -1932,6 +1939,10 @@ data-urls@^1.0.0:
|
|||
whatwg-mimetype "^2.1.0"
|
||||
whatwg-url "^7.0.0"
|
||||
|
||||
date-fns@^1.29.0:
|
||||
version "1.29.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
|
||||
|
||||
date-now@^0.1.4:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
|
||||
|
|
@ -1968,7 +1979,7 @@ deep-is@~0.1.3:
|
|||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
|
||||
|
||||
deepmerge@^2.0.1:
|
||||
deepmerge@^2.0.1, deepmerge@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.1.tgz#e862b4e45ea0555072bf51e7fd0d9845170ae768"
|
||||
|
||||
|
|
@ -2628,7 +2639,7 @@ fb-watchman@^2.0.0:
|
|||
dependencies:
|
||||
bser "^2.0.0"
|
||||
|
||||
fbjs@^0.8.16, fbjs@^0.8.5:
|
||||
fbjs@^0.8.0, fbjs@^0.8.16, fbjs@^0.8.5:
|
||||
version "0.8.17"
|
||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
|
||||
dependencies:
|
||||
|
|
@ -2775,6 +2786,20 @@ form-data@~2.3.2:
|
|||
combined-stream "1.0.6"
|
||||
mime-types "^2.1.12"
|
||||
|
||||
formik@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/formik/-/formik-1.3.0.tgz#0ef20938f40c3b4bd46003c0b069bdd2d5a90118"
|
||||
dependencies:
|
||||
create-react-context "^0.2.2"
|
||||
deepmerge "^2.1.1"
|
||||
hoist-non-react-statics "^2.5.5"
|
||||
lodash.clonedeep "^4.5.0"
|
||||
lodash.topath "4.5.2"
|
||||
prop-types "^15.6.1"
|
||||
react-fast-compare "^1.0.0"
|
||||
tslib "^1.9.3"
|
||||
warning "^3.0.0"
|
||||
|
||||
forwarded@~0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
|
||||
|
|
@ -2997,6 +3022,10 @@ growly@^1.3.0:
|
|||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
|
||||
|
||||
gud@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
|
||||
|
||||
gzip-size@3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
|
||||
|
|
@ -3109,7 +3138,7 @@ hmac-drbg@^1.0.0:
|
|||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
hoist-non-react-statics@^2.5.0:
|
||||
hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^2.5.5:
|
||||
version "2.5.5"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
|
||||
|
||||
|
|
@ -4269,6 +4298,10 @@ lodash.camelcase@^4.3.0:
|
|||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
|
||||
|
||||
lodash.clonedeep@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
|
||||
|
||||
lodash.debounce@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||
|
|
@ -4314,6 +4347,10 @@ lodash.templatesettings@^4.0.0:
|
|||
dependencies:
|
||||
lodash._reinterpolate "~3.0.0"
|
||||
|
||||
lodash.topath@4.5.2:
|
||||
version "4.5.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
|
||||
|
||||
lodash.uniq@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
|
|
@ -5503,7 +5540,7 @@ promise@^7.1.1:
|
|||
dependencies:
|
||||
asap "~2.0.3"
|
||||
|
||||
prop-types@^15.5.4, prop-types@^15.6.0:
|
||||
prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1:
|
||||
version "15.6.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
|
||||
dependencies:
|
||||
|
|
@ -5682,6 +5719,10 @@ react-error-overlay@^4.0.1:
|
|||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
|
||||
|
||||
react-fast-compare@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-1.0.0.tgz#813a039155e49b43ceffe99528fe5e9d97a6c938"
|
||||
|
||||
react-is@^16.3.1:
|
||||
version "16.5.0"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.0.tgz#2ec7c192709698591efe13722fab3ef56144ba55"
|
||||
|
|
@ -6864,7 +6905,7 @@ tsconfig-paths@^3.1.1:
|
|||
minimist "^1.2.0"
|
||||
strip-bom "^3.0.0"
|
||||
|
||||
tslib@^1.8.0, tslib@^1.8.1:
|
||||
tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
|
||||
|
||||
|
|
@ -7195,6 +7236,12 @@ walker@~1.0.5:
|
|||
dependencies:
|
||||
makeerror "1.0.x"
|
||||
|
||||
warning@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
|
||||
dependencies:
|
||||
loose-envify "^1.0.0"
|
||||
|
||||
watch@~0.18.0:
|
||||
version "0.18.0"
|
||||
resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
|
||||
|
|
|
|||
Loading…
Reference in New Issue