Ivan - Add error messages for admin tickets view [skip ci]

client/src/app/admin/panel/tickets/admin-panel-all-tickets.js

@@ -4,9 +4,11 @@ import {connect}  from 'react-redux';
 import i18n from 'lib-app/i18n';
 
 import AdminDataAction from 'actions/admin-data-actions';
-import Header from 'core-components/header';
 import TicketList from 'app-components/ticket-list';
+
+import Header from 'core-components/header';
 import SearchBox from 'core-components/search-box';
+import Message from 'core-components/message';
 
 class AdminPanelAllTickets extends React.Component {
 
@@ -31,7 +33,7 @@ class AdminPanelAllTickets extends React.Component {
                 <div className="admin-panel-my-tickets__search-box">
                     <SearchBox onSearch={this.onSearch.bind(this)} />
                 </div>
-                <TicketList {...this.getTicketListProps()}/>
+                {(this.props.error) ? <Message type="error">{i18n('ERROR_RETRIEVING_TICKETS')}</Message> : <TicketList {...this.getTicketListProps()}/>}
             </div>
         );
     }
@@ -52,7 +54,8 @@ class AdminPanelAllTickets extends React.Component {
 
     onSearch(query) {
         this.setState({query, page: 1});
-        if (query) {
+
+        if(query) {
             this.props.dispatch(AdminDataAction.searchTickets(query));
         } else {
             this.props.dispatch(AdminDataAction.retrieveAllTickets());
@@ -60,9 +63,7 @@ class AdminPanelAllTickets extends React.Component {
     }
 
     onPageChange(event) {
-        this.setState({
+        this.setState({page: event.target.value});
-            page: event.target.value
-        });
 
         if(this.state.query) {
             this.props.dispatch(AdminDataAction.searchTickets(this.state.query, event.target.value));
@@ -77,6 +78,7 @@ export default connect((store) => {
         departments: store.session.userDepartments,
         tickets: store.adminData.allTickets,
         pages: store.adminData.allTicketsPages,
-        loading: !store.adminData.allTicketsLoaded
+        loading: !store.adminData.allTicketsLoaded,
+        error: store.adminData.allTicketsError
     };
 })(AdminPanelAllTickets);

client/src/app/admin/panel/tickets/admin-panel-my-tickets.js

@@ -4,9 +4,11 @@ import {connect}  from 'react-redux';
 import i18n from 'lib-app/i18n';
 
 import AdminDataAction from 'actions/admin-data-actions';
-import Header from 'core-components/header';
 import TicketList from 'app-components/ticket-list';
 
+import Header from 'core-components/header';
+import Message from 'core-components/message';
+
 class AdminPanelMyTickets extends React.Component {
 
     static defaultProps = {
@@ -22,7 +24,7 @@ class AdminPanelMyTickets extends React.Component {
         return (
             <div className="admin-panel-my-tickets">
                 <Header title={i18n('MY_TICKETS')} description={i18n('MY_TICKETS_DESCRIPTION')} />
-                <TicketList {...this.getProps()}/>
+                {(this.props.error) ? <Message type="error">{i18n('ERROR_RETRIEVING_TICKETS')}</Message> : <TicketList {...this.getProps()}/>}
             </div>
         );
     }
@@ -42,6 +44,7 @@ export default connect((store) => {
     return {
         departments: store.session.userDepartments,
         tickets: store.adminData.myTickets,
-        loading: !store.adminData.myTicketsLoaded
+        loading: !store.adminData.myTicketsLoaded,
+        error: store.adminData.myTicketsError
     };
 })(AdminPanelMyTickets);

client/src/app/admin/panel/tickets/admin-panel-new-tickets.js

@@ -4,9 +4,11 @@ import {connect}  from 'react-redux';
 import i18n from 'lib-app/i18n';
 
 import AdminDataAction from 'actions/admin-data-actions';
-import Header from 'core-components/header';
 import TicketList from 'app-components/ticket-list';
 
+import Header from 'core-components/header';
+import Message from 'core-components/message';
+
 class AdminPanelNewTickets extends React.Component {
 
     static defaultProps = {
@@ -22,7 +24,7 @@ class AdminPanelNewTickets extends React.Component {
         return (
             <div className="admin-panel-my-tickets">
                 <Header title={i18n('NEW_TICKETS')} description={i18n('NEW_TICKETS_DESCRIPTION')} />
-                <TicketList {...this.getProps()}/>
+                {(this.props.error) ? <Message type="error">{i18n('ERROR_RETRIEVING_TICKETS')}</Message> : <TicketList {...this.getProps()}/>}
             </div>
         );
     }
@@ -42,6 +44,7 @@ export default connect((store) => {
     return {
         departments: store.session.userDepartments,
         tickets: store.adminData.newTickets,
-        loading: !store.adminData.newTicketsLoaded
+        loading: !store.adminData.newTicketsLoaded,
+        error: store.adminData.newTicketsError
     };
 })(AdminPanelNewTickets);

client/src/data/languages/en.js

@@ -160,6 +160,7 @@ export default {
     'TICKET_COMMENT_ERROR': 'An error occurred while trying to add the comment.',
     'NO_PERMISSION': 'You\'ve no permission to access to this page.',
     'INVALID_USER': 'User id is invalid',
+    'ERROR_RETRIEVING_TICKETS': 'An error occurred while trying to retrieve tickets.',
 
     //MESSAGES
     'SIGNUP_SUCCESS': 'You have registered successfully in our support system.',

client/src/reducers/admin-data-reducer.js

@@ -11,10 +11,15 @@ class AdminDataReducer extends Reducer {
             customResponsesLoaded: false,
             myTickets: [],
             myTicketsLoaded: false,
+            myTicketsError: false,
+
             newTickets: [],
             newTicketsLoaded: false,
+            newTicketsError: false,
+
             allTickets: [],
-            allTicketsLoaded: false
+            allTicketsLoaded: false,
+            allTicketsError: false
         };
     }
 
@@ -22,11 +27,17 @@ class AdminDataReducer extends Reducer {
         return {
             'CUSTOM_RESPONSES_FULFILLED': this.onCustomResponses,
             'SESSION_CHECKED': this.onSessionChecked,
+
             'MY_TICKETS_FULFILLED': this.onMyTicketsRetrieved,
+            'MY_TICKETS_REJECTED': this.onMyTicketsRejected,
             'MY_TICKETS_PENDING': this.onMyTicketsPending,
+
             'NEW_TICKETS_FULFILLED': this.onNewTicketsRetrieved,
+            'NEW_TICKETS_REJECTED': this.onNewTicketsRejected,
             'NEW_TICKETS_PENDING': this.onNewTicketsPending,
+
             'ALL_TICKETS_FULFILLED': this.onAllTicketsRetrieved,
+            'ALL_TICKETS_REJECTED': this.onAllTicketsRejected,
             'ALL_TICKETS_PENDING': this.onAllTicketsPending
         };
     }
@@ -53,26 +64,42 @@ class AdminDataReducer extends Reducer {
         return _.extend({}, state, {
             myTickets: payload.data,
             myTicketsLoaded: true
+        });
+    }
+
+    onMyTicketsRejected(state) {
+        return _.extend({}, state, {
+            myTicketsError: true,
+            myTicketsLoaded: true
         })
     }
 
     onMyTicketsPending(state) {
         return _.extend({}, state, {
+            myTicketsError: false,
             myTicketsLoaded: false
-        })
+        });
     }
 
     onNewTicketsRetrieved(state, payload) {
         return _.extend({}, state, {
             newTickets: payload.data,
             newTicketsLoaded: true
-        })
+        });
+    }
+
+    onNewTicketsRejected(state) {
+        return _.extend({}, state, {
+            newTicketsError: true,
+            newTicketsLoaded: false
+        });
     }
 
     onNewTicketsPending(state) {
         return _.extend({}, state, {
+            newTicketsError: false,
             newTicketsLoaded: false
-        })
+        });
     }
 
     onAllTicketsRetrieved(state, payload) {
@@ -80,13 +107,21 @@ class AdminDataReducer extends Reducer {
             allTickets: payload.data.tickets,
             allTicketsPages: payload.data.pages,
             allTicketsLoaded: true
-        })
+        });
+    }
+
+    onAllTicketsRejected(state) {
+        return _.extend({}, state, {
+            allTicketsError: false,
+            allTicketsLoaded: false
+        });
     }
 
     onAllTicketsPending(state) {
         return _.extend({}, state, {
+            allTicketsError: false,
             allTicketsLoaded: false
-        })
+        });
     }
 }