feat(overmind-devtools-client): improve editing state and passing action payload

Author: christianalfoni

packages/node_modules/overmind-devtools-client/src/components/ActionPayload/index.tsx

@@ -31,7 +31,7 @@ const ActionPayload: FunctionComponent = () => {
         }
         placeholder={
           state.currentApp.selectedActionQuery
-            ? 'Add some JSON payload...'
+            ? 'Add some payload...'
             : null
         }
         onKeyDown={(event) => {

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

@@ -132,16 +132,19 @@ const EditValue: FunctionComponent<EditValueProps> = ({ value, onSubmit }) => {
           autoFocus
           value={state}
           onChange={(event) => setState(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.metaKey && event.keyCode === 13) {
+              onSubmit(state)
+            }
+          }}
           className={styles.newState}
           style={{
             borderColor: isValid ? null : colors.red,
           }}
         />
-        {isValid ? (
-          <button onClick={() => onSubmit(state)} className={styles.ok}>
-            OK
-          </button>
-        ) : null}
+          <span className={styles.ok}>
+            CMD/CTRL + ENTER to save
+          </span>
       </div>
     </span>
   )

packages/node_modules/overmind-devtools-client/src/components/Inspector/styles.ts

@@ -105,10 +105,10 @@ export const ok = css({
   cursor: 'pointer',
   top: 0,
   right: 0,
+  fontSize: 10,
   border: 0,
   outline: 'none',
-  borderTopRightRadius: 3,
-  padding: '0.5rem 1rem',
-  backgroundColor: colors.green,
-  color: colors.foreground,
+  padding: '0.25rem 0.5rem',
+  opacity: 0.5,
+  color: colors.background,
 })

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

@@ -221,7 +221,7 @@ export const submitState: Action<string> = ({ state, effects }, newState) => {
 
 export const setAppHost: Action<string> = ({ state, effects }, host) => {
   state.isConnecting = true
-  
+
   let fullHost = host
   if (host) {
     fullHost = host.startsWith('http') ? host : `http://${host}` 

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

@@ -96,7 +96,8 @@ export const getAppShortName = (name: string) => {
 
 export const isValidJson = (payload: string) => {
   try {
-    JSON.parse(`{ "value": ${payload} }`)
+    // eslint-disable-next-line
+    JSON.stringify(eval(`(function () { return ${payload} })()`))
 
     return true
   } catch (e) {

packages/node_modules/overmind/src/Devtools.ts

@@ -29,7 +29,14 @@ export class Devtools {
     host = host || 'localhost:3031'
 
     this.ws = new WebSocket(`ws://${host}?name=${this.name}`)
-    this.ws.onmessage = (event) => onMessage(JSON.parse(event.data))
+    this.ws.onmessage = (event) => {
+      const data = JSON.parse(event.data)
+
+      if (data.appName !== this.name) {
+        return
+      }
+      onMessage(data)
+    }
     this.ws.onopen = () => {
       this.isConnected = true
       this.sendBuffer()

packages/node_modules/overmind/src/index.ts

@@ -770,10 +770,6 @@ export class Overmind<ThisConfig extends IConfiguration>
     devtools.connect(
       host,
       (message: DevtoolsMessage) => {
-        if (message.appName !== name) {
-          return
-        }
-
         switch (message.type) {
           case 'refresh':
             location.reload(true)