Wrap all text in i18next functions (#1087)

* Wrapped most hard-coded text * Removed unecessary comments * Wrapped presets and modified keys in language translations * Added agpl disclaimer and removed key from language translations * Modified version hook and keys * Removed added keys from all language files except en.json * Fixed the version translation * Put version into helper t function * Updated the snapshot test * Enable internationalization in settings tests Co-authored-by: odiaz95012 <odiaz95012@gmail.com> Co-authored-by: Ramy Meng <ramym@uci.edu> Co-authored-by: ramyyy <88201031+ramy-meng@users.noreply.github.com> Co-authored-by: nukeop <nukeop@gumblert.tech>
nukeop · Nov 18, 2021 · 86a66ab · 86a66ab
1 parent 4328734
commit 86a66ab
Show file tree

Hide file tree

Showing 49 changed files with 173 additions and 155 deletions.
diff --git a/packages/app/app/App.js b/packages/app/app/App.js
@@ -4,12 +4,12 @@ import { Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { NavLink, withRouter } from 'react-router-dom';
+
 import classnames from 'classnames';
 import _ from 'lodash';
 import Sound from 'react-hifi';
 import { withTranslation } from 'react-i18next';
 import { PluginConfig } from '@nuclear/core';
-
 import * as SearchActions from './actions/search';
 import * as PlayerActions from './actions/player';
 import * as PlaylistsActions from './actions/playlists';
@@ -157,7 +157,7 @@ class App extends React.PureComponent {
               src={this.props.settings.compactMenuBar ? logoIcon : logoImg}
             />
             <div className={styles.version_string}>
-              {this.props.settings.compactMenuBar ? '0.6.17' : 'Version 0.6.17'}
+              {this.props.settings.compactMenuBar ? '0.6.17' : this.props.t('version') + ' 0.6.17'}
             </div>
           </div>
           <div className={styles.sidebar_menus}>

diff --git a/packages/app/app/components/Downloads/DownloadsHeader/index.js b/packages/app/app/components/Downloads/DownloadsHeader/index.js
@@ -19,7 +19,8 @@ const DownloadsHeader = ({
 }) => (
   <Segment className={styles.downloads_header}>
     <span className={styles.label}>
-      Saving in:
+      {/* change */}
+      {t('saving-in')}
       <span className={styles.directory}>
         { _.isEmpty(directory) ? remote.app.getPath('downloads') : directory}
       </span>

diff --git a/packages/app/app/components/EqualizerPresetList/index.js b/packages/app/app/components/EqualizerPresetList/index.js
@@ -2,35 +2,38 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { List, Icon } from 'semantic-ui-react';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 
-const EqualizerPresetList = ({ presets, onClickItem, selected }) => (
-  <div className={styles.preset_list_container}>
-    <h3>Presets</h3>
-    <List divided verticalAlign='middle' className={styles.equalizer_list}>
-      {presets.map((preset, index) => (
-        <List.Item
-          key={index}
-          onClick={() => preset !== selected && onClickItem(preset.id)}
-          className={
-            classNames(
-              styles.equalizer_item,
-              {
-                [styles.equalizer_click_item]: preset.id !== selected
-              })
-          }
-        >
-          <List.Content floated='right'>
-            {preset.id === selected && <Icon name='check' />}
-          </List.Content>
-          <List.Content>{preset.label}</List.Content>
-        </List.Item>
-      ))}
-    </List>
-  </div>
-);
-
+const EqualizerPresetList = ({ presets, onClickItem, selected }) => {
+  const { t } = useTranslation('equalizer');
+  return (
+    <div className={styles.preset_list_container}>
+      <h3>{t('presets')}</h3>
+      <List divided verticalAlign='middle' className={styles.equalizer_list}>
+        {presets.map((preset, index) => (
+          <List.Item
+            key={index}
+            onClick={() => preset !== selected && onClickItem(preset.id)}
+            className={
+              classNames(
+                styles.equalizer_item,
+                {
+                  [styles.equalizer_click_item]: preset.id !== selected
+                })
+            }
+          >
+            <List.Content floated='right'>
+              {preset.id === selected && <Icon name='check' />}
+            </List.Content>
+            <List.Content>{t(preset.label)}</List.Content>
+          </List.Item>
+        ))}
+      </List>
+    </div>
+  );
+};
 EqualizerPresetList.propTypes = {
   presets: PropTypes.array.isRequired,
   onClickItem: PropTypes.func,

diff --git a/packages/app/app/components/HelpModal/index.tsx b/packages/app/app/components/HelpModal/index.tsx
@@ -111,7 +111,7 @@ const HelpModal: React.FC<HelpModalProps> = ({
       <Modal.Content>
         <div className={styles.contributors}>
           <Header className={styles.contributors_header}>
-            Our top 10 Contributors
+            {t('contributors')}
           </Header>
           <Contributors
             {...githubContrib}

diff --git a/packages/app/app/components/SearchResults/index.js b/packages/app/app/components/SearchResults/index.js
@@ -111,39 +111,39 @@ class SearchResults extends React.Component {
 
     const panes = [
       {
-        menuItem: 'All',
+        menuItem: this.props.t('all'),
         render: () => this.renderAllResultsPane()
       },
       artistsHasResults && {
-        menuItem: 'Artists',
+        menuItem: this.props.t('artist_plural'),
         render: () =>
           this.renderPane(
             this.props.artistSearchResults,
             this.artistInfoSearch.bind(this)
           )
       },
       albumsHasResults && {
-        menuItem: 'Albums',
+        menuItem: this.props.t('album_plural'),
         render: () =>
           this.renderPane(
             this.props.albumSearchResults,
             this.albumInfoSearch.bind(this)
           )
       },
       tracksHasResults && {
-        menuItem: 'Tracks',
+        menuItem: this.props.t('track_plural'),
         render: () => this.renderTrackListPane(this.props.trackSearchResults.info)
       },
       playlistsHasResults && {
-        menuItem: 'Playlist',
+        menuItem: this.props.t('playlist'),
         render: () => this.renderPlaylistPane()
       },
       liveStreamsHasResults && {
-        menuItem: 'LiveStream',
+        menuItem: this.props.t('live-stream'),
         render: () => this.renderTrackListPane(this.props.liveStreamSearchResults.info)
       },
       podcastsHasResults && {
-        menuItem: 'Podcast',
+        menuItem: this.props.t('podcast'),
         render: () =>
           this.renderPane(
             this.props.podcastSearchResults,

diff --git a/packages/app/app/components/Settings/index.tsx b/packages/app/app/components/Settings/index.tsx
@@ -138,7 +138,7 @@ const Settings: React.FC<SettingsProps> = ({
 
   const renderSliderOption = (option) => (
     <div className={styles.slider_container}>
-      <label>Less</label>
+      <label>{t('less')}</label>
       <Range
         value={getOptionValue(option) || option.default}
         min={option.min}
@@ -150,7 +150,7 @@ const Settings: React.FC<SettingsProps> = ({
         width='auto'
         onChange={(e) => handleSliderChange(e, option)}
         thumbSize={21} />
-      <label>More</label>
+      <label>{t('more')}</label>
     </div>
   );
 

diff --git a/packages/app/app/containers/EqualizerViewContainer/index.js b/packages/app/app/containers/EqualizerViewContainer/index.js
@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import * as EqualizerActions from '../../actions/equalizer';
 import Equalizer from '../../components/Equalizer';
 import EqualizerPresetList from '../../components/EqualizerPresetList';
+import { useTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 
@@ -22,9 +23,10 @@ const EqualizerViewContainer = () => {
   const dispatch = useDispatch();
   const actions = useMemo(() => bindActionCreators(EqualizerActions, dispatch), [dispatch]);
   const presets = usePresets();
+  const { t } = useTranslation('app');
   return (
     <div className={styles.equalizer_view}>
-      <h1>Equalizer</h1>
+      <h1>{t('equalizer')}</h1>
       <div className={styles.equalizer_components}>
         <Equalizer
           values={preset.values}

diff --git a/packages/app/app/containers/SettingsContainer/SettingsContainer.test.tsx b/packages/app/app/containers/SettingsContainer/SettingsContainer.test.tsx
@@ -1,7 +1,10 @@
 import { buildStoreState } from '../../../test/storeBuilders';
-import { mountedComponentFactory } from '../../../test/testUtils';
+import { mountedComponentFactory, setupI18Next } from '../../../test/testUtils';
 
 describe('Settings view container', () => {
+  beforeAll(() => {
+    setupI18Next();
+  });
   it('should render settings', () => {
     const { component } = mountComponent();
     expect(component.asFragment()).toMatchSnapshot();