refs #4653 Load language at launch

locales/en/translation.json

@@ -21,6 +21,7 @@
   "accounts": {
     "new": {
       "title": "Add account",
+      "domain": "Domain",
       "sign_in": "Sign in",
       "authorize": "Authorize"
     },

renderer/components/Settings.tsx

@@ -1,11 +1,12 @@
-import { Context, localeType } from '@/utils/i18n'
+import { localeType } from '@/utils/i18n'
 import { Label, Modal, Select } from 'flowbite-react'
-import { ChangeEvent, useContext, useEffect, useState } from 'react'
+import { ChangeEvent, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 type Props = {
   opened: boolean
   close: () => void
+  reloadSettings: () => void
 }
 
 const languages = [
@@ -21,7 +22,6 @@ const languages = [
 
 export default function Settings(props: Props) {
   const [language, setLanguage] = useState<localeType>('en')
-  const { switchLang } = useContext(Context)
 
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
@@ -35,14 +35,7 @@ export default function Settings(props: Props) {
     if (typeof localStorage !== 'undefined') {
       localStorage.setItem('language', e.target.value)
     }
-    reloadSettings()
-  }
-
-  const reloadSettings = () => {
-    if (typeof localStorage !== 'undefined') {
-      const lang = localStorage.getItem('language')
-      switchLang(lang)
-    }
+    props.reloadSettings()
   }
 
   return (

renderer/components/accounts/New.tsx

@@ -72,7 +72,9 @@ export default function New(props: NewProps) {
             {sns === null && (
               <>
                 <div className="block">
-                  <Label htmlFor="domain" value="Domain" />
+                  <Label htmlFor="domain">
+                    <FormattedMessage id="accounts.new.domain" />
+                  </Label>
                 </div>
                 <TextInput id="domain" placeholder="mastodon.social" required type="text" />
                 <Button onClick={checkDomain}>

renderer/components/layouts/account.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { FaGear, FaPlus } from 'react-icons/fa6'
 import { Account, db } from '@/db'
 import NewAccount from '@/components/accounts/New'
@@ -8,6 +8,7 @@ import { useRouter } from 'next/router'
 import { FormattedMessage, useIntl } from 'react-intl'
 import generateNotification from '@/utils/notification'
 import generator, { Entity, WebSocketInterface } from 'megalodon'
+import { Context } from '@/utils/i18n'
 
 type LayoutProps = {
   children: React.ReactNode
@@ -17,11 +18,13 @@ export default function Layout({ children }: LayoutProps) {
   const [accounts, setAccounts] = useState<Array<Account>>([])
   const [openNewModal, setOpenNewModal] = useState(false)
   const [openSettings, setOpenSettings] = useState(false)
+  const { switchLang } = useContext(Context)
   const router = useRouter()
   const { formatMessage } = useIntl()
   const streamings = useRef<Array<WebSocketInterface>>([])
 
   useEffect(() => {
+    loadSettings()
     const fn = async () => {
       const acct = await db.accounts.toArray()
       setAccounts(acct)
@@ -97,6 +100,13 @@ export default function Layout({ children }: LayoutProps) {
     }
   }
 
+  const loadSettings = () => {
+    if (typeof localStorage !== 'undefined') {
+      const lang = localStorage.getItem('language')
+      switchLang(lang)
+    }
+  }
+
   return (
     <div className="app flex flex-col min-h-screen">
       <main className="flex w-full box-border my-0 mx-auto min-h-screen">
@@ -126,7 +136,7 @@ export default function Layout({ children }: LayoutProps) {
             <NewAccount opened={openNewModal} close={closeNewModal} />
           </div>
           <div className="settings text-gray-400 py-4 px-6 items-center">
-            <div className="relative">
+            <div className="relative cursor-pointer">
               <Dropdown
                 label=""
                 dismissOnClick
@@ -145,7 +155,7 @@ export default function Layout({ children }: LayoutProps) {
           </div>
         </aside>
         {children}
-        <Settings opened={openSettings} close={() => setOpenSettings(false)} />
+        <Settings opened={openSettings} close={() => setOpenSettings(false)} reloadSettings={loadSettings} />
       </main>
     </div>
   )

renderer/utils/i18n.tsx

@@ -19,12 +19,13 @@ export const Context = createContext<Lang>({} as Lang)
 export const IntlProviderWrapper: React.FC<Props> = props => {
   const langs = [
     { locale: 'en', messages: flattenMessages(en) },
-    { locale: 'ja', message: flattenMessages(ja) }
+    { locale: 'ja', messages: flattenMessages(ja) }
   ]
   const [lang, setLang] = useState(langs[0])
 
   const switchLang = (locale: string) => {
     const changeLang = langs.find(lang => lang.locale === locale)
+    console.log(changeLang)
     if (changeLang == null) {
       return
     }