Fix <AllRead /> & hide account from list if no notifications

Author: manosim

src/js/routes/notifications.js

@@ -2,49 +2,50 @@ import React from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import { connect } from 'react-redux';
 
-// import AllRead from '../components/all-read';
-// import Oops from '../components/oops';
+import AllRead from '../components/all-read';
+import Oops from '../components/oops';
 import AccountNotifications from '../components/notifications';
 
 export class NotificationsRoute extends React.Component {
   render() {
-    const { accountNotifications } = this.props;
+    const { accountNotifications, hasNotifications } = this.props;
     const wrapperClass = 'container-fluid main-container notifications';
-    // const notificationsEmpty = accountNotifications.isEmpty();
-    const notificationsEmpty = false;
 
-    // if (this.props.failed) {
-    //   return <Oops />;
-    // }
+    if (this.props.failed) {
+      return <Oops />;
+    }
 
-    // if (notificationsEmpty) {
-    //   return <AllRead />;
-    // };
+    if (!hasNotifications) {
+      return <AllRead />;
+    };
 
     return (
-      <div className={wrapperClass + (notificationsEmpty ? ' all-read' : '')}>
+      <div className={wrapperClass + (!hasNotifications ? ' all-read' : '')}>
         <ReactCSSTransitionGroup
           transitionName="repository"
           transitionEnter={false}
           transitionLeaveTimeout={325}>
-          {accountNotifications.map((obj, key) => {
-            return (
-              <AccountNotifications
-                key={key}
-                hostname={obj.get('hostname')}
-                notifications={obj.get('notifications')} />
-            );
-          })}
+          {accountNotifications.map((obj, key) => (
+            !obj.get('notifications').isEmpty() &&
+            <AccountNotifications
+              key={key}
+              hostname={obj.get('hostname')}
+              notifications={obj.get('notifications')} />
+          ))}
         </ReactCSSTransitionGroup>
       </div>
     );
   }
 };
 
 export function mapStateToProps(state) {
+  const hasNotifications = state.notifications.get('response')
+    .reduce((memo, acc) => memo + acc.get('notifications').size, 0) > 0;
+
   return {
     failed: state.notifications.get('failed'),
-    accountNotifications: state.notifications.get('response')
+    accountNotifications: state.notifications.get('response'),
+    hasNotifications
   };
 };