Use a selector to return a languages object with locale, label, and current...

Use a selector to return a languages object with locale, label, and current properties (based on the config in state) to be used by the LanguageSettings component.

__tests__/src/components/LanguageSettings.test.js

@@ -8,7 +8,6 @@ import LanguageSettings from '../../../src/components/LanguageSettings';
 function createWrapper(props) {
   return shallow(
     <LanguageSettings
-      active={lang => lang === 'de'}
       handleClick={() => {}}
       languages={{}}
       {...props}
@@ -18,10 +17,10 @@ function createWrapper(props) {
 
 describe('LanguageSettings', () => {
   let wrapper;
-  const languages = {
-    de: 'Deutsch',
-    en: 'English',
-  };
+  const languages = [
+    { locale: 'de', label: 'Deutsch', current: true },
+    { locale: 'en', label: 'English', current: false },
+  ];
 
 
   it('renders a list with a list item for each language passed in props', () => {
@@ -82,11 +81,4 @@ describe('LanguageSettings', () => {
     expect(mockHandleClick).toHaveBeenCalledTimes(1);
     expect(mockHandleClick).toHaveBeenCalledWith('en');
   });
-
-  it('passes the language prop to the active prop function to determine if the given language is active', () => {
-    const mockActiveFn = jest.fn();
-    wrapper = createWrapper({ active: mockActiveFn, languages: { en: 'English' } });
-
-    expect(mockActiveFn).toHaveBeenCalledWith('en');
-  });
 });

__tests__/src/selectors/index.test.js

@@ -7,6 +7,7 @@ import {
   getCanvasLabel,
   getCompanionWindowForPosition,
   getDestructuredMetadata,
+  getLanguagesFromConfigWithCurrent,
   getSelectedCanvas,
   getWindowManifest,
   getManifestLogo,
@@ -347,3 +348,18 @@ describe('getCompanionWindowForPosition', () => {
     expect(received).toBeUndefined();
   });
 });
+
+describe('getLanguagesFromConfigWithCurrent', () => {
+  it('returns an array of objects with locale, label, and current properties', () => {
+    const state = {
+      config: { language: 'epo', availableLanguages: { epo: 'Esparanto', tlh: 'Klingon' } },
+    };
+
+    const expected = [
+      { locale: 'epo', label: 'Esparanto', current: true },
+      { locale: 'tlh', label: 'Klingon', current: false },
+    ];
+
+    expect(getLanguagesFromConfigWithCurrent(state)).toEqual(expected);
+  });
+});

src/components/LanguageSettings.js

@@ -17,25 +17,25 @@ export default class LanguageSettings extends Component {
   */
   render() {
     const {
-      handleClick, languages, active,
+      handleClick, languages,
     } = this.props;
 
     return (
       <List>
         {
-          Object.keys(languages).map(language => (
+          languages.map(language => (
             <MenuItem
-              button={!(active(language))}
-              key={language}
-              onClick={() => { handleClick(language); }}
+              button={!language.current}
+              key={language.locale}
+              onClick={() => { handleClick(language.locale); }}
             >
               {
-                active(language)
+                language.current
                   && <ListItemIcon><CheckIcon /></ListItemIcon>
               }
               <ListItemText inset>
                 <Typography variant="inherit">
-                  {languages[language]}
+                  {language.label}
                 </Typography>
               </ListItemText>
             </MenuItem>
@@ -47,7 +47,12 @@ export default class LanguageSettings extends Component {
 }
 
 LanguageSettings.propTypes = {
-  active: PropTypes.func.isRequired,
   handleClick: PropTypes.func.isRequired,
-  languages: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  languages: PropTypes.arrayOf(
+    PropTypes.shape({
+      current: PropTypes.bool.isRequired,
+      label: PropTypes.string.isRequired,
+      locale: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
 };

src/containers/LanguageSettings.js

 import { connect } from 'react-redux';
 import * as actions from '../state/actions';
+import { getLanguagesFromConfigWithCurrent } from '../state/selectors';
 import LanguageSettings from '../components/LanguageSettings';
 
 /**
  * Map state to props for connect
  */
 const mapStateToProps = state => ({
-  languages: state.config.availableLanguages,
-  currentLanguage: state.config.language,
-  active: language => language === state.config.language,
+  languages: getLanguagesFromConfigWithCurrent(state),
 });
 
 /**

src/state/selectors/index.js

@@ -201,3 +201,18 @@ export function getCompanionWindowForPosition(state, windowId, position) {
 export function getCompantionWindowIds(state, windowId) {
   return state.windows[windowId].companionWindowIds;
 }
+
+/**
+* Return languages from config (in state) and indicate which is currently set
+* @param {object} state
+* @return {Array} [ {locale: 'de', label: 'Deutsch', current: true}, ... ]
+*/
+export function getLanguagesFromConfigWithCurrent(state) {
+  const { availableLanguages, language } = state.config;
+
+  return Object.keys(availableLanguages).map(key => ({
+    locale: key,
+    label: availableLanguages[key],
+    current: key === language,
+  }));
+}