#2473 optimize header and inbox

metasfresh · Dec 16, 2019 · b2c7bfb · b2c7bfb
1 parent 87c932e
commit b2c7bfb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 24 deletions.
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
@@ -1,6 +1,6 @@
 import counterpart from 'counterpart';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 import classnames from 'classnames';
@@ -33,7 +33,7 @@ import UserDropdown from './UserDropdown';
  * @module Header
  * @extends Component
  */
-class Header extends Component {
+class Header extends PureComponent {
   state = {
     isSubheaderShow: false,
     isSideListShow: false,
@@ -127,8 +127,12 @@ class Header extends Component {
    * @summary ToDo: Describe the method
    * @param {object} state
    */
-  handleInboxOpen = state => {
-    this.setState({ isInboxOpen: !!state });
+  closeInbox = () => {
+    this.setState({ isInboxOpen: false });
+  };
+
+  openInbox = () => {
+    this.setState({ isInboxOpen: true });
   };
 
   /**
@@ -683,9 +687,7 @@ class Header extends Component {
                       'header-item-open': isInboxOpen,
                     }
                   )}
-                  onClick={() =>
-                    this.closeOverlays('', () => this.handleInboxOpen(true))
-                  }
+                  onClick={() => this.closeOverlays('', this.openInbox)}
                   onMouseEnter={() =>
                     this.toggleTooltip(keymap.OPEN_INBOX_MENU)
                   }
@@ -711,8 +713,8 @@ class Header extends Component {
                 <Inbox
                   ref={this.inboxRef}
                   open={isInboxOpen}
-                  close={this.handleInboxOpen}
-                  onFocus={() => this.handleInboxOpen(true)}
+                  close={this.closeInbox}
+                  onFocus={this.openInbox}
                   disableOnClickOutside={true}
                   inbox={inbox}
                 />

diff --git a/src/components/inbox/Inbox.js b/src/components/inbox/Inbox.js
@@ -1,6 +1,6 @@
 import counterpart from 'counterpart';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import onClickOutside from 'react-onclickoutside';
 import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
@@ -19,11 +19,7 @@ import InboxItem from './InboxItem';
  * @module Inbox
  * @extends Component
  */
-class Inbox extends Component {
-  constructor(props) {
-    super(props);
-  }
-
+class Inbox extends PureComponent {
   /**
    * @method handleClick
    * @summary ToDo: Describe the method
@@ -222,7 +218,7 @@ const routerInbox = withRouter(
  * @todo Write the documentation
  */
 const addClickOutsideHandler = Child => {
-  return class WithClickOutsideHandler extends Component {
+  return class WithClickOutsideHandler extends PureComponent {
     static propTypes = {
       close: PropTypes.func,
     };

diff --git a/src/components/inbox/InboxItem.js b/src/components/inbox/InboxItem.js
@@ -1,18 +1,14 @@
 import counterpart from 'counterpart';
 import Moment from 'moment';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * @file Class based component.
  * @module InboxItem
  * @extends Component
  */
-class InboxItem extends Component {
-  constructor(props) {
-    super(props);
-  }
-
+export default class InboxItem extends PureComponent {
   /**
    * @method renderIconFromTarget
    * @summary ToDo: Describe the method
@@ -137,5 +133,3 @@ InboxItem.propTypes = {
   onClick: PropTypes.any,
   onDelete: PropTypes.any,
 };
-
-export default InboxItem;