From b99fd1a4716a2060524aeaf1a8bab7e342003abb Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 12 Jun 2024 14:46:53 +0300 Subject: [PATCH 1/6] Improve props linting and actualize types --- src/ui/NavSwitcher/NavSwitcher.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/ui/NavSwitcher/NavSwitcher.js b/src/ui/NavSwitcher/NavSwitcher.js index 6e527c14e..5156adfce 100644 --- a/src/ui/NavSwitcher/NavSwitcher.js +++ b/src/ui/NavSwitcher/NavSwitcher.js @@ -1,8 +1,8 @@ import React from 'react' +import PropTypes from 'prop-types' import classNames from 'classnames' import { tracker } from 'utils/trackers' -import { propTypes, defaultProps } from './NavSwitcher.props' const NavSwitcher = (props) => { const { items, onChange, value: activeItem } = props @@ -29,7 +29,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 From b6a13b06e633ea6863f73b1d1046d5de34d10233 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 12 Jun 2024 14:47:50 +0300 Subject: [PATCH 2/6] Optimize export --- src/ui/NavSwitcher/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ui/NavSwitcher/index.js b/src/ui/NavSwitcher/index.js index d0c747c03..3829155c0 100644 --- a/src/ui/NavSwitcher/index.js +++ b/src/ui/NavSwitcher/index.js @@ -1,3 +1 @@ -import NavSwitcher from './NavSwitcher' - -export default NavSwitcher +export { default } from './NavSwitcher' From efb03729ece8c942d8f290d6d3b2eeaf4b802805 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 12 Jun 2024 14:48:05 +0300 Subject: [PATCH 3/6] Redundant code cleanup --- src/ui/NavSwitcher/NavSwitcher.props.js | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 src/ui/NavSwitcher/NavSwitcher.props.js diff --git a/src/ui/NavSwitcher/NavSwitcher.props.js b/src/ui/NavSwitcher/NavSwitcher.props.js deleted file mode 100644 index e2bde0ea4..000000000 --- a/src/ui/NavSwitcher/NavSwitcher.props.js +++ /dev/null @@ -1,9 +0,0 @@ -import PropTypes from 'prop-types' - -export const propTypes = { - items: PropTypes.array.isRequired, - onChange: PropTypes.func.isRequired, - value: PropTypes.string.isRequired, -} - -export const defaultProps = {} From eafc63d6494512326fe51c88c64ddd0ba84e3dba Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 12 Jun 2024 14:50:13 +0300 Subject: [PATCH 4/6] Improve active state checking flow --- src/ui/NavSwitcher/NavSwitcher.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/NavSwitcher/NavSwitcher.js b/src/ui/NavSwitcher/NavSwitcher.js index 5156adfce..f43496c0b 100644 --- a/src/ui/NavSwitcher/NavSwitcher.js +++ b/src/ui/NavSwitcher/NavSwitcher.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' +import { isEqual } from '@bitfinex/lib-js-util-base' import { tracker } from 'utils/trackers' @@ -16,7 +17,7 @@ const NavSwitcher = (props) => { {items.map((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 ( From ce4363f4f70f3be3a19e2e317d9eba73ec552694 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 12 Jun 2024 14:54:09 +0300 Subject: [PATCH 5/6] Improve items mapping --- src/ui/NavSwitcher/NavSwitcher.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/NavSwitcher/NavSwitcher.js b/src/ui/NavSwitcher/NavSwitcher.js index f43496c0b..a9cf0e512 100644 --- a/src/ui/NavSwitcher/NavSwitcher.js +++ b/src/ui/NavSwitcher/NavSwitcher.js @@ -1,6 +1,7 @@ import React 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' @@ -14,7 +15,7 @@ const NavSwitcher = (props) => { return (
- {items.map((item) => { + {_map(items, (item) => { const { label, value: itemValue } = item const itemClasses = classNames('nav-switcher-item', { 'nav-switcher-item--active': isEqual(itemValue, activeItem), From 53600032f5838b8646ce2a4aa2cee83da8c4d4e1 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 12 Jun 2024 14:57:28 +0300 Subject: [PATCH 6/6] Memoize nav switcher and lint fixes --- src/ui/NavSwitcher/NavSwitcher.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/ui/NavSwitcher/NavSwitcher.js b/src/ui/NavSwitcher/NavSwitcher.js index a9cf0e512..dc8c5442d 100644 --- a/src/ui/NavSwitcher/NavSwitcher.js +++ b/src/ui/NavSwitcher/NavSwitcher.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { memo } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' import _map from 'lodash/map' @@ -6,8 +6,11 @@ import { isEqual } from '@bitfinex/lib-js-util-base' import { tracker } from 'utils/trackers' -const NavSwitcher = (props) => { - const { items, onChange, value: activeItem } = props +const NavSwitcher = ({ + items, + onChange, + value: activeItem, +}) => { const handleClick = (itemValue) => { tracker.trackEvent(itemValue, 'Tab') onChange(itemValue) @@ -22,7 +25,11 @@ const NavSwitcher = (props) => { }) return ( - handleClick(itemValue)} key={itemValue}> + handleClick(itemValue)} + > {label} ) @@ -40,4 +47,4 @@ NavSwitcher.propTypes = { value: PropTypes.string.isRequired, } -export default NavSwitcher +export default memo(NavSwitcher)