From 981c964ba9274195ea19fec216d70da1675d337c Mon Sep 17 00:00:00 2001
From: Tagaishi <Tagaishi@hotmail.ch>
Date: Fri, 1 Sep 2023 17:13:55 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20locale=20for=20calendar=20?=
 =?UTF-8?q?and=20clock=20(#1330)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/_app.tsx                    |  2 +-
 src/widgets/calendar/CalendarTile.tsx |  5 +----
 src/widgets/date/DateTile.tsx         | 18 +++++++++++-------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index f9f6acf54..f660bb395 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -57,7 +57,7 @@ function App(
 ) {
   const { Component, pageProps } = props;
   // TODO: make mapping from our locales to moment locales
-  const language = getLanguageByCode(pageProps.locale);
+  const language = getLanguageByCode(pageProps.session?.user?.language ?? 'en');
   require(`dayjs/locale/${language.locale}.js`);
   dayjs.locale(language.locale);
 
diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx
index 364fe1c7e..df7566e85 100644
--- a/src/widgets/calendar/CalendarTile.tsx
+++ b/src/widgets/calendar/CalendarTile.tsx
@@ -3,7 +3,6 @@ import { Calendar } from '@mantine/dates';
 import { IconCalendarTime } from '@tabler/icons-react';
 import { useSession } from 'next-auth/react';
 import { useState } from 'react';
-import { useRouter } from 'next/router';
 import { getLanguageByCode } from '~/tools/language';
 import { RouterOutputs, api } from '~/utils/api';
 
@@ -64,7 +63,6 @@ interface CalendarTileProps {
 }
 
 function CalendarTile({ widget }: CalendarTileProps) {
-  const { locale } = useRouter();
   const { colorScheme, radius } = useMantineTheme();
   const { name: configName } = useConfigContext();
   const [month, setMonth] = useState(new Date());
@@ -74,8 +72,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
     enabled: !!sessionData?.user,
   });
 
-  const language = getLanguageByCode(locale ?? 'en');
-  require(`dayjs/locale/${language.locale}.js`);
+  const language = getLanguageByCode(userWithSettings?.settings.language ?? 'en');
 
   const { data: medias } = api.calendar.medias.useQuery(
     {
diff --git a/src/widgets/date/DateTile.tsx b/src/widgets/date/DateTile.tsx
index faa479ed9..b72873f28 100644
--- a/src/widgets/date/DateTile.tsx
+++ b/src/widgets/date/DateTile.tsx
@@ -1,13 +1,13 @@
 import { Stack, Text, createStyles } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { IconClock } from '@tabler/icons-react';
-import { useRouter } from 'next/router';
+import dayjs from 'dayjs';
+import timezones from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useSession } from 'next-auth/react';
 import { useEffect, useRef, useState } from 'react';
 import { getLanguageByCode } from '~/tools/language';
 import { api } from '~/utils/api';
-import dayjs from 'dayjs';
-import timezones from 'dayjs/plugin/timezone'
-import utc from 'dayjs/plugin/utc'
 
 import { useSetSafeInterval } from '../../hooks/useSetSafeInterval';
 import { defineWidget } from '../helper';
@@ -138,12 +138,16 @@ const useDateState = (location?: { latitude: number; longitude: number }) => {
   const { data: timezone } = api.timezone.at.useQuery(location!, {
     enabled: location !== undefined,
   });
-  const { locale } = useRouter();
+  const { data: sessionData } = useSession();
+  const { data: userWithSettings } = api.user.withSettings.useQuery(undefined, {
+    enabled: !!sessionData?.user,
+  });
+  const userLanguage =  userWithSettings?.settings.language;
   const [date, setDate] = useState(getNewDate(timezone));
   const setSafeInterval = useSetSafeInterval();
   const timeoutRef = useRef<NodeJS.Timeout>(); // reference for initial timeout until first minute change
   useEffect(() => {
-    const language = getLanguageByCode(locale ?? 'en');
+    const language = getLanguageByCode(userLanguage ?? 'en');
     dayjs.locale(language.locale);
     setDate(getNewDate(timezone));
     timeoutRef.current = setTimeout(
@@ -158,7 +162,7 @@ const useDateState = (location?: { latitude: number; longitude: number }) => {
       1000 * 60 - (1000 * dayjs().second() + dayjs().millisecond())
     );
     return () => timeoutRef.current && clearTimeout(timeoutRef.current);
-  }, [timezone, locale]);
+  }, [timezone, userLanguage]);
 
   return date;
 };