From 1cb0b54f7755851a6889c4f3676d5fd319f7e83b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 26 May 2015 10:41:41 +0200 Subject: [PATCH] Added PieceDetail boilerplate code --- js/actions/piece_actions.js | 23 +++++++++++ .../ascribe_piece_detail/piece_detail.js | 18 +++++++++ .../ascribe_table/table_item_subtable.js | 30 +++++++++++++- .../table_item_subtable_button.js | 5 ++- js/components/piece.js | 40 +++++++++++++++++-- js/components/piece_list.js | 2 +- js/fetchers/piece_fetcher.js | 22 ++++++++++ js/routes.js | 4 +- js/stores/piece_store.js | 16 ++++++++ 9 files changed, 151 insertions(+), 9 deletions(-) create mode 100644 js/actions/piece_actions.js create mode 100644 js/components/ascribe_piece_detail/piece_detail.js create mode 100644 js/fetchers/piece_fetcher.js create mode 100644 js/stores/piece_store.js diff --git a/js/actions/piece_actions.js b/js/actions/piece_actions.js new file mode 100644 index 00000000..42cf8e65 --- /dev/null +++ b/js/actions/piece_actions.js @@ -0,0 +1,23 @@ +import alt from '../alt'; +import PieceFetcher from '../fetchers/piece_fetcher'; + + +class PieceActions { + constructor() { + this.generateActions( + 'updatePiece' + ); + } + + fetchOne(pieceId) { + PieceFetcher.fetchOne(pieceId) + .then((res) => { + this.actions.updatePiece(res.piece); + }) + .catch((err) => { + console.log(err); + }); + } +}; + +export default alt.createActions(PieceActions); diff --git a/js/components/ascribe_piece_detail/piece_detail.js b/js/components/ascribe_piece_detail/piece_detail.js new file mode 100644 index 00000000..5b0b465a --- /dev/null +++ b/js/components/ascribe_piece_detail/piece_detail.js @@ -0,0 +1,18 @@ +import React from 'react'; + +/** + * This is the component that implements display-specific functionality + */ +let PieceDetail = React.createClass({ + propTypes: { + title: React.PropTypes.string.isRequired + }, + + render() { + return ( +

Title: {this.props.title}

+ ); + } +}); + +export default PieceDetail; \ No newline at end of file diff --git a/js/components/ascribe_table/table_item_subtable.js b/js/components/ascribe_table/table_item_subtable.js index b2ca4349..942e72c4 100644 --- a/js/components/ascribe_table/table_item_subtable.js +++ b/js/components/ascribe_table/table_item_subtable.js @@ -6,6 +6,7 @@ import TableColumnContentModel from '../../models/table_column_content_model'; import GeneralUtils from '../../utils/general_utils'; import TableItemSubtableButton from './table_item_subtable_button'; +import Table from './table'; let TableItemSubtable = React.createClass({ @@ -29,8 +30,12 @@ let TableItemSubtable = React.createClass({ }, loadEditionList() { - console.log(this.props); - //this.props.actions.actions.fetchEditionList(); + this.props.actions.fetchEditionList(this.props.columnContent.id); + + this.setState({ + 'open': true, + 'editionList': this.props.store.getState() + }); }, calcColumnClasses(list, i) { @@ -63,6 +68,26 @@ let TableItemSubtable = React.createClass({ }); }; + + let renderEditionListTable = () => { + + // let columnList = [ + // new TableColumnContentModel('thumbnail', '', TableItemImg, 2, false), + // new TableColumnContentModel('artist_name', 'Artist', TableItemText, 4, true), + // new TableColumnContentModel('title', 'Title', TableItemText, 4, true) + // ]; + + if(this.state.open) { + return ( +
+
+
+
+
+ ); + } + }; + return (
@@ -72,6 +97,7 @@ let TableItemSubtable = React.createClass({
+ {renderEditionListTable()} ); } diff --git a/js/components/ascribe_table/table_item_subtable_button.js b/js/components/ascribe_table/table_item_subtable_button.js index c2579ea8..7638dc13 100644 --- a/js/components/ascribe_table/table_item_subtable_button.js +++ b/js/components/ascribe_table/table_item_subtable_button.js @@ -3,13 +3,14 @@ import React from 'react'; let TableItemSubtableButton = React.createClass({ propTypes: { - content: React.PropTypes.string.isRequired + content: React.PropTypes.string.isRequired, + onClick: React.PropTypes.func.isRequired }, render() { return ( - diff --git a/js/components/piece.js b/js/components/piece.js index bd268115..ab3601ad 100644 --- a/js/components/piece.js +++ b/js/components/piece.js @@ -1,11 +1,45 @@ import React from 'react'; +import PieceActions from '../actions/piece_actions'; +import PieceStore from '../stores/piece_store'; +import PieceDetail from './ascribe_piece_detail/piece_detail'; + +/** + * This is the component that implements resource/data specific functionality + */ let Piece = React.createClass({ + + getInitialState() { + return PieceStore.getState(); + }, + + onChange(state) { + this.setState(state); + }, + + componentDidMount() { + PieceActions.fetchOne(this.props.params.pieceId); + PieceStore.listen(this.onChange); + }, + + componentDidUnmount() { + PieceStore.unlisten(this.onChange); + }, + render() { - return ( -

this.props.piece.title

- ); + + if('title' in this.state.piece) { + return ( + + ); + } else { + return ( +

Loading

+ ); + } + + } }); diff --git a/js/components/piece_list.js b/js/components/piece_list.js index f1e2b558..3806b0eb 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -16,7 +16,7 @@ import TableItemSubtableButton from './ascribe_table/table_item_subtable_button' import TableColumnContentModel from '../models/table_column_content_model'; -import Pagination from './ascribe_pagination/pagination' +import Pagination from './ascribe_pagination/pagination'; let PieceList = React.createClass({ diff --git a/js/fetchers/piece_fetcher.js b/js/fetchers/piece_fetcher.js new file mode 100644 index 00000000..4aaecda5 --- /dev/null +++ b/js/fetchers/piece_fetcher.js @@ -0,0 +1,22 @@ +import fetch from 'isomorphic-fetch'; + +import AppConstants from '../constants/application_constants'; +import FetchApiUtils from '../utils/fetch_api_utils'; + + +let PieceFetcher = { + /** + * Fetch one user from the API. + * If no arg is supplied, load the current user + * + */ + fetchOne(pieceId) { + return fetch(AppConstants.baseUrl + 'pieces/' + pieceId + '/', { + headers: { + 'Authorization': 'Basic ' + AppConstants.debugCredentialBase64 + } + }).then((res) => res.json()); + } +}; + +export default PieceFetcher; diff --git a/js/routes.js b/js/routes.js index b9dd01c8..024cd427 100644 --- a/js/routes.js +++ b/js/routes.js @@ -11,7 +11,9 @@ let Route = Router.Route; let routes = ( - + + + ); diff --git a/js/stores/piece_store.js b/js/stores/piece_store.js new file mode 100644 index 00000000..5bdb8fef --- /dev/null +++ b/js/stores/piece_store.js @@ -0,0 +1,16 @@ +import alt from '../alt'; +import PieceAction from '../actions/piece_actions'; + + +class PieceStore { + constructor() { + this.piece = {} + this.bindActions(PieceAction); + } + + onUpdatePiece(piece) { + this.piece = piece; + } +}; + +export default alt.createStore(PieceStore);