redux-saga-devtools/src/containers/SagaMonitorView/SagaMonitorView.js

Monitor and UI for redux-saga

import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux'
import { Row, Cell } from '../../components/Layout'
import EffectView from '../EffectView'
import ActionView from '../ActionView'
import {
  SagaMonitorContainer,
  SagaMonitorHeader,
  SagaMonitorOption,
  SagaMonitorBody
} from './styles'
import { ThemeProvider } from 'styled-components';

const EFFECT_VIEW = 'Effects'
const ACTION_VIEW = 'Actions'

const OPTION_WIDTH = 80
const OPTION_STYLE = { width: OPTION_WIDTH }

const lightTheme = {
  background: 'white',
  border: 'rgb(240, 240, 240)',
  fontColor: 'rgb(36, 36, 36)',
  effectType: 'rgb(28,0,207)',
  headerBackground: 'rgb(243, 243, 243)',
  headerHighlight: 'rgb(220, 220, 220)',
  footerBackground: 'rgb(243, 243, 243)',
  footerHighlight: 'rgb(220, 220, 220)',
  identifier: 'rgb(136,18,128)',
  selectedBreadcrumb: 'rgb(56, 121, 217)',
  selectedHeader: 'rgb(56, 121, 217)',
  unquoted: 'rgb(28, 0, 207)'

}

const darkTheme = {
  background: 'rgb(36, 36, 36)',
  border: 'rgb(105,105,105)',
  fontColor: 'white',
  effectType: 'rgb(154, 127, 213)',
  headerBackground: 'rgb(75,75,75)',
  headerHighlight: 'rgb(105,105,105)',
  footerBackground: 'rgb(75,75,75)',
  footerHighlight: 'rgb(105,105,105)',
  identifier: 'rgb(242, 151, 102)',
  selectedBreadcrumb: 'rgb(242, 151, 102)',
  selectedHeader: 'rgb(242, 151, 102)',
  unquoted: 'rgb(189, 198, 207)'
}

class SagaMonitorView extends React.Component {

  state = {
    currentView: EFFECT_VIEW,
    currentViewIndex: 0
  }

  viewHandlers = {
    [EFFECT_VIEW]: () => this.setState({ currentView: EFFECT_VIEW, currentViewIndex: 0 }),
    [ACTION_VIEW]: () => this.setState({ currentView: ACTION_VIEW, currentViewIndex: 1 })
  }

  renderCurrentView() {
    switch (this.state.currentView) {
      case EFFECT_VIEW:
        return <EffectView rootEffectIds={this.props.rootEffectIds} />
      case ACTION_VIEW:
        return <ActionView />
      default:
        return 'Unknown View!'
    }
  }

  renderViewOption(view) {
    return (
      <Cell>
        <SagaMonitorOption
          style={OPTION_STYLE}
          onMouseDown={this.viewHandlers[view]}
        >
          {view}
        </SagaMonitorOption>
      </Cell>
    )
  }

  render() {
    return (
      <ThemeProvider theme={this.props.darkTheme ? darkTheme : lightTheme}>
        <SagaMonitorContainer>
          <SagaMonitorHeader>
            <Row>
              {this.renderViewOption(EFFECT_VIEW)}
              {this.renderViewOption(ACTION_VIEW)}
              <hr style={{ width: OPTION_WIDTH, left: OPTION_WIDTH * this.state.currentViewIndex }} />
            </Row>
          </SagaMonitorHeader>
          <SagaMonitorBody>
            {this.renderCurrentView()}
          </SagaMonitorBody>
        </SagaMonitorContainer>
      </ThemeProvider>
    );
  }
}

SagaMonitorView.propTypes = {
  rootEffectIds: PropTypes.array.isRequired,
  darkTheme: PropTypes.boolean
}

export default connect(
  (state, ownProps) => ({
    darkTheme: ownProps.darkTheme,
    rootEffectIds: state.rootEffectIds
  })
)(SagaMonitorView)