locale

components/i18n/index.ts

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { useSetting } from "../setting";
 
 export type Locales = 'zh-CN' | 'zh-TW';
@@ -11,14 +12,15 @@ export function fillBlank(i18n: string, ...fills: (string | undefined)[]): strin
 }
 
 export function useLocale<T extends i18nContents, K extends keyof T>(i18n: T) {
+    const [userLo, setUserLo] = useState('zh-CN');
+    useEffect(() => setUserLo(window.navigator.language), []);
     const { setting } = useSetting();
-    //const { locale: localeText, defaultLocale = 'zh-CN', ...other } = useRouter();
-    const lo = setting.locale || 'zh-CN';
+    const lo = setting.locale || userLo;
     function locale(key: K, loc?: string) {
         return (i18n as Record<K, Record<string, string>>)[key][loc || lo];
     }
     function localeType<Type extends string>(key: Type, loc?: string) {
         return (i18n as Record<Type, Record<string, string>>)[key][loc || lo];
     }
-    return { lo, locale, localeType };
+    return { lo, locale, localeType, userLo };
 }

components/main.tsx

@@ -67,7 +67,7 @@ export default function MainNode({ children, onBodyClick }: {
     children: React.ReactNode;
     onBodyClick?: React.MouseEventHandler;
 }) {
-    const { lo, locale, localeType } = useLocale(main);
+    const { lo, locale, localeType, userLo } = useLocale(main);
 
     const { setting, setSetting } = useSetting({
         locale: lo,
@@ -120,7 +120,7 @@ export default function MainNode({ children, onBodyClick }: {
                 display={display}
             />
         ));
-    }, []);
+    }, [userLo]);
 
     return (
         <div id={styles.main} onClick={onBodyClick}>

components/students/studentsMethods.ts

@@ -1,6 +1,6 @@
 import { fileInfo, schaleInfo, studentsJson, studentInfo } from './students';
 
-export async function getStudentsJson(locale:string): Promise<studentsJson> {
+export async function getStudentsJson(locale: string): Promise<studentsJson> {
     const fileJson: fileInfo[] = await fetch('../students.json').then(r => r.json());
     const schaleJson: schaleInfo[] = await fetch(`https://schale.gg/data/${locale.slice(3).toLowerCase()}/students.min.json`).then(r => r.json());
     return { fileJson, schaleJson };

pages/chat.tsx

@@ -239,7 +239,7 @@ interface SendMessageArg {
 }
 
 export default function Chat() {
-    const { lo, locale } = useLocale(chat);
+    const { lo, locale, userLo } = useLocale(chat);
 
     const [listState, setListState] = getClassState(useState<ListState>({
         student: 0,
@@ -278,7 +278,7 @@ export default function Chat() {
 
     useEffect(() => {
         getStudentsJson(lo).then(r => setListState({ studentsJson: { data: r } }));
-    }, []);
+    }, [userLo]);
 
     //Window
     const {
@@ -401,7 +401,7 @@ export default function Chat() {
                 display={display}
             />
         ));
-    }, []);
+    }, [userLo]);
 
     useEffect(() => {
         listState.studentsList?.forEach(id => {

pages/info.tsx

@@ -57,15 +57,15 @@ interface State {
 }
 
 export default function Info() {
-    const { lo, locale } = useLocale(info);
+    const { lo, locale, userLo } = useLocale(info);
     const [state, setState] = getClassState(useState<State>({
         student: 0,
         studentsJson: { data: {} }
     }));
 
     useEffect(() => {
         getStudentsJson(lo).then(r => setState({ studentsJson: { data: r } }));
-    }, []);
+    }, [userLo]);
 
     return (
         <MainNode>