docs(website): typos and stuff

Author: christianalfoni

packages/overmind-website/api/overmind.md

@@ -29,4 +29,11 @@ By default, in **development**, Overmind will make sure that any usage of **cons
 
 ```marksy
 h(Example, { name: "api/app_options_logproxies" })
+```
+
+## options.name
+If you have multiple instances of Overmind on the same page you can name your app to differentiate it in the devtools.
+
+```marksy
+h(Example, { name: "api/app_options_name" })
 ```

packages/overmind-website/examples/api/app_options_name.ts

@@ -0,0 +1,34 @@
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/index.ts',
+          code: `
+...
+
+export const overmindA = new Overmind(configA, {
+  name: 'appA'
+})
+
+export const overmindB = new Overmind(configB, {
+  name: 'appB'
+})
+        `,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/index.js',
+          code: `
+...
+
+export const overmindA = new Overmind(configA, {
+  name: 'appA'
+})
+
+export const overmindB = new Overmind(configB, {
+  name: 'appB'
+})
+`,
+        },
+      ]

packages/overmind-website/examples/frontpage/actions.ts

@@ -3,7 +3,7 @@ export default () => [
     code: `
 export const getItems = async ({ state, effects }) => {
   state.isLoadingItems = true
-  state.items = await effects.api.getItems()
+  state.items = await effects.api.fetchItems()
   state.isLoadingItems = false
 }
 `,

packages/overmind-website/examples/frontpage/effects.ts

@@ -1,11 +1,11 @@
 export default () => [
   {
     code: `
-import axios from 'axios'
-
 export const api = {
-  getItems() {
-    return axios.get('/api/items')
+  fetchItems: async () => {
+    const response = await fetch('/api/items')
+
+    return response.json()
   }
 }
 `,

packages/overmind-website/examples/frontpage/test.ts

@@ -1,17 +1,17 @@
 export default () => [
   {
     code: `
-import { createMock } from 'overmind'
+import { createOvermindMock } from 'overmind'
 import { config } from './'
 
 test('should get items', async () => {
-  const mock = createMock(config, {
+  const overmind = createOvermindMock(config, {
     api: {
-      getItems: () => Promise.resolve([{ id: 0, title: "foo" }])
+      fetchItems: () => Promise.resolve([{ id: 0, title: "foo" }])
     }
   })
 
-  const mutations = await actions.getItems()
+  const mutations = await overmind.actions.getItems()
   
   expect(mutations).toMatchSnapshot()
 })

packages/overmind-website/examples/guide/writingtests/actionsnapshot.ts

@@ -2,13 +2,13 @@ export default () => [
   {
     fileName: 'overmind/actions.test.ts',
     code: `
-import { createMock } from 'overmind'
+import { createOvermindMock } from 'overmind'
 import { config } from './'
 
 describe('Actions', () => {
   describe('getPost', () => {
     test('should get post with passed id', async () => {
-      const mock = createMock(config, {
+      const overmind = createOvermindMock(config, {
         api: {
           getPost(id) {
             return Promise.resolve({
@@ -18,20 +18,20 @@ describe('Actions', () => {
         }
       })
 
-      const mutations = await actions.getPost('1')
+      const mutations = await overmind.actions.getPost('1')
 
       expect(mutations).toMatchSnapshot()
     })
     test('should handle errors', async () => {
-      const mock = createMock(config, {
+      const overmind = createOvermindMock(config, {
         api = {
           getPost() {
             throw new Error('test')
           }
         }
       })
 
-      const mutations = await actions.getPost('1')
+      const mutations = await overmind.actions.getPost('1')
 
       expect(mutations).toMatchSnapshot()
     })

packages/overmind-website/examples/guide/writingtests/actiontest.ts

@@ -2,13 +2,13 @@ export default () => [
   {
     fileName: 'overmind/actions.test.ts',
     code: `
-import { createMock } from 'overmind'
+import { createOvermindMock } from 'overmind'
 import { config } from './'
 
 describe('Actions', () => {
   describe('getPost', () => {
     test('should get post with passed id', async () => {
-      const mock = createMock(config, {
+      const overmind = createOvermindMock(config, {
         api: {
           getPost(id) {
             return Promise.resolve({
@@ -18,27 +18,27 @@ describe('Actions', () => {
         }
       })
 
-      await actions.getPost('1')
+      await overmind.actions.getPost('1')
 
-      expect(mock.state).toEqual({
+      expect(overmind.state).toEqual({
         isLoadingPost: false,
         currentPost: { id: '1' },
         error: null
       })
     })
     test('should handle errors', async () => {
-      const mock = createMock(config, {
+      const overmind = createOvermindMock(config, {
         api = {
           getPost() {
             throw new Error('test')
           }
         }
       })
 
-      await actions.getPost('1')
+      await overmind.actions.getPost('1')
 
-      expect(mock.state.isLoadingPost).toBe(false)
-      expect(mock.state.error.message).toBe('test')
+      expect(overmind.state.isLoadingPost).toBe(false)
+      expect(overmind.state.error.message).toBe('test')
     })
   })
 })

packages/overmind-website/src/components/FrontPage/index.tsx

@@ -96,7 +96,7 @@ h(Example, { name: "frontpage/effects" })
             <div key="1">
               <h2>SEPARATION OF LOGIC</h2>
               <p>
-                Separate 3rd party apis and logic not specific to your
+                Separate 3rd party APIs and logic not specific to your
                 application by using <strong>effects</strong>. This will keep
                 your application logic pure and without low level APIs
                 cluttering your code
@@ -149,13 +149,12 @@ h(Example, { name: "frontpage/operators" })
               <h2>FUNCTIONAL ACTIONS</h2>
               <p>
                 When pieces of logic becomes complex it is beneficial to write
-                functional code. Overmind provides and API named{' '}
+                functional code. Overmind provides an API named{' '}
                 <strong>operators</strong> which gives you functional power as
                 simple actions
               </p>
             </div>,
           ][viewport.isMobile ? 'reverse' : 'slice']()}
-          }
         </div>
         <div
           className={css(