diff options
Diffstat (limited to 'animism-align/frontend/views/media/containers')
3 files changed, 214 insertions, 0 deletions
diff --git a/animism-align/frontend/views/media/containers/media.edit.js b/animism-align/frontend/views/media/containers/media.edit.js new file mode 100644 index 0000000..8c353d9 --- /dev/null +++ b/animism-align/frontend/views/media/containers/media.edit.js @@ -0,0 +1,57 @@ +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 MediaForm from '../components/media.form' +import MediaMenu from '../components/media.menu' + +class MediaEdit extends Component { + componentDidMount() { + console.log(this.props.match.params.id) + actions.media.show(this.props.match.params.id) + } + + handleSubmit(data) { + actions.media.update(data) + .then(response => { + // response + console.log(response) + history.push('/media/') + }) + } + + render() { + const { show } = this.props.media + if (show.loading || !show.res) { + return ( + <div className='form'> + <Loader /> + </div> + ) + } + return ( + <div className='row formContainer'> + <MediaMenu /> + <MediaForm + data={show.res} + onSubmit={this.handleSubmit.bind(this)} + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + media: state.media, +}) + +const mapDispatchToProps = dispatch => ({ + // searchActions: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(MediaEdit) diff --git a/animism-align/frontend/views/media/containers/media.index.js b/animism-align/frontend/views/media/containers/media.index.js new file mode 100644 index 0000000..09ef6ca --- /dev/null +++ b/animism-align/frontend/views/media/containers/media.index.js @@ -0,0 +1,109 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { formatDateTime } from '../../../util' +import { MenuButton, SmallMenuButton, Loader } from '../../../common' +import actions from '../../../actions' + +import MediaIndexOptions from '../components/media.indexOptions' +import MediaMenu from '../components/media.menu' + +// const { result, collectionLookup } = this.props + +class MediaIndex extends Component { + componentDidMount() { + this.fetch(false) + } + + componentDidUpdate(prevProps) { + if (this.props.media.options.sort !== prevProps.media.options.sort) { + this.fetch(false) + } + } + + fetch(load_more) { + const { options, index } = this.props.media + const { order: index_order } = index + const [ sort, order ] = options.sort.split('-') + actions.media.index({ + sort, order, limit: 5000, // offset: load_more ? index_order.length : 0, + }, load_more) + } + + render() { + const { mediaActions } = this.props + const { options } = this.props.media + const { loading, lookup, order } = this.props.media.index + if (loading) { + return ( + <section> + <MediaIndexOptions /> + <div className="row"> + {order && !!order.length && + <div className={'results ' + options.thumbnailSize}> + {order.map(id => <MediaItem key={id} data={lookup[id]} />)} + </div> + } + </div> + <Loader /> + </section> + ) + } + if (!lookup || !order.length) { + return ( + <section> + <MediaIndexOptions /> + <div className="row"> + <MediaMenu /> + <p className='gray'> + {"No media"} + </p> + </div> + </section> + ) + } + return ( + <section> + <MediaIndexOptions /> + <div className="row"> + <MediaMenu /> + <div className={'results ' + options.thumbnailSize}> + {order.map(id => <MediaItem key={id} data={lookup[id]} />)} + </div> + </div> + {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>} + </section> + ) + } +} + +const MediaItem = ({ data }) => { + // console.log(data) + return ( + <div className='cell'> + <div className='img'> + <Link to={"/media/" + data.id + "/show/"}> + <img src={data.thumb_url} alt={data.title} /> + </Link> + </div> + <div className='meta center'> + <div> + {data.title}<br /> + {data.author} + </div> + </div> + </div> + ) +} + +const mapStateToProps = state => ({ + media: state.media, +}) + +const mapDispatchToProps = dispatch => ({ + // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(MediaIndex) diff --git a/animism-align/frontend/views/media/containers/media.new.js b/animism-align/frontend/views/media/containers/media.new.js new file mode 100644 index 0000000..88bf467 --- /dev/null +++ b/animism-align/frontend/views/media/containers/media.new.js @@ -0,0 +1,48 @@ +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 MediaForm from '../components/media.form' +import MediaMenu from '../components/media.menu' + +class MediaNew extends Component { + handleSubmit(data) { + console.log(data) + actions.media.create(data) + .then(res => { + console.log(res) + if (res.res && res.res.id) { + history.push('/media/') + } + }) + .catch(err => { + console.error('error') + }) + } + + render() { + return ( + <div className='row formContainer'> + <MediaMenu /> + <MediaForm + isNew + data={{}} + onSubmit={this.handleSubmit.bind(this)} + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + media: state.media, +}) + +const mapDispatchToProps = dispatch => ({ + // searchActions: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(MediaNew) |