1  import React from 'react';
 2  import classnames from 'classnames';
 3  import { connect } from 'react-redux';
 4  
 5  import { languages } from 'config';
 6  import { AppState } from 'features/reducers';
 7  import { getLanguageSelection, TChangeLanguage, changeLanguage } from 'features/config';
 8  import './LanguageSelect.scss';
 9  
10  interface OwnProps {
11    closePanel(): void;
12  }
13  
14  interface StateProps {
15    languageSelection: string;
16  }
17  
18  interface DispatchProps {
19    changeLanguage: TChangeLanguage;
20  }
21  
22  type Props = OwnProps & StateProps & DispatchProps;
23  
24  class LanguageSelect extends React.Component<Props> {
25    public render() {
26      const { languageSelection } = this.props;
27      return (
28        <div className="LanguageSelect">
29          {Object.entries(languages).map(lang => (
30            <button
31              key={lang[0]}
32              className={classnames({
33                'LanguageSelect-language': true,
34                'is-selected': languageSelection === lang[0]
35              })}
36              onClick={() => this.handleLanguageSelect(lang[0])}
37            >
38              {lang[1]}
39            </button>
40          ))}
41        </div>
42      );
43    }
44  
45    private handleLanguageSelect = (lang: string) => {
46      this.props.changeLanguage(lang);
47      this.props.closePanel();
48    };
49  }
50  
51  export default connect(
52    (state: AppState): StateProps => ({
53      languageSelection: getLanguageSelection(state)
54    }),
55    {
56      changeLanguage
57    }
58  )(LanguageSelect);