Fix code readability, use PureComponent over Component

ui/app/components/page-container/page-container-header/page-container-header.component.js

@@ -47,7 +47,7 @@ export default class PageContainerHeader extends Component {
       <div className={
         classnames(
           'page-container__header',
-          tabs && 'page-container__header--no-padding-bottom'
+          { 'page-container__header--no-padding-bottom': Boolean(tabs) }
         )
       }>
 

ui/app/components/page-container/page-container.component.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
 import PageContainerHeader from './page-container-header'
 import PageContainerFooter from './page-container-footer'
 
-export default class PageContainer extends Component {
+export default class PageContainer extends PureComponent {
   static propTypes = {
     // PageContainerHeader props
     backButtonString: PropTypes.string,
@@ -28,25 +28,11 @@ export default class PageContainer extends Component {
   }
 
   state = {
-    activeTabIndex: 0,
+    activeTabIndex: this.props.defaultActiveTabIndex || 0,
   }
 
-  componentDidMount () {
+  handleTabClick (activeTabIndex) {
-    const { defaultActiveTabIndex } = this.props
+    this.setState({ activeTabIndex })
-
-    if (defaultActiveTabIndex) {
-      this.setState({ activeTabIndex: defaultActiveTabIndex })
-    }
-  }
-
-  handleTabClick (tabIndex) {
-    const { activeTabIndex } = this.state
-
-    if (tabIndex !== activeTabIndex) {
-      this.setState({
-        activeTabIndex: tabIndex,
-      })
-    }
   }
 
   renderTabs () {
@@ -58,12 +44,12 @@ export default class PageContainer extends Component {
 
     const numberOfTabs = React.Children.count(tabsComponent.props.children)
 
-    return React.Children.map(tabsComponent.props.children, (child, index) => {
+    return React.Children.map(tabsComponent.props.children, (child, tabIndex) => {
       return child && React.cloneElement(child, {
         onClick: index => this.handleTabClick(index),
-        tabIndex: index,
+        tabIndex,
-        isActive: numberOfTabs > 1 && index === this.state.activeTabIndex,
+        isActive: numberOfTabs > 1 && tabIndex === this.state.activeTabIndex,
-        key: index,
+        key: tabIndex,
         className: 'page-container__tab',
         activeClassName: 'page-container__tab--selected',
       })
@@ -83,13 +69,12 @@ export default class PageContainer extends Component {
   renderContent () {
     const { contentComponent, tabsComponent } = this.props
 
-    switch (true) {
+    if (contentComponent) {
-      case Boolean(contentComponent):
+      return contentComponent
-        return contentComponent
+    } else if (tabsComponent) {
-      case Boolean(tabsComponent):
+      return this.renderActiveTabContent()
-        return this.renderActiveTabContent()
+    } else {
-      default:
+      return null
-        return null
     }
   }
 

ui/app/components/tabs/tab/tab.component.js

@@ -8,8 +8,8 @@ const Tab = props => {
   return (
     <li
       className={classnames(
-        className || 'tab',
+        className,
-        isActive && (activeClassName || 'tab--active'),
+        { [activeClassName]: isActive },
       )}
       onClick={event => {
         event.preventDefault()
@@ -30,4 +30,9 @@ Tab.propTypes = {
   activeClassName: PropTypes.string,
 }
 
+Tab.defaultProps = {
+  className: 'tab',
+  activeClassName: 'tab--active',
+}
+
 export default Tab