Update date translations when locale changes

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 = ({
         </StyledMain>
       )}
 
-  		<Wrapper>
+  		<Wrapper locale={locale}>
         <ScrollWrapper>
     			<Container>
     				<TimeLabels>

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 (
     						<Fragment key={i}>
     							<Date>
-    								{isSpecificDates && <DateLabel>{parsedDate.format('MMM D')}</DateLabel>}
+    								{isSpecificDates && <DateLabel locale={locale}>{parsedDate.format('MMM D')}</DateLabel>}
     								<DayLabel>{parsedDate.format('ddd')}</DayLabel>
 
     								<Times

crabfit-frontend/src/components/CalendarField/CalendarField.tsx

@@ -6,7 +6,7 @@ import localeData from 'dayjs/plugin/localeData';
 import updateLocale from 'dayjs/plugin/updateLocale';
 
 import { Button, ToggleField } from 'components';
-import { useSettingsStore } from 'stores';
+import { useSettingsStore, useLocaleUpdateStore } from 'stores';
 
 import {
 	Wrapper,
@@ -57,6 +57,8 @@ const CalendarField = ({
 	...props
 }) => {
   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 (
-		<Wrapper>
+		<Wrapper locale={locale}>
 			{label && <StyledLabel htmlFor={id}>{label}</StyledLabel>}
 			{subLabel && <StyledSubLabel htmlFor={id}>{subLabel}</StyledSubLabel>}
 			<input

crabfit-frontend/src/components/Recents/Recents.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { useRecentsStore } from 'stores';
+import { useRecentsStore, useLocaleUpdateStore } from 'stores';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
@@ -10,6 +10,7 @@ dayjs.extend(relativeTime);
 
 const Recents = () => {
   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 => (
           <Recent href={`/${event.id}`} key={event.id}>
             <span className="name">{event.name}</span>
-            <span className="date" title={dayjs.unix(event.created).format('D MMMM, YYYY')}>{t('common:created', { date: dayjs.unix(event.created).fromNow() })}</span>
+            <span locale={locale} className="date" title={dayjs.unix(event.created).format('D MMMM, YYYY')}>{t('common:created', { date: dayjs.unix(event.created).fromNow() })}</span>
           </Recent>
         ))}
       </StyledMain>

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 (
-		<Wrapper>
+		<Wrapper locale={locale}>
 			{label && <StyledLabel htmlFor={id}>{label}</StyledLabel>}
 			{subLabel && <StyledSubLabel htmlFor={id}>{subLabel}</StyledSubLabel>}
 			<input

crabfit-frontend/src/pages/Event/Event.tsx

@@ -35,7 +35,7 @@ import {
 } from './eventStyle';
 
 import api from 'services';
-import { useSettingsStore, useRecentsStore } from 'stores';
+import { useSettingsStore, useRecentsStore, useLocaleUpdateStore } from 'stores';
 
 import logo from 'res/logo.svg';
 import timezones from 'res/timezones.json';
@@ -51,6 +51,8 @@ const Event = (props) => {
   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) ? (
 					<>
 						<EventName isLoading={isLoading}>{event?.name}</EventName>
-            <EventDate isLoading={isLoading} title={event?.created && dayjs.unix(event?.created).format('D MMMM, YYYY')}>{event?.created && t('common:created', { date: dayjs.unix(event?.created).fromNow() })}</EventDate>
+            <EventDate isLoading={isLoading} locale={locale} title={event?.created && dayjs.unix(event?.created).format('D MMMM, YYYY')}>{event?.created && t('common:created', { date: dayjs.unix(event?.created).fromNow() })}</EventDate>
 						<ShareInfo
               onClick={() => navigator.clipboard?.writeText(`https://crab.fit/${id}`)
                   .then(() => {

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 }),
+}));