Translated everything with i18next

ZaneH · Jul 24, 2022 · ebe30d4 · ebe30d4
1 parent 86a8a47
commit ebe30d4
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 69 deletions.
diff --git a/src/components/Keyboard/Keyboard.tsx b/src/components/Keyboard/Keyboard.tsx
@@ -1,6 +1,7 @@
 import { invoke } from '@tauri-apps/api'
 import { listen, UnlistenFn } from '@tauri-apps/api/event'
 import { useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { KeyboardShortcuts, MidiNumbers, Piano } from 'react-piano'
 import 'react-piano/dist/styles.css'
 import styled, { css } from 'styled-components'
@@ -10,6 +11,7 @@ import {
   getSeventhChordFromMidiNumber,
   MidiDevice,
   midiNumberToNote,
+  swapNoteWithSynonym,
 } from '../../utils'
 import { KVContext } from '../KVProvider'
 import SoundfontProvider from '../SoundfontProvider'
@@ -46,6 +48,7 @@ const Keyboard = () => {
     lastNote,
     keyboardConfig: KeyboardShortcuts.HOME_ROW,
   })
+  const { t } = useTranslation()
 
   const [listeningIdx, setListeningIdx] = useState(-1)
 
@@ -234,9 +237,13 @@ const Keyboard = () => {
               keyboardShortcuts={keyboardShortcuts}
               renderNoteLabel={({ midiNumber }: { midiNumber: number }) => (
                 <p className='ReactPiano__NoteLabel'>
-                  {MidiNumbers.getAttributes(midiNumber).note.replace(
-                    /[0-9]/,
-                    ''
+                  {t(
+                    swapNoteWithSynonym(
+                      MidiNumbers.getAttributes(midiNumber).note.replace(
+                        /[0-9]/,
+                        ''
+                      )
+                    )
                   )}
                 </p>
               )}

diff --git a/src/components/Quiz/Questions/Questions.ts b/src/components/Quiz/Questions/Questions.ts
@@ -4,27 +4,22 @@ export type QuestionTypeType = 'fifth' | 'key'
 type QuizQuestionType = {
   type: QuestionTypeType
   majMin?: MajorMinorType
-  questionFormat: string
 }
 
 export const QUIZ_QUESTIONS: QuizQuestionType[] = [
   {
     type: 'fifth',
     majMin: 'Major',
-    questionFormat: 'Which is a perfect fifth of {{key}}',
   },
   {
     type: 'fifth',
     majMin: 'Minor',
-    questionFormat: 'Which is a perfect fifth of {{key}}',
   },
   {
     type: 'key',
-    questionFormat: 'Press {{key}} on your keyboard',
   },
   {
     type: 'key',
-    questionFormat: 'Press {{key}} on your keyboard',
   },
 ]
 

diff --git a/src/components/Quiz/Quiz.tsx b/src/components/Quiz/Quiz.tsx
@@ -33,6 +33,7 @@ import {
 } from './Questions'
 import { QuizOption } from './QuizOption'
 import QuizHeader from './QuizHeader'
+import { useTranslation } from 'react-i18next'
 
 const QuizPage = styled.div`
   height: 100%;
@@ -72,6 +73,7 @@ const Quiz = () => {
   )
   const firstNote = MidiNumbers.fromNote('c3')
   const lastNote = MidiNumbers.fromNote('c5')
+  const { t } = useTranslation()
 
   // Get a random note that's appropriate for the question type
   const getRandomNote = useCallback(
@@ -300,13 +302,13 @@ const Quiz = () => {
           key={i}
           isAnswer={isCorrect}
           value={co}
-          onClick={(value, isAnswer) => {
+          onClick={(_value, isAnswer) => {
             if (isAnswer) {
               gotoNextQuestion()
             }
           }}
         >
-          {co}
+          {t(`piano.note.${co}`)}
         </QuizOption>
       )
     })
@@ -321,7 +323,7 @@ const Quiz = () => {
     <QuizPage>
       <QuizHeader />
       <QuizQuestion>
-        {formatQuestion(currentQuestion.questionFormat, {
+        {formatQuestion(t(`pages.quiz.questions.${currentQuestion.type}`), {
           key: currentQuestionKey,
           majMin: currentQuestion.majMin,
         })}

diff --git a/src/components/Quiz/QuizHeader.tsx b/src/components/Quiz/QuizHeader.tsx
@@ -4,6 +4,7 @@ import SettingsIcon from 'remixicon-react/Settings2FillIcon'
 import { useContext } from 'react'
 import { TrainerContext } from '../TrainerProvider'
 import { SidebarContext } from '../SidebarProvider'
+import { useTranslation } from 'react-i18next'
 
 const HeaderContainer = styled.div`
   width: 100%;
@@ -46,6 +47,7 @@ const SettingsIconContainer = styled.div`
 const QuizHeader = () => {
   const { setCurrentScreen } = useContext(TrainerContext)
   const { setIsOpen } = useContext(SidebarContext)
+  const { t } = useTranslation()
 
   return (
     <HeaderContainer>
@@ -55,7 +57,7 @@ const QuizHeader = () => {
       >
         <ArrowBack color='#1f1f20' />
       </BackIconContainer>
-      <h1>Quiz</h1>
+      <h1>{t('pages.quiz.title')}</h1>
       <SettingsIconContainer onClick={() => setIsOpen?.(true)}>
         <SettingsIcon color='#1f1f20' />
       </SettingsIconContainer>

diff --git a/src/components/SettingsSidebar/SettingRow.tsx b/src/components/SettingsSidebar/SettingRow.tsx
@@ -6,6 +6,7 @@ import { useContext, useEffect, useState } from 'react'
 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;
@@ -33,6 +34,7 @@ const SettingRow = ({ setting, value }: SettingRowProps) => {
     setMidiDevice: setConnectedMidiDevice,
     setIsSentryOn,
   } = useContext(KVContext)
+  const { t } = useTranslation()
 
   const [midiDevices, setMidiDevices] = useState<MidiDevice[]>([])
 
@@ -62,7 +64,9 @@ const SettingRow = ({ setting, value }: SettingRowProps) => {
 
     return (
       <SettingRowContainer>
-        <span className='settings-row-label'>{setting.label}</span>
+        <span className='settings-row-label'>
+          {t(`settings.options.${setting.key}`)}
+        </span>
         <Select
           options={midiDevices.map((d) => ({
             value: d.id,
@@ -103,7 +107,9 @@ const SettingRow = ({ setting, value }: SettingRowProps) => {
         }
       }}
     >
-      <span className='settings-row-label'>{setting.label}</span>
+      <span className='settings-row-label'>
+        {t(`settings.options.${setting.key}`)}
+      </span>
 
       {value ? (
         <CheckedIcon color='white' size={32} />

diff --git a/src/components/SettingsSidebar/SettingsSidebar.tsx b/src/components/SettingsSidebar/SettingsSidebar.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useContext } from 'react'
+import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import { AVAILABLE_SETTINGS, PTSettingType } from '../../utils'
 import { KVContext } from '../KVProvider'
@@ -38,6 +39,7 @@ const SettingsSidebar = () => {
   const { showKeyboard, muteSound, midiDevice, isSentryOn } =
     useContext(KVContext)
   const { setIsOpen } = useContext(SidebarContext)
+  const { t } = useTranslation()
 
   const renderSettingRow = useCallback(
     (s: PTSettingType) => {
@@ -61,7 +63,7 @@ const SettingsSidebar = () => {
     <CoverScreen>
       <FadeOut onClick={() => setIsOpen?.(false)} />
       <Sidebar>
-        <h1>Settings</h1>
+        <h1>{t('settings.title')}</h1>
         {AVAILABLE_SETTINGS.map((s) => renderSettingRow(s))}
       </Sidebar>
     </CoverScreen>

diff --git a/src/components/Trainer/TrainerDisplay.tsx b/src/components/Trainer/TrainerDisplay.tsx
@@ -13,6 +13,7 @@ import ArrowLeftRightIcon from 'remixicon-react/ArrowLeftRightFillIcon'
 import SkullIcon from 'remixicon-react/SkullFillIcon'
 import QuizIcon from 'remixicon-react/SurveyFillIcon'
 import { SidebarContext } from '../SidebarProvider'
+import { useTranslation } from 'react-i18next'
 
 const TrainerDisplayContainer = styled.div`
   display: flex;
@@ -63,9 +64,10 @@ const TrainerDisplay = () => {
     setIsHardModeEnabled,
   } = useContext(TrainerContext)
   const { setIsOpen } = useContext(SidebarContext)
+  const { t } = useTranslation()
 
   const scaleOptions = Object.keys(AVAILABLE_SCALES).map((s: string) => ({
-    label: AVAILABLE_SCALES[s as AvailableMajorScalesType].label,
+    label: t(`scales.${AVAILABLE_SCALES[s as AvailableMajorScalesType].value}`),
     value: AVAILABLE_SCALES[s as AvailableMajorScalesType].value,
   }))
 
@@ -86,17 +88,17 @@ const TrainerDisplay = () => {
     <TrainerDisplayContainer>
       <TrainerSection>
         <TrainerSectionHeader>
-          <h2>Scale</h2>
+          <h2>{t('pages.practice.scale.title')}</h2>
           <IconContainer
-            title='Toggle ping-pong scale practice'
+            title={t('pages.practice.scale.pingPongHint')}
             onClick={() => setIsScalePingPong?.((isPingPong) => !isPingPong)}
           >
             <ArrowLeftRightIcon
               color={isScalePingPong ? '#70bcd3' : '#1f1f20'}
             />
           </IconContainer>
           <IconContainer
-            title='Toggle hard mode'
+            title={t('pages.practice.scale.hardModeHint')}
             onClick={() => setIsHardModeEnabled?.((isHard) => !isHard)}
           >
             <SkullIcon color={isHardModeEnabled ? '#70bcd3' : '#1f1f20'} />
@@ -106,8 +108,11 @@ const TrainerDisplay = () => {
           filterOption={fromStartFilter}
           options={scaleOptions}
           value={{
-            label:
-              AVAILABLE_SCALES[scale?.value as AvailableMajorScalesType].label,
+            label: t(
+              `scales.${
+                AVAILABLE_SCALES[scale?.value as AvailableMajorScalesType].value
+              }`
+            ),
             value:
               AVAILABLE_SCALES[scale?.value as AvailableMajorScalesType].value,
           }}
@@ -119,9 +124,9 @@ const TrainerDisplay = () => {
 
       <TrainerSection>
         <TrainerSectionHeader>
-          <h2>Mode</h2>
+          <h2>{t('pages.practice.mode.title')}</h2>
           <IconContainer
-            title='Switch to quiz mode'
+            title={t('pages.practice.mode.quizModeHint')}
             onClick={() => setCurrentScreen?.('quiz')}
           >
             <QuizIcon color='#1f1f20' />

diff --git a/src/i18n/config.ts b/src/i18n/config.ts
@@ -1,5 +1,5 @@
 import i18n from 'i18next'
-import translation from './en/translation.json'
+import translation from './en/translation'
 import { initReactI18next } from 'react-i18next'
 
 export const resources = {

diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json