Merge branch 'next' of https://github.com/cerebral/overmind into next

Author: christianalfoni

package-lock.json

@@ -27,7 +27,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
-    "axios": "0.18.0",
+    "axios": "0.19.0",
     "color": "3.0.0",
     "color-hash": "1.0.3",
     "electron": "2.0.8",

package.json

@@ -1,26 +1,44 @@
-import { createElement, FunctionComponent } from 'react'
-import * as styles from './styles'
+import { FunctionComponent, createElement, useEffect, useRef } from 'react'
+
 import { useOvermind } from '../../overmind'
 import { isValidJson } from '../../overmind/utils'
 import { colors } from '../../theme'
+import * as styles from './styles'
 
 const ActionPayload: FunctionComponent = () => {
-  const { state, actions } = useOvermind()
+  const { state, actions, reaction } = useOvermind()
+  const input = useRef(null)
+
+  useEffect(() => {
+    reaction(
+      () => state.currentApp.selectedActionQuery,
+      () => setTimeout(() => input.current && input.current.focus())
+    )
+  }, [])
+
   const payload = state.currentApp.actionQueryPayload
 
   return (
     <div className={styles.wrapper}>
       <input
+        ref={input}
         style={{
           borderColor:
             !payload || isValidJson(payload) ? 'transparent' : colors.red,
         }}
-        disabled={!state.currentApp.selectedActionQuery}
+        disabled={
+          !state.currentApp.selectedActionQuery || state.isExecutingAction
+        }
         placeholder={
           state.currentApp.selectedActionQuery
             ? 'Add some JSON payload...'
             : null
         }
+        onKeyDown={(event) => {
+          if (event.keyCode === 13) {
+            actions.executeAction()
+          }
+        }}
         className={styles.input}
         value={payload}
         onChange={(event) =>

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

@@ -1,10 +1,11 @@
-import { createElement, FunctionComponent } from 'react'
-import * as styles from './styles'
+import { FunctionComponent, createElement } from 'react'
+import { FaRocket } from 'react-icons/fa'
+
 import { useOvermind } from '../../overmind'
-import ActionSelector from '../ActionSelector'
-import ActionPayload from '../ActionPayload'
 import { colors } from '../../theme'
-import { FaRocket } from 'react-icons/fa'
+import ActionPayload from '../ActionPayload'
+import ActionSelector from '../ActionSelector'
+import * as styles from './styles'
 
 const ActionsTools: FunctionComponent = () => {
   const { state, actions } = useOvermind()
@@ -21,11 +22,12 @@ const ActionsTools: FunctionComponent = () => {
       <ActionPayload />
       <div
         className={styles.button}
-        onClick={() => actions.executeAction()}
+        onClick={state.isExecutingAction ? null : () => actions.executeAction()}
         style={{
-          backgroundColor: state.currentApp.selectedActionQuery
-            ? colors.green
-            : colors.highlight,
+          backgroundColor:
+            !state.isExecutingAction && state.currentApp.selectedActionQuery
+              ? colors.green
+              : colors.highlight,
         }}
       >
         <FaRocket />

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

@@ -1,4 +1,5 @@
 import { css } from 'emotion'
+
 import { colors } from '../../theme'
 
 export const wrapper = css({