From 73ee0753c1431c4b9cb92155528e69253c8dcd59 Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Thu, 3 Sep 2015 17:25:22 +0200
Subject: [PATCH] refactored notifications per detail

---
 .../accordion_list_item_table_editions.js     |  2 +-
 .../accordion_list_item_wallet.js             |  3 +-
 js/components/ascribe_detail/edition.js       | 30 ++-----
 .../ascribe_detail/piece_container.js         | 12 +--
 .../ascribe_forms/form_request_action.js      | 34 +++-----
 .../list_form_request_actions.js              | 11 ++-
 .../prizes_dashboard.js                       | 82 -------------------
 .../ascribe_table/table_item_acl_filtered.js  |  6 +-
 js/components/header_notification.js          | 17 +++-
 .../ascribe_detail/prize_piece_container.js   | 15 +---
 .../ascribe_detail/ikonotv_piece_container.js | 15 +---
 js/routes.js                                  |  2 -
 sass/ascribe_notification_list.scss           |  8 +-
 13 files changed, 60 insertions(+), 177 deletions(-)
 delete mode 100644 js/components/ascribe_prizes_dashboard/prizes_dashboard.js

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
index d1ab2112..350d61a8 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
@@ -160,7 +160,7 @@ let AccordionListItemTableEditions = React.createClass({
                     let content = item.acl;
                     return {
                         'content': content,
-                        'requestAction': item.request_action
+                        'notifications': item.notifications
                     }; },
                     'acl',
                     getLangText('Actions'),
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
index 178a7db4..dde5c43d 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
@@ -61,8 +61,7 @@ let AccordionListItemWallet = React.createClass({
     },
 
     getGlyphicon(){
-        if ((this.props.content.request_action && this.props.content.request_action.length > 0) ||
-            (this.props.content.request_action_editions)){
+        if ((this.props.content.notifications && this.props.content.notifications.length > 0)){
             return (
                 <OverlayTrigger
                     delay={500}
diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index db8f0b7e..47761e39 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -14,10 +14,7 @@ import CoaActions from '../../actions/coa_actions';
 import CoaStore from '../../stores/coa_store';
 import PieceListActions from '../../actions/piece_list_actions';
 import PieceListStore from '../../stores/piece_list_store';
-import EditionListActions from '../../actions/edition_list_actions';
-
-import NotificationActions from '../../actions/notification_actions';
-import NotificationStore from '../../stores/notification_store';
+import EditionListActions from '../../actions/edition_list_actions';;
 
 import HistoryIterator from './history_iterator';
 
@@ -211,25 +208,6 @@ let EditionSummary = React.createClass({
         handleDeleteSuccess: React.PropTypes.func
     },
 
-    getInitialState() {
-        return mergeOptions(
-            NotificationStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        NotificationStore.listen(this.onChange);
-        NotificationActions.fetchEditionNotifications(this.props.edition.bitcoin_id);
-    },
-
-    componentWillUnmount() {
-        NotificationStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     getTransferWithdrawData(){
         return {'bitcoin_id': this.props.edition.bitcoin_id};
     },
@@ -256,13 +234,15 @@ let EditionSummary = React.createClass({
 
     getActions(){
         let actions = null;
-        if (this.state.editionNotifications && this.state.editionNotifications.notification){
+        if (this.props.edition &&
+            this.props.edition.notifications &&
+            this.props.edition.notifications.length > 0){
             actions = (
                 <ListRequestActions
                     pieceOrEditions={[this.props.edition]}
                     currentUser={this.props.currentUser}
                     handleSuccess={this.showNotification}
-                    requestActions={this.state.editionNotifications.notification}/>);
+                    notifications={this.props.edition.notifications}/>);
         }
 
         else {
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 0de25beb..a4460073 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -9,9 +9,6 @@ import PieceStore from '../../stores/piece_store';
 import PieceListActions from '../../actions/piece_list_actions';
 import PieceListStore from '../../stores/piece_list_store';
 
-import NotificationActions from '../../actions/notification_actions';
-import NotificationStore from '../../stores/notification_store';
-
 import UserActions from '../../actions/user_actions';
 import UserStore from '../../stores/user_store';
 
@@ -65,8 +62,6 @@ let PieceContainer = React.createClass({
         UserActions.fetchCurrentUser();
         PieceStore.listen(this.onChange);
         PieceActions.fetchOne(this.props.params.pieceId);
-        NotificationStore.listen(this.onChange);
-        NotificationActions.fetchPieceNotifications(this.props.params.pieceId);
     },
 
     componentWillUnmount() {
@@ -78,7 +73,6 @@ let PieceContainer = React.createClass({
         PieceStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
         PieceListStore.unlisten(this.onChange);
-        NotificationStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -180,14 +174,14 @@ let PieceContainer = React.createClass({
 
     getActions() {
         if (this.state.piece &&
-            this.state.pieceNotifications &&
-            this.state.pieceNotifications.notification) {
+            this.state.piece.notifications &&
+            this.state.piece.notifications.length > 0) {
             return (
                 <ListRequestActions
                     pieceOrEditions={this.state.piece}
                     currentUser={this.state.currentUser}
                     handleSuccess={this.loadPiece}
-                    requestActions={this.state.pieceNotifications.notification}/>);
+                    notifications={this.state.piece.notifications}/>);
         }
         else {
             return (
diff --git a/js/components/ascribe_forms/form_request_action.js b/js/components/ascribe_forms/form_request_action.js
index c65a7394..b0f3b6c6 100644
--- a/js/components/ascribe_forms/form_request_action.js
+++ b/js/components/ascribe_forms/form_request_action.js
@@ -22,8 +22,7 @@ let RequestActionForm = React.createClass({
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
-        requestAction: React.PropTypes.string,
-        requestUser: React.PropTypes.string,
+        notifications: React.PropTypes.object,
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
     },
@@ -35,19 +34,19 @@ let RequestActionForm = React.createClass({
     getUrls() {
         let urls = {};
 
-        if (this.props.requestAction === 'consign'){
+        if (this.props.notifications.action === 'consign'){
             urls.accept = ApiUrls.ownership_consigns_confirm;
             urls.deny = ApiUrls.ownership_consigns_deny;
-        } else if (this.props.requestAction === 'unconsign'){
+        } else if (this.props.notifications.action === 'unconsign'){
             urls.accept = ApiUrls.ownership_unconsigns;
             urls.deny = ApiUrls.ownership_unconsigns_deny;
-        } else if (this.props.requestAction === 'loan' && !this.isPiece()){
+        } else if (this.props.notifications.action === 'loan' && !this.isPiece()){
             urls.accept = ApiUrls.ownership_loans_confirm;
             urls.deny = ApiUrls.ownership_loans_deny;
-        } else if (this.props.requestAction === 'loan' && this.isPiece()){
+        } else if (this.props.notifications.action === 'loan' && this.isPiece()){
             urls.accept = ApiUrls.ownership_loans_pieces_confirm;
             urls.deny = ApiUrls.ownership_loans_pieces_deny;
-        } else if (this.props.requestAction === 'loan_request' && this.isPiece()){
+        } else if (this.props.notifications.action === 'loan_request' && this.isPiece()){
             urls.accept = ApiUrls.ownership_loans_pieces_request_confirm;
             urls.deny = ApiUrls.ownership_loans_pieces_request_deny;
         }
@@ -70,8 +69,8 @@ let RequestActionForm = React.createClass({
         return () => {
             let message = getLangText('You have successfully') + ' ' + option + ' the ' + action + ' request ' + getLangText('from') + ' ' + owner;
 
-            let notification = new GlobalNotificationModel(message, 'success');
-            GlobalNotificationActions.appendGlobalNotification(notification);
+            let notifications = new GlobalNotificationModel(message, 'success');
+            GlobalNotificationActions.appendGlobalNotification(notifications);
 
             this.handleSuccess();
 
@@ -81,11 +80,9 @@ let RequestActionForm = React.createClass({
     handleSuccess() {
         if (this.isPiece()){
             NotificationActions.fetchPieceListNotifications();
-            //NotificationActions.fetchPieceNotifications(this.props.pieceOrEditions.id);
         }
         else {
             NotificationActions.fetchEditionListNotifications();
-            NotificationActions.fetchEditionNotifications(this.props.pieceOrEditions[0].bitcoin_id);
         }
         if(this.props.handleSuccess) {
             this.props.handleSuccess();
@@ -93,20 +90,15 @@ let RequestActionForm = React.createClass({
     },
 
     getContent() {
-        let pieceOrEditionStr = this.isPiece() ? getLangText('this work%s', '.') : getLangText('this edition%s', '.');
-        let message = this.props.requestUser + ' ' + getLangText('requests you') + ' ' + this.props.requestAction + ' ' + pieceOrEditionStr;
-        if (this.props.requestAction === 'loan_request'){
-            message = this.props.requestUser + ' ' + getLangText('requests you to loan') + ' ' + pieceOrEditionStr;
-        }
         return (
             <span>
-                {message}
+                {this.props.notifications.action_str + ' by ' + this.props.notifications.by}
             </span>
         );
     },
 
     getAcceptButtonForm(urls) {
-        if(this.props.requestAction === 'unconsign') {
+        if(this.props.notifications.action === 'unconsign') {
             return (
                 <AclButton
                     availableAcls={{'acl_unconsign': true}}
@@ -116,7 +108,7 @@ let RequestActionForm = React.createClass({
                     currentUser={this.props.currentUser}
                     handleSuccess={this.handleSuccess} />
                 );
-        } else if(this.props.requestAction === 'loan_request') {
+        } else if(this.props.notifications.action === 'loan_request') {
             return (
                 <AclButton
                     availableAcls={{'acl_loan_request': true}}
@@ -133,7 +125,7 @@ let RequestActionForm = React.createClass({
                     url={urls.accept}
                     getFormData={this.getFormData}
                     handleSuccess={
-                        this.showNotification(getLangText('accepted'), this.props.requestAction, this.props.requestUser)
+                        this.showNotification(getLangText('accepted'), this.props.notifications.action, this.props.notifications.by)
                     }
                     isInline={true}
                     className='inline pull-right'>
@@ -158,7 +150,7 @@ let RequestActionForm = React.createClass({
                     isInline={true}
                     getFormData={this.getFormData}
                     handleSuccess={
-                        this.showNotification(getLangText('denied'), this.props.requestAction, this.props.requestUser)
+                        this.showNotification(getLangText('denied'), this.props.notifications.action, this.props.notifications.by)
                     }
                     className='inline pull-right'>
                     <button
diff --git a/js/components/ascribe_forms/list_form_request_actions.js b/js/components/ascribe_forms/list_form_request_actions.js
index 429a4944..082ae8ef 100644
--- a/js/components/ascribe_forms/list_form_request_actions.js
+++ b/js/components/ascribe_forms/list_form_request_actions.js
@@ -12,20 +12,19 @@ let ListRequestActions = React.createClass({
         ]).isRequired,
         currentUser: React.PropTypes.object.isRequired,
         handleSuccess: React.PropTypes.func.isRequired,
-        requestActions: React.PropTypes.array.isRequired
+        notifications: React.PropTypes.array.isRequired
     },
 
     render () {
-        if (this.props.requestActions &&
-            this.props.requestActions.length > 0) {
+        if (this.props.notifications &&
+            this.props.notifications.length > 0) {
             return (
                 <div>
-                    {this.props.requestActions.map((requestAction) =>
+                    {this.props.notifications.map((notification) =>
                         <RequestActionForm
                             currentUser={this.props.currentUser}
                             pieceOrEditions={ this.props.pieceOrEditions }
-                            requestAction={requestAction.action}
-                            requestUser={requestAction.by}
+                            notifications={notification}
                             handleSuccess={this.props.handleSuccess}/>)}
                 </div>
             );
diff --git a/js/components/ascribe_prizes_dashboard/prizes_dashboard.js b/js/components/ascribe_prizes_dashboard/prizes_dashboard.js
deleted file mode 100644
index b4c695f4..00000000
--- a/js/components/ascribe_prizes_dashboard/prizes_dashboard.js
+++ /dev/null
@@ -1,82 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-import PrizeListActions from '../../actions/prize_list_actions';
-import PrizeListStore from '../../stores/prize_list_store';
-
-import Table from '../ascribe_table/table';
-import TableItem from '../ascribe_table/table_item';
-import TableItemText from '../ascribe_table/table_item_text';
-
-import { ColumnModel} from '../ascribe_table/models/table_models';
-import { getLangText } from '../../utils/lang_utils';
-
-let PrizesDashboard = React.createClass({
-
-    getInitialState() {
-        return PrizeListStore.getState();
-    },
-
-    componentDidMount() {
-        PrizeListStore.listen(this.onChange);
-        PrizeListActions.fetchPrizeList();
-    },
-
-    componentWillUnmount() {
-        PrizeListStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    getColumnList() {
-        return [
-            new ColumnModel(
-                (item) => {
-                    return {
-                        'content': item.name
-                    }; },
-                    'name',
-                    getLangText('Name'),
-                    TableItemText,
-                    6,
-                    false,
-                    null
-            ),
-            new ColumnModel(
-                (item) => {
-                    return {
-                        'content': item.domain
-                    }; },
-                    'domain',
-                    getLangText('Domain'),
-                    TableItemText,
-                    1,
-                    false,
-                    null
-            )
-        ];
-    },
-
-    render() {
-        return (
-            <Table
-                responsive
-                className="ascribe-table"
-                columnList={this.getColumnList()}
-                itemList={this.state.prizeList}>
-                {this.state.prizeList.map((item, i) => {
-                    return (
-                         <TableItem
-                            className="ascribe-table-item-selectable"
-                            key={i}/>
-                    );
-                })}
-            </Table>
-        );
-    }
-});
-
-export default PrizesDashboard;
\ No newline at end of file
diff --git a/js/components/ascribe_table/table_item_acl_filtered.js b/js/components/ascribe_table/table_item_acl_filtered.js
index c850ab59..22a28130 100644
--- a/js/components/ascribe_table/table_item_acl_filtered.js
+++ b/js/components/ascribe_table/table_item_acl_filtered.js
@@ -6,15 +6,15 @@ import React from 'react';
 let TableItemAclFiltered = React.createClass({
     propTypes: {
         content: React.PropTypes.object,
-        requestAction: React.PropTypes.string
+        notifications: React.PropTypes.string
     },
 
     render() {
         var availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
-        if (this.props.requestAction && this.props.requestAction.length > 0){
+        if (this.props.notifications && this.props.notifications.length > 0){
             return (
                 <span>
-                    {this.props.requestAction[0].action + ' request pending'}
+                    {this.props.notifications[0].action_str}
                 </span>
             );
         }
diff --git a/js/components/header_notification.js b/js/components/header_notification.js
index 73d68a5d..67252af8 100644
--- a/js/components/header_notification.js
+++ b/js/components/header_notification.js
@@ -180,6 +180,19 @@ let NotificationListItem = React.createClass({
     onClick(event){
         this.props.onClick(event);
     },
+
+    getNotificationText(){
+        let numNotifications = null;
+        if (this.props.notification.length > 1){
+            numNotifications = <div>+ {this.props.notification.length - 1} more...</div>;
+        }
+        return (
+            <div className="notification-action">
+                {this.props.notification[0].action_str}
+                {numNotifications}
+            </div>);
+    },
+
     render() {
         if (this.props.pieceOrEdition) {
             return (
@@ -193,9 +206,7 @@ let NotificationListItem = React.createClass({
                         <div className="col-xs-8 notification-list-item-header">
                             <h1>{this.props.pieceOrEdition.title}</h1>
                             <div className="sub-header">by {this.props.pieceOrEdition.artist_name}</div>
-                            <div className="notification-action">
-                                {'Pending ' + this.props.notification[0].action + ' request'}
-                            </div>
+                            {this.getNotificationText()}
                         </div>
                     </div>
                 </Link>);
diff --git a/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
index cb9e1593..2dd56dca 100644
--- a/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
@@ -15,9 +15,6 @@ import PieceListActions from '../../../../../actions/piece_list_actions';
 import PrizeRatingActions from '../../actions/prize_rating_actions';
 import PrizeRatingStore from '../../stores/prize_rating_store';
 
-import NotificationStore from '../../../../../stores/notification_store';
-import NotificationActions from '../../../../../actions/notification_actions.js';
-
 import UserStore from '../../../../../stores/user_store';
 
 import Piece from '../../../../../components/ascribe_detail/piece';
@@ -53,8 +50,7 @@ let PieceContainer = React.createClass({
     getInitialState() {
         return mergeOptions(
             PieceStore.getState(),
-            UserStore.getState(),
-            NotificationStore.getState()
+            UserStore.getState()
         );
     },
 
@@ -62,8 +58,6 @@ let PieceContainer = React.createClass({
         PieceStore.listen(this.onChange);
         PieceActions.fetchOne(this.props.params.pieceId);
         UserStore.listen(this.onChange);
-        NotificationStore.listen(this.onChange);
-        NotificationActions.fetchPieceNotifications(this.props.params.pieceId);
     },
 
     // This is done to update the container when the user clicks on the prev or next
@@ -83,7 +77,6 @@ let PieceContainer = React.createClass({
         PieceActions.updatePiece({});
         PieceStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
-        NotificationStore.unlisten(this.onChange);
     },
 
 
@@ -97,14 +90,14 @@ let PieceContainer = React.createClass({
 
     getActions() {
         if (this.state.piece &&
-            this.state.pieceNotifications &&
-            this.state.pieceNotifications.notification) {
+            this.state.piece.notifications &&
+            this.state.piece.notifications.length > 0) {
             return (
                 <ListRequestActions
                     pieceOrEditions={this.state.piece}
                     currentUser={this.state.currentUser}
                     handleSuccess={this.loadPiece}
-                    requestActions={this.state.pieceNotifications.notification}/>);
+                    notifications={this.state.piece.notifications}/>);
         }
     },
 
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js
index 781b148b..fac26f7d 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js
@@ -10,9 +10,6 @@ import PieceListStore from '../../../../../../stores/piece_list_store';
 
 import UserStore from '../../../../../../stores/user_store';
 
-import NotificationStore from '../../../../../../stores/notification_store';
-import NotificationActions from '../../../../../../actions/notification_actions.js';
-
 import Piece from '../../../../../../components/ascribe_detail/piece';
 
 import ListRequestActions from '../../../../../ascribe_forms/list_form_request_actions';
@@ -44,8 +41,7 @@ let IkonotvPieceContainer = React.createClass({
         return mergeOptions(
             PieceStore.getState(),
             UserStore.getState(),
-            PieceListStore.getState(),
-            NotificationStore.getState()
+            PieceListStore.getState()
         );
     },
 
@@ -54,8 +50,6 @@ let IkonotvPieceContainer = React.createClass({
         PieceActions.fetchOne(this.props.params.pieceId);
         UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
-        NotificationStore.listen(this.onChange);
-        NotificationActions.fetchPieceNotifications(this.props.params.pieceId);
     },
 
     componentWillReceiveProps(nextProps) {
@@ -74,7 +68,6 @@ let IkonotvPieceContainer = React.createClass({
         PieceStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
         PieceListStore.unlisten(this.onChange);
-        NotificationStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -96,14 +89,14 @@ let IkonotvPieceContainer = React.createClass({
 
     getActions(){
         if (this.state.piece &&
-            this.state.pieceNotifications &&
-            this.state.pieceNotifications.notification) {
+            this.state.piece.notifications &&
+            this.state.piece.notifications.length > 0) {
             return (
                 <ListRequestActions
                     pieceOrEditions={this.state.piece}
                     currentUser={this.state.currentUser}
                     handleSuccess={this.loadPiece}
-                    requestActions={this.state.pieceNotifications.notification}/>);
+                    notifications={this.state.piece.notifications}/>);
         }
         else {
 
diff --git a/js/routes.js b/js/routes.js
index 2762052b..314dc89a 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -22,7 +22,6 @@ import CoaVerifyContainer from './components/coa_verify_container';
 
 import RegisterPiece from './components/register_piece';
 
-import PrizesDashboard from './components/ascribe_prizes_dashboard/prizes_dashboard';
 
 import AppConstants from './constants/application_constants';
 
@@ -45,7 +44,6 @@ const COMMON_ROUTES = (
         <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
         <Route name="settings" path="settings" handler={SettingsContainer} />
         <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
-        <Route name="prizes" path="prizes" handler={PrizesDashboard} />
     </Route>
 );
 
diff --git a/sass/ascribe_notification_list.scss b/sass/ascribe_notification_list.scss
index 696d9169..1b4b6a0c 100644
--- a/sass/ascribe_notification_list.scss
+++ b/sass/ascribe_notification_list.scss
@@ -45,9 +45,15 @@ $break-medium: 1200px;
         margin-top: 0.3em;
         margin-bottom: 0.15em;
         font-size: 1.8em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
     .sub-header{
-        margin-bottom: 1em;
+        margin-bottom: 0.6em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
     .notification-action{
         color: $ascribe-color-green;