diff options
Diffstat (limited to 'animism-align/frontend/views/upload')
9 files changed, 0 insertions, 520 deletions
diff --git a/animism-align/frontend/views/upload/components/upload.form.js b/animism-align/frontend/views/upload/components/upload.form.js deleted file mode 100644 index 2010088..0000000 --- a/animism-align/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/animism-align/frontend/views/upload/components/upload.index.js b/animism-align/frontend/views/upload/components/upload.index.js deleted file mode 100644 index 3a7ae4b..0000000 --- a/animism-align/frontend/views/upload/components/upload.index.js +++ /dev/null @@ -1,98 +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 { 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 ' + options.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 ' + options.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={data.url} alt={"Uploaded image"} /> - </Link> - </div> - <div className='meta center'> - <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 deleted file mode 100644 index 774bf22..0000000 --- a/animism-align/frontend/views/upload/components/upload.indexOptions.js +++ /dev/null @@ -1,61 +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 } = 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={options.thumbnailSize} - onChange={actions.upload.updateOption} - /> - </div> - ) - } -} - -const mapStateToProps = state => ({ - options: state.upload.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 deleted file mode 100644 index 37c7f0b..0000000 --- a/animism-align/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/animism-align/frontend/views/upload/components/upload.show.js b/animism-align/frontend/views/upload/components/upload.show.js deleted file mode 100644 index 352caf3..0000000 --- a/animism-align/frontend/views/upload/components/upload.show.js +++ /dev/null @@ -1,69 +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)} /> - </div> - <div> - <img src={data.url} /> - <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 deleted file mode 100644 index c5d12e3..0000000 --- a/animism-align/frontend/views/upload/upload.actions.js +++ /dev/null @@ -1,18 +0,0 @@ -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 = (image, tag='upload') => dispatch => { - const formData = { - image, - tag, - username: 'animism', // 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 deleted file mode 100644 index 0ad76c9..0000000 --- a/animism-align/frontend/views/upload/upload.container.js +++ /dev/null @@ -1,36 +0,0 @@ -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, -}) - -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 deleted file mode 100644 index 28ce33d..0000000 --- a/animism-align/frontend/views/upload/upload.css +++ /dev/null @@ -1,182 +0,0 @@ -.uploadShow { - margin-top: 1rem; -} -.uploadShow img { - max-width: 30rem; - max-height: 20rem; -} -.upload { - height: 100%; -} -.upload > div:last-child { - flex: 1; - width: 100%; -} - -/* results */ - -.resultsContainer { -} -.results { - display: flex; - flex-flow: row wrap; - justify-content: flex-start; - align-items: flex-end; -} -.results .result { - display: inline-block; - margin-right: 1.125rem; - margin-bottom: 1.125rem; -} -.result > a { - display: block; -} -.result > a > div { - position: relative; -} -.result img { - max-width: 100%; - display: block; - cursor: pointer; -} -.result > a { - border: 2px solid transparent; -} -.results .active img, -.desktop .result > a:hover { - border-color: #11f; -} -.results.th .result { - max-width: 10rem; -} -.results.sm .result { - max-width: 20rem; -} -.results.md .result { - max-width: 40rem; -} -.results.lg .result { - max-width: 80rem; -} -.results.orig .result { - max-width: 100%; -} -.results.th img { - max-height: 120px; -} -.results.sm img { - max-height: 160px; -} -.results.md img { - max-height: 480px; -} -.results.lg img { - max-height: 960px; -} -.results.orig img { - max-width: none; - max-height: none; -} -.results .img { - width: 100%; -} -.results .img > a { - display: inline-block; - position: relative; -} -.results .meta { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: baseline; - font-size: 0.75rem; - color: #888; - padding: 0.125rem; -} -.results .meta.center, -.row.center { - align-items: center; -} -.results .meta > div { - overflow: hidden; - max-width: 75%; - text-overflow: ellipsis; - white-space: nowrap; -} -.results .meta > span { - padding-right: 0.125rem; -} -.results .meta .buttons { -} -.score.good { - color: #11f; - font-weight: bold; -} -.score.ok { - color: #44d; - font-weight: bold; -} -.score.poor { - color: #66b; -} -.score { - color: #888; -} -.resultGroup { - display: flex; - flex-direction: row; - flex-wrap: wrap; - position: relative; - border: 2px solid #888; - max-width: 20rem; - margin-right: 1.5rem; - margin-bottom: 1.5rem; - background: #fff; - box-shadow: 0 2px 4px #888; -} -.resultGroup .sha256 { - position: absolute; - background: white; - padding: 0.25rem 0.25rem 0rem 0.25rem; - left: 0.25rem; - top: -0.75rem; - font-size: 0.75rem; - color: #333; - text-transform: uppercase; - max-width: 95%; - overflow: hidden; - text-overflow: ellipsis; -} -.results.grouped { - background: #fff; -} -.results.grouped.sm, -.results.grouped.md, -.results.grouped.lg, -.results.grouped.orig { - flex-flow: column nowrap; -} -.results.th .resultGroup { - max-width: 33.5rem; -} -.results.sm .resultGroup { - max-width: 56rem; -} -.results.md .resultGroup { - max-width: 79rem; -} -.results.lg .resultGroup { - max-width: 100%; -} -.results.orig .resultGroup { - max-width: 100%; -} -.results .resultGroup .result { - margin: 0.5rem; -} -.loadMore { - width: 100%; -} -.loadMore button { - width: 100%; -} diff --git a/animism-align/frontend/views/upload/upload.reducer.js b/animism-align/frontend/views/upload/upload.reducer.js deleted file mode 100644 index db12819..0000000 --- a/animism-align/frontend/views/upload/upload.reducer.js +++ /dev/null @@ -1,22 +0,0 @@ -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'), - thumbnailSize: getDefault('upload.thumbnailSize', 'small'), - } -}) - -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 - } -} |