Merge pull request #841 from alexstotsky/improve-time-frame-selection

(improvements) Time frame selector

src/ui/TimeFrameSelector/TimeFrameSelector.js

@@ -1,41 +1,36 @@
-import React from 'react'
+import React, { memo, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { withTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 
 import Select from 'ui/Select'
 
 import constants from './constants'
 
-const {
-  DAY, WEEK, MONTH, YEAR,
-} = constants
+const getItems = (t) => [
+  { value: constants.DAY, label: t('timeframe.day') },
+  { value: constants.WEEK, label: t('timeframe.week') },
+  { value: constants.MONTH, label: t('timeframe.month') },
+  { value: constants.YEAR, label: t('timeframe.year') },
+]
 
-const TimeFrameSelector = (props) => {
-  const { onChange, t, value } = props
-
-  const items = [
-    { value: DAY, label: t('timeframe.day') },
-    { value: WEEK, label: t('timeframe.week') },
-    { value: MONTH, label: t('timeframe.month') },
-    { value: YEAR, label: t('timeframe.year') },
-  ]
+const TimeFrameSelector = ({ onChange, value }) => {
+  const { t } = useTranslation()
+  const items = useMemo(() => getItems(t), [t])
 
   return (
     <Select
-      className='bitfinex-select--timeframe'
-      popoverClassName='bitfinex-select-menu--timeframe'
       value={value}
       items={items}
       onChange={onChange}
+      className='bitfinex-select--timeframe'
+      popoverClassName='bitfinex-select-menu--timeframe'
     />
   )
 }
 
 TimeFrameSelector.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
 }
-TimeFrameSelector.defaultProps = {}
 
-export default withTranslation('translations')(TimeFrameSelector)
+export default memo(TimeFrameSelector)

src/ui/TimeFrameSelector/index.js

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