docs(website): improve structuring the app guide

Author: christianalfoni

packages/overmind-website/examples/guide/structuringtheapp/actions.ts

@@ -0,0 +1,42 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/posts/actions.ts',
+          code: `
+import { Action } from 'overmind'
+
+export const getPosts: Action = () => {}
+
+export const addNewPost: Action = () => {}
+`,
+        },
+        {
+          fileName: 'overmind/admin/actions.ts',
+          code: `
+import { Action } from 'overmind'
+
+export const getUsers: Action = () => {}
+
+export const changeUserAccess: Action = () => {}
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/posts/actions.js',
+          code: `
+export const getPosts = () => {}
+
+export const addNewPost = () => {}
+`,
+        },
+        {
+          fileName: 'overmind/admin/actions.js',
+          code: `
+export const getUsers = () => {}
+
+export const changeUserAccess = () => {}
+`,
+        },
+      ]

packages/overmind-website/examples/guide/structuringtheapp/effects.ts

@@ -0,0 +1,38 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/posts/effects.ts',
+          code: `
+export const postsApi = {
+  getPostsFromServer(): Promise<Post[]> {}
+}
+`,
+        },
+        {
+          fileName: 'overmind/admin/effects.ts',
+          code: `
+export const adminApi = {
+  getUsersFromServer(): Promise<User[]> {}
+}
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/posts/effects.js',
+          code: `
+export const postsApi = {
+  getPostsFromServer() {}
+}
+`,
+        },
+        {
+          fileName: 'overmind/admin/effects.js',
+          code: `
+export const adminApi = {
+  getUsersFromServer() {}
+}
+`,
+        },
+      ]

packages/overmind-website/examples/guide/structuringtheapp/namespaced.ts

@@ -1,6 +1,34 @@
 export default (ts, view) =>
   ts
     ? [
+        {
+          fileName: 'overmind/posts/index.ts',
+          code: `
+import { state } from './state'
+import * as actions from './actions'
+import * as effects from './effects'
+
+export {
+  state,
+  actions,
+  effects
+}
+`,
+        },
+        {
+          fileName: 'overmind/admin/index.ts',
+          code: `
+import { state } from './state'
+import * as actions from './actions'
+import * as effects from './effects'
+
+export {
+  state,
+  actions,
+  effects
+}
+`,
+        },
         {
           fileName: 'overmind/index.ts',
           code: `
@@ -23,6 +51,34 @@ const overmind = new Overmind(config)
         },
       ]
     : [
+        {
+          fileName: 'overmind/posts/index.js',
+          code: `
+import { state } from './state'
+import * as actions from './actions'
+import * as effects from './effects'
+
+export {
+  state,
+  actions,
+  effects
+}
+`,
+        },
+        {
+          fileName: 'overmind/admin/index.js',
+          code: `
+import { state } from './state'
+import * as actions from './actions'
+import * as effects from './effects'
+
+export {
+  state,
+  actions,
+  effects
+}
+`,
+        },
         {
           fileName: 'overmind/index.js',
           code: `

packages/overmind-website/examples/guide/structuringtheapp/state.ts

@@ -0,0 +1,56 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/posts/state.ts',
+          code: `
+export type Post = {
+  id: number
+  title: string
+}
+
+export type State = {
+  posts: Post[]
+}
+
+export const state: State = {
+  posts: []
+}
+`,
+        },
+        {
+          fileName: 'overmind/admin/state.ts',
+          code: `
+export type User = {
+  id: number
+  name: string
+}
+          
+export type State = {
+  users: User[]
+}
+
+export const state: State = {
+  users: []
+}
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/posts/state.js',
+          code: `
+export const state = {
+  posts: []
+}
+`,
+        },
+        {
+          fileName: 'overmind/admin/state.js',
+          code: `
+export const state = {
+  users: []
+}
+`,
+        },
+      ]

packages/overmind-website/guides/beginner/05_structuringtheapp.md

@@ -24,7 +24,35 @@ But if we want to split up into actual domains it would look more like this:
 h(Example, { name: "guide/structuringtheapp/domains" })
 ```
 
-In this case each domain **index** file bring its own state, actions and effects together and the **app/index** file is responsible for bringing the configuration together. Let us look at how that can be accomplished.
+In this case each domain **index** file bring its own state, actions and effects together and the **app/index** file is responsible for bringing the configuration together.
+
+## The state file
+
+You will typically define your **state** file by exporting a single constant named *state*.
+
+```marksy
+h(Example, { name: "guide/structuringtheapp/state" })
+```
+
+## The actions file
+
+The actions are exported individually by giving them a name and a definition.
+
+```marksy
+h(Example, { name: "guide/structuringtheapp/actions" })
+```
+
+## The effects file
+
+The effects are also exported individually where you would typically organize the methods in an object, but this could have been a class instance or just a plain function as well.
+
+```marksy
+h(Example, { name: "guide/structuringtheapp/effects" })
+```
+
+## Bring it together
+
+Now let us export the state, actions and effects for each module and bring it all together into a **namespaced** configuration.
 
 ```marksy
 h(Example, { name: "guide/structuringtheapp/namespaced" })