sample code from botsplash.com

sample-code.js

import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { routeActions } from 'react-router-redux';
import DocumentTitle from 'react-document-title';

import { Page, PageHeader } from 'cf-component-page';
import { Button } from 'cf-component-button';
import { CardMessages } from 'cf-component-card';

import ConfirmationDialog from '../../components/ui/ConfirmationDialog';
import * as UrlPaths from '../../constants/UrlPaths';
import {
  update as updateWebhook,
  publish as publishWebhook,
  unpublish as unpublishWebhook,
  updateFacebookSettings
} from '../../reducers/webhookReducer';
import { notificationAddSuccess } from '../../reducers/notificationsReducer';
import WebhookStatus from '../../constants/WebhookStatus';

import PublishFacebook from '../../forms/publish/PublishFacebook';
import PublishAPI from '../../forms/publish/PublishAPI';
import PublishSlack from '../../forms/publish/PublishSlack';

class BotPublishPage extends Component {
  constructor() {
    super();

    this.state = {
      isConfirmModalOpen: false
    };

    this.handleUnpublishClick = this.handleUnpublishClick.bind(this);
  }

  handlePublishClick = event => {
    event.preventDefault();

    const { webhook: { internalName, name }, actions } = this.props;
    const title = UrlPaths.botTitle(name);
    actions
      .publishWebhook(internalName)
      .then(() => {
        actions.notificationAddSuccess(`${title} published successfully.`);
        actions.pushState(
          UrlPaths.BOT_OVERVIEW_PAGE.replace(/:botname/g, internalName)
        );
      });
  };

  handleRequestUnpublish = (event) => {
    event.preventDefault();
    this.setState({ isConfirmModalOpen: true });
  }

  handleUnpublishClick = confirmation => {
    this.setState({ isConfirmModalOpen: false });
    if (!confirmation) {
      return;
    }
    const { webhook: { internalName, name }, actions } = this.props;
    const title = UrlPaths.botTitle(name);
    actions
      .unpublishWebhook(internalName)
      .then(() => {
        actions.notificationAddSuccess(`${title} unpublished successfully.`);
        actions.pushState(
          UrlPaths.BOT_OVERVIEW_PAGE.replace(/:botname/g, internalName)
        );
      });
  };

  render() {
    const { webhook, error } = this.props;
    if (!webhook) {
      return <div />;
    }

    const messages = [];
    if (error) { messages.push({ type: 'error', content: error }); }

    const title = UrlPaths.botTitle(webhook.name);

    return (
      <div className="container">
        <DocumentTitle title="Publish" />
        <Page>
          <PageHeader
            title="Publish"
            subtitle={`${title} publishing to Facebook, Slack and API Servcies`}
          />
          <div className="page-content">
            {(messages.length > 0) && <CardMessages messages={messages} />}

            <PublishFacebook {...this.props} />
            <PublishAPI {...this.props} />
            <PublishSlack {...this.props} />

            {(messages.length > 0) && <CardMessages messages={messages} />}
            <div className="pull-right">
              {webhook.status !== WebhookStatus.Active &&
                <Button type="success" onClick={this.handlePublishClick}>Publish {title}</Button>}
              {webhook.status === WebhookStatus.Active &&
                <Button type="default" onClick={this.handleRequestUnpublish}>Unpublish {title}</Button>}
            </div>
          </div>
          <ConfirmationDialog
            title="Unpublish"
            isModalOpen={this.state.isConfirmModalOpen}
            onConfirm={(confirmation) => this.handleUnpublishClick(confirmation)}
            isCancel
          >
            <div>
              <p>Are you sure to unpublish the bot?</p>
              <p>Unpublishing the bot will no longer respond to visitor inquires.</p>
            </div>
          </ConfirmationDialog>
        </Page>
      </div>
    );
  }
}

BotPublishPage.propTypes = {
  webhook:  PropTypes.object.isRequired,
  error:    PropTypes.string,
  actions:  PropTypes.object.isRequired,
  isNew:    PropTypes.bool.isRequired
};


function mapStateToProps(state, ownProps) {
  return {
    webhook:  state.webhooks.data.find(w => w.internalName === ownProps.params.botname),
    error:    state.webhooks.updateError,
    isNew:    false
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
      updateWebhook,
      publishWebhook,
      unpublishWebhook,
      updateFacebookSettings,
      notificationAddSuccess,
      pushState: routeActions.push
    }, dispatch)
  };
}

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