index.tsx

import * as React from 'react'
import { connect, Connect } from '../../app'
import { Wrapper, Label, LabelWrapper, 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 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>
                ),
              }),
            {}
          )
        ) as RenderPaths
      }
    />
  </Wrapper>
)

export default connect(State)