feat(user): add nav translations

jwplayer · Jul 20, 2021 · 4f6a203 · 4f6a203
1 parent 800dfc8
commit 4f6a203
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/src/containers/Customer/Customer.ts b/src/containers/Customer/Customer.ts
@@ -17,6 +17,8 @@ const Account = ({ children }: Props): JSX.Element => {
     country: 'England',
     currency: 'Euro',
     lastUserIp: 'temp',
+    firstName: 'Henk',
+    lastName: 'Peterson',
   };
   const update = (customer: Customer) => console.info('update', customer);
 

diff --git a/src/i18n/locales/en_US/user.json b/src/i18n/locales/en_US/user.json
@@ -1,4 +1,10 @@
 {
+  "nav": {
+    "account": "Account",
+    "favorites": "Favorites",
+    "payments": "Payments",
+    "logout": "Log out"
+  },
   "account": {
     "email": "Email",
     "edit_account": "Edit account",

diff --git a/src/i18n/locales/nl_NL/user.json b/src/i18n/locales/nl_NL/user.json
@@ -1,4 +1,10 @@
 {
+  "nav": {
+    "account": "",
+    "favorites": "",
+    "payments": "",
+    "logout": ""
+  },
   "account": {
     "email": "",
     "edit_account": "",

diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 import Customer from '../../containers/Customer/Customer';
 import SubscriptionContainer from '../../containers/Subscription/Subscription';
@@ -15,6 +16,7 @@ import Exit from '../../icons/Exit';
 import styles from './User.module.scss';
 
 const User = (): JSX.Element => {
+  const { t } = useTranslation('user');
   const breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
 
@@ -25,16 +27,16 @@ const User = (): JSX.Element => {
           <div className={styles.panel}>
             <ul>
               <li>
-                <Button to="/u/my-account" label="Account" variant="text" startIcon={<AccountCircle />} className={styles.button} />
+                <Button to="/u/my-account" label={t('nav.account')} variant="text" startIcon={<AccountCircle />} className={styles.button} />
               </li>
               <li>
-                <Button to="/u/favorites" label="Favorites" variant="text" startIcon={<Favorite />} className={styles.button} />
+                <Button to="/u/favorites" label={t('nav.favorites')} variant="text" startIcon={<Favorite />} className={styles.button} />
               </li>
               <li>
-                <Button to="/u/payments" label="Payments" variant="text" startIcon={<BalanceWallet />} className={styles.button} />
+                <Button to="/u/payments" label={t('nav.payments')} variant="text" startIcon={<BalanceWallet />} className={styles.button} />
               </li>
               <li className={styles.logoutLi}>
-                <Button to="/u/logout" label="Log out" variant="text" startIcon={<Exit />} className={styles.button} />
+                <Button to="/u/logout" label={t('nav.logout')} variant="text" startIcon={<Exit />} className={styles.button} />
               </li>
             </ul>
           </div>