feat(overmind-devtools): show action path in history

Author: christianalfoni

packages/node_modules/overmind-devtools/backend/main.js

@@ -12,8 +12,8 @@ function createWindow() {
     icon: path.resolve('icons', 'icon.png'),
     height: 768,
     width: 768,
-    minHeight: 768,
-    minWidth: 768,
+    minHeight: 500,
+    minWidth: 500,
   })
   const connectionManager = new ConnectionManager(mainWindow)
 

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

@@ -12,8 +12,6 @@ import {
   FaCode,
   FaLink,
   FaSave,
-  FaVolumeDown,
-  FaVolumeUp,
   FaDatabase,
   FaClock,
   FaCheck,
@@ -34,6 +32,9 @@ const History: FunctionComponent = () => {
                 <div className={styles.label}>
                   <FaDatabase />
                 </div>
+                <div className={styles.actionName}>
+                  {mutationRecord.actionName}
+                </div>
                 <div className={styles.mutationType}>
                   {mutationRecord.data.method}
                 </div>
@@ -55,8 +56,8 @@ const History: FunctionComponent = () => {
                 <div className={styles.label}>
                   <FaSave />
                 </div>
-                <div className={styles.flushActionName}>
-                  {flushRecord.data.actionName}
+                <div className={styles.actionName}>
+                  {flushRecord.actionName}
                 </div>
                 <div className={styles.flushDetail}>
                   {flushRecord.data.components.length} <FaCode />
@@ -93,6 +94,9 @@ const History: FunctionComponent = () => {
                 <div className={styles.label}>
                   {effectRecord.data.isPending ? <FaClock /> : <FaCheck />}
                 </div>
+                <div className={styles.actionName}>
+                  {effectRecord.actionName}
+                </div>
                 <div className={styles.effectPath}>
                   {effectRecord.data.name
                     ? effectRecord.data.name + '.' + effectRecord.data.method

packages/node_modules/overmind-devtools/src/components/History/styles.ts

@@ -72,7 +72,7 @@ export const flushDetail = css({
     display: 'block',
   },
 })
-export const flushActionName = css({
+export const actionName = css({
   padding: '0 0.5rem',
 })
 

packages/node_modules/overmind-devtools/src/overmind/state.ts

@@ -37,7 +37,7 @@ type State = {
   flushesMutationsCount: Derive<State, number>
   flushesStatePathCount: Derive<State, number>
   groupedComponents: Derive<State, GroupedComponents>
-  history: Derive<State, HistoryRecord[]>
+  history: Derive<State, HistoryRecord<any, any>[]>
   currentOperatorsByPath: Derive<State, OperatorsByPath[]>
 }
 
@@ -129,6 +129,7 @@ const state: State = {
               const mutationRecord: MutationHistoryRecord = {
                 type: HistoryRecordType.Mutation,
                 data: mutation,
+                actionName: mutationsMessage.data.actionName,
               }
 
               return mutationRecord
@@ -140,14 +141,14 @@ const state: State = {
           const flushRecord: FlushHistoryRecord = {
             type: HistoryRecordType.Flush,
             data: {
-              ...flush,
               components: flush.components.map(
                 (componentId) => state.currentApp.components[componentId].name
               ),
               derived: flush.derived.map(
                 (derivedId) => state.currentApp.derived[derivedId]
               ),
             },
+            actionName: flushMessage.data.actionName,
           }
 
           return aggr.concat(flushRecord)
@@ -156,6 +157,7 @@ const state: State = {
           const effectRecord: EffectHistoryRecord = {
             type: HistoryRecordType.Effect,
             data: effectMessage.data,
+            actionName: effectMessage.data.actionName,
           }
 
           return aggr.concat(effectRecord)

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

@@ -143,25 +143,23 @@ export enum HistoryRecordType {
   Flush = 'Flush',
 }
 
-export type HistoryRecord = {
+export type HistoryRecord<Type extends HistoryRecordType, data> = {
   type: HistoryRecordType
   data: any
+  actionName: string
 }
 
-export type MutationHistoryRecord = {
-  type: HistoryRecordType.Mutation
-  data: Mutation
-}
+export type MutationHistoryRecord = HistoryRecord<
+  HistoryRecordType.Mutation,
+  Mutation
+>
 
-export type FlushHistoryRecord = {
-  type: HistoryRecordType.Flush
-  data: Flush
-}
+export type FlushHistoryRecord = HistoryRecord<HistoryRecordType.Flush, Flush>
 
-export type EffectHistoryRecord = {
-  type: HistoryRecordType.Effect
-  data: Effect
-}
+export type EffectHistoryRecord = HistoryRecord<
+  HistoryRecordType.Effect,
+  Effect
+>
 
 export type App = {
   name: string

packages/overmind-website/src/overmind/actions.ts

@@ -142,7 +142,7 @@ export const test: Operator<string> = pipe(
       false: mutate(function falsePath() {}),
     }
   ),
-  filter(() => true),
+  filter(() => false),
   parallel(
     pipe(
       map(function pa1({ state }, val) {