From 97c298e304d26af80115fac043ac6d1c0f582a33 Mon Sep 17 00:00:00 2001 From: diminator Date: Wed, 12 Aug 2015 16:47:16 +0200 Subject: [PATCH] piece navigation prev next WIP --- .../ascribe_detail/detail_property.js | 2 +- .../ascribe_detail/piece_container.js | 61 ++++++++++++++----- 2 files changed, 48 insertions(+), 15 deletions(-) diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js index 991226f9..828ed81a 100644 --- a/js/components/ascribe_detail/detail_property.js +++ b/js/components/ascribe_detail/detail_property.js @@ -17,7 +17,7 @@ let DetailProperty = React.createClass({ getDefaultProps() { return { - separator: ':', + separator: '', labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xs-height col-bottom ascribe-detail-property-label', valueClassName: 'col-xs-9 col-sm-9 col-md-10 col-lg-10 col-xs-height col-bottom ascribe-detail-property-value' }; diff --git a/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js b/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js index b552f073..069548ce 100644 --- a/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js +++ b/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import Router from 'react-router'; import StarRating from 'react-star-rating'; @@ -32,17 +33,23 @@ import DetailProperty from '../../../../ascribe_detail/detail_property'; import ApiUrls from '../../../../../constants/api_urls'; import { mergeOptions } from '../../../../../utils/general_utils'; import { getLangText } from '../../../../../utils/lang_utils'; + +let Link = Router.Link; + /** * This is the component that implements resource/data specific functionality */ let PieceContainer = React.createClass({ getInitialState() { - return PieceStore.getState(); + return mergeOptions( + PieceStore.getState(), + UserStore.getState() + ); }, componentDidMount() { PieceStore.listen(this.onChange); - PieceActions.fetchOne(this.props.params.pieceId); + UserStore.listen(this.onChange); }, componentWillUnmount() { @@ -52,6 +59,16 @@ let PieceContainer = React.createClass({ // the piece detail a second time PieceActions.updatePiece({}); PieceStore.unlisten(this.onChange); + UserStore.unlisten(this.onChange); + }, + + componentDidUpdate() { + console.log('call me ') + PieceActions.fetchOne(this.props.params.pieceId); + }, + + shouldComponentUpdate(nextProps, nextState) { + return this.props.params.pieceId !== nextProps.params.pieceId }, onChange(state) { @@ -63,6 +80,7 @@ let PieceContainer = React.createClass({ }, render() { + console.log(this.props) if('title' in this.state.piece) { return ( - +

{this.state.piece.title}


@@ -79,7 +99,9 @@ let PieceContainer = React.createClass({ } subheader={ - + }>
@@ -96,13 +118,26 @@ let PieceContainer = React.createClass({ let NavigationHeader = React.createClass({ propTypes: { - piece: React.PropTypes.object + piece: React.PropTypes.object, + currentUser: React.PropTypes.object }, render() { return ( -
- navigation +
+
+ + + + + + Next + + + +
); } @@ -111,14 +146,14 @@ let NavigationHeader = React.createClass({ let PrizePieceRatings = React.createClass({ propTypes: { - piece: React.PropTypes.object + piece: React.PropTypes.object, + currentUser: React.PropTypes.object }, getInitialState() { return mergeOptions( PieceListStore.getState(), - PrizeRatingStore.getState(), - UserStore.getState() + PrizeRatingStore.getState() ); }, @@ -126,7 +161,6 @@ let PrizePieceRatings = React.createClass({ PrizeRatingStore.listen(this.onChange); PrizeRatingActions.fetchOne(this.props.piece.id); PieceListStore.listen(this.onChange); - UserStore.listen(this.onChange); }, componentWillUnmount() { @@ -137,7 +171,6 @@ let PrizePieceRatings = React.createClass({ PrizeRatingActions.updateRating({}); PrizeRatingStore.unlisten(this.onChange); PieceListStore.unlisten(this.onChange); - UserStore.unlisten(this.onChange); }, onChange(state) { @@ -160,7 +193,7 @@ let PrizePieceRatings = React.createClass({ ); }, render(){ - if (this.state.currentUser && this.state.currentUser.is_jury) { + if (this.props.currentUser && this.props.currentUser.is_jury) { return (
+ currentUser={this.props.currentUser}/>
); } return null;