index.tsx

import * as React from 'react'
import { connect, Connect } from '../../app'
import {
  Wrapper,
  Label,
  LabelWrapper,
  ComputedLabel,
  DerivedLabel,
} from './elements'
import Inspector, { RenderPaths } from '../Inspector'
import Text from '../common/Text'

const DerivedWrapper = ({ children }) => (
  <Label>
    <LabelWrapper>
      <DerivedLabel>
        <Text variant="hint" mono>
          derived
        </Text>
      </DerivedLabel>
    </LabelWrapper>
    <div>{children}</div>
  </Label>
)

const ComputedWrapper = ({ children }) => (
  <Label>
    <LabelWrapper>
      <ComputedLabel>
        {' '}
        <Text variant="hint" mono>
          computed
        </Text>
      </ComputedLabel>
    </LabelWrapper>
    <div>{children}</div>
  </Label>
)

const State: React.SFC<Connect> = ({ app }) => (
  <Wrapper>
    <Inspector
      value={app.state.currentApp.state || {}}
      expandedPaths={app.state.expandedStatePaths}
      onToggleExpand={app.actions.toggleExpandState}
      renderPaths={
        Object.assign(
          {},
          Object.keys(app.state.currentApp.derived || {}).reduce(
            (aggr, key) =>
              Object.assign(aggr, {
                [key]: (children) => (
                  <DerivedWrapper key={key}>{children}</DerivedWrapper>
                ),
              }),
            {}
          ),
          Object.keys(app.state.currentApp.computed || {}).reduce(
            (aggr, key) =>
              Object.assign(aggr, {
                [key]: (children) => (
                  <ComputedWrapper key={key}>{children}</ComputedWrapper>
                ),
              }),
            {}
          )
        ) as RenderPaths
      }
    />
  </Wrapper>
)

export default connect(State)