feat(overmind-devtools): add reactions to flushes

Author: christianalfoni

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

@@ -222,6 +222,17 @@ export const performMutationsByMessageType: Mutate<Message> = (
         ].computed.push(clientMessage.data.path)
         break
       }
+      case 'reaction:update': {
+        ensureFlushExists(
+          state.apps[message.port].flushes,
+          clientMessage.data.flushId
+        )
+
+        state.apps[message.port].flushes[
+          clientMessage.data.flushId
+        ].reactions.push(clientMessage.data.path)
+        break
+      }
       case 'action:start': {
         const app = state.apps[message.port]
         const action = clientMessage.data

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

@@ -66,6 +66,7 @@ export type Flush = {
   components: string[]
   derived: string[]
   computed: string[]
+  reactions: string[]
 }
 
 export type FlushReference = {

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

@@ -1,5 +1,5 @@
 import * as ColorHash from 'color-hash'
-import { App } from './types'
+import { App, Flush } from './types'
 
 export const runMutation = (state) => (mutation) => {
   const pathArray = mutation.path.split('.')
@@ -60,12 +60,14 @@ export const nameToColor = (name, lightness = 0.5, saturation = 0.5) => {
 
 export const ensureFlushExists = (flushes, flushId) => {
   if (!flushes[flushId]) {
-    flushes[flushId] = {
+    const flush: Flush = {
       flushId,
       mutations: [],
       components: [],
       derived: [],
       computed: [],
+      reactions: [],
     }
+    flushes[flushId] = flush
   }
 }

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

@@ -34,6 +34,9 @@ const ActionFlush: React.SFC<Props> = ({ flush, flushReference, app }) => {
           <Text variant="hint">
             <Icon>calculator</Icon> {flush.computed.length}
           </Text>
+          <Text variant="hint">
+            <Icon>flask</Icon> {flush.reactions.length}
+          </Text>
           <Text variant="hint">
             {isExpanded ? <Icon>chevron-down</Icon> : <Icon>chevron-up</Icon>}
           </Text>
@@ -62,6 +65,13 @@ const ActionFlush: React.SFC<Props> = ({ flush, flushReference, app }) => {
                 </Text>
               </div>
             ))}
+            {flush.reactions.map((reactionPath) => (
+              <div key={reactionPath}>
+                <Text variant="hint">
+                  <Icon>flask</Icon> {reactionPath}
+                </Text>
+              </div>
+            ))}
           </div>
         ) : null}
       </Flush>

packages/node_modules/overmind-devtools/src/components/common/Icon/elements.tsx

@@ -13,6 +13,7 @@ const icons = {
   calculator: '\f1ec',
   close: '\f00d',
   trash: '\f014',
+  flask: '\f0c3',
 }
 
 export const IconElement = styled<

packages/node_modules/overmind-devtools/src/icomoon.woff2

@@ -68,6 +68,7 @@ export interface Events {
     path: string
     statePath: string
     updateCount: number
+    flushId: number
   }
   [EventType.REACTION_REMOVE]: {
     path: string

packages/node_modules/overmind/src/internalTypes.ts

@@ -19,14 +19,15 @@ class Reaction {
     )[0]
 
     this.proxyStateTreeListener = this.proxyStateTree.addMutationListener(
-      (mutations) => {
+      (mutations, flushId) => {
         for (let mutationIndex in mutations) {
           const mutation = mutations[mutationIndex]
           if (mutation.path.indexOf(this.statePath) === 0) {
             this.eventHub.emitAsync(EventType.REACTION_UPDATE, {
               path: this.path,
               statePath: this.statePath,
               updateCount: ++this.updateCount,
+              flushId,
             })
             cb()
           }