From 430df5b932f8d8fb16852fadf70d4076b83fabde Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 3 May 2024 18:17:32 +0300 Subject: [PATCH 01/94] Refactor collapsed table to functional --- src/ui/CollapsedTable/CollapsedTable.js | 62 +++++++++++-------------- 1 file changed, 28 insertions(+), 34 deletions(-) diff --git a/src/ui/CollapsedTable/CollapsedTable.js b/src/ui/CollapsedTable/CollapsedTable.js index 0b09b6f4a..b1a846453 100644 --- a/src/ui/CollapsedTable/CollapsedTable.js +++ b/src/ui/CollapsedTable/CollapsedTable.js @@ -1,42 +1,36 @@ -import React, { PureComponent } from 'react' +import React from 'react' import { withTranslation } from 'react-i18next' import PropTypes from 'prop-types' import _times from 'lodash/times' -class CollapsedTable extends PureComponent { - render() { - const { numRows, tableColumns, t } = this.props - - return ( -
- {_times(numRows, rowIndex => ( -
- {tableColumns.map((column) => { - const { - id, name, nameStr, renderer, description, - } = column - const cell = renderer(rowIndex) - return ( -
-
- {nameStr || t(name)} -
- {description && ( - - {t(description)} - - )} -
-
{cell.props.children}
-
- ) - })} -
- ))} +const CollapsedTable = ({ numRows, tableColumns, t }) => ( +
+ {_times(numRows, rowIndex => ( +
+ {tableColumns.map((column) => { + const { + id, name, nameStr, renderer, description, + } = column + const cell = renderer(rowIndex) + return ( +
+
+ {nameStr || t(name)} +
+ {description && ( + + {t(description)} + + )} +
+
{cell.props.children}
+
+ ) + })}
- ) - } -} + ))} +
+) const TABLE_COLUMNS_PROPS = PropTypes.shape({ name: PropTypes.string, From a0aad0ea87c4ba9dc85e47512de4d0d444446701 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 3 May 2024 18:20:50 +0300 Subject: [PATCH 02/94] Rework t providing and memoize --- src/ui/CollapsedTable/CollapsedTable.js | 65 +++++++++++++------------ 1 file changed, 34 insertions(+), 31 deletions(-) diff --git a/src/ui/CollapsedTable/CollapsedTable.js b/src/ui/CollapsedTable/CollapsedTable.js index b1a846453..10aaab3a1 100644 --- a/src/ui/CollapsedTable/CollapsedTable.js +++ b/src/ui/CollapsedTable/CollapsedTable.js @@ -1,36 +1,40 @@ -import React from 'react' -import { withTranslation } from 'react-i18next' +import React, { memo } from 'react' +import { useTranslation } from 'react-i18next' import PropTypes from 'prop-types' import _times from 'lodash/times' -const CollapsedTable = ({ numRows, tableColumns, t }) => ( -
- {_times(numRows, rowIndex => ( -
- {tableColumns.map((column) => { - const { - id, name, nameStr, renderer, description, - } = column - const cell = renderer(rowIndex) - return ( -
-
- {nameStr || t(name)} -
- {description && ( - - {t(description)} - - )} +const CollapsedTable = ({ numRows, tableColumns }) => { + const { t } = useTranslation() + + return ( +
+ {_times(numRows, rowIndex => ( +
+ {tableColumns.map((column) => { + const { + id, name, nameStr, renderer, description, + } = column + const cell = renderer(rowIndex) + return ( +
+
+ {nameStr || t(name)} +
+ {description && ( + + {t(description)} + + )} +
+
{cell.props.children}
-
{cell.props.children}
-
- ) - })} -
- ))} -
-) + ) + })} +
+ ))} +
+ ) +} const TABLE_COLUMNS_PROPS = PropTypes.shape({ name: PropTypes.string, @@ -42,9 +46,8 @@ const TABLE_COLUMNS_PROPS = PropTypes.shape({ }) CollapsedTable.propTypes = { - t: PropTypes.func.isRequired, numRows: PropTypes.number.isRequired, tableColumns: PropTypes.arrayOf(TABLE_COLUMNS_PROPS).isRequired, } -export default withTranslation('translations')(CollapsedTable) +export default memo(CollapsedTable) From ed949c4377cc74269ec9ac7ebd98bb40fb5a975d Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 3 May 2024 18:25:44 +0300 Subject: [PATCH 03/94] Actualize prop-types and lint fixes --- src/ui/CollapsedTable/CollapsedTable.js | 33 +++++++++++++------------ 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/src/ui/CollapsedTable/CollapsedTable.js b/src/ui/CollapsedTable/CollapsedTable.js index 10aaab3a1..eb12623e0 100644 --- a/src/ui/CollapsedTable/CollapsedTable.js +++ b/src/ui/CollapsedTable/CollapsedTable.js @@ -1,16 +1,19 @@ import React, { memo } from 'react' import { useTranslation } from 'react-i18next' import PropTypes from 'prop-types' +import _map from 'lodash/map' import _times from 'lodash/times' const CollapsedTable = ({ numRows, tableColumns }) => { const { t } = useTranslation() - return (
{_times(numRows, rowIndex => ( -
- {tableColumns.map((column) => { +
+ {_map(tableColumns, (column) => { const { id, name, nameStr, renderer, description, } = column @@ -21,9 +24,9 @@ const CollapsedTable = ({ numRows, tableColumns }) => { {nameStr || t(name)}
{description && ( - - {t(description)} - + + {t(description)} + )}
{cell.props.children}
@@ -36,18 +39,16 @@ const CollapsedTable = ({ numRows, tableColumns }) => { ) } -const TABLE_COLUMNS_PROPS = PropTypes.shape({ - name: PropTypes.string, - width: PropTypes.number, - nameStr: PropTypes.string, - id: PropTypes.string.isRequired, - renderer: PropTypes.func.isRequired, - copyText: PropTypes.func, -}) - CollapsedTable.propTypes = { numRows: PropTypes.number.isRequired, - tableColumns: PropTypes.arrayOf(TABLE_COLUMNS_PROPS).isRequired, + tableColumns: PropTypes.arrayOf(PropTypes.shape({ + name: PropTypes.string, + width: PropTypes.number, + nameStr: PropTypes.string, + id: PropTypes.string.isRequired, + renderer: PropTypes.func.isRequired, + copyText: PropTypes.func, + })).isRequired, } export default memo(CollapsedTable) From 52cdb69ca5068e72307aa6d0368ca82da5700fdd Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 3 May 2024 18:26:23 +0300 Subject: [PATCH 04/94] Update export --- src/ui/CollapsedTable/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ui/CollapsedTable/index.js b/src/ui/CollapsedTable/index.js index ef258041b..9dee05ca2 100644 --- a/src/ui/CollapsedTable/index.js +++ b/src/ui/CollapsedTable/index.js @@ -1,3 +1 @@ -import CollapsedTable from './CollapsedTable' - -export default CollapsedTable +export { default } from './CollapsedTable' From 7da55ae8ffb0386376459652cd96a8234f634e3a Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 3 May 2024 18:27:58 +0300 Subject: [PATCH 05/94] Lint fix --- src/ui/CollapsedTable/CollapsedTable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/CollapsedTable/CollapsedTable.js b/src/ui/CollapsedTable/CollapsedTable.js index eb12623e0..5fad72913 100644 --- a/src/ui/CollapsedTable/CollapsedTable.js +++ b/src/ui/CollapsedTable/CollapsedTable.js @@ -6,6 +6,7 @@ import _times from 'lodash/times' const CollapsedTable = ({ numRows, tableColumns }) => { const { t } = useTranslation() + return (
{_times(numRows, rowIndex => ( From 07072cea60ad4e6f371d2df66c92b1e8a1cec303 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 14 May 2024 14:33:43 +0300 Subject: [PATCH 06/94] Implement unified cell getters utility --- src/utils/columns.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index 55b990761..f33b092be 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -235,6 +235,15 @@ export const getCellState = (isLoading, isNoData) => { return null } +export const getCell = (content, tooltipContent, className) => ( + + {content} + +) + export const getRowsConfig = (isLoading, isNoData, numRows = 0) => { if (isLoading) return 5 if (isNoData) return 1 From 11127613f2309c8b5da76293686c6674301798b3 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 20 May 2024 13:39:02 +0300 Subject: [PATCH 07/94] Implement cell states and tooltips handling inside reusable cell getter --- src/utils/columns.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index f33b092be..74d2de3dc 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -235,14 +235,15 @@ export const getCellState = (isLoading, isNoData) => { return null } -export const getCell = (content, tooltipContent, className) => ( - - {content} - -) +export const getCell = (content, isLoading, isNoData, t) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const tooltipContent = getTooltipContent(content, t) + return ( + + {content} + + ) +} export const getRowsConfig = (isLoading, isNoData, numRows = 0) => { if (isLoading) return 5 From 9c0887ce83ed84410d3a9d9a3976eda5ec3186c5 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 20 May 2024 13:43:47 +0300 Subject: [PATCH 08/94] Improve cell generation handling flow --- src/utils/columns.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index 74d2de3dc..780f5c91a 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -235,8 +235,7 @@ export const getCellState = (isLoading, isNoData) => { return null } -export const getCell = (content, isLoading, isNoData, t) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) +export const getCell = (content, t) => { const tooltipContent = getTooltipContent(content, t) return ( From 4182c0a600925d8449ee822e7a78bb28b01be0d0 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 20 May 2024 13:50:12 +0300 Subject: [PATCH 09/94] Refactor and optimize spot columns configuration getters --- src/components/Tickers/Tickers.columns.js | 53 ++++------------------- 1 file changed, 9 insertions(+), 44 deletions(-) diff --git a/src/components/Tickers/Tickers.columns.js b/src/components/Tickers/Tickers.columns.js index c61fb3548..cb3980148 100644 --- a/src/components/Tickers/Tickers.columns.js +++ b/src/components/Tickers/Tickers.columns.js @@ -1,8 +1,5 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export default function getColumns(props) { const { @@ -22,15 +19,9 @@ export default function getColumns(props) { className: 'align-left', width: getColumnWidth('symbol', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -39,19 +30,9 @@ export default function getColumns(props) { name: 'column.bid', width: getColumnWidth('bid', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { bid } = filteredData[rowIndex] - const fixedBid = fixedFloat(bid) - return ( - - {fixedBid} - - ) + return getCell(fixedFloat(bid), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].bid), @@ -61,19 +42,9 @@ export default function getColumns(props) { name: 'column.ask', width: getColumnWidth('ask', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { ask } = filteredData[rowIndex] - const fixedAsk = fixedFloat(ask) - return ( - - {fixedAsk} - - ) + return getCell(fixedFloat(ask), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].ask), @@ -84,15 +55,9 @@ export default function getColumns(props) { nameStr: `${t('column.time')} (${timeOffset})`, width: getColumnWidth('mtsUpdate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return ( - - {timestamp} - - ) + return getCell(fixedFloat(timestamp), t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, From 288806570312628527fb9de83ba4c30778614ca5 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 20 May 2024 14:01:47 +0300 Subject: [PATCH 10/94] Minor cols getter improvement --- src/components/Tickers/Tickers.columns.js | 112 +++++++++++----------- src/components/Tickers/Tickers.js | 2 +- 2 files changed, 55 insertions(+), 59 deletions(-) diff --git a/src/components/Tickers/Tickers.columns.js b/src/components/Tickers/Tickers.columns.js index cb3980148..4f6c8ab80 100644 --- a/src/components/Tickers/Tickers.columns.js +++ b/src/components/Tickers/Tickers.columns.js @@ -1,65 +1,61 @@ import { fixedFloat } from 'ui/utils' import { getCell, getCellState, getColumnWidth } from 'utils/columns' -export default function getColumns(props) { - const { - t, - isNoData, - isLoading, - timeOffset, - getFullTime, - columnsWidth, - filteredData, - } = props - - return [ - { - id: 'symbol', - name: 'column.pair', - className: 'align-left', - width: getColumnWidth('symbol', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { pair } = filteredData[rowIndex] - return getCell(pair, t) - }, - copyText: rowIndex => filteredData[rowIndex].pair, +export const getColumns = ({ + t, + isNoData, + isLoading, + timeOffset, + getFullTime, + columnsWidth, + filteredData, +}) => [ + { + id: 'symbol', + name: 'column.pair', + className: 'align-left', + width: getColumnWidth('symbol', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { pair } = filteredData[rowIndex] + return getCell(pair, t) }, - { - id: 'bid', - name: 'column.bid', - width: getColumnWidth('bid', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { bid } = filteredData[rowIndex] - return getCell(fixedFloat(bid), t) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].bid), + copyText: rowIndex => filteredData[rowIndex].pair, + }, + { + id: 'bid', + name: 'column.bid', + width: getColumnWidth('bid', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { bid } = filteredData[rowIndex] + return getCell(fixedFloat(bid), t) }, - { - id: 'ask', - name: 'column.ask', - width: getColumnWidth('ask', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const { ask } = filteredData[rowIndex] - return getCell(fixedFloat(ask), t) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].ask), + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].bid), + }, + { + id: 'ask', + name: 'column.ask', + width: getColumnWidth('ask', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { ask } = filteredData[rowIndex] + return getCell(fixedFloat(ask), t) }, - { - id: 'mtsUpdate', - className: 'align-left', - nameStr: `${t('column.time')} (${timeOffset})`, - width: getColumnWidth('mtsUpdate', columnsWidth), - renderer: (rowIndex) => { - if (isLoading || isNoData) return getCellState(isLoading, isNoData) - const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return getCell(fixedFloat(timestamp), t) - }, - copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].ask), + }, + { + id: 'mtsUpdate', + className: 'align-left', + nameStr: `${t('column.time')} (${timeOffset})`, + width: getColumnWidth('mtsUpdate', columnsWidth), + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) + return getCell(fixedFloat(timestamp), t) }, - ] -} + copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), + }, +] diff --git a/src/components/Tickers/Tickers.js b/src/components/Tickers/Tickers.js index 01da2a59d..26ab5b5fc 100644 --- a/src/components/Tickers/Tickers.js +++ b/src/components/Tickers/Tickers.js @@ -26,7 +26,7 @@ import { clearAllPairs, } from 'state/utils' -import getColumns from './Tickers.columns' +import { getColumns } from './Tickers.columns' import { propTypes, defaultProps } from './Tickers.props' const TYPE = queryConstants.MENU_TICKERS From 35fdceb3cffd5dcde460300cd1413221aadea611 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 21 May 2024 15:20:24 +0300 Subject: [PATCH 11/94] Redundant timestamp formatting cleanup --- src/components/Tickers/Tickers.columns.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tickers/Tickers.columns.js b/src/components/Tickers/Tickers.columns.js index 4f6c8ab80..84938d8c1 100644 --- a/src/components/Tickers/Tickers.columns.js +++ b/src/components/Tickers/Tickers.columns.js @@ -54,7 +54,7 @@ export const getColumns = ({ renderer: (rowIndex) => { if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return getCell(fixedFloat(timestamp), t) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, From 160965db4a0dd5f43985432d3b418c89dc1aa350 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 13 May 2024 12:04:17 +0300 Subject: [PATCH 12/94] Improve props linting --- src/ui/DateFormatSelector/DateFormatSelector.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/ui/DateFormatSelector/DateFormatSelector.js b/src/ui/DateFormatSelector/DateFormatSelector.js index a49398e1b..c3de2f052 100644 --- a/src/ui/DateFormatSelector/DateFormatSelector.js +++ b/src/ui/DateFormatSelector/DateFormatSelector.js @@ -1,10 +1,9 @@ import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' import Select from 'ui/Select' import types from 'state/base/constants' -import { propTypes, defaultProps } from './DateFormatSelector.props' - class DateFormatSelector extends PureComponent { handleClick = (format) => { const { dateFormat, setDateFormat } = this.props @@ -29,7 +28,9 @@ class DateFormatSelector extends PureComponent { } } -DateFormatSelector.propTypes = propTypes -DateFormatSelector.defaultProps = defaultProps +DateFormatSelector.propTypes = { + dateFormat: PropTypes.string.isRequired, + setDateFormat: PropTypes.func.isRequired, +} export default DateFormatSelector From 9058ad18be36d9bd116dd703469197c38cf8d252 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 13 May 2024 12:06:05 +0300 Subject: [PATCH 13/94] Update export --- src/ui/DateFormatSelector/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ui/DateFormatSelector/index.js b/src/ui/DateFormatSelector/index.js index 32d80ddc5..0b9e5fd65 100644 --- a/src/ui/DateFormatSelector/index.js +++ b/src/ui/DateFormatSelector/index.js @@ -1,3 +1 @@ -import DateFormatSelector from './DateFormatSelector.container' - -export default DateFormatSelector +export { default } from './DateFormatSelector.container' From e3bb9346b056fa9b1dfb0fa8acc80c48b14bb830 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 13 May 2024 12:06:26 +0300 Subject: [PATCH 14/94] Redundant code cleanup --- src/ui/DateFormatSelector/DateFormatSelector.props.js | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 src/ui/DateFormatSelector/DateFormatSelector.props.js diff --git a/src/ui/DateFormatSelector/DateFormatSelector.props.js b/src/ui/DateFormatSelector/DateFormatSelector.props.js deleted file mode 100644 index 9d09038a9..000000000 --- a/src/ui/DateFormatSelector/DateFormatSelector.props.js +++ /dev/null @@ -1,9 +0,0 @@ -import PropTypes from 'prop-types' - -export const propTypes = { - dateFormat: PropTypes.string.isRequired, - setDateFormat: PropTypes.func.isRequired, -} - -export const defaultProps = { -} From a05945560044e677be6eff373a70226829ff5d59 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 13 May 2024 12:09:39 +0300 Subject: [PATCH 15/94] Refactor to functional and memoize --- .../DateFormatSelector/DateFormatSelector.js | 33 ++++++++----------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/src/ui/DateFormatSelector/DateFormatSelector.js b/src/ui/DateFormatSelector/DateFormatSelector.js index c3de2f052..b35e1397e 100644 --- a/src/ui/DateFormatSelector/DateFormatSelector.js +++ b/src/ui/DateFormatSelector/DateFormatSelector.js @@ -1,31 +1,26 @@ -import React, { PureComponent } from 'react' +import React, { memo } from 'react' import PropTypes from 'prop-types' import Select from 'ui/Select' import types from 'state/base/constants' -class DateFormatSelector extends PureComponent { - handleClick = (format) => { - const { dateFormat, setDateFormat } = this.props +const DateFormatSelector = ({ dateFormat, setDateFormat }) => { + const handleClick = (format) => { if (dateFormat !== format) { setDateFormat(format) } } - render() { - const { dateFormat } = this.props - - return ( - + ) } DateFormatSelector.propTypes = { @@ -33,4 +28,4 @@ DateFormatSelector.propTypes = { setDateFormat: PropTypes.func.isRequired, } -export default DateFormatSelector +export default memo(DateFormatSelector) From 5b79995120b67345e8561eed5f5dcb63cc78c6c3 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 13 May 2024 12:56:17 +0300 Subject: [PATCH 16/94] Optimize selectior method --- src/ui/DateFormatSelector/DateFormatSelector.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/DateFormatSelector/DateFormatSelector.js b/src/ui/DateFormatSelector/DateFormatSelector.js index b35e1397e..8e38cf287 100644 --- a/src/ui/DateFormatSelector/DateFormatSelector.js +++ b/src/ui/DateFormatSelector/DateFormatSelector.js @@ -1,15 +1,15 @@ -import React, { memo } from 'react' +import React, { memo, useCallback } from 'react' import PropTypes from 'prop-types' import Select from 'ui/Select' import types from 'state/base/constants' const DateFormatSelector = ({ dateFormat, setDateFormat }) => { - const handleClick = (format) => { + const handleClick = useCallback((format) => { if (dateFormat !== format) { setDateFormat(format) } - } + }, [dateFormat, setDateFormat]) return ( Date: Thu, 23 May 2024 12:39:13 +0300 Subject: [PATCH 22/94] Cleanup --- src/ui/DateFormatSelector/DateFormatSelector.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/DateFormatSelector/DateFormatSelector.js b/src/ui/DateFormatSelector/DateFormatSelector.js index 4956936d2..c79c4195a 100644 --- a/src/ui/DateFormatSelector/DateFormatSelector.js +++ b/src/ui/DateFormatSelector/DateFormatSelector.js @@ -1,4 +1,4 @@ -import React, { memo, useCallback } from 'react' +import React, { useCallback } from 'react' import { useDispatch, useSelector } from 'react-redux' import { isEqual } from '@bitfinex/lib-js-util-base' @@ -28,4 +28,4 @@ const DateFormatSelector = () => { ) } -export default memo(DateFormatSelector) +export default DateFormatSelector From 9b7ecc5c49e2e03cac6b2496678ef00276669b0e Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 27 May 2024 12:43:10 +0300 Subject: [PATCH 23/94] Extend tooltip content handling flow --- src/utils/columns.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index 780f5c91a..b6bd1fcdb 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -235,8 +235,8 @@ export const getCellState = (isLoading, isNoData) => { return null } -export const getCell = (content, t) => { - const tooltipContent = getTooltipContent(content, t) +export const getCell = (content, t, tooltip) => { + const tooltipContent = getTooltipContent(tooltip || content, t) return ( {content} From a513801dde54cbba0a5ef9186e8a6f277aacb08a Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 27 May 2024 12:57:53 +0300 Subject: [PATCH 24/94] Rework and optimize funding credit history cols configs --- .../FundingCreditHistory.columns.js | 134 ++++-------------- 1 file changed, 25 insertions(+), 109 deletions(-) diff --git a/src/components/FundingCreditHistory/FundingCreditHistory.columns.js b/src/components/FundingCreditHistory/FundingCreditHistory.columns.js index 163e2a607..06b3c299a 100644 --- a/src/components/FundingCreditHistory/FundingCreditHistory.columns.js +++ b/src/components/FundingCreditHistory/FundingCreditHistory.columns.js @@ -1,9 +1,6 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { getSideMsg, getSideColor } from 'state/utils' import { formatAmount, formatColor, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export const getColumns = ({ t, @@ -20,15 +17,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - return ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -38,15 +29,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('symbol', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { symbol } = filteredData[rowIndex] - return ( - - {symbol} - - ) + return getCell(symbol, t) }, copyText: rowIndex => filteredData[rowIndex].symbol, }, @@ -56,16 +41,10 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('side', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { side } = filteredData[rowIndex] const formattedSide = t(`fcredit.side.${getSideMsg(side)}`) - return ( - - {formatColor(formattedSide, getSideColor(side))} - - ) + return getCell(formatColor(formattedSide, getSideColor(side)), t, formattedSide) }, copyText: rowIndex => t(`fcredit.side.${getSideMsg(filteredData[rowIndex].side)}`), }, @@ -74,18 +53,9 @@ export const getColumns = ({ name: 'column.amount', width: getColumnWidth('amount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount } = filteredData[rowIndex] - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -96,15 +66,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('status', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] - return ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -114,15 +78,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('type', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { type } = filteredData[rowIndex] - return ( - - {type} - - ) + return getCell(type, t) }, copyText: rowIndex => filteredData[rowIndex].type, }, @@ -131,18 +89,9 @@ export const getColumns = ({ name: 'column.rateperc', width: getColumnWidth('rate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { rate } = filteredData[rowIndex] - return ( - - {fixedFloat(rate)} - - ) + return getCell(fixedFloat(rate), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate), @@ -153,18 +102,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('period', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const period = `${filteredData[rowIndex].period} ${t('column.days')}` - return ( - - {period} - - ) + return getCell(period, t) }, copyText: (rowIndex) => { const days = t('column.days') @@ -177,15 +117,9 @@ export const getColumns = ({ nameStr: `${t('column.opened')} (${timeOffset})`, width: getColumnWidth('mtsOpening', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsOpening) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsOpening), }, @@ -195,15 +129,9 @@ export const getColumns = ({ nameStr: `${t('column.lastpayout')} (${timeOffset})`, width: getColumnWidth('mtsLastPayout', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsLastPayout) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsLastPayout), }, @@ -213,15 +141,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('positionPair', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { positionPair } = filteredData[rowIndex] - return ( - - {positionPair} - - ) + return getCell(positionPair, t) }, copyText: rowIndex => filteredData[rowIndex].positionPair, }, @@ -231,15 +153,9 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${timeOffset})`, width: getColumnWidth('mtsUpdate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, From c42d20a4eb89dbce3e24193e3f455273be7a8b57 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 27 May 2024 13:54:32 +0300 Subject: [PATCH 25/94] Rework and optimize funding loans cols configs --- .../FundingLoanHistory.columns.js | 121 ++++-------------- 1 file changed, 22 insertions(+), 99 deletions(-) diff --git a/src/components/FundingLoanHistory/FundingLoanHistory.columns.js b/src/components/FundingLoanHistory/FundingLoanHistory.columns.js index a7ac073a0..38f752918 100644 --- a/src/components/FundingLoanHistory/FundingLoanHistory.columns.js +++ b/src/components/FundingLoanHistory/FundingLoanHistory.columns.js @@ -1,9 +1,6 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { getSideMsg, getSideColor } from 'state/utils' import { formatAmount, formatColor, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export const getColumns = ({ t, @@ -20,15 +17,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - return ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -38,15 +29,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('symbol', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { symbol } = filteredData[rowIndex] - return ( - - {symbol} - - ) + return getCell(symbol, t) }, copyText: rowIndex => filteredData[rowIndex].symbol, }, @@ -56,16 +41,10 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('side', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { side } = filteredData[rowIndex] const formattedSide = t(`floan.side.${getSideMsg(side)}`) - return ( - - {formatColor(formattedSide, getSideColor(side))} - - ) + return getCell(formatColor(formattedSide, getSideColor(side)), t, formattedSide) }, copyText: rowIndex => t(`floan.side.${getSideMsg(filteredData[rowIndex].side)}`), }, @@ -74,18 +53,9 @@ export const getColumns = ({ name: 'column.amount', width: getColumnWidth('amount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amount } = filteredData[rowIndex] - return ( - - {formatAmount(amount)} - - ) + return getCell(formatAmount(amount), t, fixedFloat(amount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amount), @@ -96,15 +66,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('status', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] - return ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -114,15 +78,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('type', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { type } = filteredData[rowIndex] - return ( - - {type} - - ) + return getCell(type, t) }, copyText: rowIndex => filteredData[rowIndex].type, }, @@ -131,19 +89,9 @@ export const getColumns = ({ name: 'column.rateperc', width: getColumnWidth('rate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { rate } = filteredData[rowIndex] - const fixedRate = fixedFloat(rate) - return ( - - {fixedRate} - - ) + return getCell(fixedFloat(rate), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate), @@ -154,18 +102,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('period', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const period = `${filteredData[rowIndex].period} ${t('column.days')}` - return ( - - {period} - - ) + return getCell(period, t) }, copyText: rowIndex => `${filteredData[rowIndex].period} ${t('column.days')}`, }, @@ -179,11 +118,7 @@ export const getColumns = ({ return getCellState(isLoading, isNoData) } const timestamp = getFullTime(filteredData[rowIndex].mtsOpening) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsOpening), }, @@ -193,15 +128,9 @@ export const getColumns = ({ nameStr: `${t('column.closed')} (${timeOffset})`, width: getColumnWidth('mtsLastPayout', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsLastPayout) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsLastPayout), }, @@ -211,15 +140,9 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${timeOffset})`, width: getColumnWidth('mtsUpdate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, From 55415910af83b1cf651e083e775a87ba818f7e2d Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 27 May 2024 14:11:50 +0300 Subject: [PATCH 26/94] Rework and optimize funding bids&offers cols configs --- .../FundingOfferHistory.columns.js | 109 +++--------------- 1 file changed, 19 insertions(+), 90 deletions(-) diff --git a/src/components/FundingOfferHistory/FundingOfferHistory.columns.js b/src/components/FundingOfferHistory/FundingOfferHistory.columns.js index 11ba1fa12..32d13d1f8 100644 --- a/src/components/FundingOfferHistory/FundingOfferHistory.columns.js +++ b/src/components/FundingOfferHistory/FundingOfferHistory.columns.js @@ -1,8 +1,5 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { formatAmount, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export const getColumns = ({ t, @@ -19,15 +16,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('id', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { id } = filteredData[rowIndex] - return ( - - {id} - - ) + return getCell(id, t) }, copyText: rowIndex => filteredData[rowIndex].id, }, @@ -37,15 +28,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('symbol', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { symbol } = filteredData[rowIndex] - return ( - - {symbol} - - ) + return getCell(symbol, t) }, copyText: rowIndex => filteredData[rowIndex].symbol, }, @@ -54,19 +39,9 @@ export const getColumns = ({ name: 'column.amount', width: getColumnWidth('amountOrig', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amountOrig } = filteredData[rowIndex] - const fixedAmount = fixedFloat(amountOrig) - return ( - - {fixedAmount} - - ) + return getCell(formatAmount(amountOrig), t, fixedFloat(amountOrig)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountOrig), @@ -76,18 +51,9 @@ export const getColumns = ({ name: 'column.amount-exe', width: getColumnWidth('amountExecuted', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { amountExecuted } = filteredData[rowIndex] - return ( - - {formatAmount(amountExecuted)} - - ) + return getCell(formatAmount(amountExecuted), t, fixedFloat(amountExecuted)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].amountExecuted), @@ -98,15 +64,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('type', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { type } = filteredData[rowIndex] - return ( - - {type} - - ) + return getCell(type, t) }, copyText: rowIndex => filteredData[rowIndex].type, }, @@ -116,15 +76,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('status', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { status } = filteredData[rowIndex] - return ( - - {status} - - ) + return getCell(status, t) }, copyText: rowIndex => filteredData[rowIndex].status, }, @@ -133,19 +87,9 @@ export const getColumns = ({ name: 'column.rateperc', width: getColumnWidth('rate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { rate } = filteredData[rowIndex] - const fixedRate = fixedFloat(rate) - return ( - - {fixedRate} - - ) + return getCell(fixedFloat(rate), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].rate), @@ -156,18 +100,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('period', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const period = `${filteredData[rowIndex].period} ${t('column.days')}` - return ( - - {period} - - ) + return getCell(period, t) }, copyText: (rowIndex) => { const days = t('column.days') @@ -180,15 +115,9 @@ export const getColumns = ({ nameStr: `${t('column.date')} (${timeOffset})`, width: getColumnWidth('mtsUpdate', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].mtsUpdate) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].mtsUpdate), }, From d168b740dfecc6eae66cc9ca581e4d759a7c6cf1 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 29 May 2024 14:18:11 +0300 Subject: [PATCH 27/94] Improve props validation --- src/ui/LangMenu/LangMenu.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/ui/LangMenu/LangMenu.js b/src/ui/LangMenu/LangMenu.js index b01f6e09d..a00941dbc 100644 --- a/src/ui/LangMenu/LangMenu.js +++ b/src/ui/LangMenu/LangMenu.js @@ -1,12 +1,11 @@ import React from 'react' +import PropTypes from 'prop-types' import _map from 'lodash/map' import _keys from 'lodash/keys' import Select from 'ui/Select' import { LANGUAGE_NAMES } from 'locales/i18n' -import { propTypes, defaultProps } from './LangMenu.props' - const items = _map(_keys(LANGUAGE_NAMES), (lang) => ({ value: lang, label: LANGUAGE_NAMES[lang] })) const LangMenu = (props) => { @@ -24,7 +23,9 @@ const LangMenu = (props) => { ) } -LangMenu.propTypes = propTypes -LangMenu.defaultProps = defaultProps +LangMenu.propTypes = { + value: PropTypes.string.isRequired, + setLang: PropTypes.func.isRequired, +} export default LangMenu From a88cebf713296f822011e1948824d76632d60cdc Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 29 May 2024 14:19:03 +0300 Subject: [PATCH 28/94] Redundant code cleanup --- src/ui/LangMenu/LangMenu.props.js | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 src/ui/LangMenu/LangMenu.props.js diff --git a/src/ui/LangMenu/LangMenu.props.js b/src/ui/LangMenu/LangMenu.props.js deleted file mode 100644 index 10cef93d3..000000000 --- a/src/ui/LangMenu/LangMenu.props.js +++ /dev/null @@ -1,8 +0,0 @@ -import PropTypes from 'prop-types' - -export const propTypes = { - value: PropTypes.string.isRequired, - setLang: PropTypes.func.isRequired, -} - -export const defaultProps = {} From 3e47e9c63feb2c96b538e9c3fef851a37b13379a Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 29 May 2024 14:20:20 +0300 Subject: [PATCH 29/94] Optimize exporting --- src/ui/LangMenu/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ui/LangMenu/index.js b/src/ui/LangMenu/index.js index 5a02526aa..11ecf8e62 100644 --- a/src/ui/LangMenu/index.js +++ b/src/ui/LangMenu/index.js @@ -1,3 +1 @@ -import LangMenu from './LangMenu.container' - -export default LangMenu +export { default } from './LangMenu.container' From 3ac89289b4bfa4bc8db9fcbf42c80f2e9e8fdbbf Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 29 May 2024 14:26:32 +0300 Subject: [PATCH 30/94] Rework and optimize lang selection flow --- src/ui/LangMenu/LangMenu.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/ui/LangMenu/LangMenu.js b/src/ui/LangMenu/LangMenu.js index a00941dbc..60f14e5d3 100644 --- a/src/ui/LangMenu/LangMenu.js +++ b/src/ui/LangMenu/LangMenu.js @@ -1,31 +1,33 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React, { useCallback } from 'react' +import { useDispatch, useSelector } from 'react-redux' import _map from 'lodash/map' import _keys from 'lodash/keys' import Select from 'ui/Select' +import { setLang } from 'state/base/actions' import { LANGUAGE_NAMES } from 'locales/i18n' +import { getLocale } from 'state/base/selectors' const items = _map(_keys(LANGUAGE_NAMES), (lang) => ({ value: lang, label: LANGUAGE_NAMES[lang] })) -const LangMenu = (props) => { - const { setLang, value } = props +const LangMenu = () => { + const dispatch = useDispatch() + const currentValue = useSelector(getLocale) + + const handleChange = useCallback((value) => { + dispatch(setLang(value)) + }, [dispatch]) return (