diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2020-09-26 14:56:02 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2020-09-26 14:56:02 +0200 |
| commit | a17b76ac75f506f5da6fe8adf9c36632b60d4226 (patch) | |
| tree | abb0af0c4409b830dea2ef808c146223ee973933 /frontend/views/upload/components | |
| parent | 2231a6e1c05b07bb7ec5906716aedec93d02429c (diff) | |
refactor to use app-rooted js imports
Diffstat (limited to 'frontend/views/upload/components')
| -rw-r--r-- | frontend/views/upload/components/upload.form.js | 16 | ||||
| -rw-r--r-- | frontend/views/upload/components/upload.index.js | 104 | ||||
| -rw-r--r-- | frontend/views/upload/components/upload.indexOptions.js | 62 | ||||
| -rw-r--r-- | frontend/views/upload/components/upload.menu.js | 18 | ||||
| -rw-r--r-- | frontend/views/upload/components/upload.show.js | 70 |
5 files changed, 0 insertions, 270 deletions
diff --git a/frontend/views/upload/components/upload.form.js b/frontend/views/upload/components/upload.form.js deleted file mode 100644 index 2010088..0000000 --- a/frontend/views/upload/components/upload.form.js +++ /dev/null @@ -1,16 +0,0 @@ -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/frontend/views/upload/components/upload.index.js b/frontend/views/upload/components/upload.index.js deleted file mode 100644 index 6123001..0000000 --- a/frontend/views/upload/components/upload.index.js +++ /dev/null @@ -1,104 +0,0 @@ -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/frontend/views/upload/components/upload.indexOptions.js b/frontend/views/upload/components/upload.indexOptions.js deleted file mode 100644 index 22d3fdc..0000000 --- a/frontend/views/upload/components/upload.indexOptions.js +++ /dev/null @@ -1,62 +0,0 @@ -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/frontend/views/upload/components/upload.menu.js b/frontend/views/upload/components/upload.menu.js deleted file mode 100644 index 37c7f0b..0000000 --- a/frontend/views/upload/components/upload.menu.js +++ /dev/null @@ -1,18 +0,0 @@ -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/frontend/views/upload/components/upload.show.js b/frontend/views/upload/components/upload.show.js deleted file mode 100644 index 6b36269..0000000 --- a/frontend/views/upload/components/upload.show.js +++ /dev/null @@ -1,70 +0,0 @@ -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) |
