index.tsx

import { createElement, SFC } from 'react'
import { useOvermind } from '../../overmind'
import {
  Operator as OperatorType,
  EventType,
  Effect,
  Mutation,
} from '../../overmind/types'
import ValueInspector from '../ValueInspector'
import Icon from '../common/Icon'
import Path from '../ActionPath'
import * as styles from './styles'
import * as actionStyles from '../Action/styles'
import * as textStyles from '../../styles/text'
import { css } from 'emotion'

type Props = {
  prevOperator: OperatorType
  operator: OperatorType
  value: any
  operatorIndex: number
}

const ActionOperator: SFC<Props> = ({
  prevOperator,
  operator,
  value,
  operatorIndex,
}) => {
  const { state, actions } = useOvermind()
  const isExpanded = state.expandAllActionDetails || !operator.isCollapsed

  return (
    <div>
      {value === undefined ? null : (
        <div className={actionStyles.pipe}>
          <Path showPathTag={false} visible={false}>
            {operator.path.length ? (
              <span className={textStyles.hint}>
                <b>{operator.path.join('.')}</b>
              </span>
            ) : null}
          </Path>
          <ValueInspector value={value} small />
        </div>
      )}
      <div className={actionStyles.pipe}>
        <Path
          visible={
            Boolean(prevOperator) &&
            Boolean(operator.path.length) &&
            prevOperator.path.join('.') !== operator.path.join('.')
          }
        >
          {operator.path.length ? (
            <span className={textStyles.hint}>
              <b>{operator.path.join('.')}</b>
            </span>
          ) : null}
        </Path>
        <div
          className={css(
            styles.operator(
              operator.type === 'action'
                ? 'var(--color-purple)'
                : 'var(--color-primary)'
            ),
            operator.events.length && styles.operatorClickable
          )}
          onClick={
            operator.events.length
              ? () => actions.toggleCollapsedOperator(operatorIndex)
              : null
          }
        >
          <div className={styles.operatorHeader}>
            <span
              className={css(
                textStyles.normal,
                textStyles.denseNormal,
                styles.operatorType
              )}
            >
              {operator.type}
            </span>
            <span
              className={css(
                textStyles.white,
                textStyles.normal,
                textStyles.denseNormal
              )}
            >
              {operator.name}
            </span>
            {operator.events.length ? (
              <span className={css(textStyles.hint, styles.chevron)}>
                {isExpanded ? (
                  <Icon>chevron-down</Icon>
                ) : (
                  <Icon>chevron-up</Icon>
                )}
              </span>
            ) : null}
          </div>
          {isExpanded ? (
            <div onClick={(event) => event.stopPropagation()}>
              {operator.events.map((event, index) => {
                if (event.type === EventType.Effect) {
                  const effect = event.data as Effect

                  return (
                    <div
                      className={css(
                        styles.operatorItem,
                        effect.isPending && styles.pendingOperatorItem
                      )}
                      key={index}
                    >
                      <span
                        className={css(
                          textStyles.description,
                          textStyles.purple,
                          textStyles.monospace
                        )}
                      >
                        {effect.name
                          ? effect.name + '.' + effect.method
                          : effect.method}
                      </span>
                      {effect.args.length ? (
                        <ValueInspector
                          small
                          value={
                            effect.args.length > 1
                              ? effect.args
                              : effect.args[0]
                          }
                        />
                      ) : null}
                      {effect.result === undefined && !effect.error ? null : (
                        <span
                          className={css(
                            textStyles.description,
                            textStyles.monospace
                          )}
                        >
                          =>
                        </span>
                      )}
                      {effect.result === undefined ? null : (
                        <ValueInspector small value={effect.result} />
                      )}
                      {effect.error ? (
                        <span className={styles.effectError}>
                          {effect.error}
                        </span>
                      ) : null}
                    </div>
                  )
                }

                if (event.type === EventType.Mutation) {
                  const mutation = event.data as Mutation

                  return (
                    <div className={styles.operatorItem} key={index}>
                      <span
                        className={css(
                          textStyles.description,
                          textStyles.yellow,
                          textStyles.monospace
                        )}
                      >
                        {mutation.method}
                      </span>
                      <span
                        className={css(
                          textStyles.description,
                          textStyles.monospace
                        )}
                      >
                        {mutation.path}
                      </span>
                      <ValueInspector
                        small
                        value={
                          mutation.args.length > 1
                            ? mutation.args
                            : mutation.args[0]
                        }
                      />
                    </div>
                  )
                }
              })}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  )
}

export default ActionOperator