content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { Alert, Spinner } from 'patternfly-react';
  import { translate as __ } from 'foremanReact/common/I18n';
  
  import loadRepositorySetRepos from '../../../redux/actions/RedHatRepositories/repositorySetRepositories';
  import RepositorySetRepository from './RepositorySetRepository/';
  import { yStream } from './RepositorySetRepositoriesHelpers';
  
  export class RepositorySetRepositories extends Component {
    componentDidMount() {
      const { contentId, productId } = this.props;
  
      if (this.props.data.loading) {
        this.props.loadRepositorySetRepos(contentId, productId);
      }
    }
  
    sortedRepos = repos => [...repos.filter(({ enabled }) => !enabled)]
      .sort((repo1, repo2) => {
        const repo1YStream = yStream(repo1.releasever || '');
        const repo2YStream = yStream(repo2.releasever || '');
  
        if (repo1YStream < repo2YStream) {
          return -1;
        }
  
        if (repo2YStream < repo1YStream) {
          return 1;
        }
  
        if (repo1.arch === repo2.arch) {
          const repo1MajorMinor = repo1.releasever.split('.');
          const repo2MajorMinor = repo2.releasever.split('.');
  
          const repo1Major = parseInt(repo1MajorMinor[0], 10);
          const repo2Major = parseInt(repo2MajorMinor[0], 10);
  
          if (repo1Major === repo2Major) {
            const repo1Minor = parseInt(repo1MajorMinor[1], 10);
            const repo2Minor = parseInt(repo2MajorMinor[1], 10);
  
            if (repo1Minor === repo2Minor) {
              return 0;
            } return (repo1Minor > repo2Minor) ? -1 : 1;
          } return (repo1Major > repo2Major) ? -1 : 1;
        } return (repo1.arch > repo2.arch) ? -1 : 1;
      });
  
    render() {
      const { data, type } = this.props;
  
      if (data.error) {
        return (
          <Alert type="danger">
            <span>{data.error.displayMessage}</span>
          </Alert>
        );
      }
  
      const availableRepos = this.sortedRepos(data.repositories).map(repo => (
        <RepositorySetRepository key={repo.arch + repo.releasever} type={type} {...repo} />
      ));
  
      const repoMessage = (data.repositories.length > 0 && availableRepos.length === 0 ?
        __('All available architectures for this repo are enabled.') : __('No repositories available.'));
  
      return (
        <Spinner loading={data.loading}>
          {availableRepos.length ? availableRepos : <div>{repoMessage}</div>}
        </Spinner>
      );
    }
  }
  
  RepositorySetRepositories.propTypes = {
    loadRepositorySetRepos: PropTypes.func.isRequired,
    contentId: PropTypes.number.isRequired,
    productId: PropTypes.number.isRequired,
    type: PropTypes.string,
    data: PropTypes.shape({
      loading: PropTypes.bool.isRequired,
      repositories: PropTypes.arrayOf(PropTypes.object),
      error: PropTypes.shape({
        displayMessage: PropTypes.string,
      }),
    }).isRequired,
  };
  
  RepositorySetRepositories.defaultProps = {
    type: '',
  };
  
  const mapStateToProps = (
    { katello: { redHatRepositories: { repositorySetRepositories } } },
    props,
  ) => ({
    data: repositorySetRepositories[props.contentId] || {
      loading: true,
      repositories: [],
      error: null,
    },
  });
  
  export default connect(mapStateToProps, {
    loadRepositorySetRepos,
  })(RepositorySetRepositories);
  