fix(overmind-devtools): show action selector when no actions

Author: christianalfoni

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

@@ -19,13 +19,7 @@ const ActionSelector: FunctionComponent = () => {
           }}
         />
 
-        <form
-          className={styles.inputWrapper}
-          onSubmit={(event) => {
-            event.preventDefault()
-            actions.submitQueryAction()
-          }}
-        >
+        <div className={styles.inputWrapper}>
           <div className={styles.suggestion}>{app.actionQuerySuggestion}</div>
           <input
             autoFocus
@@ -37,7 +31,7 @@ const ActionSelector: FunctionComponent = () => {
               actions.changeActionQuery(event.currentTarget.value)
             }
           />
-        </form>
+        </div>
         <div className={styles.resultWrapper}>
           {app.actionPaths
             .filter((path) => path.startsWith(app.actionQuery))

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

@@ -9,21 +9,19 @@ import ActionsTools from 'overmind-devtools/src/components/ActionsTools'
 const Actions: FunctionComponent = () => {
   const { state } = useOvermind()
 
-  if (!state.currentAction) {
-    return (
-      <div className={styles.centerWrapper}>
-        <span className={textStyles.header}>no actions triggered...</span>
-      </div>
-    )
-  }
-
   return (
     <div className={styles.wrapper}>
       <ActionsTools />
-      <div className={styles.columns}>
-        <ActionsList />
-        <Action />
-      </div>
+      {state.currentAction ? (
+        <div className={styles.columns}>
+          <ActionsList />
+          <Action />
+        </div>
+      ) : (
+        <div className={styles.centerWrapper}>
+          <span className={textStyles.header}>no actions triggered...</span>
+        </div>
+      )}
     </div>
   )
 }

packages/overmind-website/examples/guide/routing/setup.ts

@@ -11,7 +11,7 @@ export const showHomePage: Action = ({ state }) => {
 }
 
 export const showUsersPage: Action = async ({ state, effects }) => {
-  state.user = null
+  state.modalUser = null
   state.currentPage = 'users'
   state.isLoadingUsers = true
   state.users = await effects.api.getUsers()
@@ -35,7 +35,7 @@ export const showHomePage = ({ state }) => {
 }
 
 export const showUsersPage = async ({ state, api }) => {
-  state.user = null
+  state.modalUser = null
   state.currentPage = 'users'
   state.isLoadingUsers = true
   state.users = await api.getUsers()