From 22eeacfe6738827543d8c3523b189de293d9d8a4 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 25 May 2021 17:29:56 +1000 Subject: [PATCH] Update date translations when locale changes --- .../AvailabilityEditor/AvailabilityEditor.tsx | 5 ++++- .../AvailabilityViewer/AvailabilityViewer.tsx | 6 ++++-- .../components/CalendarField/CalendarField.tsx | 9 ++++++--- .../src/components/Recents/Recents.tsx | 5 +++-- .../components/TimeRangeField/TimeRangeField.tsx | 5 +++-- crabfit-frontend/src/pages/Event/Event.tsx | 15 ++++++++++----- crabfit-frontend/src/stores/index.ts | 5 +++++ 7 files changed, 35 insertions(+), 15 deletions(-) diff --git a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx index e51b506..444cf7e 100644 --- a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx +++ b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx @@ -1,5 +1,6 @@ import { useState, useRef, Fragment } from 'react'; import { useTranslation } from 'react-i18next'; +import { useLocaleUpdateStore } from 'stores'; import dayjs from 'dayjs'; import localeData from 'dayjs/plugin/localeData'; import customParseFormat from 'dayjs/plugin/customParseFormat'; @@ -38,6 +39,8 @@ const AvailabilityEditor = ({ ...props }) => { const { t } = useTranslation('event'); + const locale = useLocaleUpdateStore(state => state.locale); + const [selectingTimes, _setSelectingTimes] = useState([]); const staticSelectingTimes = useRef([]); const setSelectingTimes = newTimes => { @@ -73,7 +76,7 @@ const AvailabilityEditor = ({ )} - + diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx index fb9cf70..1625c73 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx +++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx @@ -5,7 +5,7 @@ import localeData from 'dayjs/plugin/localeData'; import customParseFormat from 'dayjs/plugin/customParseFormat'; import relativeTime from 'dayjs/plugin/relativeTime'; -import { useSettingsStore } from 'stores'; +import { useSettingsStore, useLocaleUpdateStore } from 'stores'; import { Legend, Center } from 'components'; import { @@ -52,7 +52,9 @@ const AvailabilityViewer = ({ const [touched, setTouched] = useState(false); const [tempFocus, setTempFocus] = useState(null); const [focusCount, setFocusCount] = useState(null); + const { t } = useTranslation('event'); + const locale = useLocaleUpdateStore(state => state.locale); const wrapper = useRef(); @@ -118,7 +120,7 @@ const AvailabilityViewer = ({ return ( - {isSpecificDates && {parsedDate.format('MMM D')}} + {isSpecificDates && {parsedDate.format('MMM D')}} {parsedDate.format('ddd')} { const weekStart = useSettingsStore(state => state.weekStart); + const locale = useLocaleUpdateStore(state => state.locale); + const setLocale = useLocaleUpdateStore(state => state.setLocale); const { t, i18n } = useTranslation('home'); const [type, setType] = useState(0); @@ -93,6 +95,7 @@ const CalendarField = ({ if (Object.keys(localeImports).includes(i18n.language)) { localeImports[i18n.language]().then(() => { dayjs.locale(i18n.language); + setLocale(dayjs.locale()); if (weekStart !== dayjs.Ls[i18n.language].weekStart) { dayjs.updateLocale(i18n.language, { weekStart }); } @@ -104,10 +107,10 @@ const CalendarField = ({ } } setDates(calculateMonth(month, year, weekStart)); - }, [weekStart, month, year, i18n.language]); + }, [weekStart, month, year, i18n.language, setLocale]); return ( - + {label && {label}} {subLabel && {subLabel}} { const recents = useRecentsStore(state => state.recents); + const locale = useLocaleUpdateStore(state => state.locale); const { t } = useTranslation(['home', 'common']); return !!recents.length && ( @@ -19,7 +20,7 @@ const Recents = () => { {recents.map(event => ( {event.name} - {t('common:created', { date: dayjs.unix(event.created).fromNow() })} + {t('common:created', { date: dayjs.unix(event.created).fromNow() })} ))} diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx index b08b17b..7a6544f 100644 --- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx +++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx @@ -1,7 +1,7 @@ import { useState, useEffect, useRef } from 'react'; import dayjs from 'dayjs'; -import { useSettingsStore } from 'stores'; +import { useSettingsStore, useLocaleUpdateStore } from 'stores'; import { Wrapper, @@ -22,6 +22,7 @@ const TimeRangeField = ({ ...props }) => { const timeFormat = useSettingsStore(state => state.timeFormat); + const locale = useLocaleUpdateStore(state => state.locale); const [start, setStart] = useState(9); const [end, setEnd] = useState(17); @@ -53,7 +54,7 @@ const TimeRangeField = ({ }; return ( - + {label && {label}} {subLabel && {subLabel}} { const weekStart = useSettingsStore(state => state.weekStart); const addRecent = useRecentsStore(state => state.addRecent); + const setLocale = useLocaleUpdateStore(state => state.setLocale); + const locale = useLocaleUpdateStore(state => state.locale); const { t, i18n } = useTranslation(['common', 'event']); @@ -77,9 +79,12 @@ const Event = (props) => { useEffect(() => { if (Object.keys(localeImports).includes(i18n.language)) { - localeImports[i18n.language]().then(() => dayjs.locale(i18n.language)); + localeImports[i18n.language]().then(() => { + dayjs.locale(i18n.language); + setLocale(dayjs.locale()); + }); } - }, [i18n.language]); + }, [i18n.language, setLocale]); useEffect(() => { const fetchEvent = async () => { @@ -210,7 +215,7 @@ const Event = (props) => { return [...allDates, date]; }, [])); } - }, [times, timeFormat]); + }, [times, timeFormat, locale]); useEffect(() => { const fetchUser = async () => { @@ -296,7 +301,7 @@ const Event = (props) => { {(!!event || isLoading) ? ( <> {event?.name} - {event?.created && t('common:created', { date: dayjs.unix(event?.created).fromNow() })} + {event?.created && t('common:created', { date: dayjs.unix(event?.created).fromNow() })} navigator.clipboard?.writeText(`https://crab.fit/${id}`) .then(() => { diff --git a/crabfit-frontend/src/stores/index.ts b/crabfit-frontend/src/stores/index.ts index 39bfac4..612f06f 100644 --- a/crabfit-frontend/src/stores/index.ts +++ b/crabfit-frontend/src/stores/index.ts @@ -39,3 +39,8 @@ export const useTWAStore = create(set => ({ TWA: undefined, setTWA: TWA => set({ TWA }), })); + +export const useLocaleUpdateStore = create(set => ({ + locale: undefined, + setLocale: locale => set({ locale }), +}));