index.tsx

import { createElement, SFC } from 'react'
import { useOvermind } from '../../overmind'
import * as textStyles from '../../styles/text'
import ValueInspector from '../ValueInspector'
import * as styles from './styles'
import { css } from 'emotion'

const Flushes: SFC = () => {
  const { state } = useOvermind()

  return (
    <div className={styles.wrapper}>
      <div>
        <div className={styles.panels}>
          <div className={styles.panel}>
            <span className={css(textStyles.label, textStyles.denseLabel)}>
              flush count
            </span>
            <span className={css(textStyles.header, textStyles.denseHeader)}>
              {state.flushes.length}
            </span>
          </div>
          <div className={styles.panel}>
            <span className={css(textStyles.label, textStyles.denseLabel)}>
              mutations count
            </span>
            <span className={css(textStyles.header, textStyles.denseHeader)}>
              {state.flushesMutationsCount}
            </span>
          </div>
          <div className={styles.panel}>
            <span className={css(textStyles.label, textStyles.denseLabel)}>
              paths updated
            </span>
            <span className={css(textStyles.header, textStyles.denseHeader)}>
              {state.flushesStatePathCount}
            </span>
          </div>
        </div>
      </div>
      {state.flushes.map((flush, index) => (
        <div className={styles.flushWrapper} key={index}>
          {flush.mutations.map((mutation, index) => {
            return (
              <span className={styles.mutation} key={index}>
                <span className={textStyles.description}>
                  <span className={styles.method}>{mutation.method}</span>
                </span>
                <span className={textStyles.description}>{mutation.path}</span>
                {mutation.args.map((arg, index) => (
                  <ValueInspector key={index} value={arg} small />
                ))}
              </span>
            )
          })}
        </div>
      ))}
    </div>
  )
}

export default Flushes