diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2020-06-23 23:18:07 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2020-06-23 23:18:07 +0200 |
| commit | 3cf70771cb45cc16ec33ffe44e7a1a4799d8f395 (patch) | |
| tree | 55f0edb53141d5f043b486d722f507bfd94abdea /animism-align/frontend/views | |
| parent | 014816dc724c1be60b7dd28d4e608c89b4ed451c (diff) | |
adding web app base
Diffstat (limited to 'animism-align/frontend/views')
18 files changed, 752 insertions, 0 deletions
diff --git a/animism-align/frontend/views/index.js b/animism-align/frontend/views/index.js new file mode 100644 index 0000000..c50ab80 --- /dev/null +++ b/animism-align/frontend/views/index.js @@ -0,0 +1,4 @@ +export { default as index } from './index/index.container' +export { default as graph } from './graph/graph.container' +export { default as page } from './page/page.container' +export { default as upload } from './upload/upload.container' diff --git a/animism-align/frontend/views/index/components/graph.form.js b/animism-align/frontend/views/index/components/graph.form.js new file mode 100644 index 0000000..d90b663 --- /dev/null +++ b/animism-align/frontend/views/index/components/graph.form.js @@ -0,0 +1,153 @@ +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/animism-align/frontend/views/index/containers/graph.edit.js b/animism-align/frontend/views/index/containers/graph.edit.js new file mode 100644 index 0000000..ce1b404 --- /dev/null +++ b/animism-align/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() { + 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/animism-align/frontend/views/index/containers/graph.index.js b/animism-align/frontend/views/index/containers/graph.index.js new file mode 100644 index 0000000..35c2d82 --- /dev/null +++ b/animism-align/frontend/views/index/containers/graph.index.js @@ -0,0 +1,53 @@ +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/animism-align/frontend/views/index/containers/graph.new.js b/animism-align/frontend/views/index/containers/graph.new.js new file mode 100644 index 0000000..be96bf5 --- /dev/null +++ b/animism-align/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('/' + 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/animism-align/frontend/views/index/index.container.js b/animism-align/frontend/views/index/index.container.js new file mode 100644 index 0000000..c6cb819 --- /dev/null +++ b/animism-align/frontend/views/index/index.container.js @@ -0,0 +1,36 @@ +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/animism-align/frontend/views/index/index.css b/animism-align/frontend/views/index/index.css new file mode 100644 index 0000000..028f6c2 --- /dev/null +++ b/animism-align/frontend/views/index/index.css @@ -0,0 +1,38 @@ +* { + +} +.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 diff --git a/animism-align/frontend/views/site/site.actions.js b/animism-align/frontend/views/site/site.actions.js new file mode 100644 index 0000000..a5b4b55 --- /dev/null +++ b/animism-align/frontend/views/site/site.actions.js @@ -0,0 +1,3 @@ +import * as types from '../../types' +// import actions from '../../actions' +// import { session } from '../../session' diff --git a/animism-align/frontend/views/site/site.reducer.js b/animism-align/frontend/views/site/site.reducer.js new file mode 100644 index 0000000..e9e5ebc --- /dev/null +++ b/animism-align/frontend/views/site/site.reducer.js @@ -0,0 +1,13 @@ +import * as types from '../../types' +// import { session, getDefault, getDefaultInt } from '../../session' + +const initialState = { +} + +export default function siteReducer(state = initialState, action) { + // console.log(action.type, action) + switch (action.type) { + default: + return state + } +} diff --git a/animism-align/frontend/views/upload/components/upload.form.js b/animism-align/frontend/views/upload/components/upload.form.js new file mode 100644 index 0000000..2010088 --- /dev/null +++ b/animism-align/frontend/views/upload/components/upload.form.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { MenuButton, FileInput } from '../../../common' + +export default class UploadForm extends Component { + render() { + return ( + <div className='uploadForm'> + <MenuButton name="upload" label={false}> + <FileInput onChange={this.props.uploadActions.upload} /> + </MenuButton> + </div> + ) + } +} diff --git a/animism-align/frontend/views/upload/components/upload.index.js b/animism-align/frontend/views/upload/components/upload.index.js new file mode 100644 index 0000000..6123001 --- /dev/null +++ b/animism-align/frontend/views/upload/components/upload.index.js @@ -0,0 +1,104 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { uploadUri, formatDateTime } from '../../../util' +import { MenuButton, SmallMenuButton, Loader } from '../../../common' +import actions from '../../../actions' + +import UploadIndexOptions from './upload.indexOptions' +import UploadMenu from './upload.menu' + +// const { result, collectionLookup } = this.props + +export default class UploadIndex extends Component { + componentDidMount() { + this.fetch(false) + } + + componentDidUpdate(prevProps) { + if (this.props.upload.options.sort !== prevProps.upload.options.sort) { + this.fetch(false) + } + } + + fetch(load_more) { + const { options, index } = this.props.upload + const { order: index_order } = index + const [ sort, order ] = options.sort.split('-') + actions.upload.index({ + sort, order, limit: 50, offset: load_more ? index_order.length : 0, + }, load_more) + } + + render() { + const { searchOptions, uploadActions } = this.props + const { options } = this.props.upload + const { loading, lookup, order } = this.props.upload.index + if (loading) { + return ( + <section> + <UploadIndexOptions /> + <div className="row"> + {order && !!order.length && + <div className={'results ' + searchOptions.thumbnailSize}> + {order.map(id => <UploadItem key={id} data={lookup[id]} />)} + </div> + } + </div> + <Loader /> + </section> + ) + } + if (!lookup || !order.length) { + return ( + <section> + <UploadIndexOptions /> + <div className="row"> + <UploadMenu uploadActions={uploadActions} /> + <p className='gray'> + {"No uploads"} + </p> + </div> + </section> + ) + } + return ( + <section> + <UploadIndexOptions /> + <div className="row"> + <UploadMenu uploadActions={uploadActions} /> + <div className={'results ' + searchOptions.thumbnailSize}> + {order.map(id => <UploadItem key={id} data={lookup[id]} />)} + </div> + </div> + {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>} + </section> + ) + } +} + +const UploadItem = ({ data }) => { + // console.log(data) + const imageUri = uploadUri(data) + return ( + <div className='cell'> + <div className='img'> + <Link to={"/upload/" + data.id + "/show/"}> + <img src={imageUri} alt={"Uploaded image"} /> + </Link> + </div> + <div className='meta center'> + <div className='row'> + <SmallMenuButton name="search" href={"/search/upload/" + data.id + "/"} /> + </div> + <div> + {data.username} + </div> + <div> + {formatDateTime(data.created_at)} + </div> + </div> + </div> + ) +} + diff --git a/animism-align/frontend/views/upload/components/upload.indexOptions.js b/animism-align/frontend/views/upload/components/upload.indexOptions.js new file mode 100644 index 0000000..22d3fdc --- /dev/null +++ b/animism-align/frontend/views/upload/components/upload.indexOptions.js @@ -0,0 +1,62 @@ +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 { Select, Checkbox } from '../../../common' + +const thumbnailOptions = [ + { name: 'th', label: 'Thumbnails', }, + { name: 'sm', label: 'Small', }, + { name: 'md', label: 'Medium', }, + { name: 'lg', label: 'Large', }, + { name: 'orig', label: 'Original', }, +] + +const sortOptions = [ + { name: 'id-asc', label: 'Most recent' }, + { name: 'id-desc', label: 'Oldest first' }, + { name: 'username-asc', label: 'Username (A-Z)' }, + { name: 'username-desc', label: 'Username (Z-A)' }, + // { name: '-asc', label: '' }, + // { name: '-desc', label: '' }, + // { name: '-asc', label: '' }, + // { name: '-desc', label: '' }, + // { name: '-asc', label: '' }, + // { name: '-desc', label: '' }, +] + +class IndexOptions extends Component { + render() { + const { options, searchOptions } = this.props + return ( + <div className='row menubar'> + <div /> + <Select + name={'sort'} + options={sortOptions} + selected={options.sort} + onChange={actions.upload.updateOption} + /> + <Select + name={'thumbnailSize'} + options={thumbnailOptions} + selected={searchOptions.thumbnailSize} + onChange={actions.search.updateOption} + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + options: state.upload.options, + searchOptions: state.search.options, +}) + +const mapDispatchToProps = dispatch => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(IndexOptions) diff --git a/animism-align/frontend/views/upload/components/upload.menu.js b/animism-align/frontend/views/upload/components/upload.menu.js new file mode 100644 index 0000000..37c7f0b --- /dev/null +++ b/animism-align/frontend/views/upload/components/upload.menu.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { MenuButton, FileInput } from '../../../common' + +import actions from '../../../actions' + +export default class UploadMenu extends Component { + render() { + return ( + <div className='menuButtons'> + <MenuButton name="upload"> + <FileInput onChange={this.props.uploadActions.upload} /> + </MenuButton> + </div> + ) + } +} diff --git a/animism-align/frontend/views/upload/components/upload.show.js b/animism-align/frontend/views/upload/components/upload.show.js new file mode 100644 index 0000000..6b36269 --- /dev/null +++ b/animism-align/frontend/views/upload/components/upload.show.js @@ -0,0 +1,70 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import actions from '../../../actions' +import { formatDate, formatTime, formatAge, uploadUri } from '../../../util' +import { history } from '../../../store' +import { Loader, MenuButton } from '../../../common' + +class UploadShow extends Component { + componentDidMount() { + actions.upload.show(this.props.match.params.id) + } + + componentDidUpdate(prevProps) { + if (prevProps.match.params.id !== this.props.match.params.id) { + actions.upload.show(this.props.match.params.id) + } + } + + handleDestroy() { + const { res: data } = this.props.upload.show + if (confirm("Really delete this upload?")) { + actions.upload.destroy(data).then(() => { + history.push('/upload/') + }) + } + } + + render() { + const { show, destroy } = this.props.upload + if (show.loading || destroy.loading) { + return <Loader /> + } + if (!show.loading && !show.res || show.not_found) { + return <div className='gray'>Upload {this.props.match.params.id} not found</div> + } + const { res: data } = show + return ( + <section className="row uploadShow"> + <div className="menuButtons"> + <MenuButton name="delete" onClick={this.handleDestroy.bind(this)} /> + <MenuButton name="search" href={'/search/upload/' + data.id + '/'} /> + </div> + <div> + <img src={uploadUri(data)} /> + <div className='byline'> + {'Uploaded by '} + {data.username} + {' on '} + {formatDate(data.created_at)} + {' at '} + {formatTime(data.created_at)} + {'. '} + </div> + </div> + </section> + ) + } +} + +const mapStateToProps = state => ({ + upload: state.upload, +}) + +const mapDispatchToProps = dispatch => ({ + // searchActions: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(UploadShow) diff --git a/animism-align/frontend/views/upload/upload.actions.js b/animism-align/frontend/views/upload/upload.actions.js new file mode 100644 index 0000000..ba2b14b --- /dev/null +++ b/animism-align/frontend/views/upload/upload.actions.js @@ -0,0 +1,17 @@ +import * as types from '../../types' +import { store, history } from '../../store' +import { api, post, pad, preloadImage } from '../../util' +import actions from '../../actions' +import { session } from '../../session' + +export const upload = file => dispatch => { + const formData = { + 'image': file, + 'username': session('username'), + } + // console.log(formData) + return actions.upload.upload(formData).then(data => { + // console.log(data.res) + return data.res + }) +} diff --git a/animism-align/frontend/views/upload/upload.container.js b/animism-align/frontend/views/upload/upload.container.js new file mode 100644 index 0000000..ea9df5a --- /dev/null +++ b/animism-align/frontend/views/upload/upload.container.js @@ -0,0 +1,37 @@ +import React, { Component } from 'react' +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' + +import UploadMenu from './components/upload.menu' +import UploadIndex from './components/upload.index' +import UploadShow from './components/upload.show' + +class Container extends Component { + render() { + return ( + <div className='row upload'> + <div> + <Route exact path='/upload/:id/show/' component={UploadShow} /> + <UploadIndex {...this.props} /> + </div> + </div> + ) + } +} + +const mapStateToProps = state => ({ + upload: state.upload, + searchOptions: state.search.options, +}) + +const mapDispatchToProps = dispatch => ({ + uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Container) diff --git a/animism-align/frontend/views/upload/upload.css b/animism-align/frontend/views/upload/upload.css new file mode 100644 index 0000000..8d77754 --- /dev/null +++ b/animism-align/frontend/views/upload/upload.css @@ -0,0 +1,10 @@ +.uploadShow img { + max-width: 30rem; + max-height: 20rem; +} +.upload { + height: 100%; +} +.upload > div:last-child { + flex: 1; +}
\ No newline at end of file diff --git a/animism-align/frontend/views/upload/upload.reducer.js b/animism-align/frontend/views/upload/upload.reducer.js new file mode 100644 index 0000000..98dc0a1 --- /dev/null +++ b/animism-align/frontend/views/upload/upload.reducer.js @@ -0,0 +1,21 @@ +import * as types from '../../types' +import { session, getDefault, getDefaultInt } from '../../session' + +import { crudState, crudReducer } from '../../api/crud.reducer' + +const initialState = crudState('upload', { + options: { + sort: getDefault('upload.sort', 'id-desc'), + } +}) + +const reducer = crudReducer('upload') + +export default function uploadReducer(state = initialState, action) { + // console.log(action.type, action) + state = reducer(state, action) + switch (action.type) { + default: + return state + } +} |
