refactor(overmind): change connect props to app namespace

Author: christianalfoni

package-lock.json

@@ -20,6 +20,6 @@ const app = new App(
 
 export type Connect = TConnect<typeof app.state, typeof app.actions>
 
-export const connect = app.connect.bind(app)
+export const connect = app.connect
 
 export default app

packages/demos/todomvc/src/app/index.ts

@@ -2,15 +2,15 @@ import * as React from 'react'
 import { connect, Connect } from '../../app'
 import { Wrapper, Input, Button, Form } from './elements'
 
-const AddTodo: React.SFC<Connect> = ({ appState, actions }) => (
+const AddTodo: React.SFC<Connect> = ({ app }) => (
   <Wrapper>
-    <Form onSubmit={actions.addTodo}>
+    <Form onSubmit={app.actions.addTodo}>
       <Input
         placeholder="I need to..."
-        value={appState.newTodoTitle}
-        onChange={actions.changeNewTodoTitle}
+        value={app.state.newTodoTitle}
+        onChange={app.actions.changeNewTodoTitle}
       />
-      <Button disabled={!appState.newTodoTitle}>add</Button>
+      <Button disabled={!app.state.newTodoTitle}>add</Button>
     </Form>
   </Wrapper>
 )

packages/demos/todomvc/src/components/AddTodo/index.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
-import { connect, Connect } from '../../app'
 import { Wrapper, InnerWrapper } from './elements'
 import AddTodo from '../AddTodo'
 import Todos from '../Todos'
 
-const App: React.SFC<Connect> = ({ appState, actions }) => (
+const App: React.SFC = () => (
   <Wrapper>
     <InnerWrapper>
       <AddTodo />
@@ -13,4 +12,4 @@ const App: React.SFC<Connect> = ({ appState, actions }) => (
   </Wrapper>
 )
 
-export default connect(App)
+export default App

packages/demos/todomvc/src/components/App/index.tsx

@@ -7,8 +7,8 @@ type Props = {
   todo: Todo
 } & Connect
 
-const Todo: React.SFC<Props> = ({ todo, actions }) => (
-  <Item onClick={() => actions.toggleCompleted(todo)}>
+const Todo: React.SFC<Props> = ({ todo, app }) => (
+  <Item onClick={() => app.actions.toggleCompleted(todo)}>
     <Completed completed={todo.completed}>✔</Completed> {todo.title}
   </Item>
 )

packages/demos/todomvc/src/components/Todo/index.tsx

@@ -3,9 +3,9 @@ import { connect, Connect } from '../../app'
 import { List } from './elements'
 import Todo from '../Todo'
 
-const Todos: React.SFC<Connect> = ({ appState }) => (
+const Todos: React.SFC<Connect> = ({ app }) => (
   <List>
-    {appState.todos.map(
+    {app.state.todos.map(
       (todo, index) =>
         console.log('todo ID', todo.id) || <Todo key={todo.id} todo={todo} />
     )}

packages/demos/todomvc/src/components/Todos/index.tsx

@@ -15,6 +15,6 @@ const app = new App({
 
 export type Connect = TConnect<typeof app.state, typeof app.actions>
 
-export const connect = app.connect.bind(app)
+export const connect = app.connect
 
 export default app

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

@@ -5,7 +5,7 @@ import Table, { Row, Cell } from '../common/Table'
 import Pill from '../common/Pill'
 import { Wrapper, Panels, Panel } from './elements'
 
-const Components: React.SFC<Connect> = ({ appState }) => (
+const Components: React.SFC<Connect> = ({ app }) => (
   <Wrapper>
     <div>
       <Panels>
@@ -14,29 +14,29 @@ const Components: React.SFC<Connect> = ({ appState }) => (
             connected
           </Text>
           <Text variant="header" dense>
-            {appState.componentsMounted.length}
+            {app.state.componentsMounted.length}
           </Text>
         </Panel>
         <Panel>
           <Text variant="label" dense>
             update count
           </Text>
           <Text variant="header" dense>
-            {appState.componentsUpdateCount}
+            {app.state.componentsUpdateCount}
           </Text>
         </Panel>
         <Panel>
           <Text variant="label" dense>
             paths watched
           </Text>
           <Text variant="header" dense>
-            {appState.componentsStatePathCount}
+            {app.state.componentsStatePathCount}
           </Text>
         </Panel>
       </Panels>
     </div>
     <Table headers={['name', 'updates', 'values']}>
-      {appState.componentsMounted.map((component) => {
+      {app.state.componentsMounted.map((component) => {
         return (
           <Row key={component.id}>
             <Cell>{component.name}</Cell>

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

@@ -5,8 +5,8 @@ import { Wrapper } from './elements'
 
 class Console extends React.Component<Connect> {
   render() {
-    const { appState } = this.props
-    const messagesReversed = appState.currentApp.messages.slice().reverse()
+    const { app } = this.props
+    const messagesReversed = app.state.currentApp.messages.slice().reverse()
 
     return (
       <Wrapper>

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

@@ -8,7 +8,7 @@ import Workspace from '../Workspace'
 
 class Devtools extends React.Component<Connect> {
   componentDidMount() {
-    this.props.actions.loadDevtools()
+    this.props.app.actions.loadDevtools()
   }
   /*
   storeCurrentApps(apps) {
@@ -63,10 +63,10 @@ class Devtools extends React.Component<Connect> {
     */
   onPortSubmit = (event: React.FormEvent) => {
     event.preventDefault()
-    this.props.actions.addPort()
+    this.props.app.actions.addPort()
   }
   renderAddPort() {
-    const { appState, actions } = this.props
+    const { app } = this.props
     return (
       <Wrapper>
         <Container>
@@ -79,12 +79,16 @@ class Devtools extends React.Component<Connect> {
           </Text>
           <form onSubmit={this.onPortSubmit}>
             <Input
-              value={appState.newPortValue}
-              onChange={actions.changeNewPortValue}
+              value={app.state.newPortValue}
+              onChange={app.actions.changeNewPortValue}
               length={4}
               placeholder="port..."
               addon={
-                <Button type="submit" disabled={!appState.newPortValue} primary>
+                <Button
+                  type="submit"
+                  disabled={!app.state.newPortValue}
+                  primary
+                >
                   Add
                 </Button>
               }
@@ -95,17 +99,17 @@ class Devtools extends React.Component<Connect> {
     )
   }
   render() {
-    const { appState } = this.props
+    const { app } = this.props
 
-    if (appState.isLoading) {
+    if (app.state.isLoading) {
       return (
         <Wrapper>
           <h1>loading...</h1>
         </Wrapper>
       )
     }
 
-    if (Object.keys(appState.apps).length) {
+    if (Object.keys(app.state.apps).length) {
       return <Workspace />
     }