diff options
Diffstat (limited to 'frontend/app/views/upload')
| -rw-r--r-- | frontend/app/views/upload/components/upload.form.js | 16 | ||||
| -rw-r--r-- | frontend/app/views/upload/components/upload.index.js | 104 | ||||
| -rw-r--r-- | frontend/app/views/upload/components/upload.indexOptions.js | 62 | ||||
| -rw-r--r-- | frontend/app/views/upload/components/upload.menu.js | 18 | ||||
| -rw-r--r-- | frontend/app/views/upload/components/upload.show.js | 70 | ||||
| -rw-r--r-- | frontend/app/views/upload/upload.actions.js | 14 | ||||
| -rw-r--r-- | frontend/app/views/upload/upload.container.js | 35 | ||||
| -rw-r--r-- | frontend/app/views/upload/upload.css | 10 | ||||
| -rw-r--r-- | frontend/app/views/upload/upload.reducer.js | 21 |
9 files changed, 350 insertions, 0 deletions
diff --git a/frontend/app/views/upload/components/upload.form.js b/frontend/app/views/upload/components/upload.form.js new file mode 100644 index 0000000..e35bfaa --- /dev/null +++ b/frontend/app/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 'app/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/frontend/app/views/upload/components/upload.index.js b/frontend/app/views/upload/components/upload.index.js new file mode 100644 index 0000000..00cedc2 --- /dev/null +++ b/frontend/app/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 'app/utils' +import { SmallMenuButton, Loader } from 'app/common' +import actions from 'app/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/frontend/app/views/upload/components/upload.indexOptions.js b/frontend/app/views/upload/components/upload.indexOptions.js new file mode 100644 index 0000000..df266ef --- /dev/null +++ b/frontend/app/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 'app/actions' + +import { Select, Checkbox } from 'app/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/frontend/app/views/upload/components/upload.menu.js b/frontend/app/views/upload/components/upload.menu.js new file mode 100644 index 0000000..485d06f --- /dev/null +++ b/frontend/app/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 'app/common' + +import actions from 'app/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/frontend/app/views/upload/components/upload.show.js b/frontend/app/views/upload/components/upload.show.js new file mode 100644 index 0000000..f63bc5f --- /dev/null +++ b/frontend/app/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 'app/actions' +import { formatDate, formatTime, formatAge, uploadUri } from 'app/utils' +import { history } from 'app/store' +import { Loader, MenuButton } from 'app/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/frontend/app/views/upload/upload.actions.js b/frontend/app/views/upload/upload.actions.js new file mode 100644 index 0000000..8739bf7 --- /dev/null +++ b/frontend/app/views/upload/upload.actions.js @@ -0,0 +1,14 @@ +import actions from 'app/actions' +import { session } from 'app/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/frontend/app/views/upload/upload.container.js b/frontend/app/views/upload/upload.container.js new file mode 100644 index 0000000..608f01a --- /dev/null +++ b/frontend/app/views/upload/upload.container.js @@ -0,0 +1,35 @@ +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 * as uploadActions from './upload.actions' + +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/frontend/app/views/upload/upload.css b/frontend/app/views/upload/upload.css new file mode 100644 index 0000000..8d77754 --- /dev/null +++ b/frontend/app/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/frontend/app/views/upload/upload.reducer.js b/frontend/app/views/upload/upload.reducer.js new file mode 100644 index 0000000..1f39f6e --- /dev/null +++ b/frontend/app/views/upload/upload.reducer.js @@ -0,0 +1,21 @@ +import * as types from 'app/types' +import { session, getDefault, getDefaultInt } from 'app/session' + +import { crudState, crudReducer } from 'app/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 + } +} |