diff --git a/components/root/MApp.tsx b/components/root/MApp.tsx index 76cdf2b4..e431f17a 100644 --- a/components/root/MApp.tsx +++ b/components/root/MApp.tsx @@ -2,13 +2,13 @@ import React from "react"; import i18next from "i18next"; // import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector"; import I18NextHttpBackend from "i18next-http-backend"; -import { AppProps } from 'next/app'; +import { AppProps } from "next/app"; import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect, useMemo, useState } from "react"; import { initReactI18next } from "react-i18next"; import { Dimmer, Loader } from "semantic-ui-react"; -import { AppProvider, AppType, useApp } from '../../lib/AppContext'; +import { AppProvider, AppType, useApp } from "../../lib/AppContext"; import { initAlert } from "../../lib/initAlert"; import { initApi } from "../../lib/initApi"; import { initAppStore } from "../../lib/initAppStore"; @@ -23,98 +23,104 @@ import { BasePropsWithChildren } from "../types"; import { useLoadNickname } from "../../lib/useNickname"; function initI18n() { - const [init, setInit] = useState(false) + const [init, setInit] = useState(false); useEffect(() => { - i18next.use(new I18NextHttpBackend()) + i18next + .use(new I18NextHttpBackend()) // .use(I18nextBrowserLanguageDetector) .use(initReactI18next) - .init({ - backend: { - loadPath: '/locales/{{lng}}.json' + .init( + { + backend: { + loadPath: "/locales/{{lng}}.json", + }, + lng: "en", + fallbackLng: "en", + interpolation: { + escapeValue: false, + }, }, - lng: 'en', - fallbackLng: 'en', - interpolation: { - escapeValue: false + () => { + setInit(true); } - }, () => { - setInit(true) - }) - }, []) + ); + }, []); return init; } function MAppProvider(props: BasePropsWithChildren) { - const alert = initAlert() - const api = initApi() - const loading = initLoading() - const store = initAppStore() - const recaptcha = initReCaptcha() - useLoadNickname() - const appType = useMemo(() => ({ alert, api, loading, store, recaptcha }), [alert, api, loading, store, recaptcha]) - return - {props.children} - + const alert = initAlert(); + const api = initApi(); + const loading = initLoading(); + const store = initAppStore(); + const recaptcha = initReCaptcha(); + const appType = useMemo(() => ({ alert, api, loading, store, recaptcha }), [alert, api, loading, store, recaptcha]); + return {props.children}; } -function MAppLoading(p: { show?: boolean, msg?: string}) { - const { loading } = useApp() - const active = p.show || loading.isLoading - const msg = p.show ? p.msg || 'Loading' : loading.msg - return - - +function MAppLoading(p: { show?: boolean; msg?: string }) { + const { loading } = useApp(); + const active = p.show || loading.isLoading; + const msg = p.show ? p.msg || "Loading" : loading.msg; + return ( + + + + ); } - - function SkipLoginPage({ Component, pageProps }: AppProps) { - return - - {siteTitle} - - - - - - - -} - -function DefAppPage({ Component, pageProps }: AppProps) { - const wUser = useLoginUser() - const showPage = !wUser.isLoad - return - + return ( + {siteTitle} - { - showPage && - - {/* */} - - } - - + + - + ); +} + +function LoadNickname() { + useLoadNickname(); + return null; +} +function DefAppPage({ Component, pageProps }: AppProps) { + const wUser = useLoginUser(); + const showPage = !wUser.isLoad; + return ( + + + + + {siteTitle} + + + {showPage && ( + + + {/* */} + + )} + + + + + + + ); } -const SKIP_Login = [ - '/share', - '/invite_bonus_guide', - '/rewards_history' -] +const SKIP_Login = ["/share", "/invite_bonus_guide", "/rewards_history"]; export default function MApp(props: AppProps) { - const { pathname } = useRouter() - const skipLoginPage = useMemo(() => SKIP_Login.includes(pathname), [pathname]) - const init = initI18n() - if (!init) return
- if (skipLoginPage) return - return + const { pathname } = useRouter(); + const skipLoginPage = useMemo(() => SKIP_Login.includes(pathname), [pathname]); + const init = initI18n(); + if (!init) return
; + if (skipLoginPage) return ; + return ; }