feat(overmind-devtools): refactor to dork theme

Author: christianalfoni

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

@@ -1,4 +1,4 @@
-import { Action, pipe, OnInitialize, Operator } from 'overmind'
+import { Action, pipe, OnInitialize, Operator, run } from 'overmind'
 import {
   Message,
   Tab,
@@ -17,7 +17,6 @@ import {
   updateFlushWithDerived,
   addAction,
   addOperator,
-  updateFlushWithReactionUpdate,
   updateOperator,
   updateAction,
   addMutations,
@@ -28,6 +27,7 @@ import {
   addState,
   ensureApp,
   addClientMessages,
+  updateOperatorAsync,
 } from './operators'
 
 export const onInitialize: OnInitialize = async ({
@@ -60,11 +60,11 @@ const handleClientMessage: Operator<Message, any> = pipe(
     [ExecutionType.COMPONENT_UPDATE]: updateComponent,
     [ExecutionType.COMPONENT_REMOVE]: removeComponent,
     [ExecutionType.DERIVED_DIRTY]: updateFlushWithDerived,
-    [ExecutionType.REACTION_UPDATE]: updateFlushWithReactionUpdate,
     [ExecutionType.ACTION_START]: addAction,
     [ExecutionType.OPERATOR_START]: addOperator,
     [ExecutionType.OPERATOR_END]: updateOperator,
     [ExecutionType.ACTION_END]: updateAction,
+    [ExecutionType.OPERATOR_ASYNC]: updateOperatorAsync,
   })
 )
 

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

@@ -20,6 +20,7 @@ import {
   MutationsMessage,
   EffectMessage,
   ExecutionType,
+  AsyncOperatorMessage,
 } from './types'
 import {
   createApp,
@@ -161,16 +162,6 @@ export const updateFlushWithDerived = mutate<DirtyDerivedMessage>(
   }
 )
 
-export const updateFlushWithReactionUpdate = mutate<ReactionUpdateMessage>(
-  ({ value: message, state }) => {
-    ensureFlushExists(state.apps[message.appName].flushes, message.data.flushId)
-
-    state.apps[message.appName].flushes[message.data.flushId].reactions.push(
-      message.data.path
-    )
-  }
-)
-
 export const addAction = mutate<StartActionMessage>(
   ({ value: message, state }) => {
     const app = state.apps[message.appName]
@@ -302,3 +293,5 @@ export const getMessages = map<Message, AppMessage<any>[]>(({ value }) =>
 export const forkEachMessage = (paths: {
   [key: string]: Operator<AppMessage<any>, AppMessage<any>>
 }) => forEach<AppMessage<any>[]>(fork(({ value }) => value.type, paths))
+
+export const updateOperatorAsync = mutate<AsyncOperatorMessage>(() => {})

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

@@ -76,7 +76,6 @@ export type Flush = {
   mutations: Mutation[]
   components: string[]
   derived: string[]
-  reactions: string[]
   isCollapsed: boolean
 }
 
@@ -147,8 +146,8 @@ export enum ExecutionType {
   ACTION_START = 'action:start',
   OPERATOR_START = 'operator:start',
   OPERATOR_END = 'operator:end',
+  OPERATOR_ASYNC = 'operator:async',
   ACTION_END = 'action:end',
-  REACTION_UPDATE = 'reaction:update',
 }
 
 export enum AppMessageType {
@@ -236,6 +235,18 @@ export type EndOperatorMessage = AppMessage<{
   result: any
 }>
 
+export type AsyncOperatorMessage = AppMessage<{
+  actionId: number
+  actionName: string
+  name: string
+  executionId: number
+  operatorId: number
+  path: string[]
+  type: string
+  isAsync: boolean
+  result: any
+}>
+
 export type EndActionMessage = StartActionMessage
 
 export type MutationsMessage = AppMessage<{

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

@@ -63,7 +63,6 @@ export const ensureFlushExists = (flushes, flushId) => {
       mutations: [],
       components: [],
       derived: [],
-      reactions: [],
       isCollapsed: true,
     }
     flushes[flushId] = flush

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

@@ -34,8 +34,9 @@ const Action: Component = () => {
 
         if (flush) {
           return (
-            <div key={operator.actionId + '_' + operator.operatorId}>
+            <div>
               <ActionOperator
+                key={operator.actionId + '_' + operator.operatorId}
                 prevOperator={prevOperator}
                 operator={operator}
                 value={value}

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

@@ -2,7 +2,7 @@ import { css } from 'emotion'
 
 export const wrapper = css`
   padding: var(--padding-4);
-  background-color: var(--color-white-1);
+  background-color: var(--color-dark-1);
   overflow-y: scroll;
 `
 
@@ -17,7 +17,7 @@ export const expandAll = css`
   justify-content: flex-end;
   font-size: var(--font-size-2);
   cursor: pointer;
-  color: var(--color-black-1);
+  color: var(--color-white-2);
   opacity: 0.5;
   :hover {
     opacity: 0.75;

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

@@ -28,9 +28,6 @@ const ActionFlush: Component<Props> = ({ flush }) => {
           <span className={textStyles.hint}>
             <Icon>chain</Icon> {flush.derived.length}
           </span>
-          <span className={textStyles.hint}>
-            <Icon>flask</Icon> {flush.reactions.length}
-          </span>
           <span className={textStyles.hint}>
             {isExpanded ? <Icon>chevron-down</Icon> : <Icon>chevron-up</Icon>}
           </span>
@@ -52,13 +49,6 @@ const ActionFlush: Component<Props> = ({ flush }) => {
                 </span>
               </div>
             ))}
-            {flush.reactions.map((reactionPath) => (
-              <div key={reactionPath}>
-                <span className={textStyles.hint}>
-                  <Icon>flask</Icon> {reactionPath}
-                </span>
-              </div>
-            ))}
           </div>
         ) : null}
       </div>

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

@@ -4,10 +4,10 @@ export const flush = css`
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 0 var(--padding-3);
+  padding: 0 var(--padding-4);
   cursor: pointer;
-  border: 1px solid var(--color-black-1);
-  background-color: #fff;
+  border: 1px solid var(--color-dark-1);
+  background-color: var(--color-dark-2);
   border-radius: var(--border-radius-1);
 `
 
@@ -20,6 +20,6 @@ export const flushHeader = css`
   > *:last-child {
     margin-left: auto;
     margin-right: 0;
-    color: var(--color-black-2);
+    color: var(--color-white-2);
   }
 `

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

@@ -45,7 +45,6 @@ const ActionOperator: Component<Props> = ({
             Boolean(operator.path.length) &&
             prevOperator.path.join('.') !== operator.path.join('.')
           }
-          borderColor={operator.type === 'mutate' ? 'red' : 'primary'}
         >
           {operator.path.length ? (
             <span className={textStyles.hint}>
@@ -57,7 +56,7 @@ const ActionOperator: Component<Props> = ({
           className={css(
             styles.operator(
               operator.type === 'mutate'
-                ? 'var(--color-red)'
+                ? 'var(--color-purple)'
                 : 'var(--color-primary)'
             ),
             operator.mutations.length ||
@@ -73,19 +72,23 @@ const ActionOperator: Component<Props> = ({
             <span
               className={css(
                 textStyles.normal,
-                operator.type === 'mutate'
-                  ? textStyles.red
-                  : textStyles.primary,
-                textStyles.denseNormal
+                textStyles.denseNormal,
+                styles.operatorType
               )}
             >
               {operator.type}
             </span>
-            <span className={css(textStyles.normal, textStyles.denseNormal)}>
+            <span
+              className={css(
+                textStyles.white,
+                textStyles.normal,
+                textStyles.denseNormal
+              )}
+            >
               {operator.name}
             </span>
             {operator.mutations.length || operator.effects.length ? (
-              <span className={textStyles.hint}>
+              <span className={css(textStyles.hint, styles.chevron)}>
                 {isExpanded ? (
                   <Icon>chevron-down</Icon>
                 ) : (
@@ -101,7 +104,7 @@ const ActionOperator: Component<Props> = ({
                   <span
                     className={css(
                       textStyles.description,
-                      textStyles.primary,
+                      textStyles.purple,
                       textStyles.monospace
                     )}
                   >
@@ -129,7 +132,7 @@ const ActionOperator: Component<Props> = ({
                   <span
                     className={css(
                       textStyles.description,
-                      textStyles.red,
+                      textStyles.yellow,
                       textStyles.monospace
                     )}
                   >

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

@@ -4,17 +4,25 @@ export const operator = (borderColor: string) => css`
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 0 var(--padding-3);
+  padding: 0 var(--padding-4);
   cursor: default;
-  border: 1px solid ${borderColor};
-  background-color: #fff;
+  border: 1px solid var(--color-dark-1);
+  background-color: var(--color-dark-2);
   border-radius: var(--border-radius-1);
 `
 
 export const operatorClickable = css`
   cursor: pointer;
 `
 
+export const operatorType = css`
+  color: var(--color-white-4);
+`
+
+export const chevron = css`
+  color: var(--color-white-4);
+`
+
 export const notVisible = css`
   visibility: hidden;
 `
@@ -27,14 +35,14 @@ export const operatorHeader = css`
   }
   > *:nth-child(3) {
     margin-left: auto;
-    color: var(--color-black-2);
+    color: var(--color-white-2);
   }
 `
 
 export const operatorItem = css`
   display: flex;
   align-items: center;
-  margin-bottom: var(--padding-2);
+  margin-bottom: var(--padding-3);
   > * {
     margin-right: 10px;
   }