feat(i18n): translate whole profile page

front/pages/internal/profile.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react'
 
 import { Profile } from '@front/features/profile'
+import { pageWithTranslation, Namespace } from '@front/domain/i18n'
 
-export default class ProfilePage extends React.Component {
+class ProfilePage extends React.Component {
   public static isSecure = true
 
   public render() {
     return <Profile />
   }
 }
+
+export default pageWithTranslation([Namespace.Profile, Namespace.Currency])(
+  ProfilePage,
+)

front/src/domain/i18n/Namespace.ts

@@ -8,4 +8,5 @@ export enum Namespace {
   History = 'history',
   Common = 'common',
   Months = 'months',
+  Profile = 'profile',
 }

front/src/features/app/features/create/CreateTransaction.tsx

@@ -99,7 +99,7 @@ export const CreateTransaction = ({ className }: Props) => {
                 showSearch
                 name="currency"
                 options={Currency}
-                getLabel={c => t(translatedCurrency(c))}
+                getLabel={translatedCurrency(t)}
               />
             </Label>
 

front/src/features/profile/Profile.tsx

@@ -15,13 +15,15 @@ import { useNotifyAlert } from '@front/ui/hooks/useNotifyAlert'
 import { Currency } from '@shared/enum/Currency'
 import { Button } from '@front/ui/components/form/button'
 import { signOut } from '@front/domain/user/actions/signOut'
+import { useTranslation } from '@front/domain/i18n'
 
 import { pushRoute } from '../routing'
 import * as styles from './Profile.css'
 
 export const Profile = () => {
   const dispatch = useThunk()
   const notify = useNotifyAlert()
+  const { t } = useTranslation()
 
   const { defaultCurrency } = useMemoState(
     () => getProfile,
@@ -44,16 +46,19 @@ export const Profile = () => {
 
   return (
     <Container>
-      <PageHeader title="Profile" onBack={() => pushRoute('/app')} />
+      <PageHeader
+        title={t('common:nav.profile')}
+        onBack={() => pushRoute('/app')}
+      />
 
       <section className={styles.container}>
-        <Card title="Profile">
-          <p>Comming soon...</p>
-          <Button onClick={logout}>Sign out</Button>
+        <Card title={t('profile:main.title')}>
+          <p>{t('profile:main.soon')}</p>
+          <Button onClick={logout}>{t('profile:main.sign-out')}</Button>
         </Card>
 
-        <Card title="Settings">
-          <Label text="Preferred currency">
+        <Card title={t('profile:settings.title')}>
+          <Label text={t('profile:settings.preferred-currency')}>
             <CurrencySwitch currency={currency} updateCurrency={setCurrency} />
           </Label>
         </Card>

front/src/helpers/translatedCurrency.ts

@@ -1,4 +1,5 @@
 import { Currency } from '@shared/enum/Currency'
 
-export const translatedCurrency = (currency: Currency): string =>
-  `currency:${currency}`
+export const translatedCurrency = (t: (key: string) => string) => (
+  currency: Currency,
+): string => t(`currency:${currency}`)

front/src/ui/components/controls/currency-switch.tsx

@@ -1,15 +1,18 @@
 import { useCallback } from 'react'
 
-import { getCurrencyName } from '@shared/helpers/getCurrencyName'
 import { EnumSelect } from '@front/ui/components/form/select'
 import { Currency } from '@shared/enum/Currency'
+import { useTranslation } from '@front/domain/i18n'
+import { translatedCurrency } from '@front/helpers/translatedCurrency'
 
 interface Props {
   currency: Currency
   updateCurrency: (newCurrenct: Currency) => void
 }
 
 export const CurrencySwitch = ({ currency, updateCurrency }: Props) => {
+  const { t } = useTranslation()
+
   const onChange = useCallback(
     (v?: string) => {
       updateCurrency((v as Currency) || currency)
@@ -23,7 +26,7 @@ export const CurrencySwitch = ({ currency, updateCurrency }: Props) => {
       value={currency}
       onChange={onChange}
       showSearch
-      getLabel={getCurrencyName}
+      getLabel={translatedCurrency(t)}
     />
   )
 }

front/static/locales/ru/profile.json

@@ -0,0 +1,11 @@
+{
+  "main": {
+    "title": "Профиль",
+    "soon": "В разработке...",
+    "sign-out": "Выйти"
+  },
+  "settings": {
+    "title": "Настройки",
+    "preferred-currency": "Валюта по умолчанию"
+  }
+}