From 17836c70e748e1ee01012e02e8efa72b1b3dc845 Mon Sep 17 00:00:00 2001 From: Alexander Klein Date: Wed, 10 Mar 2021 10:11:23 +0100 Subject: [PATCH 1/6] feature(calendar): use locale for start of week --- components/common/Calendar.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/common/Calendar.js b/components/common/Calendar.js index 237f065e..92fd311c 100644 --- a/components/common/Calendar.js +++ b/components/common/Calendar.js @@ -20,6 +20,7 @@ import Button from './Button'; import useLocale from 'hooks/useLocale'; import { dateFormat } from 'lib/date'; import { chunk } from 'lib/array'; +import { dateLocales } from 'lib/lang'; import Chevron from 'assets/chevron-down.svg'; import Cross from 'assets/times.svg'; import styles from './Calendar.module.css'; @@ -105,8 +106,8 @@ export default function Calendar({ date, minDate, maxDate, onChange }) { } const DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => { - const startWeek = startOfWeek(date); - const startMonth = startOfMonth(date); + const startWeek = startOfWeek(date, { locale: dateLocales[locale] }); + const startMonth = startOfMonth(date, { locale: dateLocales[locale] }); const startDay = subDays(startMonth, startMonth.getDay()); const month = date.getMonth(); const year = date.getFullYear(); From eb1029bfc8abb680939426e49a9288b588d9feb9 Mon Sep 17 00:00:00 2001 From: Alexander Klein Date: Wed, 10 Mar 2021 10:20:54 +0100 Subject: [PATCH 2/6] feature(lib): locale option for getDateRange --- lib/date.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/date.js b/lib/date.js index e166563b..06aaac13 100644 --- a/lib/date.js +++ b/lib/date.js @@ -36,8 +36,9 @@ export function getLocalTime(t) { return addMinutes(new Date(t), new Date().getTimezoneOffset()); } -export function getDateRange(value) { +export function getDateRange(value, locale) { const now = new Date(); + const localeOptions = dateLocales[locale]; const { num, unit } = value.match(/^(?[0-9]+)(?hour|day|week|month|year)$/).groups; @@ -52,8 +53,8 @@ export function getDateRange(value) { }; case 'week': return { - startDate: startOfWeek(now), - endDate: endOfWeek(now), + startDate: startOfWeek(now, { locale: localeOptions }), + endDate: endOfWeek(now, { locale: localeOptions }), unit: 'day', value, }; From a48c33fcd678d051981e8b2f33822a43228b4b3e Mon Sep 17 00:00:00 2001 From: Alexander Klein Date: Wed, 10 Mar 2021 10:22:19 +0100 Subject: [PATCH 3/6] feature(DateFilter): use locale for date ranges --- components/common/DateFilter.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/common/DateFilter.js b/components/common/DateFilter.js index 45950086..7e35a010 100644 --- a/components/common/DateFilter.js +++ b/components/common/DateFilter.js @@ -55,6 +55,7 @@ const filterOptions = [ ]; function DateFilter({ value, startDate, endDate, onChange, className }) { + const [locale] = useLocale(); const [showPicker, setShowPicker] = useState(false); const displayValue = value === 'custom' ? ( @@ -68,7 +69,7 @@ function DateFilter({ value, startDate, endDate, onChange, className }) { setShowPicker(true); return; } - onChange(getDateRange(value)); + onChange(getDateRange(value, locale)); } function handlePickerChange(value) { From a1edcecde781ce77db303ba6a3af6a640cc7af6d Mon Sep 17 00:00:00 2001 From: Alexander Klein Date: Wed, 10 Mar 2021 10:38:35 +0100 Subject: [PATCH 4/6] feature(components): add locale for date ranges --- components/common/RefreshButton.js | 4 +++- components/settings/DateRangeSetting.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js index a2857522..61f06a3c 100644 --- a/components/common/RefreshButton.js +++ b/components/common/RefreshButton.js @@ -8,9 +8,11 @@ import Refresh from 'assets/redo.svg'; import Dots from 'assets/ellipsis-h.svg'; import useDateRange from 'hooks/useDateRange'; import { getDateRange } from '../../lib/date'; +import useLocale from 'hooks/useLocale'; function RefreshButton({ websiteId }) { const dispatch = useDispatch(); + const [locale] = useLocale(); const [dateRange] = useDateRange(websiteId); const [loading, setLoading] = useState(false); const completed = useSelector(state => state.queries[`/api/website/${websiteId}/stats`]); @@ -18,7 +20,7 @@ function RefreshButton({ websiteId }) { function handleClick() { if (dateRange) { setLoading(true); - dispatch(setDateRange(websiteId, getDateRange(dateRange.value))); + dispatch(setDateRange(websiteId, getDateRange(dateRange.value, locale))); } } diff --git a/components/settings/DateRangeSetting.js b/components/settings/DateRangeSetting.js index a25bafa8..8ce5e72c 100644 --- a/components/settings/DateRangeSetting.js +++ b/components/settings/DateRangeSetting.js @@ -6,13 +6,15 @@ import useDateRange from 'hooks/useDateRange'; import { DEFAULT_DATE_RANGE } from 'lib/constants'; import { getDateRange } from 'lib/date'; import styles from './DateRangeSetting.module.css'; +import useLocale from 'hooks/useLocale'; export default function DateRangeSetting() { + const [locale] = useLocale(); const [dateRange, setDateRange] = useDateRange(); const { startDate, endDate, value } = dateRange; function handleReset() { - setDateRange(getDateRange(DEFAULT_DATE_RANGE)); + setDateRange(getDateRange(DEFAULT_DATE_RANGE, locale)); } return ( From 3cb748b29bc1b709a97ab821081b0b616b284cad Mon Sep 17 00:00:00 2001 From: Alexander Klein Date: Wed, 10 Mar 2021 10:39:31 +0100 Subject: [PATCH 5/6] feature(hooks): use locale in useDateRange hook --- hooks/useDateRange.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/hooks/useDateRange.js b/hooks/useDateRange.js index 77f892de..7566970f 100644 --- a/hooks/useDateRange.js +++ b/hooks/useDateRange.js @@ -5,9 +5,11 @@ import { getItem, setItem } from 'lib/web'; import { setDateRange } from '../redux/actions/websites'; import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants'; import useForceUpdate from './useForceUpdate'; +import useLocale from './useLocale'; export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) { const dispatch = useDispatch(); + const [locale] = useLocale(); const dateRange = useSelector(state => state.websites[websiteId]?.dateRange); const forceUpdate = useForceUpdate(); @@ -16,7 +18,7 @@ export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_ if (globalDefault) { if (typeof globalDefault === 'string') { - globalDateRange = getDateRange(globalDefault); + globalDateRange = getDateRange(globalDefault, locale); } else if (typeof globalDefault === 'object') { globalDateRange = { ...globalDefault, @@ -37,5 +39,5 @@ export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_ } } - return [dateRange || globalDateRange || getDateRange(defaultDateRange), saveDateRange]; + return [dateRange || globalDateRange || getDateRange(defaultDateRange, locale), saveDateRange]; } From f6f14bf104402d88ca44ce0f6b98a18527d72808 Mon Sep 17 00:00:00 2001 From: Alexander Klein Date: Wed, 10 Mar 2021 10:40:59 +0100 Subject: [PATCH 6/6] fix(lib): add default value for getDateRange --- lib/date.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/date.js b/lib/date.js index 06aaac13..578d9014 100644 --- a/lib/date.js +++ b/lib/date.js @@ -36,7 +36,7 @@ export function getLocalTime(t) { return addMinutes(new Date(t), new Date().getTimezoneOffset()); } -export function getDateRange(value, locale) { +export function getDateRange(value, locale = 'en-US') { const now = new Date(); const localeOptions = dateLocales[locale];