index.tsx

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

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>
        {Object.keys(app.state.currentAction.operators).map(
          (key, index, array) => {
            const operator = app.state.currentAction.operators[key]
            const value =
              index === 0
                ? app.state.currentAction.value
                : app.state.currentAction.operators[array[index - 1]].result
            const flushReference =
              app.state.currentApp.flushByOperatorId[getOperatorId(operator)]
            const flush =
              flushReference &&
              app.state.currentApp.flushes[flushReference.flushId]

            if (flush) {
              return (
                <React.Fragment key={key}>
                  <Flush flush={flush} flushReference={flushReference} />
                  <Operator key={key} operator={operator} value={value} />
                </React.Fragment>
              )
            }

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

export default connect(Action)