(improvements) Navigation switcher

src/ui/NavSwitcher/NavSwitcher.js

@@ -1,26 +1,35 @@
-import React from 'react'
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import _map from 'lodash/map'
+import { isEqual } from '@bitfinex/lib-js-util-base'
 
 import { tracker } from 'utils/trackers'
-import { propTypes, defaultProps } from './NavSwitcher.props'
 
-const NavSwitcher = (props) => {
-  const { items, onChange, value: activeItem } = props
+const NavSwitcher = ({
+  items,
+  onChange,
+  value: activeItem,
+}) => {
   const handleClick = (itemValue) => {
     tracker.trackEvent(itemValue, 'Tab')
     onChange(itemValue)
   }
 
   return (
     <div className='nav-switcher'>
-      {items.map((item) => {
+      {_map(items, (item) => {
         const { label, value: itemValue } = item
         const itemClasses = classNames('nav-switcher-item', {
-          'nav-switcher-item--active': itemValue === activeItem,
+          'nav-switcher-item--active': isEqual(itemValue, activeItem),
         })
 
         return (
-          <span className={itemClasses} onClick={() => handleClick(itemValue)} key={itemValue}>
+          <span
+            key={itemValue}
+            className={itemClasses}
+            onClick={() => handleClick(itemValue)}
+          >
             {label}
           </span>
         )
@@ -29,7 +38,13 @@ const NavSwitcher = (props) => {
   )
 }
 
-NavSwitcher.propTypes = propTypes
-NavSwitcher.defaultProps = defaultProps
+NavSwitcher.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string,
+  })).isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+}
 
-export default NavSwitcher
+export default memo(NavSwitcher)

src/ui/NavSwitcher/index.js

@@ -1,3 +1 @@
-import NavSwitcher from './NavSwitcher'
-
-export default NavSwitcher
+export { default } from './NavSwitcher'