summaryrefslogtreecommitdiff
path: root/animism-align/frontend/views/timestamp/components/timestamp.form.js
diff options
context:
space:
mode:
Diffstat (limited to 'animism-align/frontend/views/timestamp/components/timestamp.form.js')
-rw-r--r--animism-align/frontend/views/timestamp/components/timestamp.form.js153
1 files changed, 0 insertions, 153 deletions
diff --git a/animism-align/frontend/views/timestamp/components/timestamp.form.js b/animism-align/frontend/views/timestamp/components/timestamp.form.js
deleted file mode 100644
index d90b663..0000000
--- a/animism-align/frontend/views/timestamp/components/timestamp.form.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-
-import { session } from '../../../session'
-
-import { TextInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
-
-const newGraph = () => ({
- path: '',
- title: '',
- username: session('username'),
- description: '',
-})
-
-export default class GraphForm extends Component {
- state = {
- title: "",
- submitTitle: "",
- data: { ...newGraph() },
- errorFields: new Set([]),
- }
-
- componentDidMount() {
- const { data, isNew } = this.props
- const title = isNew ? 'new project' : 'editing ' + data.title
- const submitTitle = isNew ? "Create Graph" : "Save Changes"
- this.setState({
- title,
- submitTitle,
- errorFields: new Set([]),
- data: {
- ...newGraph(),
- ...data
- },
- })
- }
-
- handleChange(e) {
- const { errorFields } = this.state
- const { name, value } = e.target
- if (errorFields.has(name)) {
- errorFields.delete(name)
- }
- let sanitizedValue = value
- if (name === 'path') {
- sanitizedValue = sanitizedValue.toLowerCase().replace(/ /, '-').replace(/[!@#$%^&*()[\]{}]/, '-').replace(/-+/, '-')
- }
- this.setState({
- errorFields,
- data: {
- ...this.state.data,
- [name]: sanitizedValue,
- }
- })
- }
-
- handleSelect(name, value) {
- const { errorFields } = this.state
- if (errorFields.has(name)) {
- errorFields.delete(name)
- }
- this.setState({
- errorFields,
- data: {
- ...this.state.data,
- [name]: value,
- }
- })
- }
-
- handleSubmit(e) {
- e.preventDefault()
- const { isNew, onSubmit } = this.props
- const { data } = this.state
- const requiredKeys = "title username path description".split(" ")
- const validKeys = "title username path description".split(" ")
- const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
- const errorFields = requiredKeys.filter(key => !validData[key])
- if (errorFields.length) {
- console.log('error', errorFields, validData)
- this.setState({ errorFields: new Set(errorFields) })
- } else {
- if (isNew) {
- // side effect: set username if we're creating a new graph
- session.set('username', data.username)
- } else {
- validData.id = data.id
- }
- console.log('submit', validData)
- onSubmit(validData)
- }
- }
-
- render() {
- const { isNew } = this.props
- const { title, submitTitle, errorFields, data } = this.state
- return (
- <div className='form'>
- <h1>{title}</h1>
- <form onSubmit={this.handleSubmit.bind(this)}>
- <TextInput
- title="Path"
- name="path"
- required
- data={data}
- error={errorFields.has('path')}
- onChange={this.handleChange.bind(this)}
- autoComplete="off"
- />
- <LabelDescription>
- {data.path
- ? 'Project URLs will be: /' + data.path + '/example'
- : 'Enter the base path for this project.'}
- </LabelDescription>
- <TextInput
- title="Title"
- name="title"
- required
- data={data}
- error={errorFields.has('title')}
- onChange={this.handleChange.bind(this)}
- autoComplete="off"
- />
- <TextInput
- title="Author"
- name="username"
- required
- data={data}
- error={errorFields.has('username')}
- onChange={this.handleChange.bind(this)}
- autoComplete="off"
- />
- <TextArea
- title="Description"
- name="description"
- data={data}
- onChange={this.handleChange.bind(this)}
- />
- <SubmitButton
- title={submitTitle}
- onClick={this.handleSubmit.bind(this)}
- />
- {!!errorFields.size &&
- <label>
- <span></span>
- <span>Please complete the required fields =)</span>
- </label>
- }
- </form>
- </div>
- )
- }
-}