Header notification

Author: cazetto

src/components/back4App/Header/Header.react.js

@@ -37,6 +37,23 @@ export default class Header extends React.Component {
     .catch(error => {
       console.log("Error", error);
     });
+
+    fetch('https://dashboard.back4app.com/listApps', {
+      method: 'GET',
+      credentials: 'include'
+    })
+    .then(response => response.json())
+    .then(apps => {
+      let amountAppsWithExpiredPlans = apps.reduce((accumulator, currentValue, currentIndex, array) => {
+        return accumulator + ( currentValue.planCloudColor === 'red' ? 1 : 0 );
+      }, 0);
+      this.setState({
+        amountAppsWithExpiredPlans
+      });
+    })
+    .catch(function (error) {
+      console.log('error', error);
+    });
   }
   render() {
     return (
@@ -49,11 +66,9 @@ export default class Header extends React.Component {
               }} />
             </div>
           </Media>
-
           <a className={styles['logo-face']} href="http://www.back4app.com/">
             <Icon width={46} height={47} name='back4app-logo-face-blue' fill='#208AEC' />
           </a>
-          
           <Media query="(min-width: 680px)">
             <a className={styles['logo-text']} href="http://www.back4app.com/">
               <Icon width={134} height={53} name='back4app-logo-text-blue' fill='#208AEC' />
@@ -62,7 +77,7 @@ export default class Header extends React.Component {
 
         </div>
         <div className={styles['right-side']}>
-          <Nav items={navData.items} />
+          <Nav items={navData.items} amountAppsWithExpiredPlans={this.state.amountAppsWithExpiredPlans} />
           <Media query="(min-width: 1100px)">
             <div className="ml-auto">
               <Dropdown items={navData.dropdownItems}>{this.state.username && `Hello, ${this.state.username}`}<i className="dropdown-icon zmdi zmdi-caret-down"></i></Dropdown>

src/components/back4App/HeaderNav/HeaderNav.react.js

@@ -4,14 +4,29 @@ import HeaderNavItem from 'components/back4App/HeaderNavItem/HeaderNavItem.react
 
 import styles from 'components/back4App/HeaderNav/HeaderNav.scss';
 
-const _renderHeaderMenuItems = items => items.map((item, index) => <HeaderNavItem key={index} index={index} {...item} />);
+class HeaderNav extends React.Component {
+  
+  constructor(props) {
+    super(props);
+  }
+  
+  renderHeaderMenuItems(items) {
+    return items.map((item, index) => (index == 0) ?
+      <HeaderNavItem key={index} index={index} {...item} notification={this.props.amountAppsWithExpiredPlans} /> :
+      <HeaderNavItem key={index} index={index} {...item} />
+    );
+  }
 
-let HeaderNav = props => (
-  <nav className={styles.nav}>
-    <ul className={styles.menu}>
-      {_renderHeaderMenuItems(props.items)}
-    </ul>
-  </nav>
-);
+  render() {
+    return (
+      <nav className={styles.nav}>
+        <ul className={styles.menu}>
+          {this.renderHeaderMenuItems(this.props.items)}
+        </ul>
+      </nav>
+    );
+  }
 
-export default HeaderNav;
+}
+
+export default HeaderNav;

src/components/back4App/HeaderNavItem/HeaderNavItem.react.js

@@ -2,20 +2,9 @@ import React, { Component } from 'react';
 
 import { Link } from 'react-router';
 
-import styles from 'components/back4App/HeaderNavItem/HeaderNavItem.scss';
+import NotificationBullet from 'components/back4App/NotificationBullet/NotificationBullet.react';
 
-let NavItem = props => {
-  return (
-    <li className={`${styles.item} ${props.isCurrent ? styles.active : ''}`}>
-      {
-        props.url ? <a className={styles.label} href={props.url}>{props.label}</a> :
-        props.pathname ? <Link className={styles.label} to={{ pathname:props.pathname }}>{props.label}</Link>:
-        null
-      }
-      <i className={`${styles.icon} zmdi zmdi-caret-up`}></i>
-    </li>
-  );
-}
+import styles from 'components/back4App/HeaderNavItem/HeaderNavItem.scss';
 
 export default class HeaderNavItem extends Component {
   constructor(props) {
@@ -31,6 +20,20 @@ export default class HeaderNavItem extends Component {
 
   render() {
     let { isCurrent } = this.state;
-    return NavItem({...this.props, isCurrent});
+    let { notification = '', url, pathname, label } = this.props;
+
+    return (
+      <li className={`${styles.item} ${isCurrent ? styles.active : ''}`}>
+        {
+          !!notification && <NotificationBullet notification={notification}></NotificationBullet>
+        }
+        {
+          url ? <a className={styles.label} href={url}>{label}</a> :
+          pathname ? <Link className={styles.label} to={{ pathname }}>{label}</Link> :
+          null
+        }
+        <i className={`${styles.icon} zmdi zmdi-caret-up`}></i>
+      </li>
+    );
   }
 }

src/components/back4App/NotificationBullet/NotificationBullet.react.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import styles from 'components/back4App/NotificationBullet/NotificationBullet.scss';
+
+const NotificationBullet = props => (
+  <div className={styles['notification-bullet']}>
+    { props.notification }
+  </div>
+);
+
+export default NotificationBullet;

src/components/back4App/NotificationBullet/NotificationBullet.scss

@@ -0,0 +1,17 @@
+.notification-bullet {
+  $size: 18px;
+  position: absolute;
+  display: block;
+  cursor: default;
+  background-color: red;
+  width: $size;
+  height: $size;
+  border-radius: $size / 2;
+  color: #FFF;
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+  padding-top: 1px;
+  margin-top: -12px;
+  margin-left: 64px;
+}