Merge pull request cerebral#183 from cerebral/proxyclasses

Proxyclasses

Author: christianalfoni

packages/node_modules/overmind/src/index.ts

@@ -18,6 +18,7 @@ import {
   ResolveState,
   Execution,
   ResolveMockActions,
+  NestedPartial,
 } from './internalTypes'
 import { proxifyEffects } from './proxyfyEffects'
 import {
@@ -78,7 +79,7 @@ function deepCopy(obj) {
 
 export function createMock<Config extends Configuration>(
   config: Config,
-  mockedEffects?: Partial<Config['effects']>
+  mockedEffects?: NestedPartial<Config['effects']>
 ): {
   actions: ResolveMockActions<Config['actions']>
   state: ResolveState<Config['state']>

packages/node_modules/overmind/src/internalTypes.ts

@@ -6,6 +6,10 @@ export type SubType<Base, Condition> = Pick<
   { [Key in keyof Base]: Base[Key] extends Condition ? Key : never }[keyof Base]
 >
 
+export type NestedPartial<T> = T extends object
+  ? Partial<{ [P in keyof T]: NestedPartial<T[P]> }>
+  : T
+
 export type Options = {
   name?: string
   devtools?: string | boolean

packages/node_modules/overmind/src/proxyfyEffects.ts

@@ -12,7 +12,7 @@ function wrapEffect(target, prop, path, cb) {
     const effectId = currentEffectId++
 
     return cb({
-      func: target[prop],
+      func: target[prop].bind(target),
       effectId,
       name: path,
       method: prop,

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

@@ -21,10 +21,12 @@ export const loadPosts: Action = async ({ state, jsonPlaceholder }) => {
             view,
             `
 import { state } from './state'
+import * as effects from './effects'
 import * as actions from './actions'
 
 const config = {
   state,
+  effects,
   actions
 }
 `
@@ -43,6 +45,12 @@ export const overmind = new Overmind({
     isLoadingPosts: false,
     posts: []
   },
+  effects: {
+    getPosts() {
+      return fetch('https://jsonplaceholder.typicode.com/posts')
+        .then(response => response.json())
+    }
+  },
   actions: {
     loadPosts: async ({ state, jsonPlaceholder }) => {
       state.isLoadingPosts = true

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

@@ -22,12 +22,10 @@ export const jsonPlaceholder = {
             view,
             `
 import state from './state'
-import * as actions from './actions'
 import * as effects from './effects'
 
 const config = {
   state,
-  actions,
   effects
 }
     `
@@ -46,13 +44,6 @@ export const overmind = new Overmind({
     isLoadingPosts: false,
     posts: []
   },
-  actions: {
-    loadPosts: async ({ state, jsonPlaceholder }) => {
-      state.isLoadingPosts = true
-      state.posts = await jsonPlaceholder.getPosts()
-      state.isLoadingPosts = false
-    }
-  },
   effects: {
     getPosts() {
       return fetch('https://jsonplaceholder.typicode.com/posts')

packages/overmind-website/guides/beginner/01_getstarted.md

@@ -36,22 +36,20 @@ h(Example, { name: "guide/getstarted/connectapp" })
 
 That is it, your component will now render whenever the state accessed changes. 
 
-## Loading posts
+## Effects
 
-We want to load some posts from [jsonplaceholder](https://jsonplaceholder.typicode.com/) when the **Posts** component mounts. To run logic in Overmind you trigger **actions**. Let us define an action that is responsible for getting our application up and running.
+We want to load some posts from [jsonplaceholder](https://jsonplaceholder.typicode.com/) when the **Posts** component mounts. This requires a side effect and we can expose any kind of side effects to our Overmind instance. Think of it as injecting libraries and tools. For example, it could be the [axios](https://www.npmjs.com/package/axios) library itself, some class instance we created or just a plain object as we see in the example below. Doing this injection keeps our logic pure and Overmind knows when these injected libraries are accessed, giving you a better developer experience.
 
 ```marksy
-h(Example, { name: "guide/getstarted/actions" })
+h(Example, { name: "guide/getstarted/effects" })
 ```
 
-Let us see how we define this effect called **jsonPlaceholder**.
+## Loading the posts
 
-## Effects
-
-We can expose any kind of side effects to our Overmind instance. Think of it as injecting libraries and tools. For example, it could be the [axios](https://www.npmjs.com/package/axios) library itself, some class instance we created or just a plain object as we see in the example below. Doing this injection keeps our actions pure and Overmind knows when these injected libraries are accessed.
+ To run logic in Overmind you trigger **actions**. Let us define an action that is responsible for getting our application up and running.
 
 ```marksy
-h(Example, { name: "guide/getstarted/effects" })
+h(Example, { name: "guide/getstarted/actions" })
 ```
 
 Finally we need to trigger our action and we will do that when the component mounts.

packages/overmind-website/src/components/App/styles.ts

@@ -1,7 +1,7 @@
 import { css } from 'emotion'
 
 export const pageWrapper = css`
-  min-height: calc(100vh - 198px);
+  min-height: calc(100vh);
 `
 
 export const wrapper = css`

packages/overmind-website/src/components/Guides/styles.ts

@@ -8,6 +8,7 @@ export const wrapper = css`
   margin-top: 50px;
   margin-left: auto;
   margin-right: auto;
+  justify-content: center;
 `
 
 export const guide = css`

packages/overmind-website/src/components/Videos/styles.ts

@@ -7,6 +7,7 @@ export const wrapper = css`
   padding: var(--padding-5);
   flex-wrap: wrap;
   margin-top: 50px;
+  justify-content: center;
 `
 
 export const video = css`

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

@@ -4,7 +4,7 @@ import * as ReactImage from '../../images/react.png'
 import * as VueImage from '../../images/vue.png'
 import * as AngularImage from '../../images/angular.png'
 import * as TsImage from '../../images/ts.png'
-import * as TsImageGrayscale from '../../images/ts-grayscale.png'
+import * as JsImage from '../../images/js.png'
 import Icon from '../Icon'
 import * as styles from './styles'
 import { css } from 'emotion'
@@ -25,49 +25,44 @@ const ViewSelector: SFC = () => {
   }
 
   const options = {
+    vue: (
+      <div className={styles.viewOption}>
+        <img src={VueImage} width={25} />
+        Vue
+        <img className={styles.image} src={JsImage} width="20" height="20" />
+      </div>
+    ),
     react: (
       <div className={styles.viewOption}>
         <img src={ReactImage} width={25} />
         React
+        <img className={styles.image} src={JsImage} width="20" height="20" />
       </div>
     ),
-    vue: (
+    react_ts: (
       <div className={styles.viewOption}>
-        <img src={VueImage} width={25} />
-        Vue
+        <img src={ReactImage} width={25} />
+        React
+        <img className={styles.image} src={TsImage} width="20" height="20" />
       </div>
     ),
-    angular: (
+    angular_ts: (
       <div className={styles.viewOption}>
         <img src={AngularImage} width={25} />
         Angular
+        <img className={styles.image} src={TsImage} width="20" height="20" />
       </div>
     ),
   }
 
   return (
     <div className={styles.wrapper}>
-      <div
-        className={styles.tsImageWrapper}
-        onClick={state.showViewHelp ? null : actions.toggleTypescript}
-      >
-        {state.typescript ? (
-          <img className={styles.image} src={TsImage} width="20" height="20" />
-        ) : (
-          <img
-            className={css(styles.image, styles.grayscale)}
-            src={TsImageGrayscale}
-            width="20"
-            height="20"
-          />
-        )}
-      </div>
       <div
         ref={selectorRef}
         onClick={state.showViewHelp ? null : onSelectorClick}
         className={css(styles.selector, isOpen && styles.selectorOpen)}
       >
-        {options[state.theme]}
+        {options[state.theme + (state.typescript ? '_ts' : '')]}
         <span className={styles.chevron}>
           <Icon>chevron-down</Icon>
         </span>