index.tsx

import * as React from 'react'
import { connect, Connect } from '../../app'
import { Flush as FlushType, FlushReference } from '../../app/types'
import { Pipe } from '../Action/elements'
import { Flush, FlushHeader } from './elements'
import Path from '../ActionPath'
import Text from '../common/Text'
import Icon from '../common/Icon'

type Props = {
  flush: FlushType
} & Connect

const ActionFlush: React.SFC<Props> = ({ flush, app }) => {
  const isExpanded = app.state.expandAllActionDetails || !flush.isCollapsed

  return flush.components.length || flush.derived.length ? (
    <Pipe>
      <Path />
      <Flush>
        <FlushHeader
          onClick={() => app.actions.toggleCollapsedFlush(flush.flushId)}
        >
          <Text variant="hint">
            <Icon>code</Icon> {flush.components.length}
          </Text>
          <Text variant="hint">
            <Icon>chain</Icon> {flush.derived.length}
          </Text>
          <Text variant="hint">
            <Icon>flask</Icon> {flush.reactions.length}
          </Text>
          <Text variant="hint">
            {isExpanded ? <Icon>chevron-down</Icon> : <Icon>chevron-up</Icon>}
          </Text>
        </FlushHeader>
        {isExpanded ? (
          <div>
            {flush.components.map((componentId) => (
              <div key={componentId}>
                <Text variant="hint">
                  <Icon>code</Icon>{' '}
                  {app.state.currentApp.components[componentId].name}
                </Text>
              </div>
            ))}
            {flush.derived.map((derivedPath) => (
              <div key={derivedPath}>
                <Text variant="hint">
                  <Icon>chain</Icon> {derivedPath}
                </Text>
              </div>
            ))}
            {flush.reactions.map((reactionPath) => (
              <div key={reactionPath}>
                <Text variant="hint">
                  <Icon>flask</Icon> {reactionPath}
                </Text>
              </div>
            ))}
          </div>
        ) : null}
      </Flush>
    </Pipe>
  ) : null
}
export default connect(ActionFlush)