set of notification component changes

epheph · Apr 26, 2017 · 10ab7e7 · 10ab7e7
1 parent fc375dd
commit 10ab7e7
Show file tree

Hide file tree

Showing 11 changed files with 231 additions and 159 deletions.
diff --git a/src/modules/app/components/nav.jsx b/src/modules/app/components/nav.jsx
@@ -1,139 +1,169 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 
 import classnames from 'classnames';
 
 import Link from 'modules/link/components/link';
 import AugurLogoIcon from 'modules/common/components/augur-logo-icon';
 import SideBarFilterIcon from 'modules/common/components/side-bar-filter-icon';
+import NotificationsContainer from 'modules/notifications/container';
 
 import { ACCOUNT, MARKETS, TRANSACTIONS, MY_POSITIONS, MY_MARKETS, MY_REPORTS, AUTHENTICATION } from 'modules/app/constants/views';
 import { FAVORITES, PENDING_REPORTS } from 'modules/markets/constants/markets-subset';
 
 // NOTE --  first child div is there to pass up a ref so that other methods can
 //          acquire the row height of the navs in the footer
-const Nav = (p) => {
-  function collapseFooter() {
-    if (p.updateIsFooterCollapsed) {
-      p.updateIsFooterCollapsed(true);
+
+export default class Nav extends Component {
+  static propTypes = {
+    updateIsFooterCollapsed: PropTypes.func
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isNotificationsVisible: false
+    };
+
+    this.collapseFooter = this.collapseFooter.bind(this);
+  }
+
+  collapseFooter() {
+    if (this.props.updateIsFooterCollapsed) {
+      this.props.updateIsFooterCollapsed(true);
     }
   }
 
-  return (
-    <nav className={`app-nav ${p.className ? p.className : ''}`}>
-      <div ref={p.navRef && p.navRef} />
-      {p.isSideBarAllowed && !p.isSideBarPersistent &&
-        <button
-          className="app-nav-link unstyled"
-          onClick={p.toggleSideBar}
-        >
-          {p.isSideBarCollapsed ? <SideBarFilterIcon /> : <i className="fa fa-remove" />}
-        </button>
-      }
-      <div className="augur-brand">
-        <Link {...p.topicsLink} >
-          <AugurLogoIcon />
-        </Link>
-      </div>
-      <Link
-        {...p.allMarketsLink}
-        onClick={() => {
-          p.allMarketsLink.onClick();
-          collapseFooter();
-        }}
-        className={classnames('app-nav-link', { active: ((p.activeView === MARKETS || (!!parseInt(p.activeView, 10) && Number.isInteger(parseInt(p.activeView, 10)))) && p.marketsInfo.selectedMarketsHeader == null) })}
-      >
-        <i className="nav-icon fa fa-line-chart" />
-        Markets
-      </Link>
-      {p.logged && !!p.numFavorites &&
-        <Link
-          {...p.favoritesLink}
-          onClick={() => {
-            p.favoritesLink.onClick();
-            collapseFooter();
-          }}
-          className={classnames('app-nav-link', { active: (p.activeView === MARKETS || (!!parseInt(p.activeView, 10) && Number.isInteger(parseInt(p.activeView, 10)))) && p.marketsInfo.selectedMarketsHeader === FAVORITES })}
-        >
-          <i className="nav-icon fa fa-star" />
-          <span className="nav-count">{p.numFavorites} </span>
-          Favorites
-        </Link>
-      }
-      {p.logged && !!p.numPendingReports &&
-        <Link
-          {...p.pendingReportsLink}
-          onClick={() => {
-            p.pendingReportsLink.onClick();
-            collapseFooter();
-          }}
-          className={classnames('app-nav-link', { active: (p.activeView === MARKETS || (!!parseInt(p.activeView, 10) && Number.isInteger(parseInt(p.activeView, 10)))) && p.marketsInfo.selectedMarketsHeader === PENDING_REPORTS })}
-        >
-          <i className="nav-icon fa fa-copy" />
-          <span className="nav-count">{p.numPendingReports} </span>
-          Pending Reports
-        </Link>
-      }
-      {p.logged && !!p.portfolioTotals &&
-        <Link
-          {...p.myPositionsLink}
-          onClick={() => {
-            p.myPositionsLink.onClick();
-            collapseFooter();
-          }}
-          className={classnames('app-nav-link', MY_POSITIONS, { active: [MY_POSITIONS, MY_MARKETS, MY_REPORTS].indexOf(p.activeView) > -1 })}
-        >
-          <i className="nav-icon fa fa-money" />
-          Portfolio
-        </Link>
-      }
-      {p.logged &&
-        <Link
-          {...p.transactionsLink}
-          onClick={() => {
-            p.transactionsLink.onClick();
-            collapseFooter();
-          }}
-          className={classnames('app-nav-link', TRANSACTIONS, { active: p.activeView === TRANSACTIONS }, { working: p.isTransactionsWorking })}
-        >
-          <i className="nav-icon fa fa-tasks" />
-          {!!p.numTransactionsWorking &&
-            <span className="nav-count">{p.numTransactionsWorking} </span>
-          }
-          {p.transactionsTotals.title}
-        </Link>
-      }
-      {p.logged &&
-        <Link
-          {...p.accountLink}
-          onClick={() => {
-            p.accountLink.onClick();
-            collapseFooter();
-          }}
-          className={classnames('app-nav-link', ACCOUNT, { active: p.activeView === ACCOUNT })}
-        >
-          <i className="nav-icon fa fa-cog" />
-          Account
-        </Link>
-      }
-      {!p.logged &&
+  render() {
+    const p = this.props;
+    const s = this.state;
+
+    return (
+      <nav className={`app-nav ${p.className ? p.className : ''}`}>
+        <div ref={p.navRef && p.navRef} />
+        {p.isSideBarAllowed && !p.isSideBarPersistent &&
+          <button
+            className="app-nav-link unstyled"
+            onClick={p.toggleSideBar}
+          >
+            {p.isSideBarCollapsed ? <SideBarFilterIcon /> : <i className="fa fa-remove" />}
+          </button>
+        }
+        <div className="augur-brand">
+          <Link {...p.topicsLink} >
+            <AugurLogoIcon />
+          </Link>
+        </div>
+        {p.logged &&
+          <button
+            className="unstyled button-notifications app-nav-link"
+            onClick={() => this.setState({ isNotificationsVisible: !s.isNotificationsVisible })}
+          >
+            <i className="fa fa-bell-o" />
+          </button>
+        }
         <Link
-          {...p.authLink}
+          {...p.allMarketsLink}
           onClick={() => {
-            p.authLink.onClick();
-            collapseFooter();
+            p.allMarketsLink.onClick();
+            this.collapseFooter();
           }}
-          className={classnames('app-nav-link', AUTHENTICATION, { active: p.activeView === AUTHENTICATION })}
+          className={classnames('app-nav-link', { active: ((p.activeView === MARKETS || (!!parseInt(p.activeView, 10) && Number.isInteger(parseInt(p.activeView, 10)))) && p.marketsInfo.selectedMarketsHeader == null) })}
         >
-          <div className="nav-icon-google-translate-fix">
-            <i className="nav-icon">
-              <AugurLogoIcon />
-            </i>
-          </div>
-          Sign Up / Login
+          <i className="nav-icon fa fa-line-chart" />
+          Markets
         </Link>
-      }
-    </nav>
-  );
-};
-
-export default Nav;
+        {p.logged && !!p.numFavorites &&
+          <Link
+            {...p.favoritesLink}
+            onClick={() => {
+              p.favoritesLink.onClick();
+              this.collapseFooter();
+            }}
+            className={classnames('app-nav-link', { active: (p.activeView === MARKETS || (!!parseInt(p.activeView, 10) && Number.isInteger(parseInt(p.activeView, 10)))) && p.marketsInfo.selectedMarketsHeader === FAVORITES })}
+          >
+            <i className="nav-icon fa fa-star" />
+            <span className="nav-count">{p.numFavorites} </span>
+            Favorites
+          </Link>
+        }
+        {p.logged && !!p.numPendingReports &&
+          <Link
+            {...p.pendingReportsLink}
+            onClick={() => {
+              p.pendingReportsLink.onClick();
+              this.collapseFooter();
+            }}
+            className={classnames('app-nav-link', { active: (p.activeView === MARKETS || (!!parseInt(p.activeView, 10) && Number.isInteger(parseInt(p.activeView, 10)))) && p.marketsInfo.selectedMarketsHeader === PENDING_REPORTS })}
+          >
+            <i className="nav-icon fa fa-copy" />
+            <span className="nav-count">{p.numPendingReports} </span>
+            Pending Reports
+          </Link>
+        }
+        {p.logged && !!p.portfolioTotals &&
+          <Link
+            {...p.myPositionsLink}
+            onClick={() => {
+              p.myPositionsLink.onClick();
+              this.collapseFooter();
+            }}
+            className={classnames('app-nav-link', MY_POSITIONS, { active: [MY_POSITIONS, MY_MARKETS, MY_REPORTS].indexOf(p.activeView) > -1 })}
+          >
+            <i className="nav-icon fa fa-money" />
+            Portfolio
+          </Link>
+        }
+        {p.logged &&
+          <Link
+            {...p.transactionsLink}
+            onClick={() => {
+              p.transactionsLink.onClick();
+              this.collapseFooter();
+            }}
+            className={classnames('app-nav-link', TRANSACTIONS, { active: p.activeView === TRANSACTIONS }, { working: p.isTransactionsWorking })}
+          >
+            <i className="nav-icon fa fa-tasks" />
+            {p.numTransactionsWorking ?
+              <span className="nav-count">{p.numTransactionsWorking} Transactions Working</span> :
+              <span>Transactions</span>
+            }
+          </Link>
+        }
+        {p.logged &&
+          <Link
+            {...p.accountLink}
+            onClick={() => {
+              p.accountLink.onClick();
+              this.collapseFooter();
+            }}
+            className={classnames('app-nav-link', ACCOUNT, { active: p.activeView === ACCOUNT })}
+          >
+            <i className="nav-icon fa fa-cog" />
+            Account
+          </Link>
+        }
+        {!p.logged &&
+          <Link
+            {...p.authLink}
+            onClick={() => {
+              p.authLink.onClick();
+              this.collapseFooter();
+            }}
+            className={classnames('app-nav-link', AUTHENTICATION, { active: p.activeView === AUTHENTICATION })}
+          >
+            <div className="nav-icon-google-translate-fix">
+              <i className="nav-icon">
+                <AugurLogoIcon />
+              </i>
+            </div>
+            Sign Up / Login
+          </Link>
+        }
+        {p.logged && s.isNotificationsVisible &&
+          <NotificationsContainer />
+        }
+      </nav>
+    );
+  }
+}
diff --git a/src/modules/app/less/borders.less b/src/modules/app/less/borders.less
@@ -15,6 +15,7 @@
 @border-normal: @color-border;
 @border-muted: @color-border-muted;
 @border-light: @color-border-light;
+@border-faded: fadeout(@color-border, @amount-extra-light);
 
 // Style
 @border-solid: solid;

diff --git a/src/modules/app/less/nav.less b/src/modules/app/less/nav.less
@@ -2,6 +2,7 @@
   display: flex;
   flex: 1;
   justify-content: center;
+  position: relative;
   z-index: @above-all-content;
 
   .app-nav-link:not(button) {
@@ -56,8 +57,20 @@
         padding-right: 0.4em;
       }
 
+      &.button-notifications {
+        .border(true, @border-right, @border-faded);
+
+        i {
+          padding: 0;
+        }
+      }
+
       @media @breakpoint-mobile {
         padding: 1.1em;
+
+        &.button-notifications {
+          .border(false);
+        }
       }
     }
 

diff --git a/src/modules/notifications/components/notification.jsx b/src/modules/notifications/components/notification.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Notification = p => (
+  <span>Notification</span>
+);
+
+export default Notification;
diff --git a/src/modules/notifications/components/notifications-view.jsx b/src/modules/notifications/components/notifications-view.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const NotificationsView = p => (
   <section id="notifications_view">
-    <span>Notifications</span>
+    <h3>Notifications</h3>
   </section>
 );
 

diff --git a/src/modules/notifications/container.js b/src/modules/notifications/container.js
@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
 
 import NotificationsView from 'modules/notifications/components/notifications-view';
+import selectNotifications from 'modules/notifications/selectors/notifications';
 
 const mapStateToProps = state => ({
-  notifications: state.notifications
+  notifications: selectNotifications()
 });
 
 const NotificationsContainer = connect(mapStateToProps)(NotificationsView);

diff --git a/src/modules/notifications/less/notifications-view.less b/src/modules/notifications/less/notifications-view.less
@@ -0,0 +1,10 @@
+#notifications_view {
+  .border(true);
+
+  background-color: @color-white;
+  bottom: 0;
+  margin: 0;
+  position: absolute;
+  transform: translateY(100%);
+  width: 300px;
+}
diff --git a/src/modules/notifications/selectors/notifications.js b/src/modules/notifications/selectors/notifications.js
@@ -5,19 +5,15 @@ import { selectNotificationsState } from 'src/select-state';
 import getValue from 'utils/get-value';
 
 export default function () {
-  return selectNotifications(store.getState());
+  return selectNotificationsAndSeenCount(store.getState());
 }
 
-export const selectNotifications = createSelector(
+export const selectNotificationsAndSeenCount = createSelector(
   selectNotificationsState,
   (notifications) => {
     const sortedNotifications = notifications.sort((a, b) => getValue(b, 'timestamp.timestamp') - getValue(a, 'timestamp.timestamp'));
-
     const unseenCount = sortedNotifications.reduce((p, notification) => {
-      if (!notification.seen) {
-        return 1 + p;
-      }
-
+      if (!notification.seen) return 1 + p;
       return p;
     }, 0);
 

diff --git a/src/modules/transactions/components/transactions-view.jsx b/src/modules/transactions/components/transactions-view.jsx
@@ -22,7 +22,7 @@ export default class TransactionsView extends Component {
     super(props);
 
     this.state = {
-      transactionsPerPage: 50, // -- Update this value to change pagination size
+      transactionsPerPage: 20, // -- Update this value to change pagination size
       nullMessage: 'No Transaction Data',
       lowerIndex: null,
       upperIndex: null,