unleash.unleash/frontend/src/component/strategies/strategy-details-component.jsx

import React, { PropTypes, Component } from 'react';
import { hashHistory } from 'react-router';
import { Tabs, Tab, ProgressBar } from 'react-mdl';
import ShowStrategy from './show-strategy-component';
import EditStrategy from './edit-container';
import { HeaderTitle } from '../common';

const TABS = {
    view: 0,
    edit: 1,
};

export default class StrategyDetails extends Component {
    static propTypes () {
        return {
            activeTab: PropTypes.string.isRequired,
            strategy: PropTypes.object.isRequired,
            fetchStrategies: PropTypes.func.isRequired,
            fetchApplications: PropTypes.func.isRequired,
            fetchFeatureToggles: PropTypes.func.isRequired,
        };
    }

    componentDidMount () {
        if (!this.props.strategy) {
            this.props.fetchStrategies();
        };
        if (!this.props.applications || this.props.applications.length === 0) {
            this.props.fetchApplications();
        }
        if (!this.props.toggles || this.props.toggles.length === 0) {
            this.props.fetchFeatureToggles();
        }
    }

    getTabContent (activeTabId) {
        if (activeTabId === TABS.edit) {
            return <EditStrategy strategy={this.props.strategy} />;
        } else {
            return (<ShowStrategy
                strategy={this.props.strategy}
                toggles={this.props.toggles}
                applications={this.props.applications} />);
        }
    }

    goToTab (tabName) {
        hashHistory.push(`/strategies/${tabName}/${this.props.strategyName}`);
    }

    render () {
        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.view;
        const strategy = this.props.strategy;
        if (!strategy) {
            return <ProgressBar indeterminate />;
        }

        const tabContent = this.getTabContent(activeTabId);

        return (
            <div>
                <HeaderTitle title={strategy.name} subtitle={strategy.description} />
                <Tabs activeTab={activeTabId} ripple>
                    <Tab onClick={() => this.goToTab('view')}>Details</Tab>
                    <Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
                </Tabs>
                <section>
                    <div className="content">
                        {tabContent}
                    </div>
                </section>
            </div>
        );
    }
}