Merge pull request cerebral#124 from cerebral/docUpdates

christianalfoni · web-flow · commit d2132b471d7b · 2018-10-22T19:49:23.000+02:00
docs(website): update docs to match current api
diff --git a/packages/overmind-website/examples/guide/connectingcomponents/array_1.ts b/packages/overmind-website/examples/guide/connectingcomponents/array_1.ts
@@ -40,7 +40,7 @@ const typescript = {
       fileName: 'components/List.tsx',
       code: `
 import * as React from 'react'
-import { Connect } from './app'
+import { connect, Connect } from './app'
 
 const List: React.SFC<Connect> = ({ app }) => (
   <h1>{app.state.items}</h1>
diff --git a/packages/overmind-website/examples/guide/connectingcomponents/array_2.ts b/packages/overmind-website/examples/guide/connectingcomponents/array_2.ts
@@ -48,7 +48,7 @@ const typescript = {
       fileName: 'components/List.tsx',
       code: `
 import * as React from 'react'
-import { Connect } from './app'
+import { connect, Connect } from './app'
 
 const List: React.SFC<Connect> = ({ app }) => (
   <ul>
diff --git a/packages/overmind-website/examples/guide/connectingcomponents/array_3.ts b/packages/overmind-website/examples/guide/connectingcomponents/array_3.ts
@@ -83,7 +83,7 @@ const typescript = {
       fileName: 'components/Item.jsx',
       code: `
 import React from 'react'
-import { Connect } from './app'
+import { connect, Connect } from './app'
 
 type Props = {
   item: { title: string }
@@ -100,7 +100,7 @@ export default connect(Item)
       fileName: 'components/List.tsx',
       code: `
 import * as React from 'react'
-import { Connect } from './app'
+import { connect, Connect } from './app'
 import Item from './Item'
 
 const List: React.SFC<Connect> = ({ app }) => (
diff --git a/packages/overmind-website/examples/guide/connectingcomponents/connect.ts b/packages/overmind-website/examples/guide/connectingcomponents/connect.ts
@@ -47,7 +47,7 @@ const typescript = {
       fileName: 'components/App.tsx',
       code: `
 import * as React from 'react'
-import { Connect } from './app'
+import { connect, Connect } from '../app'
 
 const App: React.SFC<Connect> = ({ app }) => {
   if (app.state.isLoading) {
@@ -64,7 +64,7 @@ export default connect(App)
   vue: javascript.vue,
   angular: [
     {
-      fileName: 'app.component.js',
+      fileName: 'app.component.ts',
       code: `
 import { Component } from '@angular/core';
 import { connect } from '../app'
diff --git a/packages/overmind-website/examples/guide/connectingcomponents/object_1.ts b/packages/overmind-website/examples/guide/connectingcomponents/object_1.ts
@@ -40,7 +40,7 @@ const typescript = {
       fileName: 'components/List.tsx',
       code: `
 import * as React from 'react'
-import { Connect } from './app'
+import { connect, Connect } from './app'
 
 const List: React.SFC<Connect> = ({ app }) => (
   <h1>{app.state.items}</h1>
diff --git a/packages/overmind-website/examples/guide/connectingcomponents/object_2.ts b/packages/overmind-website/examples/guide/connectingcomponents/object_2.ts
@@ -83,7 +83,7 @@ const typescript = {
       fileName: 'components/Item.jsx',
       code: `
 import React from 'react'
-import { Connect } from './app'
+import { connect, Connect } from './app'
 
 type Props = {
   item: { title: string }
@@ -100,7 +100,7 @@ export default connect(Item)
       fileName: 'components/List.tsx',
       code: `
 import * as React from 'react'
-import { Connect } from './app'
+import { connect, Connect } from './app'
 import Item from './Item'
 
 const List: React.SFC<Connect> = ({ app }) => (
diff --git a/packages/overmind-website/examples/guide/creatingactions/composing.ts b/packages/overmind-website/examples/guide/creatingactions/composing.ts
@@ -17,7 +17,7 @@ export const initializeApp: Action = action =>
   action
     .when(operations.hasValidToken, {
       true: loadApplication,
-      false: action => getValidToken(action).compose(loadApplication)
+      false: getValidToken
     })
   `,
         },
@@ -38,7 +38,7 @@ export const initializeApp = action =>
   action
     .when(operations.hasValidToken, {
       true: loadApplication,
-      false: action => getValidToken(action).compose(loadApplication)
+      false: getValidToken
     })
   `,
         },
diff --git a/packages/overmind-website/examples/guide/creatingactions/instead.ts b/packages/overmind-website/examples/guide/creatingactions/instead.ts
@@ -4,7 +4,7 @@ export default (ts) =>
         {
           fileName: 'app/actions.ts',
           code: `
-import { Action } from 'overmind'
+import { Action, action } from 'overmind'
 
 export const initializeApp: Action = action
   `,
@@ -14,6 +14,8 @@ export const initializeApp: Action = action
         {
           fileName: 'app/actions.js',
           code: `
+import { action } from 'overmind'
+
 export const initializeApp = action
   `,
         },
diff --git a/packages/overmind-website/examples/guide/getstarted/operations.ts b/packages/overmind-website/examples/guide/getstarted/operations.ts
@@ -7,7 +7,7 @@ export default (ts) =>
 import { Operation } from 'overmind'
 
 export const getPosts: Operation.Map<any, Promise<Post[]>> =
-  ({ effects }) => effects.jsonPlaceholder.getPosts()
+  ({ jsonPlaceholder }) => jsonPlaceholder.getPosts()
   `,
         },
       ]
@@ -16,7 +16,7 @@ export const getPosts: Operation.Map<any, Promise<Post[]>> =
           fileName: 'app/operations.js',
           code: `
 export const getPosts =
-  ({ effects }) => effects.jsonPlaceholder.getPosts()
+  ({ jsonPlaceholder }) => jsonPlaceholder.getPosts()
   `,
         },
       ]
diff --git a/packages/overmind-website/examples/guide/routing/effect.ts b/packages/overmind-website/examples/guide/routing/effect.ts
@@ -0,0 +1,34 @@
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'app/effects.ts',
+          code: `
+import page from 'page'
+
+export const router = {
+  route<T extends object>(route: string, action: (params: T) => void) {
+    page(route, ({ params }) => action(params))
+  },
+  start: () => page.start(),
+  open: (url: string) => page.show(url)
+}
+  `,
+        },
+      ]
+    : [
+        {
+          fileName: 'app/effects.js',
+          code: `
+import page from 'page'
+
+export const router = {
+  route(route, action) {
+    page(route, ({ params }) => action(params))
+  },
+  start: () => page.start(),
+  open: (url) => page.show(url)
+}
+  `,
+        },
+      ]
diff --git a/packages/overmind-website/examples/guide/routing/pagejs.ts b/packages/overmind-website/examples/guide/routing/pagejs.ts
@@ -1,40 +1,53 @@
-export default (ts, view) =>
+export default (ts) =>
   ts
     ? [
         {
-          fileName: 'app/onInitialize.ts',
+          fileName: 'app/operations.ts',
           code: `
-import { OnInitialize } from 'overmind'
-import page from 'page'
+import { App, Operation } from 'overmind'
 
-const onInitialize: OnInitialize = (app) => {
-  const withParams = <T>(action: (payload: T) => any) => ({ params }) =>
-    action(params)
+export const initializeRouter: Operation.Run<App> = ({ router, value: app }) => {
+  router.route('/', app.actions.showHomePage)
+  router.route('/users', app.actions.showUsersPage)
+  router.route<{ id: string }>('/users/:id', app.actions.showUserModal)
+  router.start()
+}             
+`,
+        },
+        {
+          fileName: 'app/onInitialize.ts',
+          code: `
+import { OnInitialize} from 'overmind'
+import * as operations from './operations'
 
-  page('/', withParams(app.actions.showHomePage))
-  page('/users', withParams(app.actions.showUsersPage))
-  page('/users/:id', withParams<{
-    id: string
-  }>(app.actions.showUserModal))
-}
+const onInitialize: OnInitialize = (action) => 
+  action.run(operations.initializeRouter)
 
 export default onInitialize
 `,
         },
       ]
     : [
         {
-          fileName: 'app/onInitialize.js',
+          fileName: 'app/operations.js',
           code: `
-import page from 'page'
+export const initializeRouter = ({ router, value: app }) => {
+  router.route('/', app.actions.showHomePage)
+  router.route('/users', app.actions.showUsersPage)
+  router.route('/users/:id', app.actions.showUserModal)
+  router.start()
+}             
+`,
+        },
+        {
+          fileName: 'app/onInitialize.ts',
+          code: `
+import * as operations from './operations'
 
-export default (app) => {
-  const withParams = (action) => ({ params }) => action(params)
+const onInitialize = (action) => 
+  action.run(operations.initializeRouter)
 
-  page('/', withParams(app.actions.showHomePage))
-  page('/users', withParams(app.actions.showUsersPage))
-  page('/users/:id', withParams(app.actions.showUserModal))
-}
+export default onInitialize
 `,
         },
       ]
diff --git a/packages/overmind-website/examples/guide/routing/query.ts b/packages/overmind-website/examples/guide/routing/query.ts
@@ -1,43 +1,44 @@
-export default (ts, view) =>
+export default (ts) =>
   ts
     ? [
         {
-          fileName: 'app/onInitialize.ts',
+          fileName: 'app/effects.ts',
           code: `
-import { OnInitialize } from 'overmind'
 import page from 'page'
 import queryString from 'query-string'
 
-const onInitialize: OnInitialize = (app) => {
-  const withParamsAndQuery = <T>(action: (payload: T) => any) => ({ params, querystring }) =>
-    action(Object.assign({}, params, queryString.parse(querystring)))
+export const router = {
+  route<T extends object>(route: string, action: (params: T) => void) {
+    page(route, ({ params, querystring }) => {
+      const payload = Object.assign({}, params, queryString.parse(querystring))
 
-  page('/', withParamsAndQuery(app.actions.showHomePage))
-  page('/users', withParamsAndQuery(app.actions.showUsersPage))
-  page('/users/:id', withParamsAndQuery<{
-    id: string,
-    tabIndex: number
-  }>(app.actions.showUserModal))
+      action(payload)
+    })
+  },
+  start: () => page.start(),
+  open: (url: string) => page.show(url)
 }
-
-export default onInitialize
-`,
+  `,
         },
       ]
     : [
         {
-          fileName: 'app/onInitialize.js',
+          fileName: 'app/effects.js',
           code: `
 import page from 'page'
+import queryString from 'query-string'
 
-export default (app) => {
-  const withParamsAndQuery = (action) => ({ params, querystring }) =>
-    action(Object.assign({}, params, queryString.parse(querystring)))
+export const router = {
+  route(route, action) {
+    page(route, ({ params, querystring }) => {
+      const payload = Object.assign({}, params, queryString.parse(querystring))
 
-  page('/', withParamsAndQuery(app.actions.showHomePage))
-  page('/users', withParamsAndQuery(app.actions.showUsersPage))
-  page('/users/:id', withParamsAndQuery(app.actions.showUserModal))
+      action(payload)
+    })
+  },
+  start: () => page.start(),
+  open: (url) => page.show(url)
 }
-`,
+  `,
         },
       ]
diff --git a/packages/overmind-website/examples/guide/runningsideeffects/getuser.ts b/packages/overmind-website/examples/guide/runningsideeffects/getuser.ts
@@ -7,17 +7,17 @@ export default (ts) =>
 import { Operation } from 'overmind'
 import { User } from './state'
 
-export const getUser: Operation.Map<any, Promise<User>> = ({ effects }) =>
-  effects.http.get<User>('/user')
+export const getUser: Operation.Map<any, Promise<User>> = ({ http }) =>
+  http.get<User>('/user')
   `,
         },
       ]
     : [
         {
           fileName: 'app/operations.js',
           code: `
-export const getUser = ({ effects }) =>
-  effects.http.get('/user')
+export const getUser = ({ http }) =>
+  http.get('/user')
   `,
         },
       ]
diff --git a/packages/overmind-website/guides/beginner/01_getstarted.md b/packages/overmind-website/guides/beginner/01_getstarted.md
@@ -60,7 +60,7 @@ Other operations like **map** has a very similar signature, though it will also
 h(Example, { name: "guide/getstarted/operations" })
 ```
 
-We want to add an effect to our application called **jsonPlaceholder** api, which we can use with the **map** operation to grab some data.
+Let us see how we define this effect called **jsonPlaceholder**.
 
 ## Effects
 
@@ -72,7 +72,7 @@ We can expose any kind of side effects to our Overmind instance. Think of it as
 
 ## Devtools
 
-At this stage, the benefits of writing an application code this way might not be obvious. It is usually when we start to deal with more complexity that the benefits become more obvious. But even with a somple app, there is one big benefit that comes right out of the box. In our **package.json** file, we add the following and the run the script.
+At this stage, the benefits of writing an application code this way might not be obvious. It is usually when we start to deal with more complexity that the benefits become more obvious. But even with a simple app, there is one big benefit that comes right out of the box. In our **package.json** file, we add the following and the run the script.
 
 ```marksy
 h(Example, { name: "guide/getstarted/devtools" })
diff --git a/packages/overmind-website/guides/beginner/02_definingstate.md b/packages/overmind-website/guides/beginner/02_definingstate.md
@@ -28,7 +28,7 @@ Arrays are in a way similar to objects in the sense that they hold other values,
 
 ### Strings
 
-Strings are of course used to represent text values. Names, descriptions and what not. But strings are also used for ids, types, etc: values used to reference other values. This is an important part in structuring state. For example in our **objects** example above we chose to use an array to represent the tabs, using an index to point to the current tab, but we could also do:
+Strings are of course used to represent text values. Names, descriptions and what not. But strings are also used for ids, types, etc. Strings can be used as values to reference other values. This is an important part in structuring state. For example in our **objects** example above we chose to use an array to represent the tabs, using an index to point to the current tab, but we could also do:
 
 ```marksy
 h(Example, { name: "guide/definingstate/strings" })
@@ -56,7 +56,7 @@ We define the state of the application in **state** files. For example, the top
 h(Example, { name: "guide/definingstate/define" })
 ```
 
-Note that we are exporting variables from our state module. We use **let** for values that can be replaced and **const** for values that can not be replaced. That would typically be derived or computed values, but you might also have arrays or objects that should not be replaced.
+Note that we are exporting variables from our state module. We use **let** for values that can be replaced and **const** for values that can not be replaced. That would typically be derived values, but you might also have arrays or objects that should not be replaced.
 
 As your application grows you will most likely move parts of the state to their own namespaces. An example of that could be:
 
diff --git a/packages/overmind-website/guides/beginner/03_connectingcomponents.md b/packages/overmind-website/guides/beginner/03_connectingcomponents.md
diff --git a/packages/overmind-website/guides/beginner/04_creatingactions.md b/packages/overmind-website/guides/beginner/04_creatingactions.md
diff --git a/packages/overmind-website/guides/beginner/05_runningsideeffects.md b/packages/overmind-website/guides/beginner/05_runningsideeffects.md
diff --git a/packages/overmind-website/guides/intermediate/01_routing.md b/packages/overmind-website/guides/intermediate/01_routing.md
diff --git a/packages/overmind-website/src/utils.tsx b/packages/overmind-website/src/utils.tsx
