docs(website): update website to latest changes

christianalfoni · christianalfoni · commit 0bca557ace3b · 2018-10-13T22:03:23.000+02:00
diff --git a/packages/overmind-website/api/action.md b/packages/overmind-website/api/action.md
@@ -12,7 +12,7 @@ The action is built up by **operators**, methods called on the action itself. Th
 
 ## attempt
 ```marksy
-h(Example, { name: "api/action_try" })
+h(Example, { name: "api/action_attempt" })
 ```
 
 Typically used to explicitly handle potentially thrown errors from an effect.
diff --git a/packages/overmind-website/api/onInitialize.md b/packages/overmind-website/api/onInitialize.md
@@ -1,9 +1,11 @@
 # OnInitialize
 
-If you need to run logic as the application initializes you can use the **onInitialize** hook. This is defined as an action.
+If you need to run logic as the application initializes you can use the **onInitialize** hook. This is defined as a callback and it receives the instance of the application. You can do whatever you want here. Run an action, configure a router etc.
 
 ```marksy
 h(Example, { name: "api/onInitialize" })
 ```
 
-Overmind will first run any module defined onInitialize in parallel. After that the main onInitialize runs. You can see this in the devtools as well. The reason it works this way is because you module defined onInitialize indicates that you want to prepare something related to that module specifically, you do not care about the rest. The root onInitialize covers all the modules and allows you to orchestrate logic when those are indeed ready.
+Overmind will run this logic as a promise, meaning that you can return an action you want to run and can later outside of the application detect when the initialization is done. This promise is named **initialized** and can be used as such:
+
+When you use **modules** all the *onInitialize* will run in parallel.
diff --git a/packages/overmind-website/examples/api/action_attempt.ts b/packages/overmind-website/examples/api/action_attempt.ts
@@ -6,8 +6,8 @@ export default (ts) =>
           code: `
 import { Operation } from 'overmind'
 
-export const getItems: Operation.Attempt<Promise<Items>> = ({ http }) =>
-  http.get('/items')
+export const getItems: Operation.Attempt<Promise<Items>> = ({ effects }) =>
+  effects.http.get('/items')
   `,
         },
         {
@@ -32,8 +32,8 @@ export const doThis: Action = action =>
         {
           fileName: 'app/operations.js',
           code: `
-export const getItems = ({ http }) =>
-  http.get('/items')
+export const getItems = ({ effects }) =>
+  effects.http.get('/items')
   `,
         },
         {
diff --git a/packages/overmind-website/examples/api/action_filter.ts b/packages/overmind-website/examples/api/action_filter.ts
@@ -6,10 +6,10 @@ export default (ts) =>
           code: `
 import { Operation } from 'overmind'
 
-export const isOnline: Operation.Filter = ({ connection }) =>
-  connection.isOnline()
+export const isOnline: Operation.Filter = ({ effects }) =>
+  effects.connection.isOnline()
 
-export const isGreatherThan2: Operation.Filter<string> = (_, value) =>
+export const isGreatherThan2: Operation.Filter<string> = ({ value }) =>
   value.length > 2
   `,
         },
@@ -29,10 +29,10 @@ export const doThis: Action<string> = action =>
         {
           fileName: 'app/operations.js',
           code: `
-export const isOnline = ({ connection }) =>
-  connection.isOnline()
+export const isOnline = ({ effects }) =>
+  effects.connection.isOnline()
 
-export const isGreaterThan2 = (_, value) =>
+export const isGreaterThan2 = ({ value }) =>
   value.length > 2
   `,
         },
diff --git a/packages/overmind-website/examples/api/action_map.ts b/packages/overmind-website/examples/api/action_map.ts
@@ -7,10 +7,10 @@ export default (ts) =>
 import { Operation } from 'overmind'
 
 export const getUser: Operation.Map<string, Promise<User>> =
-  ({ http }, id) => http.get(\`/users/\${id}\`)
+  ({ effects, value: id }) => effects.http.get(\`/users/\${id}\`)
 
 export const trim: Operation.Map<string, string> =
-  (_, value) => value.trim()
+  ({ value }) => value.trim()
   `,
         },
         {
@@ -29,7 +29,7 @@ export const doThis: Action<string> = action =>
         {
           fileName: 'app/operations.js',
           code: `
-export const getUser = ({ http }, id) =>
+export const getUser = ({ effects, value: id }) =>
   http.get(\`/users/\${id}\`)
 
 export const trim = (_, value) =>
diff --git a/packages/overmind-website/examples/api/action_mutation.ts b/packages/overmind-website/examples/api/action_mutation.ts
@@ -6,10 +6,10 @@ export default (ts) =>
           code: `
 import { Mutate } from 'overmind'
 
-export const setLoading: Mutate = state =>
+export const setLoading: Mutate = ({ state }) =>
   state.isLoading = true
 
-export const setInputValue: Mutate<string> = (state, value) =>
+export const setInputValue: Mutate<string> = ({ state, value }) =>
   state.inputValue = value
     `,
         },
@@ -29,10 +29,10 @@ export const doThis: Action<string> = action =>
         {
           fileName: 'app/mutations.js',
           code: `
-export const setLoading = state =>
+export const setLoading = ({ state }) =>
   state.isLoading = true
 
-export const setInputValue = (state, value) =>
+export const setInputValue = ({ state, value }) =>
   state.inputValue = value
     `,
         },
diff --git a/packages/overmind-website/examples/api/action_run.ts b/packages/overmind-website/examples/api/action_run.ts
@@ -6,8 +6,8 @@ export default (ts) =>
           code: `
 import { Operation } from 'overmind'
 
-export const trackSubmitForm: Operation.Run = ({ state, track }) =>
-  track.interaction('login', Boolean(state.user))
+export const trackSubmitForm: Operation.Run = ({ state, effects }) =>
+  effects.track.interaction('login', Boolean(state.user))
     `,
         },
         {
@@ -35,8 +35,8 @@ export const login: Action = (action) =>
         {
           fileName: 'app/operations.js',
           code: `
-export const trackSubmitForm = ({ track }) =>
-  track.interaction('submitForm')    
+export const trackSubmitForm = ({ effects }) =>
+  effects.track.interaction('submitForm')    
     `,
         },
         {
diff --git a/packages/overmind-website/examples/api/action_when.ts b/packages/overmind-website/examples/api/action_when.ts
@@ -6,8 +6,8 @@ export default (ts) =>
           code: `
 import { Operation } from 'overmind'
 
-export const hasToken: Operation.When = ({ localStorage }) =>
-  Boolean(localStorage.get('token'))
+export const hasToken: Operation.When = ({ effects }) =>
+  Boolean(effects.localStorage.get('token'))
   `,
         },
         {
@@ -32,8 +32,8 @@ export const doThis: Action = action =>
         {
           fileName: 'app/operations.js',
           code: `
-export const hasToken = ({ localStorage }) =>
-  Boolean(localStorage.get('token'))
+export const hasToken = ({ effects }) =>
+  Boolean(effects.localStorage.get('token'))
   `,
         },
         {
diff --git a/packages/overmind-website/examples/api/onInitialize.ts b/packages/overmind-website/examples/api/onInitialize.ts
@@ -3,16 +3,25 @@ import { tsAppIndex } from '../templates'
 export default (ts, view) =>
   ts
     ? [
+        {
+          fileName: 'app/onInitialize.ts',
+          code: `
+import { OnInitialize } from 'overmind'
+
+const onInitialize: OnInitialize = (app) => app.actions.loadData()
+
+export default onInitialize
+`,
+        },
         {
           fileName: 'app/index.ts',
           code: tsAppIndex(
             view,
             `
+import onInitialize from './onInitialize'
 import * as state from './state'
 import * as actions from './actions'
 
-const onInitialize: Action = actions.initialize
-
 const config = {
   onInitialize,
   state,
@@ -23,15 +32,20 @@ const config = {
         },
       ]
     : [
+        {
+          fileName: 'app/onInitialize.ts',
+          code: `
+export default = (app) => app.actions.loadData()
+`,
+        },
         {
           fileName: 'app/index.js',
           code: `
 import App from 'overmind-${view}'
+import onInitialize from './onInitialize'
 import * as state from './state'
 import * as actions from './actions'
 
-const onInitialize = actions.initialize
-
 const app = new App({
   onInitialize,
   state,
diff --git a/packages/overmind-website/examples/guide/creatingactions/mutations.ts b/packages/overmind-website/examples/guide/creatingactions/mutations.ts
@@ -6,13 +6,13 @@ export default (ts) =>
           code: `
 import { Mutate } from 'overmind'
 
-export const setValue: Mutate = state =>
+export const setValue: Mutate = ({ state }) =>
   state.value = 'foo'
 
-export const setValueFromAction: Mutate<string> = (state, value) =>
+export const setValueFromAction: Mutate<string> = ({ state, value }) =>
   state.value2 = value
 
-export const setValueFromState: Mutate = state =>
+export const setValueFromState: Mutate = ({ state }) =>
   state.value3 = state.value
   `,
         },
@@ -34,13 +34,13 @@ export const setValues: Action<string> = action =>
         {
           fileName: 'app/mutations.js',
           code: `
-export const setValue = state =>
+export const setValue = ({ state }) =>
   state.value = 'foo'
 
-export const setValueFromAction = (state, value) =>
+export const setValueFromAction = ({ state, value }) =>
   state.value2 = value
 
-export const setValueFromState = state =>
+export const setValueFromState = ({ state }) =>
   state.value3 = state.value
   `,
         },
diff --git a/packages/overmind-website/examples/guide/getstarted/mutations.ts b/packages/overmind-website/examples/guide/getstarted/mutations.ts
@@ -21,13 +21,13 @@ export let posts: Post[] = []
 import { Mutate } from 'overmind'
 import { Post } from './state'
 
-export const setLoadingPosts: Mutate = state =>
+export const setLoadingPosts: Mutate = ({ state }) =>
   state.isLoadingPosts = true
 
-export const unsetLoadingPosts: Mutate = state =>
+export const unsetLoadingPosts: Mutate = ({ state }) =>
   state.isLoadingPosts = false
 
-export const setPosts: Mutate<Post[]> = (state, posts) =>
+export const setPosts: Mutate<Post[]> = ({ state, value: posts }) =>
   state.posts = posts
   `,
         },
@@ -44,13 +44,13 @@ export let posts = []
         {
           fileName: 'app/mutations.js',
           code: `
-export const setLoadingPosts = state =>
+export const setLoadingPosts = ({ state }) =>
   state.isLoadingPosts = true
 
-export const unsetLoadingPosts = state =>
+export const unsetLoadingPosts = ({ state }) =>
   state.isLoadingPosts = false
 
-export const setPosts = (state, posts) =>
+export const setPosts = ({ state, value: posts }) =>
   state.posts = posts
   `,
         },
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[]>> =
-  ({ jsonPlaceholder }) => jsonPlaceholder.getPosts()
+  ({ effects }) => effects.jsonPlaceholder.getPosts()
   `,
         },
       ]
@@ -16,7 +16,7 @@ export const getPosts: Operation.Map<any, Promise<Post[]>> =
           fileName: 'app/operations.js',
           code: `
 export const getPosts =
-  ({ jsonPlaceholder }) => jsonPlaceholder.getPosts()
+  ({ effects }) => effects.jsonPlaceholder.getPosts()
   `,
         },
       ]
diff --git a/packages/overmind-website/examples/guide/routing/pagejs.ts b/packages/overmind-website/examples/guide/routing/pagejs.ts
@@ -0,0 +1,40 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'app/onInitialize.ts',
+          code: `
+import { OnInitialize } from 'overmind'
+import page from 'page'
+
+const onInitialize: OnInitialize = (app) => {
+  const withParams = <T>(action: (payload: T) => any) => ({ params }) =>
+    action(params)
+
+  page('/', withParams(app.actions.showHomePage))
+  page('/users', withParams(app.actions.showUsersPage))
+  page('/users/:id', withParams<{
+    id: string
+  }>(app.actions.showUserModal))
+}
+
+export default onInitialize
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'app/onInitialize.js',
+          code: `
+import page from 'page'
+
+export default (app) => {
+  const withParams = (action) => ({ params }) => action(params)
+
+  page('/', withParams(app.actions.showHomePage))
+  page('/users', withParams(app.actions.showUsersPage))
+  page('/users/:id', withParams(app.actions.showUserModal))
+}
+`,
+        },
+      ]
diff --git a/packages/overmind-website/examples/guide/routing/query.ts b/packages/overmind-website/examples/guide/routing/query.ts
diff --git a/packages/overmind-website/examples/guide/routing/users.ts b/packages/overmind-website/examples/guide/routing/users.ts
diff --git a/packages/overmind-website/examples/guide/runningsideeffects/getuser.ts b/packages/overmind-website/examples/guide/runningsideeffects/getuser.ts
diff --git a/packages/overmind-website/guides/beginner/01_getstarted.md b/packages/overmind-website/guides/beginner/01_getstarted.md
