feat(overmind-devtools): add computed and derived labels to state

Author: christianalfoni

packages/node_modules/overmind-devtools/src/app/mutations.ts

@@ -178,7 +178,11 @@ export function performMutationsByMessageType(state: State, message: Message) {
         const path = clientMessage.data.path.split('.')
         const key = path.pop()
         const target = path.reduce((aggr, pathKey) => aggr[pathKey], appState)
-        target[key] = clientMessage.data
+        target[key] = {
+          cache: clientMessage.data.cache,
+          limit: clientMessage.data.limit,
+          updateCount: clientMessage.data.updateCount,
+        }
 
         state.apps[message.port].computed[clientMessage.data.path] =
           clientMessage.data

packages/node_modules/overmind-devtools/src/components/Inspector/index.tsx

@@ -100,17 +100,25 @@ class ValueComponent extends React.Component<ValueComponentProps> {
   }
 }
 
+export type RenderPaths = {
+  [path: string]: (children: React.ReactChildren) => React.ReactNode
+}
+
 type InspectorProps = {
   value: object
   expandedPaths: string[]
   small?: boolean
   onToggleExpand: (path: string[]) => void
+  renderPaths?: RenderPaths
 }
 
 class Inspector extends React.Component<InspectorProps> {
-  renderValue(path: string[], value: any) {
+  renderValue(path: string[], value: any, renderPaths?: RenderPaths) {
+    const wrapper = renderPaths && renderPaths[path.join('.')]
+    let node
+
     if (isObject(value)) {
-      return (
+      node = (
         <ConnectedNested
           key={path.join('.')}
           startBracket="{"
@@ -123,13 +131,13 @@ class Inspector extends React.Component<InspectorProps> {
         >
           {() =>
             Object.keys(value).map((key) =>
-              this.renderValue(path.concat(key), value[key])
+              this.renderValue(path.concat(key), value[key], renderPaths)
             )
           }
         </ConnectedNested>
       )
     } else if (isArray(value)) {
-      return (
+      node = (
         <ConnectedNested
           key={path.join('.')}
           startBracket="["
@@ -142,19 +150,21 @@ class Inspector extends React.Component<InspectorProps> {
         >
           {() =>
             value.map((_, index) =>
-              this.renderValue(path.concat(index), value[index])
+              this.renderValue(path.concat(index), value[index], renderPaths)
             )
           }
         </ConnectedNested>
       )
+    } else {
+      node = <ValueComponent key={path.join('.')} path={path} value={value} />
     }
 
-    return <ValueComponent key={path.join('.')} path={path} value={value} />
+    return wrapper ? wrapper(node) : node
   }
   render() {
     return (
       <Wrapper small={this.props.small}>
-        {this.renderValue([], this.props.value)}
+        {this.renderValue([], this.props.value, this.props.renderPaths)}
       </Wrapper>
     )
   }

packages/node_modules/overmind-devtools/src/components/State/elements.tsx

@@ -6,3 +6,28 @@ export const Wrapper = styled.div`
   box-sizing: border-box;
   overflow-y: scroll;
 `
+
+export const Label = styled.div`
+  display: flex;
+`
+
+export const LabelWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const ComputedLabel = styled.div`
+  margin-right: 5px;
+  background-color: ${({ theme }) => theme.color.primary};
+  padding: ${({ theme }) => `0 ${theme.padding.smallerer}`};
+  border-radius: ${({ theme }) => theme.borderRadius.normal};
+  color: ${({ theme }) => theme.color.white};
+`
+
+export const DerivedLabel = styled.div`
+  margin-right: 5px;
+  background-color: ${({ theme }) => theme.color.secondary};
+  padding: ${({ theme }) => `0 ${theme.padding.smallerer}`};
+  border-radius: ${({ theme }) => theme.borderRadius.normal};
+  color: ${({ theme }) => theme.color.white};
+`

packages/node_modules/overmind-devtools/src/components/State/index.tsx

@@ -1,14 +1,71 @@
 import * as React from 'react'
 import { connect, Connect } from '../../app'
-import { Wrapper } from './elements'
-import Inspector from '../Inspector'
+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.apps[app.state.currentPort].state}
+      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>
 )