diff options
Diffstat (limited to 'animism-align/frontend/app')
14 files changed, 460 insertions, 1 deletions
diff --git a/animism-align/frontend/app/actions.js b/animism-align/frontend/app/actions.js index 270c9a7..54fc89f 100644 --- a/animism-align/frontend/app/actions.js +++ b/animism-align/frontend/app/actions.js @@ -14,6 +14,7 @@ const crudActions = [ 'annotation', 'upload', 'media', + 'episode', ].reduce((a,b) => (a[b] = crud_actions(b)) && a, {}) export default diff --git a/animism-align/frontend/app/store.js b/animism-align/frontend/app/store.js index ea0e2fa..cdbd2e2 100644 --- a/animism-align/frontend/app/store.js +++ b/animism-align/frontend/app/store.js @@ -13,6 +13,7 @@ import annotationReducer from 'app/views/annotation/annotation.reducer' import siteReducer from 'app/views/site/site.reducer' import mediaReducer from 'app/views/media/media.reducer' import viewerReducer from 'app/views/viewer/viewer.reducer' +import episodeReducer from 'app/views/episode/episode.reducer' const createRootReducer = history => ( combineReducers({ @@ -26,6 +27,7 @@ const createRootReducer = history => ( annotation: annotationReducer, media: mediaReducer, viewer: viewerReducer, + episode: episodeReducer, }) ) diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js index 2088128..5aae947 100644 --- a/animism-align/frontend/app/types.js +++ b/animism-align/frontend/app/types.js @@ -7,6 +7,7 @@ export const media = crud_type('media', []) export const peaks = crud_type('peaks', []) export const text = crud_type('text', []) export const annotation = crud_type('annotation', []) +export const episode = crud_type('episode', []) export const paragraph = crud_type('paragraph', [ 'update_transcript', ]) diff --git a/animism-align/frontend/app/views/episode/components/episode.form.js b/animism-align/frontend/app/views/episode/components/episode.form.js new file mode 100644 index 0000000..81446f1 --- /dev/null +++ b/animism-align/frontend/app/views/episode/components/episode.form.js @@ -0,0 +1,161 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { capitalize } from 'app/utils' + +import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common' + +const newEpisode = () => ({ + title: '', + settings: {}, +}) + +export default class EpisodeForm extends Component { + state = { + title: "", + submitTitle: "", + data: { ...newEpisode() }, + errorFields: new Set([]), + } + + constructor(props) { + super(props) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.handleSelect = this.handleSelect.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSettingsChangeEvent = this.handleSettingsChangeEvent.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + + componentDidMount() { + const { data, isNew } = this.props + const title = isNew ? 'New episode' : 'Editing ' + data.title + const submitTitle = isNew ? "Add Episode" : "Save Changes" + this.setState({ + title, + submitTitle, + errorFields: new Set([]), + data: { + ...newEpisode(), + ...data + }, + }) + window.addEventListener('keydown', this.handleKeyDown) + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.handleKeyDown) + } + + handleKeyDown(e) { + // console.log(e, e.keyCode) + if ((e.ctrlKey || e.metaKey) && e.keyCode === 83) { + if (e) { + e.preventDefault() + } + this.handleSubmit() + } + } + + handleChange(e) { + const { name, value } = e.target + this.handleSelect(name, value) + } + + handleSelect(name, value) { + const { errorFields } = this.state + if (errorFields.has(name)) { + errorFields.delete(name) + } + this.setState({ + errorFields, + data: { + ...this.state.data, + [name]: value, + } + }) + } + + handleSettingsChangeEvent(e) { + const { name, value } = e.target + this.handleSettingsChange(name, value) + } + + handleSettingsChange(name, value) { + console.log(name, value) + if (name !== 'multiple') { + value = { [name]: value } + } + this.setState({ + data: { + ...this.state.data, + settings: { + ...this.state.data.settings, + ...value, + } + } + }) + } + + handleSubmit(e) { + if (e) { + e.preventDefault() + } + const { isNew, onSubmit } = this.props + const { data } = this.state + const requiredKeys = "title episode_number".split(" ") + const validKeys = "title settings".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) { + // + } else { + validData.id = data.id + } + console.log('submit', validData) + onSubmit(validData) + } + } + + render() { + const { isNew } = this.props + const { title, submitTitle, errorFields, data } = this.state + // console.log(data) + return ( + <div className='form'> + <h1>{title}</h1> + <form onSubmit={this.handleSubmit}> + <TextInput + title="Title" + name="title" + required + data={data} + onChange={this.handleChange} + autoComplete="off" + /> + <Checkbox + label="Episode is live" + name="is_live" + checked={data.settings.is_live} + onChange={this.handleSettingsChange} + /> + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit} + /> + {!!errorFields.size && + <label> + <span></span> + <span>Please complete the required fields</span> + </label> + } + </form> + </div> + ) + } +} diff --git a/animism-align/frontend/app/views/episode/components/episode.menu.js b/animism-align/frontend/app/views/episode/components/episode.menu.js new file mode 100644 index 0000000..445084b --- /dev/null +++ b/animism-align/frontend/app/views/episode/components/episode.menu.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' +import { MenuButton } from 'app/common' + +const mapStateToProps = state => ({ + episode: state.episode, +}) + +export default class EpisodeMenu extends Component { + render() { + return ( + <div className='menuButtons'> + <Route exact path='/episode/:id/show/' component={EpisodeShowMenu} /> + <Route exact path='/episode/:id/edit/' component={EpisodeEditMenu} /> + <Route exact path='/episode/new/' component={EpisodeNewMenu} /> + <Route exact path='/episode/' component={EpisodeIndexMenu} /> + </div> + ) + } +} + +const EpisodeIndexMenu = () => ([ + <MenuButton key='new' name="new" href="/episode/new/" />, +]) + +const EpisodeShowMenu = connect(mapStateToProps)((props) => ([ + <MenuButton key='back' name="back" href="/episode/" />, + <MenuButton key='edit' name="edit" href={"/episode/" + props.match.params.id + "/edit/"} />, + <MenuButton key='delete' name="delete" onClick={() => { + const { res: episode } = props.episode.show + if (confirm("Really delete this episode?")) { + actions.episode.destroy(episode).then(() => { + history.push('/episode/') + }) + } + }} />, +])) + +const EpisodeNewMenu = (props) => ([ + <MenuButton key='back' name="back" href="/episode/" />, +]) + +const EpisodeEditMenu = connect(mapStateToProps)((props) => ([ + <MenuButton key='back' name="back" href="/episode/" />, + <MenuButton key='delete' name="delete" onClick={() => { + const { res: episode } = props.episode.show + if (confirm("Really delete this episode?")) { + actions.episode.destroy(episode).then(() => { + history.push('/episode/') + }) + } + }} />, +])) diff --git a/animism-align/frontend/app/views/episode/containers/episode.edit.js b/animism-align/frontend/app/views/episode/containers/episode.edit.js new file mode 100644 index 0000000..4d7e270 --- /dev/null +++ b/animism-align/frontend/app/views/episode/containers/episode.edit.js @@ -0,0 +1,52 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' + +import { Loader } from 'app/common' + +import EpisodeForm from '../components/episode.form' +import EpisodeMenu from '../components/episode.menu' + +class EpisodeEdit extends Component { + componentDidMount() { + console.log(this.props.match.params.id) + actions.episode.show(this.props.match.params.id) + } + + handleSubmit(data) { + actions.episode.update(data) + .then(response => { + // response + console.log(response) + history.push('/episode/') + }) + } + + render() { + const { show } = this.props.episode + if (show.loading || !show.res) { + return ( + <div className='form'> + <Loader /> + </div> + ) + } + return ( + <div className='row formContainer'> + <EpisodeMenu episodeActions={this.props.episodeActions} /> + <EpisodeForm + data={show.res} + onSubmit={this.handleSubmit.bind(this)} + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + episode: state.episode, +}) + +export default connect(mapStateToProps)(EpisodeEdit) diff --git a/animism-align/frontend/app/views/episode/containers/episode.index.js b/animism-align/frontend/app/views/episode/containers/episode.index.js new file mode 100644 index 0000000..0cf3b6c --- /dev/null +++ b/animism-align/frontend/app/views/episode/containers/episode.index.js @@ -0,0 +1,71 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { Loader } from 'app/common' +import actions from 'app/actions' + +import EpisodeMenu from '../components/episode.menu' + +// const { result, collectionLookup } = this.props + +class EpisodeIndex extends Component { + componentDidMount() { + this.fetch() + } + + fetch() { + actions.episode.index() + } + + render() { + const { loading, lookup, order } = this.props.episode.index + if (loading) { + return ( + <section> + <Loader /> + </section> + ) + } + if (!lookup || !order.length) { + return ( + <section> + <div className="row episode-index"> + <EpisodeMenu /> + <div> + <h1>Episodes</h1> + <p className='gray'> + {"No episodes"} + </p> + </div> + </div> + </section> + ) + } + return ( + <section> + <div className="row episode-index"> + <EpisodeMenu /> + <div className="episode-list"> + <h1>Episodes</h1> + {order.map(id => ( + <div key={id}> + {'Episode '}{lookup[id].episode_number}{': '} + <Link to={"/episode/" + id + "/edit/"}> + lookup[id].title + </Link> + </div> + ))} + </div> + </div> + {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>} + </section> + ) + } +} + +const mapStateToProps = state => ({ + episode: state.episode, +}) + +export default connect(mapStateToProps)(EpisodeIndex) diff --git a/animism-align/frontend/app/views/episode/containers/episode.new.js b/animism-align/frontend/app/views/episode/containers/episode.new.js new file mode 100644 index 0000000..42e9837 --- /dev/null +++ b/animism-align/frontend/app/views/episode/containers/episode.new.js @@ -0,0 +1,62 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' + +import EpisodeForm from '../components/episode.form' +import EpisodeMenu from '../components/episode.menu' + +class EpisodeNew extends Component { + state = { + loading: true, + initialData: {}, + } + + componentDidMount() { + this.setState({ loading: false }) + } + + handleSubmit(data) { + console.log(data) + actions.episode.create(data) + .then(res => { + console.log(res) + if (res.res && res.res.id) { + history.push('/episode/') + } + }) + .catch(err => { + console.error('error') + }) + } + + render() { + if (this.state.loading) { + return ( + <div className='row formContainer' /> + ) + } + return ( + <div className='row formContainer'> + <EpisodeMenu /> + <EpisodeForm + isNew + data={this.state.initialData} + onSubmit={this.handleSubmit.bind(this)} + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + episode: state.episode, +}) + +const mapDispatchToProps = dispatch => ({ + // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(EpisodeNew) diff --git a/animism-align/frontend/app/views/episode/episode.container.js b/animism-align/frontend/app/views/episode/episode.container.js new file mode 100644 index 0000000..62363ec --- /dev/null +++ b/animism-align/frontend/app/views/episode/episode.container.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { connect } from 'react-redux' + +import './episode.css' + +import EpisodeIndex from './containers/episode.index' +import EpisodeNew from './containers/episode.new' +import EpisodeEdit from './containers/episode.edit' + +class Container extends Component { + render() { + return ( + <div className='episodeContainer'> + <Route exact path='/episode/:id/edit/' component={EpisodeEdit} /> + <Route exact path='/episode/new/' component={EpisodeNew} /> + <Route exact path='/episode/' component={EpisodeIndex} /> + </div> + ) + } +} +const mapStateToProps = state => ({ + episode: state.episode, +}) + +export default connect(mapStateToProps)(Container) diff --git a/animism-align/frontend/app/views/episode/episode.css b/animism-align/frontend/app/views/episode/episode.css new file mode 100644 index 0000000..2493315 --- /dev/null +++ b/animism-align/frontend/app/views/episode/episode.css @@ -0,0 +1,6 @@ +.episodeContainer { +} +.episode-index { + margin-top: 1rem; +} + diff --git a/animism-align/frontend/app/views/episode/episode.reducer.js b/animism-align/frontend/app/views/episode/episode.reducer.js new file mode 100644 index 0000000..4c74218 --- /dev/null +++ b/animism-align/frontend/app/views/episode/episode.reducer.js @@ -0,0 +1,18 @@ +// import * as types from 'app/types' + +import { crudState, crudReducer } from 'app/api/crud.reducer' + +const initialState = crudState('episode', { + options: {}, +}) + +const reducer = crudReducer('episode') + +export default function episodeReducer(state = initialState, action) { + // console.log(action.type, action) + state = reducer(state, action) + switch (action.type) { + default: + return state + } +} diff --git a/animism-align/frontend/app/views/index.js b/animism-align/frontend/app/views/index.js index b561bb5..5cfd631 100644 --- a/animism-align/frontend/app/views/index.js +++ b/animism-align/frontend/app/views/index.js @@ -3,3 +3,4 @@ export { default as paragraph } from './paragraph/paragraph.container' export { default as upload } from './upload/upload.container' export { default as media } from './media/media.container' export { default as viewer } from './viewer/viewer.container' +export { default as episode } from './episode/episode.container' diff --git a/animism-align/frontend/app/views/media/media.actions.js b/animism-align/frontend/app/views/media/media.actions.js index a6d9bbd..9919e46 100644 --- a/animism-align/frontend/app/views/media/media.actions.js +++ b/animism-align/frontend/app/views/media/media.actions.js @@ -1,5 +1,5 @@ import * as types from 'app/types' -import { capitalize, api } from 'app/utils' +import { api } from 'app/utils' export const getVimeoMetadata = url => { return api(() => {}, types.vimeo, 'vimeo', 'https://vimeo.com/api/oembed.json', { url }) diff --git a/animism-align/frontend/app/views/nav/header.component.js b/animism-align/frontend/app/views/nav/header.component.js index af90e54..0779fd5 100644 --- a/animism-align/frontend/app/views/nav/header.component.js +++ b/animism-align/frontend/app/views/nav/header.component.js @@ -18,6 +18,7 @@ function Header(props) { <Link to="/align">Timeline</Link> <Link to="/paragraph">Transcript</Link> <Link to="/media">Media</Link> + <Link to="/episode">Episode</Link> <Link to="/viewer">Viewer</Link> </div> </header> |