From f32047504a973d5359f2fa0ad6b155c8926f9b27 Mon Sep 17 00:00:00 2001 From: Delilah <23665803+goplayoutside3@users.noreply.github.com> Date: Sun, 15 Dec 2024 11:21:49 -0600 Subject: [PATCH] Setup react-i18next for MainContent components --- .../shared/MainContent/MainContent.js | 39 ++++++---- .../shared/MainContent/MainContent.spec.js | 2 +- .../components/StyledCalendarButton.js | 1 + .../MainContent/components/StyledTab.js | 1 + .../helpers/getDateRangeSelectOptions.js | 24 +++--- .../helpers/getDateRangeSelectOptions.spec.js | 74 +++++++++---------- .../helpers/getProjectSelectOptions.js | 6 +- .../src/components/shared/Select/Select.js | 9 ++- packages/lib-user/src/translations/en.json | 21 ++++++ 9 files changed, 108 insertions(+), 69 deletions(-) diff --git a/packages/lib-user/src/components/shared/MainContent/MainContent.js b/packages/lib-user/src/components/shared/MainContent/MainContent.js index 29a42df11c..9827887032 100644 --- a/packages/lib-user/src/components/shared/MainContent/MainContent.js +++ b/packages/lib-user/src/components/shared/MainContent/MainContent.js @@ -3,6 +3,7 @@ import { Anchor, Box, Calendar, ResponsiveContext, Text } from 'grommet' import { arrayOf, bool, func, number, shape, string } from 'prop-types' import { useCallback, useContext, useEffect, useState } from 'react' import Link from 'next/link' +import { useTranslation, Trans } from '../../../translations/i18n.js' import { convertStatsSecondsToHours, @@ -51,6 +52,7 @@ function MainContent({ source = DEFAULT_SOURCE, totalProjects = 0 }) { + const { t } = useTranslation() const [activeTab, setActiveTab] = useState(0) const [showCalendar, setShowCalendar] = useState(false) const [customDateRange, setCustomDateRange] = useState([selectedDateRange.startDate, selectedDateRange.endDate]) @@ -74,10 +76,11 @@ function MainContent({ const { dateRangeOptions, selectedDateRangeOption } = getDateRangeSelectOptions({ sourceCreatedAtDate, paramsValidationMessage, - selectedDateRange + selectedDateRange, + t }) - const { projectOptions, selectedProjectOption } = getProjectSelectOptions({ projects, selectedProject }) + const { projectOptions, selectedProjectOption } = getProjectSelectOptions({ projects, selectedProject, t }) const todayUTC = getStatsDateString(new Date()) @@ -123,7 +126,7 @@ function MainContent({ active={showCalendar} closeFn={handleCalendarClose} position='top' - title='Custom Date Range' + title={t('MainContent.calendarTitle')} > @@ -179,7 +182,7 @@ function MainContent({ aria-expanded={activeTab === 0} aria-selected={activeTab === 0} active={activeTab === 0} - label='CLASSIFICATIONS' + label={t('common.classifications')} onClick={() => handleActiveTab(0)} plain fill={size === 'small' ? 'horizontal' : false} @@ -189,14 +192,14 @@ function MainContent({ aria-expanded={activeTab === 1} aria-selected={activeTab === 1} active={activeTab === 1} - label='HOURS' + label={t('common.hours')} onClick={() => handleActiveTab(1)} plain fill={size === 'small' ? 'horizontal' : false} /> @@ -254,7 +257,7 @@ function MainContent({ pad='medium' > - There was an error. + {t('MainContent.error')} {error?.message} @@ -267,13 +270,17 @@ function MainContent({ justify='center' pad='medium' > - No data found. + {t('MainContent.noData')} - Start by{' '} - - classifying a project - - {' ' }now, or change the date range. + + ]} + /> ) : ( @@ -294,7 +301,7 @@ function MainContent({ forwardedAs={Link} color='neutral-1' href={`/users/${source.login}/stats/certificate${window.location.search}`} - label='Generate Volunteer Certificate' + label={t('MainContent.certificate')} /> ) : null} diff --git a/packages/lib-user/src/components/shared/MainContent/MainContent.spec.js b/packages/lib-user/src/components/shared/MainContent/MainContent.spec.js index f32d22c5b1..ceea5dc707 100644 --- a/packages/lib-user/src/components/shared/MainContent/MainContent.spec.js +++ b/packages/lib-user/src/components/shared/MainContent/MainContent.spec.js @@ -30,7 +30,7 @@ describe('components > shared > MainContent', function () { it('should show "CLASSIFICATIONS" as the active tab', function () { render() - const activeTab = screen.getByRole('tab', { name: 'CLASSIFICATIONS', selected: true }) + const activeTab = screen.getByRole('tab', { name: 'Classifications', selected: true }) expect(activeTab).to.be.ok() }) diff --git a/packages/lib-user/src/components/shared/MainContent/components/StyledCalendarButton.js b/packages/lib-user/src/components/shared/MainContent/components/StyledCalendarButton.js index 7f96e2a16d..d6446a93a3 100644 --- a/packages/lib-user/src/components/shared/MainContent/components/StyledCalendarButton.js +++ b/packages/lib-user/src/components/shared/MainContent/components/StyledCalendarButton.js @@ -6,6 +6,7 @@ const StyledCertificateButton = styled(Button)` border-radius: 4px; color: ${props => props.theme.dark ? props.theme.global.colors['light-3'] : props.theme.global.colors['dark-5']}; min-width: 100px; + text-transform: uppercase; ` export default StyledCertificateButton diff --git a/packages/lib-user/src/components/shared/MainContent/components/StyledTab.js b/packages/lib-user/src/components/shared/MainContent/components/StyledTab.js index 49e7a250f5..647eb12c34 100644 --- a/packages/lib-user/src/components/shared/MainContent/components/StyledTab.js +++ b/packages/lib-user/src/components/shared/MainContent/components/StyledTab.js @@ -7,6 +7,7 @@ const StyledTab = styled(Button)` color: ${props => props.theme.dark ? props.theme.global.colors['light-3'] : props.theme.global.colors['dark-5']}; font-size: 1em; text-align: center; + text-transform: uppercase; ${props => props.active && css` border-bottom: 4px solid ${props.theme.global.colors['neutral-1']}; diff --git a/packages/lib-user/src/components/shared/MainContent/helpers/getDateRangeSelectOptions.js b/packages/lib-user/src/components/shared/MainContent/helpers/getDateRangeSelectOptions.js index edc681057c..83741eabed 100644 --- a/packages/lib-user/src/components/shared/MainContent/helpers/getDateRangeSelectOptions.js +++ b/packages/lib-user/src/components/shared/MainContent/helpers/getDateRangeSelectOptions.js @@ -9,50 +9,52 @@ function getNextMonth(month) { return month === 11 ? 0 : month + 1 } -function getPresetSelectOptions({ sourceCreatedAtDate, today }) { +function getPresetSelectOptions({ sourceCreatedAtDate, today, t }) { return [ { - label: 'LAST 7 DAYS', + label: t('MainContent.dateRange.lastSevenDays').toUpperCase(), value: getStatsDateString(new Date(new Date().setUTCDate(today.getUTCDate() - 6))) }, { - label: 'LAST 30 DAYS', + label: t('MainContent.dateRange.lastThirtyDays').toUpperCase(), value: getStatsDateString(new Date(new Date().setUTCDate(today.getUTCDate() - 29))) }, { - label: 'THIS MONTH', + label: t('MainContent.dateRange.thisMonth').toUpperCase(), value: getStatsDateString(new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), 1))) }, { - label: 'LAST 3 MONTHS', + label: t('MainContent.dateRange.lastThreeMonths').toUpperCase(), value: getStatsDateString(new Date(new Date().setUTCDate(today.getUTCDate() - 90))) }, { - label: 'THIS YEAR', + label: t('MainContent.dateRange.thisYear').toUpperCase(), value: getStatsDateString(new Date(Date.UTC(today.getUTCFullYear(), 0, 1))) }, { - label: 'LAST 12 MONTHS', + label: t('MainContent.dateRange.lastTwelveMonths').toUpperCase(), value: getStatsDateString(new Date(Date.UTC((today.getUTCFullYear() - 1), getNextMonth(today.getUTCMonth()), 1))) }, { - label: 'ALL TIME', + label: t('MainContent.dateRange.allTime').toUpperCase(), value: sourceCreatedAtDate } ] } const DEFAULT_DATE_RANGE = getDefaultDateRange() +const DEFAULT_HANDLER = key => key export function getDateRangeSelectOptions({ sourceCreatedAtDate = '', paramsValidationMessage = '', - selectedDateRange = DEFAULT_DATE_RANGE + selectedDateRange = DEFAULT_DATE_RANGE, + t = DEFAULT_HANDLER }) { const today = new Date() const todayUTC = getStatsDateString(today) - const dateRangeOptions = getPresetSelectOptions({ sourceCreatedAtDate, today }) + const dateRangeOptions = getPresetSelectOptions({ sourceCreatedAtDate, today, t }) let selectedDateRangeOption = dateRangeOptions.find(option => (selectedDateRange.endDate === todayUTC) && @@ -68,7 +70,7 @@ export function getDateRangeSelectOptions({ selectedDateRangeOption = customDateRangeOption } else { dateRangeOptions.push({ - label: 'CUSTOM', + label: t('MainContent.dateRange.custom').toUpperCase(), value: 'custom' }) } diff --git a/packages/lib-user/src/components/shared/MainContent/helpers/getDateRangeSelectOptions.spec.js b/packages/lib-user/src/components/shared/MainContent/helpers/getDateRangeSelectOptions.spec.js index 6323cd5c51..f8eccd28d1 100644 --- a/packages/lib-user/src/components/shared/MainContent/helpers/getDateRangeSelectOptions.spec.js +++ b/packages/lib-user/src/components/shared/MainContent/helpers/getDateRangeSelectOptions.spec.js @@ -29,35 +29,35 @@ describe('components > MainContent > getDateRangeSelectOptions', function () { // the following expected values are based on the UTC date April 15, 11PM, **NOT** the user's date of April 16, 1AM expect(dateRangeOptions).to.deep.equal([ { - label: 'LAST 7 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTSEVENDAYS', value: '2023-04-09' }, { - label: 'LAST 30 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTTHIRTYDAYS', value: '2023-03-17' }, { - label: 'THIS MONTH', + label: 'MAINCONTENT.DATERANGE.THISMONTH', value: '2023-04-01' }, { - label: 'LAST 3 MONTHS', + label: 'MAINCONTENT.DATERANGE.LASTTHREEMONTHS', value: '2023-01-15' }, { - label: 'THIS YEAR', + label: 'MAINCONTENT.DATERANGE.THISYEAR', value: '2023-01-01' }, { - label: 'LAST 12 MONTHS', + label: 'MAINCONTENT.DATERANGE.LASTTWELVEMONTHS', value: '2022-05-01' }, { - label: 'ALL TIME', + label: 'MAINCONTENT.DATERANGE.ALLTIME', value: '2015-07-01' }, - { - label: 'CUSTOM', + { + label: 'MAINCONTENT.DATERANGE.CUSTOM', value: 'custom' } ]) @@ -72,14 +72,14 @@ describe('components > MainContent > getDateRangeSelectOptions', function () { } }) expect(selectedDateRangeOption).to.deep.equal({ - label: 'LAST 7 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTSEVENDAYS', value: '2023-04-09' }) }) }) describe('when the user\'s date is the day before UTC', function () { - + beforeEach(function () { // Set the user's clock April 14, 11PM, in a timezone 2 hours behind UTC, // so that the UTC date is April 15, 1AM @@ -102,35 +102,35 @@ describe('components > MainContent > getDateRangeSelectOptions', function () { // the following expected values are based on the UTC date April 15, 1AM, **NOT** the user's date of April 14, 11PM expect(dateRangeOptions).to.deep.equal([ { - label: 'LAST 7 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTSEVENDAYS', value: '2023-04-09' }, { - label: 'LAST 30 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTTHIRTYDAYS', value: '2023-03-17' }, { - label: 'THIS MONTH', + label: 'MAINCONTENT.DATERANGE.THISMONTH', value: '2023-04-01' }, { - label: 'LAST 3 MONTHS', + label: 'MAINCONTENT.DATERANGE.LASTTHREEMONTHS', value: '2023-01-15' }, { - label: 'THIS YEAR', + label: 'MAINCONTENT.DATERANGE.THISYEAR', value: '2023-01-01' }, { - label: 'LAST 12 MONTHS', + label: 'MAINCONTENT.DATERANGE.LASTTWELVEMONTHS', value: '2022-05-01' }, { - label: 'ALL TIME', + label: 'MAINCONTENT.DATERANGE.ALLTIME', value: '2015-07-01' }, - { - label: 'CUSTOM', + { + label: 'MAINCONTENT.DATERANGE.CUSTOM', value: 'custom' } ]) @@ -145,7 +145,7 @@ describe('components > MainContent > getDateRangeSelectOptions', function () { } }) expect(selectedDateRangeOption).to.deep.equal({ - label: 'LAST 7 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTSEVENDAYS', value: '2023-04-09' }) }) @@ -171,31 +171,31 @@ describe('components > MainContent > getDateRangeSelectOptions', function () { }) expect(dateRangeOptions).to.deep.equal([ { - label: 'LAST 7 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTSEVENDAYS', value: '2023-04-09' }, { - label: 'LAST 30 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTTHIRTYDAYS', value: '2023-03-17' }, { - label: 'THIS MONTH', + label: 'MAINCONTENT.DATERANGE.THISMONTH', value: '2023-04-01' }, { - label: 'LAST 3 MONTHS', + label: 'MAINCONTENT.DATERANGE.LASTTHREEMONTHS', value: '2023-01-15' }, { - label: 'THIS YEAR', + label: 'MAINCONTENT.DATERANGE.THISYEAR', value: '2023-01-01' }, { - label: 'LAST 12 MONTHS', + label: 'MAINCONTENT.DATERANGE.LASTTWELVEMONTHS', value: '2022-05-01' }, { - label: 'ALL TIME', + label: 'MAINCONTENT.DATERANGE.ALLTIME', value: '2015-11-01' }, { @@ -240,35 +240,35 @@ describe('components > MainContent > getDateRangeSelectOptions', function () { }) expect(dateRangeOptions).to.deep.equal([ { - label: 'LAST 7 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTSEVENDAYS', value: '2023-04-09' }, { - label: 'LAST 30 DAYS', + label: 'MAINCONTENT.DATERANGE.LASTTHIRTYDAYS', value: '2023-03-17' }, { - label: 'THIS MONTH', + label: 'MAINCONTENT.DATERANGE.THISMONTH', value: '2023-04-01' }, { - label: 'LAST 3 MONTHS', + label: 'MAINCONTENT.DATERANGE.LASTTHREEMONTHS', value: '2023-01-15' }, { - label: 'THIS YEAR', + label: 'MAINCONTENT.DATERANGE.THISYEAR', value: '2023-01-01' }, { - label: 'LAST 12 MONTHS', + label: 'MAINCONTENT.DATERANGE.LASTTWELVEMONTHS', value: '2022-05-01' }, { - label: 'ALL TIME', + label: 'MAINCONTENT.DATERANGE.ALLTIME', value: '2020-04-15' }, - { - label: 'CUSTOM', + { + label: 'MAINCONTENT.DATERANGE.CUSTOM', value: 'custom' } ]) diff --git a/packages/lib-user/src/components/shared/MainContent/helpers/getProjectSelectOptions.js b/packages/lib-user/src/components/shared/MainContent/helpers/getProjectSelectOptions.js index a304a903f8..a0d8feaf13 100644 --- a/packages/lib-user/src/components/shared/MainContent/helpers/getProjectSelectOptions.js +++ b/packages/lib-user/src/components/shared/MainContent/helpers/getProjectSelectOptions.js @@ -1,6 +1,8 @@ -export function getProjectSelectOptions({ projects = [], selectedProject = undefined }) { +const DEFAULT_HANDLER = key => key + +export function getProjectSelectOptions({ projects = [], selectedProject = undefined, t = DEFAULT_HANDLER }) { let projectOptions = [ - { label: 'ALL PROJECTS', value: undefined }, + { label: t('MainContent.allProjects').toUpperCase(), value: undefined }, ...projects .map(project => ({ label: project.display_name, diff --git a/packages/lib-user/src/components/shared/Select/Select.js b/packages/lib-user/src/components/shared/Select/Select.js index 9cd12a39bc..e7c5314a86 100644 --- a/packages/lib-user/src/components/shared/Select/Select.js +++ b/packages/lib-user/src/components/shared/Select/Select.js @@ -1,12 +1,18 @@ import { Select as GrommetSelect, ThemeContext } from 'grommet' import { arrayOf, func, shape, string } from 'prop-types' import { useEffect, useState } from 'react' +import styled from 'styled-components' import selectTheme from './theme' const DEFAULT_HANDLER = () => {} const DEFAULT_VALUE = { label: '', value: '' } +const StyledSelect = styled(GrommetSelect)` + text-align: center; + text-transform: uppercase; +` + function Select({ id = '', name = '', @@ -27,7 +33,7 @@ function Select({ return ( - handleSelect(option)} options={options} size='medium' - style={{ textAlign: 'center' }} value={selected} /> diff --git a/packages/lib-user/src/translations/en.json b/packages/lib-user/src/translations/en.json index a05ba3f2b5..1eaf1aed3d 100644 --- a/packages/lib-user/src/translations/en.json +++ b/packages/lib-user/src/translations/en.json @@ -99,6 +99,27 @@ "HeaderDropdown": { "label": "Group Options" }, + "MainContent": { + "allProjects": "All Projects", + "calendarTitle": "Custom Date Range", + "calendarBtn": "Done", + "certificate": "Generate Volunteer Certificate", + "dateRange": { + "allTime": "All Time", + "custom": "Custom", + "lastSevenDays": "Last 7 Days", + "lastThirtyDays": "Last 30 Days", + "lastThreeMonths": "Last 3 Months", + "lastTwelveMonths": "Last 12 Months", + "thisMonth": "This Month", + "thisYear": "This Year" + }, + "error": "There was an error.", + "hoursTip": "Hours are calculated based on the start and end times of your classification efforts. Hours do not reflect your time spent on Talk.", + "noData": "No data found.", + "start": "Start by <0>classifying a project now, or change the date range.", + "tabContents": "Tab Contents" + }, "MyGroups": { "createNew": "Create new group", "error": "There was an error fetching your groups",