diff options
Diffstat (limited to 'frontend/views/index')
| -rw-r--r-- | frontend/views/index/components/graph.form.js | 153 | ||||
| -rw-r--r-- | frontend/views/index/containers/graph.edit.js | 53 | ||||
| -rw-r--r-- | frontend/views/index/containers/graph.index.js | 53 | ||||
| -rw-r--r-- | frontend/views/index/containers/graph.new.js | 44 | ||||
| -rw-r--r-- | frontend/views/index/index.container.js | 36 | ||||
| -rw-r--r-- | frontend/views/index/index.css | 38 |
6 files changed, 0 insertions, 377 deletions
diff --git a/frontend/views/index/components/graph.form.js b/frontend/views/index/components/graph.form.js deleted file mode 100644 index d90b663..0000000 --- a/frontend/views/index/components/graph.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> - ) - } -} diff --git a/frontend/views/index/containers/graph.edit.js b/frontend/views/index/containers/graph.edit.js deleted file mode 100644 index ce1b404..0000000 --- a/frontend/views/index/containers/graph.edit.js +++ /dev/null @@ -1,53 +0,0 @@ -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() { - console.log(this.props.match.params.id) - actions.graph.show(this.props.match.params.id) - } - - handleSubmit(data) { - actions.graph.update(data) - .then(response => { - // response - console.log(response) - history.push('/' + data.path) - }) - } - - render() { - const { show } = this.props.graph - if (show.loading || !show.res) { - return ( - <div className='form'> - <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 deleted file mode 100644 index 35c2d82..0000000 --- a/frontend/views/index/containers/graph.index.js +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import { Loader } from '../../../common' -import actions from '../../../actions' -// import * as uploadActions from './upload.actions' - -class GraphIndex extends Component { - componentDidMount() { - actions.graph.index() - } - render() { - const { index } = this.props - // console.log(this.props) - if (!index.order) { - return ( - <div className='graphIndex'> - <Loader /> - </div> - ) - } - // console.log(state) - return ( - <div className='graphIndex'> - <div> - <b>welcome, swimmer</b> - <Link to='/index/new'>+ new project</Link> - </div> - {index.order.map(id => { - const graph = index.lookup[id] - return ( - <div key={id}> - <Link to={'/' + graph.path}>{graph.title}</Link> - <Link to={'/index/' + id + '/edit'}>{'edit project'}</Link> - </div> - ) - })} - </div> - ) - } -} - -const mapStateToProps = state => ({ - index: state.graph.index, -}) - -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 deleted file mode 100644 index be96bf5..0000000 --- a/frontend/views/index/containers/graph.new.js +++ /dev/null @@ -1,44 +0,0 @@ -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('/' + res.res.path) - } - }) - .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 deleted file mode 100644 index c6cb819..0000000 --- a/frontend/views/index/index.container.js +++ /dev/null @@ -1,36 +0,0 @@ -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 { Header } from '../../common' -// import * as uploadActions from './upload.actions' - -import GraphIndex from './containers/graph.index' -import GraphNew from './containers/graph.new' -import GraphEdit from './containers/graph.edit' - -class Container extends Component { - componentDidMount() { - actions.site.setSiteTitle("swimmer") - } - render() { - return ( - <div> - <Header /> - <div className='body'> - <div className='index'> - <Route exact path='/index/new' component={GraphNew} /> - <Route exact path='/index/:id/edit' component={GraphEdit} /> - <Route exact path='/index' component={GraphIndex} /> - </div> - </div> - </div> - ) - } -} - -export default Container diff --git a/frontend/views/index/index.css b/frontend/views/index/index.css deleted file mode 100644 index 028f6c2..0000000 --- a/frontend/views/index/index.css +++ /dev/null @@ -1,38 +0,0 @@ -* { - -} -.index { - width: 100%; - height: 100%; - background: linear-gradient( - -45deg, - rgba(0, 0, 64, 0.5), - rgba(128, 0, 64, 0.5) - ); - padding: 1rem; -} -.index > div { - display: inline-block; - padding: 1rem; - max-height: calc(100% - 2rem); - overflow: scroll; - background: rgba(64,12,64,0.9); - box-shadow: 3px 3px 6px rgba(0,0,0,0.4), - inset 0 0 60px rgba(128,255,255,0.1); -} -.graphIndex { - min-width: 20rem; - display: flex; - flex-direction: column; -} -.graphIndex > * { - margin-bottom: 0.5rem; -} -.graphIndex > div { - display: flex; - flex-direction: row; - justify-content: space-between -} -.graphIndex > div > a:first-child { - color: #fff; -}
\ No newline at end of file |