diff --git a/src/ui/TokenTTLSelector/TokenTTLSelector.js b/src/ui/TokenTTLSelector/TokenTTLSelector.js index a6a6d16d0..c80de4833 100644 --- a/src/ui/TokenTTLSelector/TokenTTLSelector.js +++ b/src/ui/TokenTTLSelector/TokenTTLSelector.js @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react' +import React, { useCallback, useMemo } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' @@ -7,19 +7,21 @@ import { getAuthTokenTTL } from 'state/auth/selectors' import Select from 'ui/Select' +const getItems = (t) => [ + { value: 86400, label: t('auth.ttlSelect.1day') }, + { value: 172800, label: t('auth.ttlSelect.2days') }, + { value: 259200, label: t('auth.ttlSelect.3days') }, + { value: 345600, label: t('auth.ttlSelect.4days') }, + { value: 432000, label: t('auth.ttlSelect.5days') }, + { value: 518400, label: t('auth.ttlSelect.6days') }, + { value: 604800, label: t('auth.ttlSelect.7days') }, +] + const ExportTypeSelector = () => { const { t } = useTranslation() const dispatch = useDispatch() const authTokenTTL = useSelector(getAuthTokenTTL) - const items = [ - { value: 86400, label: t('auth.ttlSelect.1day') }, - { value: 172800, label: t('auth.ttlSelect.2days') }, - { value: 259200, label: t('auth.ttlSelect.3days') }, - { value: 345600, label: t('auth.ttlSelect.4days') }, - { value: 432000, label: t('auth.ttlSelect.5days') }, - { value: 518400, label: t('auth.ttlSelect.6days') }, - { value: 604800, label: t('auth.ttlSelect.7days') }, - ] + const items = useMemo(() => getItems(t), [t]) const handleChange = useCallback((value) => { dispatch(setAuthTokenTTL(value))