DisplayPage.tsx

import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
// Actions
import {loadSubset} from 'subsets/actions/public';
import {unpublishSubset} from 'subsets/actions/editor';
import navigateTo from 'actions/navigation';
// Models
import Subset from 'model/subset/Subset';
import {PublishState} from 'model/common.model';
// UI
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import Loading from 'ui/common/Loading';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import ActionButton from 'ui/common/buttons/ActionButton';
import SubsetDisplay from './c/SubsetDisplay';

interface IBrowsePageProps extends React.ClassAttributes<any> {
  uuid: string;
  subset: Subset;
  userRole: string[];
  error: any;
  loadSubset: any;
  navigateTo: any;
  unpublishSubset: (subset: Subset) => void;
}

class BrowsePage extends React.Component<IBrowsePageProps, any> {

  protected static needs = [
    ({ params: { uuid } }) => {
      return uuid ? loadSubset(uuid) : null;
    },
  ];

  private onUnpublish = () => {
    const {unpublishSubset, subset, navigateTo} = this.props;
    if (subset) {
      unpublishSubset(subset);
      navigateTo('/dashboard/subsets');
    }
  }

  constructor(props: IBrowsePageProps, context: any) {
      super(props, context);
  }

  public componentWillMount() {
    const { subset, uuid, loadSubset } = this.props;
    if (uuid && (! subset || uuid !== subset.uuid)) {
      loadSubset(uuid);
    }
  }

  public render() {
    const { error, subset, uuid, userRole } = this.props;
    const stillLoading: boolean = ! error && (! subset || (uuid && subset && subset.uuid !== uuid));
    const isActionsActive: boolean = userRole.findIndex((role) => role === 'ROLE_ADMINISTRATOR') !== -1 || (subset && subset.state === PublishState.REVIEWING);

    return (
      <PageLayout>

        <ContentHeaderWithButton title={ `Subset ${subset && subset.title}` } buttons={ isActionsActive ? <ActionButton action={ this.onUnpublish } title="Reject"/> : '' } />

        <PageContents>
          { stillLoading ? <Loading /> :
            <div>
              { error && <div>{ JSON.stringify(error) }</div> }
              { subset && <SubsetDisplay isActionsActive={ isActionsActive } subset={ subset }/> }
            </div>
          }
        </PageContents>
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  subset: state.subsets.public.subset,
  userRole: state.login.authorities,
  error: state.subsets.public.subsetError,
  uuid: ownProps.match.params.uuid,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  loadSubset,
  navigateTo,
  unpublishSubset,
}, dispatch);


export default connect(mapStateToProps, mapDispatchToProps)(BrowsePage);