make the LineChart component translatable

src/common/Chart/LineChart.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { LINE_CHART } from '@config/namespaces';
 import { darkTheme } from './theme';
 
 import { ResponsiveLine, LineSvgProps } from '@nivo/line';
@@ -11,6 +13,8 @@ export interface Props extends LineSvgProps {
 }
 
 const LineChart = ({ data, loading, ...rest }: Props) => {
+  const { t } = useTranslation(LINE_CHART);
+
   if (loading) {
     return <Skeleton height="100%" variant="rect" />;
   }
@@ -24,7 +28,7 @@ const LineChart = ({ data, loading, ...rest }: Props) => {
         alignItems="center"
       >
         <Typography variant="h4" align="center">
-          No records to display
+          {t('emptyDataSourceMessage')}
         </Typography>
       </Box>
     );

src/config/namespaces.ts

@@ -1,5 +1,6 @@
 export const COMMON = 'common';
 export const TABLE = 'table';
+export const LINE_CHART = 'line-chart';
 export const INDEX_PAGE = 'index-page';
 export const NOT_FOUND_PAGE = 'not-found-page';
 export const SERVER_PAGE = {

src/libs/i18n/en/index.ts

@@ -4,12 +4,14 @@ import indexPage from './index-page';
 import notFoundPage from './not-found-page';
 import serverPage from './server-page';
 import table from './table';
+import lineChart from './line-chart';
 
 const translations = {
   [NAMESPACES.COMMON]: common,
   [NAMESPACES.INDEX_PAGE]: indexPage,
   [NAMESPACES.NOT_FOUND_PAGE]: notFoundPage,
   [NAMESPACES.TABLE]: table,
+  [NAMESPACES.LINE_CHART]: lineChart,
   ...serverPage,
 };
 

src/libs/i18n/en/line-chart.ts

@@ -0,0 +1,5 @@
+const translations = {
+  emptyDataSourceMessage: 'No records to display',
+};
+
+export default translations;

src/libs/i18n/pl/index-page.ts

@@ -1,19 +1,16 @@
 const translations = {
-  title: 'Strona główna',
+  title: 'Home',
   header: {
-    search: 'Szukaj',
+    search: 'Search',
   },
   serverSelection: {
-    numberOfPlayers_0: '{{num}} gracz',
-    numberOfPlayers_1: '{{num}} graczy',
-    numberOfPlayers_2: '{{num}} graczy',
-    numberOfTribes_0: '{{num}} plemię',
-    numberOfTribes_1: '{{num}} plemiona',
-    numberOfTribes_2: '{{num}} plemion',
-    numberOfVillages_0: '{{num}} wioska',
-    numberOfVillages_1: '{{num}} wioski',
-    numberOfVillages_2: '{{num}} wiosek',
-    updated: 'Zaktualizowany',
+    numberOfPlayers: '{{num}} player',
+    numberOfPlayers_plural: '{{num}} players',
+    numberOfTribes: '{{num}} tribe',
+    numberOfTribes_plural: '{{num}} tribes',
+    numberOfVillages: '{{num}} village',
+    numberOfVillages_plural: '{{num}} villages',
+    updated: 'Updated',
   },
 };
 

src/libs/i18n/pl/line-chart.ts

@@ -0,0 +1,5 @@
+const translations = {
+  emptyDataSourceMessage: 'Brak danych do wyświetlenia',
+};
+
+export default translations;