fix(overmind): pass flused mutations before component update

Author: christianalfoni

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

@@ -34,6 +34,8 @@ export default (action: Action) => {
 
   const openConsole = action().mutation(mutations.openConsole)
 
+  const openComponents = action().mutation(mutations.openComponents)
+
   const openApp = action<string>()
 
   const toggleExpandState = action<string[]>().mutation(
@@ -47,6 +49,7 @@ export default (action: Action) => {
     addPort,
     openState,
     openConsole,
+    openComponents,
     openApp,
     toggleExpandState,
   }

packages/node_modules/overmind-devtools/src/client/app/mutations.ts

@@ -38,6 +38,9 @@ export const openState = (_, state: State) => (state.currentTab = Tab.State)
 
 export const openConsole = (_, state: State) => (state.currentTab = Tab.Console)
 
+export const openComponents = (_, state: State) =>
+  (state.currentTab = Tab.Components)
+
 export const toggleExpandStatePath = (path: string[], state: State) => {
   const pathString = path.join('.')
 
@@ -47,7 +50,7 @@ export const toggleExpandStatePath = (path: string[], state: State) => {
       1
     )
   } else {
-    state.expandedStatePaths.push(pathString)
+    state.expandedStatePaths = state.expandedStatePaths.concat(pathString)
   }
 }
 

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

@@ -22,6 +22,7 @@ export type Message = {
 export enum Tab {
   State = 'State',
   Console = 'Console',
+  Components = 'Components',
 }
 
 export type State = {

packages/node_modules/overmind-devtools/src/client/components/Components/elements.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { connect, Connect } from '../../app'
+
+const Components: React.SFC<Connect> = () => <h1>Components</h1>
+
+export default connect(Components)

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

@@ -1,3 +1,6 @@
 import styled from '../../styled-components'
 
-export const Wrapper = styled.div``
+export const Wrapper = styled.div`
+  overflow-y: scroll;
+  height: 100%;
+`

packages/node_modules/overmind-devtools/src/client/components/Console/elements.tsx

@@ -12,6 +12,12 @@ const Tabs: React.SFC<Connect> = ({ appState, actions }) => (
     >
       <Icon>database</Icon>
     </Button>
+    <Button
+      active={appState.currentTab === Tab.Components}
+      onClick={actions.openComponents}
+    >
+      <Icon>code</Icon>
+    </Button>
     <Button
       active={appState.currentTab === Tab.Console}
       onClick={actions.openConsole}

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

@@ -6,10 +6,12 @@ import { Wrapper, Content, PageContainer } from './elements'
 import Tabs from '../Tabs'
 import Console from '../Console'
 import State from '../State'
+import Components from '../Components'
 
 const pages: { [key in Tab]: React.ComponentType } = {
   [Tab.Console]: Console,
   [Tab.State]: State,
+  [Tab.Components]: Components,
 }
 
 const Workspace: React.SFC<Connect> = ({ appState }) => {

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

@@ -6,6 +6,7 @@ const icons = {
   'plus-square': '\f0fe',
   terminal: '\f120',
   database: '\f1c0',
+  code: '\f121',
 }
 
 export const IconElement = styled<