diff options
Diffstat (limited to 'frontend/views')
| -rw-r--r-- | frontend/views/index.js | 3 | ||||
| -rw-r--r-- | frontend/views/index/components/graph.form.js | 149 | ||||
| -rw-r--r-- | frontend/views/index/containers/graph.edit.js | 53 | ||||
| -rw-r--r-- | frontend/views/index/containers/graph.index.js | 28 | ||||
| -rw-r--r-- | frontend/views/index/containers/graph.new.js | 44 | ||||
| -rw-r--r-- | frontend/views/index/index.container.js | 33 | ||||
| -rw-r--r-- | frontend/views/index/index.css | 18 | ||||
| -rw-r--r-- | frontend/views/upload/index.js | 3 | ||||
| -rw-r--r-- | frontend/views/upload/upload.container.js | 2 |
9 files changed, 329 insertions, 4 deletions
diff --git a/frontend/views/index.js b/frontend/views/index.js index 5f88c96..69bb70e 100644 --- a/frontend/views/index.js +++ b/frontend/views/index.js @@ -1 +1,2 @@ -export { Container as upload } from './upload' +export { default as index } from './index/index.container' +export { default as upload } from './upload/upload.container' diff --git a/frontend/views/index/components/graph.form.js b/frontend/views/index/components/graph.form.js new file mode 100644 index 0000000..ef546ec --- /dev/null +++ b/frontend/views/index/components/graph.form.js @@ -0,0 +1,149 @@ +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 graph' : '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) + } + this.setState({ + errorFields, + data: { + ...this.state.data, + [name]: value, + } + }) + } + + 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".split(" ") + const validKeys = "title username notes archived".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> + ) + } +} diff --git a/frontend/views/index/containers/graph.edit.js b/frontend/views/index/containers/graph.edit.js new file mode 100644 index 0000000..2f8c7fb --- /dev/null +++ b/frontend/views/index/containers/graph.edit.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from '../../../store' +import actions from '../../../actions' + +import { Loader } from '../../../common' + +import GraphForm from '../components/graph.form' + +class GraphEdit extends Component { + componentDidMount() { + actions.graph.show(this.props.match.params.id) + } + + handleSubmit(data) { + actions.graph.update(data) + .then(response => { + // response + console.log(response) + history.push('/graph/' + data.id + '/show/') + }) + } + + render() { + const { show } = this.props.graph + if (show.loading || !show.res) { + return ( + <div className='form'> + <h1>Loading...</h1> + <Loader /> + </div> + ) + } + return ( + <GraphForm + data={show.res} + onSubmit={this.handleSubmit.bind(this)} + /> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, +}) + +const mapDispatchToProps = dispatch => ({ + // searchActions: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(GraphEdit) diff --git a/frontend/views/index/containers/graph.index.js b/frontend/views/index/containers/graph.index.js new file mode 100644 index 0000000..b18c768 --- /dev/null +++ b/frontend/views/index/containers/graph.index.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +// import actions from '../../actions' +// import * as uploadActions from './upload.actions' + +class GraphIndex extends Component { + render() { + return ( + <div className='graphIndex'> + <b>welcome, swimmer</b> + <Link to='/index/new'>+ new project</Link> + </div> + ) + } +} + +const mapStateToProps = state => ({ + // upload: state.upload, +}) + +const mapDispatchToProps = dispatch => ({ + // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(GraphIndex) diff --git a/frontend/views/index/containers/graph.new.js b/frontend/views/index/containers/graph.new.js new file mode 100644 index 0000000..186f8f7 --- /dev/null +++ b/frontend/views/index/containers/graph.new.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from '../../../store' +import actions from '../../../actions' + +import GraphForm from '../components/graph.form' + +class GraphNew extends Component { + handleSubmit(data) { + console.log(data) + actions.graph.create(data) + .then(res => { + console.log(res) + if (res.res && res.res.id) { + history.push('/graph/' + res.res.name) + } + }) + .catch(err => { + console.error('error') + }) + } + + render() { + return ( + <GraphForm + isNew + data={{}} + onSubmit={this.handleSubmit.bind(this)} + /> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, +}) + +const mapDispatchToProps = dispatch => ({ + // searchActions: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(GraphNew) diff --git a/frontend/views/index/index.container.js b/frontend/views/index/index.container.js new file mode 100644 index 0000000..7805e83 --- /dev/null +++ b/frontend/views/index/index.container.js @@ -0,0 +1,33 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import './index.css' + +// import actions from '../../actions' +// import * as uploadActions from './upload.actions' + +import GraphIndex from './containers/graph.index' +import GraphNew from './containers/graph.new' + +class Container extends Component { + render() { + return ( + <div className='index'> + <Route exact path='/index/new' component={GraphNew} /> + <Route exact path='/index' component={GraphIndex} /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + // upload: state.upload, +}) + +const mapDispatchToProps = dispatch => ({ + // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Container) diff --git a/frontend/views/index/index.css b/frontend/views/index/index.css new file mode 100644 index 0000000..48c5abc --- /dev/null +++ b/frontend/views/index/index.css @@ -0,0 +1,18 @@ +* { + +} + +.index > div { + margin: 1rem; + padding: 1rem; + max-height: calc(100% - 2rem); + overflow: scroll; + background: rgba(64,12,64,0.9); +} +.graphIndex { + display: flex; + flex-direction: column; +} +.graphIndex > * { + margin-bottom: 0.5rem; +}
\ No newline at end of file diff --git a/frontend/views/upload/index.js b/frontend/views/upload/index.js deleted file mode 100644 index b1e9ebe..0000000 --- a/frontend/views/upload/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { default as Container } from './upload.container' - -import './upload.css' diff --git a/frontend/views/upload/upload.container.js b/frontend/views/upload/upload.container.js index c163b92..0096b4f 100644 --- a/frontend/views/upload/upload.container.js +++ b/frontend/views/upload/upload.container.js @@ -3,6 +3,8 @@ import { Route, Link } from 'react-router-dom' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' +import './upload.css' + import actions from '../../actions' import * as uploadActions from './upload.actions' |