Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 15:05:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix locale for calendar and clock (#1330)

Browse Source
This commit is contained in:
Tagaishi
2023-09-01 17:13:55 +02:00
committed by GitHub
parent 3b74f735a1
commit 981c964ba9
3 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/_app.tsx
View File

@@ -57,7 +57,7 @@ function App(
) { ) {
const { Component, pageProps } = props; const { Component, pageProps } = props;
// TODO: make mapping from our locales to moment locales // 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`); require(`dayjs/locale/${language.locale}.js`);
dayjs.locale(language.locale); dayjs.locale(language.locale);

5
src/widgets/calendar/CalendarTile.tsx
View File

@@ -3,7 +3,6 @@ import { Calendar } from '@mantine/dates';
import { IconCalendarTime } from '@tabler/icons-react'; import { IconCalendarTime } from '@tabler/icons-react';
import { useSession } from 'next-auth/react'; import { useSession } from 'next-auth/react';
import { useState } from 'react'; import { useState } from 'react';
import { useRouter } from 'next/router';
import { getLanguageByCode } from '~/tools/language'; import { getLanguageByCode } from '~/tools/language';
import { RouterOutputs, api } from '~/utils/api'; import { RouterOutputs, api } from '~/utils/api';
@@ -64,7 +63,6 @@ interface CalendarTileProps {
} }
function CalendarTile({ widget }: CalendarTileProps) { function CalendarTile({ widget }: CalendarTileProps) {
const { locale } = useRouter();
const { colorScheme, radius } = useMantineTheme(); const { colorScheme, radius } = useMantineTheme();
const { name: configName } = useConfigContext(); const { name: configName } = useConfigContext();
const [month, setMonth] = useState(new Date()); const [month, setMonth] = useState(new Date());
@@ -74,8 +72,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
enabled: !!sessionData?.user, enabled: !!sessionData?.user,
}); });
const language = getLanguageByCode(locale ?? 'en'); const language = getLanguageByCode(userWithSettings?.settings.language ?? 'en');
require(`dayjs/locale/${language.locale}.js`);
const { data: medias } = api.calendar.medias.useQuery( const { data: medias } = api.calendar.medias.useQuery(
{ {

18
src/widgets/date/DateTile.tsx
View File

@@ -1,13 +1,13 @@
import { Stack, Text, createStyles } from '@mantine/core'; import { Stack, Text, createStyles } from '@mantine/core';
import { useElementSize } from '@mantine/hooks'; import { useElementSize } from '@mantine/hooks';
import { IconClock } from '@tabler/icons-react'; 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 { useEffect, useRef, useState } from 'react';
import { getLanguageByCode } from '~/tools/language'; import { getLanguageByCode } from '~/tools/language';
import { api } from '~/utils/api'; 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 { useSetSafeInterval } from '../../hooks/useSetSafeInterval';
import { defineWidget } from '../helper'; import { defineWidget } from '../helper';
@@ -138,12 +138,16 @@ const useDateState = (location?: { latitude: number; longitude: number }) => {
const { data: timezone } = api.timezone.at.useQuery(location!, { const { data: timezone } = api.timezone.at.useQuery(location!, {
enabled: location !== undefined, 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 [date, setDate] = useState(getNewDate(timezone));
const setSafeInterval = useSetSafeInterval(); const setSafeInterval = useSetSafeInterval();
const timeoutRef = useRef<NodeJS.Timeout>(); // reference for initial timeout until first minute change const timeoutRef = useRef<NodeJS.Timeout>(); // reference for initial timeout until first minute change
useEffect(() => { useEffect(() => {
const language = getLanguageByCode(locale ?? 'en'); const language = getLanguageByCode(userLanguage ?? 'en');
dayjs.locale(language.locale); dayjs.locale(language.locale);
setDate(getNewDate(timezone)); setDate(getNewDate(timezone));
timeoutRef.current = setTimeout( timeoutRef.current = setTimeout(
@@ -158,7 +162,7 @@ const useDateState = (location?: { latitude: number; longitude: number }) => {
1000 * 60 - (1000 * dayjs().second() + dayjs().millisecond()) 1000 * 60 - (1000 * dayjs().second() + dayjs().millisecond())
); );
return () => timeoutRef.current && clearTimeout(timeoutRef.current); return () => timeoutRef.current && clearTimeout(timeoutRef.current);
}, [timezone, locale]); }, [timezone, userLanguage]);
return date; return date;
}; };