From bfaf4886a49d13e803eaf7ac7da85541f58da9eb Mon Sep 17 00:00:00 2001 From: diminator Date: Tue, 1 Sep 2015 14:45:14 +0200 Subject: [PATCH] notifications unoptimized --- .../ascribe_detail/edition_container.js | 9 ++ js/components/global_action.js | 43 ++++++++ js/components/header.js | 98 ++++++++++++++++++- js/components/piece_list.js | 27 +---- js/stores/piece_list_store.js | 16 +-- sass/ascribe_global_action.scss | 64 ++---------- sass/ascribe_notification_list.scss | 65 ++++++++++++ sass/main.scss | 1 + 8 files changed, 226 insertions(+), 97 deletions(-) create mode 100644 js/components/global_action.js create mode 100644 sass/ascribe_notification_list.scss diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js index 15086434..62efa709 100644 --- a/js/components/ascribe_detail/edition_container.js +++ b/js/components/ascribe_detail/edition_container.js @@ -34,6 +34,15 @@ let EditionContainer = React.createClass({ EditionActions.fetchOne(this.props.params.editionId); }, + // This is done to update the container when the user clicks on the prev or next + // button to update the URL parameter (and therefore to switch pieces) + componentWillReceiveProps(nextProps) { + if(this.props.params.editionId !== nextProps.params.editionId) { + EditionActions.updateEdition({}); + EditionActions.fetchOne(nextProps.params.editionId); + } + }, + componentWillUnmount() { // Every time we're leaving the edition detail page, // just reset the edition that is saved in the edition store diff --git a/js/components/global_action.js b/js/components/global_action.js new file mode 100644 index 00000000..80df0c75 --- /dev/null +++ b/js/components/global_action.js @@ -0,0 +1,43 @@ +'use strict'; + +import React from 'react'; + +let GlobalAction = React.createClass({ + propTypes: { + requestActions: React.PropTypes.object + }, + + render() { + let pieceActions = null; + if (this.props.requestActions && this.props.requestActions.pieces){ + pieceActions = this.props.requestActions.pieces.map((item) => { + return ( +
+ {item} +
); + }); + } + let editionActions = null; + if (this.props.requestActions && this.props.requestActions.editions){ + editionActions = Object.keys(this.props.requestActions.editions).map((pieceId) => { + return this.props.requestActions.editions[pieceId].map((item) => { + return ( +
+ {item} +
); + }); + }); + } + + if (pieceActions || editionActions) { + return ( +
+ {pieceActions} + {editionActions} +
); + } + return null; + } +}); + +export default GlobalAction; \ No newline at end of file diff --git a/js/components/header.js b/js/components/header.js index 0863624f..7cd0e455 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -3,6 +3,8 @@ import React from 'react'; import Router from 'react-router'; +import Glyphicon from 'react-bootstrap/lib/Glyphicon'; + import UserActions from '../actions/user_actions'; import UserStore from '../stores/user_store'; @@ -10,6 +12,8 @@ import WhitelabelActions from '../actions/whitelabel_actions'; import WhitelabelStore from '../stores/whitelabel_store'; import EventActions from '../actions/event_actions'; +import PieceListStore from '../stores/piece_list_store'; + import Nav from 'react-bootstrap/lib/Nav'; import Navbar from 'react-bootstrap/lib/Navbar'; import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav'; @@ -25,6 +29,8 @@ import NavRoutesLinks from './nav_routes_links'; import { mergeOptions } from '../utils/general_utils'; import { getLangText } from '../utils/lang_utils'; +let Link = Router.Link; + let Header = React.createClass({ propTypes: { @@ -41,7 +47,11 @@ let Header = React.createClass({ }, getInitialState() { - return mergeOptions(WhitelabelStore.getState(), UserStore.getState()); + return mergeOptions( + WhitelabelStore.getState(), + UserStore.getState(), + PieceListStore.getState() + ); }, componentDidMount() { @@ -49,11 +59,13 @@ let Header = React.createClass({ UserStore.listen(this.onChange); WhitelabelActions.fetchWhitelabel(); WhitelabelStore.listen(this.onChange); + PieceListStore.listen(this.onChange); }, componentWillUnmount() { UserStore.unlisten(this.onChange); WhitelabelStore.unlisten(this.onChange); + PieceListStore.unlisten(this.onChange); }, getLogo(){ @@ -90,6 +102,34 @@ let Header = React.createClass({ } }, + getNotifications() { + if (this.state.requestActions && this.state.requestActions.length > 0) { + return ( + + + + ({this.state.requestActions.length}) + + } + className="notification-menu"> + {this.state.requestActions.map((pieceOrEdition, i) => { + return ( + + + ); + }) + } + + ); + } + return null; + }, + render() { let account; let signup; @@ -100,7 +140,7 @@ let Header = React.createClass({ {getLangText('Account Settings')} {getLangText('Log out')} - + ); navRoutesLinks = ; } @@ -122,6 +162,7 @@ let Header = React.createClass({ {this.getPoweredBy()}