import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as translationsActions from '../../../redux/ducks/translations';

class TranslationsManager extends React.Component {
  render() {
    return (
      <p>Manage your project translations here.</p>
    );
  }
}

const mapStateToProps = state => ({
  translations: state.translations
});

const mapDispatchToProps = dispatch => ({
  actions: {
    translations: bindActionCreators(translationsActions, dispatch)
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(TranslationsManager);
export { TranslationsManager };

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router';
import * as translationsActions from '../../../redux/ducks/translations';

class TranslationsManager extends React.Component {
  componentDidMount() {
    const { translations } = this.props.actions;
    translations.listLanguages('project', this.props.project.id);
  }

  render() {
    const { languages } = this.props.translations;
    const { project } = this.props;
    return (
      <div>
        <p>Manage your project translations here.</p>
        <ul>
          {languages.project && languages.project.map(languageCode => (
            <li key={languageCode}>
              <Link to={`/projects/${project.slug}?language=${languageCode}`}>{languageCode}</Link>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  translations: state.translations
});

const mapDispatchToProps = dispatch => ({
  actions: {
    translations: bindActionCreators(translationsActions, dispatch)
  }
});

TranslationsManager.propTypes = {
  actions: PropTypes.shape({
    translations: PropTypes.shape({
      listLanguages: PropTypes.func
    })
  }).isRequired,
  translations: PropTypes.shape({
    languages: PropTypes.shape({
      project: PropTypes.arrayOf(PropTypes.string)
    })
  }),
  project: PropTypes.shape({
    id: PropTypes.string
  }).isRequired
};

TranslationsManager.defaultProps = {
  translations: {
    languages: {
      project: []
    }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(TranslationsManager);
export { TranslationsManager };

Add a basic list of languages for the project List the available project language codes, each linked to the project in that language.
Add a basic list of languages for the project
List the available project language codes, each linked to the project in that language.
