index.tsx

import * as React from 'react'
import { connect, Connect } from '../../app'
import Text from '../common/Text'
import ValueInspector from '../ValueInspector'
import {
  Wrapper,
  Panels,
  Panel,
  FlushWrapper,
  Mutation,
  Method,
} from './elements'

const Flushes: React.SFC<Connect> = ({ app }) => (
  <Wrapper>
    <div>
      <Panels>
        <Panel>
          <Text variant="label" dense>
            flush count
          </Text>
          <Text variant="header" dense>
            {app.state.flushes.length}
          </Text>
        </Panel>
        <Panel>
          <Text variant="label" dense>
            mutations count
          </Text>
          <Text variant="header" dense>
            {app.state.flushesMutationsCount}
          </Text>
        </Panel>
        <Panel>
          <Text variant="label" dense>
            paths updated
          </Text>
          <Text variant="header" dense>
            {app.state.flushesStatePathCount}
          </Text>
        </Panel>
      </Panels>
    </div>
    {app.state.flushes.map((flush, index) => (
      <FlushWrapper key={index}>
        {flush.mutations.map((mutation, index) => {
          return (
            <Mutation key={index}>
              <Text variant="description">
                <Method>{mutation.method}</Method>
              </Text>
              <Text variant="description">{mutation.path}</Text>
              <React.Fragment>
                {mutation.args.map((arg, index) => (
                  <ValueInspector key={index} value={arg} small />
                ))}
              </React.Fragment>
            </Mutation>
          )
        })}
      </FlushWrapper>
    ))}
  </Wrapper>
)

export default connect(Flushes)