chore: use hook for translation key

jwplayer · Nov 25, 2024 · 5e4b23e · 5e4b23e
1 parent 3c23908
commit 5e4b23e
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/packages/hooks-react/src/useTranslationKey.ts b/packages/hooks-react/src/useTranslationKey.ts
@@ -0,0 +1,7 @@
+import { useTranslation } from 'react-i18next';
+
+export const useTranslationKey = (key: string) => {
+  const { i18n } = useTranslation();
+
+  return `${key}-${i18n.language}`;
+};
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -7,6 +7,7 @@ import { unicodeToChar } from '@jwp/ott-common/src/utils/common';
 import { determinePath } from '@jwp/ott-common/src/utils/urlFormatting';
 import env from '@jwp/ott-common/src/env';
 import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
+import { useTranslationKey } from '@jwp/ott-hooks-react/src/useTranslationKey';
 
 import Header from '../../components/Header/Header';
 import Footer from '../../components/Footer/Footer';
@@ -25,10 +26,7 @@ import styles from './Layout.module.scss';
 
 const Layout = () => {
   const { t } = useTranslation('common');
-  const { i18n } = useTranslation();
-
-  // Determine currently selected language
-  const language = i18n.language;
+  const translationKey = useTranslationKey('label');
 
   const { config } = useConfigStore(
     ({ config, accessModel, supportedLanguages }) => ({
@@ -53,7 +51,7 @@ const Layout = () => {
   const navItems = [
     { label: t('home'), to: '/' },
     ...menu.map(({ label, contentId, type, custom }) => ({
-      label: custom?.[`label-${language}`] || label,
+      label: custom?.[translationKey] || label,
       to: determinePath({ type, contentId, label }),
     })),
   ];

diff --git a/packages/ui-react/src/containers/ShelfList/ShelfList.tsx b/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
@@ -12,6 +12,7 @@ import { parseAspectRatio, parseTilesDelta } from '@jwp/ott-common/src/utils/col
 import { testId } from '@jwp/ott-common/src/utils/common';
 import { PersonalShelf, SHELF_LAYOUT_TYPE } from '@jwp/ott-common/src/constants';
 import usePlaylists from '@jwp/ott-hooks-react/src/usePlaylists';
+import { useTranslationKey } from '@jwp/ott-hooks-react/src/useTranslationKey';
 
 import Shelf from '../../components/Shelf/Shelf';
 import InfiniteScrollLoader from '../../components/InfiniteScrollLoader/InfiniteScrollLoader';
@@ -32,10 +33,7 @@ const ShelfList = ({ rows }: Props) => {
   const { accessModel } = useConfigStore(({ accessModel }) => ({ accessModel }), shallow);
   const [rowsToLoad, setRowsToLoad] = useState(INITIAL_ROWS_TO_LOAD);
   const { t } = useTranslation('error');
-  const { i18n } = useTranslation();
-
-  // Determine currently selected language
-  const language = i18n.language;
+  const translationKey = useTranslationKey('title');
 
   const watchHistoryDictionary = useWatchHistoryStore((state) => state.getDictionaryWithSeries());
 
@@ -75,8 +73,8 @@ const ShelfList = ({ rows }: Props) => {
           const posterAspect = parseAspectRatio(playlist.cardImageAspectRatio || playlist.shelfImageAspectRatio);
           const visibleTilesDelta = parseTilesDelta(posterAspect);
 
-          const translatedKey = custom?.[`title-${language}`] || (playlist?.[`title-${language}`] as string);
-          const translatedTitle = translatedKey || title || playlist?.title;
+          const translatedValue = custom?.[translationKey] || (playlist?.[translationKey] as string);
+          const translatedTitle = translatedValue || title || playlist?.title;
 
           const isHero = custom?.layoutType === SHELF_LAYOUT_TYPE.hero && index === 0;
           const isFeatured = !isHero && (custom?.layoutType === SHELF_LAYOUT_TYPE.featured || featured);

diff --git a/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx b/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx
@@ -7,6 +7,7 @@ import { useLocation, useNavigate } from 'react-router';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { determinePath } from '@jwp/ott-common/src/utils/urlFormatting';
+import { useTranslationKey } from '@jwp/ott-hooks-react/src/useTranslationKey';
 
 import Button from '../../components/Button/Button';
 import Sidebar from '../../components/Sidebar/Sidebar';
@@ -49,8 +50,8 @@ const SidebarUserActions = ({
 };
 
 const SidebarContainer = () => {
-  const { t, i18n } = useTranslation('common');
-  const language = i18n.language;
+  const { t } = useTranslation('common');
+  const translationKey = useTranslationKey('title');
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -85,7 +86,7 @@ const SidebarContainer = () => {
         </li>
         {menu.map(({ contentId, type, label, custom }) => (
           <li key={contentId}>
-            <MenuButton label={custom?.[`label-${language}`] || label} to={determinePath({ type, contentId })} />
+            <MenuButton label={custom?.[translationKey] || label} to={determinePath({ type, contentId })} />
           </li>
         ))}
       </ul>

diff --git a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { useTranslation } from 'react-i18next';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import type { Playlist, PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { filterPlaylist, getFiltersFromConfig } from '@jwp/ott-common/src/utils/collection';
 import { mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { useTranslationKey } from '@jwp/ott-hooks-react/src/useTranslationKey';
 
 import type { ScreenComponent } from '../../../../../types/screens';
 import CardGrid from '../../../../components/CardGrid/CardGrid';
@@ -15,7 +15,7 @@ import Filter from '../../../../components/Filter/Filter';
 import styles from './PlaylistGrid.module.scss';
 
 const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
-  const { i18n } = useTranslation();
+  const translationKey = useTranslationKey('title');
   const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
 
   const [filter, setFilter] = useState<string>('');
@@ -32,7 +32,7 @@ const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
     setFilter('');
   }, [data.feedid]);
 
-  const title = (data?.[`title-${i18n.language}`] as string) || data.title;
+  const title = (data?.[translationKey] as string) || data.title;
   const pageTitle = `${title} - ${config.siteName}`;
 
   const getUrl = (playlistItem: PlaylistItem) =>