index.tsx

import * as React from 'react'
import { Connect, connect } from '../../app'
import { Wrapper, Container, ExpandAll } from './elements'
import Operator from '../ActionOperator'
import Flush from '../ActionFlush'
import { getActionId, getOperatorId } from '../../app/utils'

const ignoreOperatorValues = ['when', 'try', 'fork', 'compose', 'parallel']

const Action: React.SFC<Connect> = ({ app }) => {
  const flushReference =
    app.state.currentApp.flushByActionId[getActionId(app.state.currentAction)]
  const flush =
    flushReference && app.state.currentApp.flushes[flushReference.flushId]

  return (
    <Wrapper>
      <Container>
        <ExpandAll
          isActive={app.state.expandAllActionDetails}
          onClick={() => app.actions.toggleExpandAllActions()}
        >
          expand all
        </ExpandAll>
        {app.state.currentAction.operators.map((operator, index) => {
          const prevOperator = app.state.currentAction.operators[index - 1]
          const value =
            index === 0
              ? app.state.currentAction.value
              : ignoreOperatorValues.includes(prevOperator.type)
                ? undefined
                : prevOperator.result
          const flushReference =
            app.state.currentApp.flushByOperatorId[getOperatorId(operator)]
          const flush =
            flushReference &&
            app.state.currentApp.flushes[flushReference.flushId]

          if (flush) {
            return (
              <React.Fragment key={operator.operatorId}>
                <Operator
                  prevOperator={prevOperator}
                  operator={operator}
                  value={value}
                  operatorIndex={index}
                />
                <Flush flush={flush} />
              </React.Fragment>
            )
          }

          return (
            <Operator
              key={operator.operatorId}
              prevOperator={prevOperator}
              operator={operator}
              value={value}
              operatorIndex={index}
            />
          )
        })}
        {!app.state.currentAction.isRunning && flush ? (
          <Flush flush={flush} />
        ) : null}
      </Container>
    </Wrapper>
  )
}

export default connect(Action)