index.tsx

import * as React from 'react'
import { connect, Connect } from '../../app'
import { Flush as FlushType, FlushReference } from '../../app/state'
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 = {
  flushReference: FlushReference
  flush: FlushType
} & Connect

const ActionFlush: React.SFC<Props> = ({ flush, flushReference, app }) =>
  flush.components.length || flush.computed.length || flush.derived.length ? (
    <Pipe>
      <Path />
      <Flush>
        <FlushHeader
          onClick={() => app.actions.toggleCollapsed(flushReference)}
        >
          <Text variant="hint">
            <Icon>code</Icon> {flush.components.length}
          </Text>
          <Text variant="hint">
            <Icon>chain</Icon> {flush.derived.length}
          </Text>
          <Text variant="hint">
            <Icon>calculator</Icon> {flush.computed.length}
          </Text>
          <Text variant="hint">
            {flushReference.isCollapsed ? (
              <Icon>chevron-up</Icon>
            ) : (
              <Icon>chevron-down</Icon>
            )}
          </Text>
        </FlushHeader>
        {flushReference.isCollapsed ? null : (
          <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.computed.map((computedPath) => (
              <div key={computedPath}>
                <Text variant="hint">
                  <Icon>calculator</Icon> {computedPath}
                </Text>
              </div>
            ))}
          </div>
        )}
      </Flush>
    </Pipe>
  ) : null

export default connect(ActionFlush)