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

Monitor and UI for redux-saga

import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components'
import { connect } from 'react-redux'
import { isParentOf } from '../../store/selectors'
import EffectList from '../EffectList'
import EffectPath from './EffectPath'

const EffectViewContainer = styled.div`
  display: flex;
  flex-direction: column;
  flex: auto;
`

const EffectViewBody = styled.section`
  display: flex;
  flex-direction: column;
  flex: auto;
  overflow: auto;
`

const EffectViewFooter = styled.section`
  background-color: ${props => props.theme.headerBackground}
  border-top: 1px solid ${props => props.theme.border};
  flex: none;
`

class EffectView extends React.Component {

  state = { selectedEffectId: -1, pinnedEffectId: -1 }

  handleSelectionChange = effectId => {
    const pinnedEffectId = this.state.pinnedEffectId
    if (
      pinnedEffectId >= 0 &&
      isParentOf(this.props.effectsById, effectId, pinnedEffectId)
    ) {
      this.setState({
        selectedEffectId: effectId,
        pinnedEffectId: effectId
      })
    } else {
      this.setState({
        selectedEffectId: effectId
      })
    }

  }

  handlePin = effectId => {
    this.setState({
      pinnedEffectId: effectId
    })
  }

  handleUnpin = () => {
    this.setState({
      pinnedEffectId: -1
    })
  }


  render() {
    const rootEffectIds = this.props.rootEffectIds
    const selectedEffectId = this.state.selectedEffectId
    const pinnedEffectId = this.state.pinnedEffectId

    return (
      <EffectViewContainer>
        <EffectViewBody>
          <EffectList
            rootEffectIds={rootEffectIds}
            selectedEffectId={selectedEffectId}
            onSelectionChange={this.handleSelectionChange}
            pinnedEffectId={pinnedEffectId}
            onPin={this.handlePin}
            onUnpin={this.handleUnpin}
          />
        </EffectViewBody>
        <EffectViewFooter>
          <EffectPath
            rootEffectIds={rootEffectIds}
            selectedEffectId={selectedEffectId}
            onSelectionChange={this.handleSelectionChange}
          />
        </EffectViewFooter>
      </EffectViewContainer>
    )
  }
}

EffectView.propTypes = {
  rootEffectIds: PropTypes.array.isRequired,
  // Inject by Redux
  effectsById: PropTypes.object.isRequired
}

export default connect(
  state => {
    return { effectsById: state.effectsById }
  }
)(EffectView)