feat(i18n): added i18next for user interface translations (#432)

src/components/Versions/Versions.test.tsx

@@ -4,8 +4,9 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, cleanup } from '../../utils/test-react-testing-library';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContext, DetailContextProps } from '../../pages/Version';
+import translationEN from '../../../i18n/translations/en-US.json';
 
-import Versions, { LABEL_CURRENT_TAGS, LABEL_VERSION_HISTORY } from './Versions';
+import Versions from './Versions';
 import data from './__partials__/data.json';
 
 const detailContextValue: Partial<DetailContextProps> = {
@@ -35,8 +36,8 @@ describe('<Version /> component', () => {
   test('should render versions', () => {
     const { getByText } = render(<ComponentToBeRendered contextValue={detailContextValue} />);
 
-    expect(getByText(LABEL_VERSION_HISTORY)).toBeTruthy();
-    expect(getByText(LABEL_CURRENT_TAGS)).toBeTruthy();
+    expect(getByText(translationEN.versions['version-history'])).toBeTruthy();
+    expect(getByText(translationEN.versions['current-tags'])).toBeTruthy();
 
     // pick some versions
     expect(getByText('2.3.0')).toBeTruthy();
@@ -48,8 +49,8 @@ describe('<Version /> component', () => {
       <ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />
     );
 
-    expect(queryByText(LABEL_VERSION_HISTORY)).toBeFalsy();
-    expect(queryByText(LABEL_CURRENT_TAGS)).toBeFalsy();
+    expect(queryByText(translationEN.versions['version-history'])).toBeFalsy();
+    expect(queryByText(translationEN.versions['current-tags'])).toBeFalsy();
   });
 
   test.todo('should click on version link');

src/components/Versions/Versions.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { DetailContext } from '../../pages/Version';
 import { DIST_TAGS } from '../../../lib/constants';
@@ -6,13 +7,9 @@ import { DIST_TAGS } from '../../../lib/constants';
 import { StyledText } from './styles';
 import VersionsTagList from './VersionsTagList';
 import VersionsHistoryList from './VersionsHistoryList';
-
-export const NOT_AVAILABLE = 'Not available';
-export const LABEL_CURRENT_TAGS = 'Current Tags';
-export const LABEL_VERSION_HISTORY = 'Version History';
-
 const Versions: React.FC = () => {
   const detailContext = useContext(DetailContext);
+  const { t } = useTranslation();
 
   const { packageMeta, packageName } = detailContext;
 
@@ -26,13 +23,13 @@ const Versions: React.FC = () => {
     <>
       {distTags && Object.keys(distTags).length > 0 && (
         <>
-          <StyledText variant="subtitle1">{LABEL_CURRENT_TAGS}</StyledText>
+          <StyledText variant="subtitle1">{t('versions.current-tags')}</StyledText>
           <VersionsTagList tags={distTags} />
         </>
       )}
       {versions && Object.keys(versions).length > 0 && packageName && (
         <>
-          <StyledText variant="subtitle1">{LABEL_VERSION_HISTORY}</StyledText>
+          <StyledText variant="subtitle1">{t('versions.version-history')}</StyledText>
           <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
         </>
       )}

src/components/Versions/VersionsHistoryList.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Versions, Time } from '../../../types/packageMeta';
 import { formatDateDistance } from '../../utils/package';
@@ -7,28 +8,32 @@ import ListItem from '../../muiComponents/ListItem';
 
 import { Spacer, ListItemText, StyledLink } from './styles';
 
-export const NOT_AVAILABLE = 'Not available';
-
 interface Props {
   versions: Versions;
   packageName: string;
   time: Time;
 }
 
-const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => (
-  <List dense={true}>
-    {Object.keys(versions)
-      .reverse()
-      .map(version => (
-        <ListItem className="version-item" key={version}>
-          <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
-            <ListItemText>{version}</ListItemText>
-          </StyledLink>
-          <Spacer />
-          <ListItemText>{time[version] ? formatDateDistance(time[version]) : NOT_AVAILABLE}</ListItemText>
-        </ListItem>
-      ))}
-  </List>
-);
+const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
+  const { t } = useTranslation();
+
+  return (
+    <List dense={true}>
+      {Object.keys(versions)
+        .reverse()
+        .map(version => (
+          <ListItem className="version-item" key={version}>
+            <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
+              <ListItemText>{version}</ListItemText>
+            </StyledLink>
+            <Spacer />
+            <ListItemText>
+              {time[version] ? formatDateDistance(time[version]) : t('versions.not-available')}
+            </ListItemText>
+          </ListItem>
+        ))}
+    </List>
+  );
+};
 
 export default VersionsHistoryList;