Add dropdown to change language

ZaneH · Jul 24, 2022 · 0334159 · 0334159
1 parent 64f0ca9
commit 0334159
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 19 deletions.
diff --git a/src/components/KVProvider/KVProvider.tsx b/src/components/KVProvider/KVProvider.tsx
@@ -8,8 +8,13 @@ import {
   useMemo,
   useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Store } from 'tauri-plugin-store-api'
 import { AVAILABLE_SETTINGS, MidiDevice, PTSettingsKeyType } from '../../utils'
+import {
+  AVAILABLE_LANGUAGES,
+  SupportedLanguagesType,
+} from '../../utils/languages'
 
 type KVContextType = {
   children?: React.ReactNode
@@ -19,13 +24,15 @@ type KVContextType = {
   showKeyboard?: boolean
   muteSound?: boolean
   midiDevice?: MidiDevice
+  language?: SupportedLanguagesType
   isSentryOn?: boolean
 
   setIsLoading?: Dispatch<SetStateAction<boolean>>
   setPianoSound?: Dispatch<SetStateAction<string>>
   setShowKeyboard?: Dispatch<SetStateAction<boolean>>
   setMuteSound?: Dispatch<SetStateAction<boolean>>
   setMidiDevice?: Dispatch<SetStateAction<MidiDevice>>
+  setLanguage?: Dispatch<SetStateAction<SupportedLanguagesType>>
   setIsSentryOn?: Dispatch<SetStateAction<boolean>>
 
   saveSetting?: (key: PTSettingsKeyType, value: any) => void
@@ -47,7 +54,11 @@ const KVProvider: FC<KVContextType> = ({ children }) => {
     id: 0,
     name: 'default',
   })
+  const [language, setLanguage] = useState(
+    AVAILABLE_LANGUAGES.en.code as SupportedLanguagesType
+  )
   const [isSentryOn, setIsSentryOn] = useState(true)
+  const { i18n } = useTranslation()
 
   /**
    * Map settings stored on-disk into the KVProvider's state
@@ -71,6 +82,9 @@ const KVProvider: FC<KVContextType> = ({ children }) => {
               id: Number(value),
             })
             break
+          case 'language':
+            setLanguage(value as SupportedLanguagesType)
+            break
           case 'is-sentry-on':
             setIsSentryOn(Boolean(value))
             break
@@ -82,6 +96,7 @@ const KVProvider: FC<KVContextType> = ({ children }) => {
       setShowKeyboard,
       setMuteSound,
       setMidiDevice,
+      setLanguage,
       setIsSentryOn,
       store,
     ]
@@ -115,6 +130,14 @@ const KVProvider: FC<KVContextType> = ({ children }) => {
     saveSetting('midi-input-id', midiDevice?.id || 0)
   }, [midiDevice?.id, saveSetting])
 
+  useEffect(() => {
+    if (language in AVAILABLE_LANGUAGES) {
+      i18n.changeLanguage(language)
+    }
+
+    saveSetting('language', language)
+  }, [language, saveSetting, i18n])
+
   useEffect(() => {
     saveSetting('is-sentry-on', isSentryOn)
   }, [isSentryOn, saveSetting])
@@ -141,12 +164,15 @@ const KVProvider: FC<KVContextType> = ({ children }) => {
     showKeyboard,
     muteSound,
     midiDevice,
+    language,
     isSentryOn,
+
     setIsLoading,
     setPianoSound,
     setShowKeyboard,
     setMuteSound,
     setMidiDevice,
+    setLanguage,
     setIsSentryOn,
     saveSetting,
   }

diff --git a/src/components/SettingsSidebar/SettingRow.tsx b/src/components/SettingsSidebar/SettingRow.tsx
@@ -1,12 +1,16 @@
-import styled from 'styled-components'
-import { MidiDevice, PTSettingType } from '../../utils'
+import { invoke } from '@tauri-apps/api'
+import { useContext, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Select from 'react-select'
 import UncheckedIcon from 'remixicon-react/CheckboxBlankCircleLineIcon'
 import CheckedIcon from 'remixicon-react/CheckboxCircleFillIcon'
-import { useContext, useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { MidiDevice, PTSettingType } from '../../utils'
+import {
+  AVAILABLE_LANGUAGES,
+  SupportedLanguagesType,
+} from '../../utils/languages'
 import { KVContext } from '../KVProvider'
-import { invoke } from '@tauri-apps/api'
-import Select from 'react-select'
-import { useTranslation } from 'react-i18next'
 
 const SettingRowContainer = styled.div`
   margin: 24px 42px;
@@ -32,6 +36,7 @@ const SettingRow = ({ setting, value }: SettingRowProps) => {
     setMuteSound,
     setShowKeyboard,
     setMidiDevice: setConnectedMidiDevice,
+    setLanguage,
     setIsSentryOn,
   } = useContext(KVContext)
   const { t } = useTranslation()
@@ -89,6 +94,27 @@ const SettingRow = ({ setting, value }: SettingRowProps) => {
         />
       </SettingRowContainer>
     )
+  } else if (setting.key === 'language') {
+    return (
+      <SettingRowContainer>
+        <span className='settings-row-label'>
+          {t(`settings.options.${setting.key}`)}
+        </span>
+        <Select
+          options={Object.keys(AVAILABLE_LANGUAGES).map((code) => ({
+            label: AVAILABLE_LANGUAGES[code as SupportedLanguagesType].name,
+            value: code,
+          }))}
+          value={{
+            label: AVAILABLE_LANGUAGES[value as SupportedLanguagesType].name,
+            value,
+          }}
+          onChange={(e) => {
+            setLanguage?.(e?.value as SupportedLanguagesType)
+          }}
+        />
+      </SettingRowContainer>
+    )
   }
 
   return (

diff --git a/src/components/SettingsSidebar/SettingsSidebar.tsx b/src/components/SettingsSidebar/SettingsSidebar.tsx
@@ -36,7 +36,7 @@ const Sidebar = styled.div`
 `
 
 const SettingsSidebar = () => {
-  const { showKeyboard, muteSound, midiDevice, isSentryOn } =
+  const { showKeyboard, muteSound, midiDevice, language, isSentryOn } =
     useContext(KVContext)
   const { setIsOpen } = useContext(SidebarContext)
   const { t } = useTranslation()
@@ -48,6 +48,8 @@ const SettingsSidebar = () => {
           return <SettingRow key={s.key} setting={s} value={showKeyboard} />
         case 'mute-sound':
           return <SettingRow key={s.key} setting={s} value={muteSound} />
+        case 'language':
+          return <SettingRow key={s.key} setting={s} value={language} />
         case 'midi-input-id':
           return (
             <SettingRow key={s.key} setting={s} value={midiDevice?.id || 0} />
@@ -56,7 +58,7 @@ const SettingsSidebar = () => {
           return <SettingRow key={s.key} setting={s} value={isSentryOn} />
       }
     },
-    [showKeyboard, muteSound, isSentryOn, midiDevice?.id]
+    [showKeyboard, muteSound, isSentryOn, midiDevice?.id, language]
   )
 
   return (

diff --git a/src/i18n/config.ts b/src/i18n/config.ts
@@ -1,10 +1,14 @@
 import i18n from 'i18next'
-import translation from './en/translation'
+import enTranslation from './en/translation'
+import frTranslation from './fr/translation'
 import { initReactI18next } from 'react-i18next'
 
 export const resources = {
   en: {
-    translation,
+    translation: enTranslation,
+  },
+  fr: {
+    translation: frTranslation,
   },
 } as const
 

diff --git a/src/i18n/en/translation.ts b/src/i18n/en/translation.ts
@@ -1,4 +1,4 @@
-export default {
+const en = {
   piano: {
     note: {
       Cb: 'Cb',
@@ -140,7 +140,10 @@ export default {
       'show-keyboard': 'Show keyboard',
       'mute-sound': 'Mute sound',
       'midi-input-id': 'MIDI input',
+      language: 'Language',
       'is-sentry-on': 'Send crash reports',
     },
   },
 }
+
+export default en
diff --git a/src/i18n/fr/translation.ts b/src/i18n/fr/translation.ts
@@ -1,4 +1,4 @@
-export default {
+const fr = {
   piano: {
     note: {
       Cb: 'Do♭',
@@ -117,7 +117,7 @@ export default {
     practice: {
       scale: {
         title: 'Gamme',
-        pingPongHint: 'Mode ping-pong de pratique des gammes",
+        pingPongHint: 'Mode ping-pong de pratique des gammes',
         hardModeHint: 'Mode difficile',
       },
       mode: {
@@ -140,7 +140,10 @@ export default {
       'show-keyboard': 'Afficher le clavier',
       'mute-sound': 'Couper le son',
       'midi-input-id': 'Entrée MIDI',
+      language: 'Langue',
       'is-sentry-on': 'Envoyer les rapports de bug',
     },
   },
 }
+
+export default fr
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -46,40 +46,39 @@ export type PTSettingsKeyType =
   | 'show-keyboard'
   | 'mute-sound'
   | 'midi-input-id'
+  | 'language'
   | 'is-sentry-on'
 
 export type PTSettingType = {
   key: PTSettingsKeyType
-  label: string
   type: 'select' | 'checkbox'
   options?: readonly string[]
 }
 
 export const AVAILABLE_SETTINGS: readonly PTSettingType[] = [
   {
     key: 'piano-sound',
-    label: 'Sound',
     type: 'select',
     options: ['Piano Grand'],
   },
   {
     key: 'show-keyboard',
-    label: 'Show keyboard',
     type: 'checkbox',
   },
   {
     key: 'mute-sound',
-    label: 'Mute sound',
     type: 'checkbox',
   },
   {
     key: 'midi-input-id',
-    label: 'MIDI Input',
     type: 'select',
   },
+  {
+    key: 'language',
+    type: 'checkbox',
+  },
   {
     key: 'is-sentry-on',
-    label: 'Send crash reports',
     type: 'checkbox',
   },
 ] as const

diff --git a/src/utils/languages.ts b/src/utils/languages.ts
@@ -0,0 +1,19 @@
+export type LanguageOptionType = {
+  name: string
+  code: string
+}
+
+export type SupportedLanguagesType = 'en' | 'fr'
+
+export const AVAILABLE_LANGUAGES: {
+  [key in SupportedLanguagesType]: LanguageOptionType
+} = {
+  en: {
+    name: 'English',
+    code: 'en',
+  },
+  fr: {
+    name: 'Français',
+    code: 'fr',
+  },
+} as const