loader.js

const Loader = prop => WrappedComponent =>
  class Loader extends React.PureComponent {
    render() {
      return (
        <div className="component-wrapper">
          {this.props[prop] &&
            <div className="earth-spinning">
              <img src={EarthSpinning} alt="spinner" style={{ margin: '0 auto' }} />
            </div>}
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  };
//   render() {
//     return this.props[prop]
//       ? <div className="earth-spinning">
//         <img src={EarthSpinning} alt="spinner" style={{ margin: '0 auto' }} />
//       </div>
//       : <WrappedComponent {...this.props} />;
//   }
// };

export default Loader;

logs.js

import React from 'react';
import { createStructuredSelector } from 'reselect';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import { connect } from 'react-redux';

import { showDialog } from 'containers/App/actions';
import { logRequest, logDelete, logsDelete } from './actions';
import { makeSelectDialog } from 'containers/App/selectors';
import { makeSelectLogs, makeSelectLoadingState } from './selectors';
import LogsDetail from './LogsDetail';
import DeleteConfirmation from 'components/DeleteConfirmation';

import { isEmpty } from 'utils/helper';
import Loader from 'components/Loader';
import './logs.css';

const mapDispatchToProps = dispatch => ({
  requestLogs: () => dispatch(logRequest()),
  deleteLog: logId => dispatch(logDelete(logId)),
  deleteLogs: () => dispatch(logsDelete()),
  showDialog: dialog => dispatch(showDialog(dialog)),
  hideDialog: () => dispatch(showDialog(null))
});

const mapStateToProps = createStructuredSelector({
  logs: makeSelectLogs(),
  isRequesting: makeSelectLoadingState(),
  dialog: makeSelectDialog()
});

class Logs extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      open: false,
      loading: true
    };
  }
  componentDidMount() {
    // this.props.requestLogs();
    this.props.requestLogs();
  }

  handleDialog(key, logs) {
    this.setState({ show: true });
    const logsDetail = <LogsDetail hideDialog={this.props.hideDialog} log={logs} />;
    this.props.showDialog(logsDetail);
  }

  handleDelete(key) {
    this.setState({ show: true });
    const logDeleteConfirmation = (
      <DeleteConfirmation
        hideDialog={this.props.hideDialog}
        deleteKey={key}
        onDelete={this.props.deleteLog}
      />
    );
    this.props.showDialog(logDeleteConfirmation);
  }

  handleDeleteAllLogs() {
    this.setState({ show: true });
    const logDeleteConfirmation = (
      <DeleteConfirmation hideDialog={this.props.hideDialog} onDelete={this.props.deleteLogs} />
    );
    this.props.showDialog(logDeleteConfirmation);
  }

  renderLogs() {
    const { logs } = this.props;
    return logs.size > 0
      ? logs.valueSeq().map(log => {
          return (
            <div className="card" key={log.get('_id')}>
              <li className="row">
                <div className="col-md-6">
                  <a onClick={() => this.handleDialog(log.get('_id'), log.get('error_stack'))}>
                    {log.get('error_message')}
                  </a>
                </div>
                <div className="col-md-6 text-right">
                  <a className="text-danger" onClick={() => this.handleDelete(log.get('_id'))}>
                    Delete
                  </a>
                </div>
              </li>
            </div>
          );
        })
      : <p>No Content</p>;
  }
  render() {
    const { logs, isRequesting } = this.props;
    const transitionOptions = {
      transitionName: 'fade',
      transitionEnterTimeout: 500,
      transitionLeaveTimeout: 500
    };
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-6">
            {' '}<h1>Logs</h1>
          </div>
          <div className="col-xs-6 text-right">
            {Boolean(logs.size) &&
              <button className="btn btn-danger" onClick={() => this.handleDeleteAllLogs()}>
                Delete All Logs
              </button>}
          </div>
        </div>
        <ul className="list-group">
          <ReactCSSTransitionGroup {...transitionOptions}>
            {this.renderLogs()}
          </ReactCSSTransitionGroup>
          {this.state.show ? this.props.dialog : null}
        </ul>
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Loader('isRequesting')(Logs));

reducer.js

const initialState = fromJS({
  requesting: false,
  deleted: false,
  response: {},
  logs: {},
  error: null
});

function showLogs(state = initialState, action) {
  switch (action.type) {
    case LOGS_FETCH_REQUEST:
    case LOG_DELETE_REQUEST:
    case LOGS_DELETE_REQUEST:
      return state.set("requesting", true);
    case LOGS_FETCH_SUCCESS:
      return state
        .set("requesting", false)
        .set("logs", fromJS(action.logs.data.dataList, idReviver));
    case LOGS_FETCH_FAILURE:
    case LOG_DELETE_FAILURE:
    case LOGS_DELETE_FAILURE:
      return state.set("error", action.error).set("requesting", false);
    case LOG_DELETE_SUCCESS:
      return state
        .set("deleted", true)
        .set("requesting", false)
        .set("response", fromJS(action.response))
        .deleteIn(["logs", action.logId[0]]);
    case LOGS_DELETE_SUCCESS:
      return state
        .set("deleted", true)
        .set("requesting", false)
        .set("response", fromJS(action.response))
        .set("logs", state.get("logs").clear());
    default:
      return state;
  }
}

export default showLogs;

selectors.js

import { createSelector } from 'reselect';

export const selectLogs = state => state.get('logs');

export const makeSelectLoadingState = () =>
  createSelector(selectLogs, logState => logState.get('requesting'));

export const makeSelectLogs = () => createSelector(selectLogs, logState => logState.get('logs'));