{"size": 2240, "ext": "js", "max_stars_repo_path": "src/pages/ProfessionPage/ProfessionPage.js", "max_stars_repo_name": "nurruty/gnome-book", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/ProfessionPage/ProfessionPage.js", "max_issues_repo_name": "nurruty/gnome-book", "max_issues_repo_issues_event_min_datetime": "2021-04-09T10:28:48.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-15T20:10:46.000Z", "max_forks_repo_path": "src/pages/ProfessionPage/ProfessionPage.js", "max_forks_repo_name": "nurruty/gnome-book", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 26.0465116279, "max_line_length": 72, "alphanum_fraction": 0.609375}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Meta from 'react-helmet';
import _ from 'lodash';
import { fetchProfessionsIfNeeded } from '../../actions/professions';
import GnomesList from '../../components/GnomesList/GnomesList';
import Loading from '../../components/Loading/Loading';


if (process.env.WEBPACK) {
  require('./ProfessionPage.css'); // eslint-disable-line global-require
}

export class ProfessionPage extends Component {
  static getMeta() {
    return {
      title: 'GnomeBook',
      link: [
        {
          rel: 'canonical',
          href: 'http://localhost:3000'
        }
      ],
      meta: [
        {
          charset: 'utf-8'
        },
        {
          name: 'description', content: ''
        }
      ]
    };
  }
  static getProfessionals(props) {
    const professionName = props.params.professionName || '';
    return props.professions[professionName] || [];
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchProfessionsIfNeeded());
  }

  render() {
    const gnomes = ProfessionPage.getProfessionals(this.props);
    const { professions, isFetching } = this.props;
    const isEmpty = _.isEmpty(professions);
    const head = ProfessionPage.getMeta();
    return (
      <div data-test="ProfessionPage">
        <Meta
          title={head.title}
          description={head.description}
          link={head.link}
          meta={head.meta}
        />
        <h3>{this.props.params.professionName}'s in town</h3>
        {isEmpty
          ? <div style={{ paddingTop: '25%' }}><Loading /></div>
          : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
            <GnomesList gnomes={gnomes} />
          </div>
        }
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  const { professions = {}, isFetching = false, lastUpdated } = state;
  return {
    professions,
    isFetching,
    lastUpdated
  };
};

ProfessionPage.propTypes = {
  isFetching: PropTypes.bool.isRequired,
  dispatch: PropTypes.func.isRequired,
  professions: PropTypes.object.isRequired,
  params: PropTypes.object.isRequired
}

export default connect(mapStateToProps)(ProfessionPage);
