From b21509b7cf6e8c2ccfcda311a628a360ec3fe039 Mon Sep 17 00:00:00 2001 From: christianalfoni Date: Fri, 11 Jan 2019 18:14:49 +0100 Subject: [PATCH 1/4] fix(overmind): bind correctly proxifying effects --- packages/node_modules/overmind/src/proxyfyEffects.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/overmind/src/proxyfyEffects.ts b/packages/node_modules/overmind/src/proxyfyEffects.ts index 4bda549a..643fc2fd 100644 --- a/packages/node_modules/overmind/src/proxyfyEffects.ts +++ b/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, From 3c3f59eaa7cee5a867ba4a0d2d8c32684e0c1c18 Mon Sep 17 00:00:00 2001 From: christianalfoni Date: Fri, 11 Jan 2019 18:19:25 +0100 Subject: [PATCH 2/4] fix(overmind): fix nested partial type of createMock --- packages/node_modules/overmind/src/index.ts | 3 ++- packages/node_modules/overmind/src/internalTypes.ts | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/overmind/src/index.ts b/packages/node_modules/overmind/src/index.ts index d87f4cfe..6dd58605 100644 --- a/packages/node_modules/overmind/src/index.ts +++ b/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: Config, - mockedEffects?: Partial + mockedEffects?: NestedPartial ): { actions: ResolveMockActions state: ResolveState diff --git a/packages/node_modules/overmind/src/internalTypes.ts b/packages/node_modules/overmind/src/internalTypes.ts index b1db7e7f..342caa14 100644 --- a/packages/node_modules/overmind/src/internalTypes.ts +++ b/packages/node_modules/overmind/src/internalTypes.ts @@ -6,6 +6,10 @@ export type SubType = Pick< { [Key in keyof Base]: Base[Key] extends Condition ? Key : never }[keyof Base] > +export type NestedPartial = T extends object + ? Partial<{ [P in keyof T]: NestedPartial }> + : T + export type Options = { name?: string devtools?: string | boolean From cc95481a72cef5165f7f2a9c91243b27cab56f95 Mon Sep 17 00:00:00 2001 From: christianalfoni Date: Fri, 11 Jan 2019 20:31:08 +0100 Subject: [PATCH 3/4] style(website): fix some styling --- packages/overmind-website/src/components/App/styles.ts | 2 +- packages/overmind-website/src/components/Guides/styles.ts | 1 + packages/overmind-website/src/components/Videos/styles.ts | 1 + packages/overmind-website/src/overmind/state.ts | 2 +- 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/overmind-website/src/components/App/styles.ts b/packages/overmind-website/src/components/App/styles.ts index 4810073c..8ae6821c 100644 --- a/packages/overmind-website/src/components/App/styles.ts +++ b/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` diff --git a/packages/overmind-website/src/components/Guides/styles.ts b/packages/overmind-website/src/components/Guides/styles.ts index a1b0596c..d1580b11 100644 --- a/packages/overmind-website/src/components/Guides/styles.ts +++ b/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` diff --git a/packages/overmind-website/src/components/Videos/styles.ts b/packages/overmind-website/src/components/Videos/styles.ts index 6e33d67b..5ed55b89 100644 --- a/packages/overmind-website/src/components/Videos/styles.ts +++ b/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` diff --git a/packages/overmind-website/src/overmind/state.ts b/packages/overmind-website/src/overmind/state.ts index 913621d6..185274bc 100644 --- a/packages/overmind-website/src/overmind/state.ts +++ b/packages/overmind-website/src/overmind/state.ts @@ -31,7 +31,7 @@ type State = { } const state: State = { - page: null, + page: Page.HOME, currentGuide: null, currentVideo: null, currentApi: null, From 197f98e5c8f6674a2b187b854b28db89be681bc0 Mon Sep 17 00:00:00 2001 From: christianalfoni Date: Fri, 11 Jan 2019 22:31:14 +0100 Subject: [PATCH 4/4] docs(website): improve view selector --- .../examples/guide/getstarted/actions.ts | 8 ++++ .../examples/guide/getstarted/effects.ts | 9 ----- .../guides/beginner/01_getstarted.md | 14 +++---- .../src/components/ViewSelector/index.tsx | 37 ++++++++---------- .../src/components/ViewSelector/styles.ts | 14 +++---- packages/overmind-website/src/images/js.png | Bin 0 -> 1964 bytes .../src/images/ts-grayscale.png | Bin 3101 -> 0 bytes .../overmind-website/src/overmind/actions.ts | 9 ++++- 8 files changed, 43 insertions(+), 48 deletions(-) create mode 100644 packages/overmind-website/src/images/js.png delete mode 100644 packages/overmind-website/src/images/ts-grayscale.png diff --git a/packages/overmind-website/examples/guide/getstarted/actions.ts b/packages/overmind-website/examples/guide/getstarted/actions.ts index 223e2d58..95f667b9 100644 --- a/packages/overmind-website/examples/guide/getstarted/actions.ts +++ b/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 diff --git a/packages/overmind-website/examples/guide/getstarted/effects.ts b/packages/overmind-website/examples/guide/getstarted/effects.ts index 621b14fc..6e985a1f 100644 --- a/packages/overmind-website/examples/guide/getstarted/effects.ts +++ b/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') diff --git a/packages/overmind-website/guides/beginner/01_getstarted.md b/packages/overmind-website/guides/beginner/01_getstarted.md index 1edec94c..8052709c 100644 --- a/packages/overmind-website/guides/beginner/01_getstarted.md +++ b/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. diff --git a/packages/overmind-website/src/components/ViewSelector/index.tsx b/packages/overmind-website/src/components/ViewSelector/index.tsx index a95c00c1..9f17be5b 100644 --- a/packages/overmind-website/src/components/ViewSelector/index.tsx +++ b/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: ( +
+ + Vue + +
+ ), react: (
React +
), - vue: ( + react_ts: (
- - Vue + + React +
), - angular: ( + angular_ts: (
Angular +
), } return (
-
- {state.typescript ? ( - - ) : ( - - )} -
- {options[state.theme]} + {options[state.theme + (state.typescript ? '_ts' : '')]} chevron-down diff --git a/packages/overmind-website/src/components/ViewSelector/styles.ts b/packages/overmind-website/src/components/ViewSelector/styles.ts index 3b107844..4085e56e 100644 --- a/packages/overmind-website/src/components/ViewSelector/styles.ts +++ b/packages/overmind-website/src/components/ViewSelector/styles.ts @@ -10,14 +10,10 @@ export const wrapper = css` export const viewOption = css` display: flex; align-items: center; -` - -export const tsImageWrapper = css` - display: flex; - padding: 4px; - align-items: center; - border-top-left-radius: var(--border-radius-1); - border-bottom-left-radius: var(--border-radius-1); + width: 100%; + img:last-child { + margin-left: auto; + } ` export const image = css` @@ -59,7 +55,7 @@ export const selectorOpen = css` ` export const chevron = css` - margin-left: auto; + margin-left: 5px; font-size: var(--font-size-1); ` diff --git a/packages/overmind-website/src/images/js.png b/packages/overmind-website/src/images/js.png new file mode 100644 index 0000000000000000000000000000000000000000..b032d106b653c4296a3b7157c07b78d6ac44a9e1 GIT binary patch literal 1964 zcmbVNe{9rL96uS3{b0kf3~+9vbbzp}*B{sGt_`=j`yqF-gRwOXgGAr8@9vu2wWaO2 z+Z53mFkny#qCqeQqaj%U6N4nvn5j`AQ4$CyhAc=1&Wsq9{b3{+GGA}EbC`j|CT(Be z`@GNh^ZoI@-P5stZCOcmiNoP23x@)o=*`%7Q2~0c9?iUjUaxnwi@`sy)S=* z|9JM1;p2A|DY6&u zc1Ng)?uQ8_)NjD9{`I2N-y`ud-r9n#$q0xb1ucMOQc2YmGG08(E1&BXSC(XH7o^Qe!iuRC{hooHu%?T_eFbtNvaAeJpV?t-( z@tiI6<;4@0r3)mPPN$t|ms2z1B+c_YNiihD5C}n-eX0dAglg7LGX$V18H#Qxnu^(s zAgc9RUK}Z%av`PXX;m{9CKNC-19XyhQnpK3pe*Hadasep8kZ#!CSeMymWi-*9;+ub zOEVMNU8wWRcNjpSjYRS`X4R5PVcEJF!pcl6h1Vs}xEi#Ni(*naaQnWx( zQ_zSeE3v*=p{&4AcR*3y$iM>s36>=xrWq-KyjD^m4oO{&<5)hHf?rE&1~P1`n>io$ z`#TIRrXPX0%ggE|@hqgp{UZM#X$I%4KvQYxK zXg9$`0ZlPX)FVanY#R&(ol20L$!e>T5u?n>6ceRnf}xrL!2$*l9xlofu9$~!mfUC! zQg-cU%Si|+CQ5W)?lg75ZMjiW!Lk)30LeZXUR<(E0?K%9TA3vt_hmV^Kb?Sx^d40* zW!=xr`zqkJT%jcA^S@q8>-T$pW7a%DC)Hp;9m&9$4NV_#n zrHA}?=CW%u+SoK4^+tP`Z_4N+-`1gus14M#V=FlUHT=`zK${pk^Xq{x$_J?VyGMo^ zE_`+N>&HT#zKPpUchqdTtbaayV9%vA_Wt#Gr&{X=#fF3LMuXp}7xzE<+{nJTzUyG2 z=$X^Cd{bd)+X?1M(dgdB+Vd0pw~oDWGBj~*-HY$7d;aR)3stY(T+mfLcDVGX$2>o?^OW!Nseo}Vmmw|KNG_7o@y)BOON6+o-uJ#Se q$96VtxV2*vJN)7KlgBG>*OG}33I=zqsQAqOXN80711EjY4Eznbv4X__ literal 0 HcmV?d00001 diff --git a/packages/overmind-website/src/images/ts-grayscale.png b/packages/overmind-website/src/images/ts-grayscale.png deleted file mode 100644 index 85478e57b7b748d02b34872bec51ad779bbec522..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3101 zcmcgudsGuw8plUnL|j-7x>l)<5tLLW$z<|g0ulo9FzUf5P-}HE8Imj{lP4h{A{8yZ z&{k1-h}so=tx#kOwemPcTScg^!U2hh3Mz;cP<$YYdjm+VwOvpD*g2WZoqK=x`+nc| z{qDW9aq+_W6CI{H*xA`l3=R^9fhW^;+m8eP(|uD5!DGBODAEAN>uvWak!Mz%o!z)A zDrtlxz2o>&sUP>RP#<9s>A*9Y>B695Bh!iYg}>KKhd5GSMz+7*Ddt(#7P1|i01A;r(; z5Q>m2hWtrA0kLTu7)MwPh|8xT90rSxctK1C!lg6VbOr}zAOZ$Yz(kk~ESACHXt1M}~jp0HjtT8S(K}E^76N3xhEr7KAaJkhh`@Qj39O%2iR8-$Fr^5doX^D=5&795Z776D-FCQKVjtfv8n# zOhM4K8U+O!$)&)bj3M>FF<^(j-XHAmzgSO3sbau@A#A<~3J&n+Abbu7X3~&Bx)O;X zSYt3^8k`6g3n?H&G?hv&z%Vusz*sPf$~Z6!k7C07D4c+!a13Y25e}0P#e6kiOyVY+ z4s7#>mV}(dfsJ425o|unlQY>c3zeZT#$~Z!J|APi2*N|ya#W6?EI@lu1cF6+6gcRH+2|`X8?pD1eAMfOOc)nRl0Hc4Pk|FN~GRkPi^n{-Rma$l`;{PrGH>CTg`41-u zS7I6k0XAGZ<^w>3wO8SpZ4P!SrC zEIl}e@(OgH*x8Nk2^RZFmC2o%&7rO>lG)Dhw#RR%?BH^9A=5h1%BT; z%zQRsCzSet(j7>5ArT9;O=wqJ+YUn}VQ7CB4`$I8y0U9O|)M zwq*Rl2I*)jCw<-~$s4apj;ZC7aBFc={|1qLigR*e2sOqUNWEQ{u5Y^BwE!nCrTWIG~#P7pLj&E>+X-9So!Tta+ZQ%1nN8otdh(N~O|EO-&Mu<>cAE zuc5S-j_b-9B1zFlT!rZOhRed^ZuA5h12Jw3V{VM5@C>H30x59eH0 zf*_>f;p7kA1xJq_{rIZ|v)4I)+EHI%xL13`)M;&O2#kj_G~S(_N+2z zn{VB`S9h#K)cVin^2FZWUgxcWO_4QqY3q0$-aD$a&!6fR?(^v^ij0iJES9VFwA|K) zLOfYld?eQ+x7Aug_C9*lC#yW+m6?^LQYy99ondEMbmgo2Zdr9-RJmv7VUd&XUfBDv zDO#yay?GO}`|`49eg2ABE*n=(8Rs;^r}a@seR62@5=dn4RV`by=6by%bM~Bt+1+1P zSRQVut6MrFb*Br}LuCI~H{OkQ5c8o$`$k{QNOQUQF5Ww{M6$;}Y^k2b{w~xM{JSjo)9p=GN6*F+b!aZLF(j(LcT$ zc+?TTsQ-FdLi_#u;(F7v@bE(QG^)q9`Q#qg2_Jpw?lOL*^=gr#y{qfc@#9;yye*(q zr)oc%av_3(;{iaHvn^YtmqOEfc6y5S;tX~oNQmc*a>{ju7$1yKjyGmlq6M@{i@`=arV0^5$hfztqrh?#C={Q}*Y_PMlzZGR4O? z)|XF~pT))0^*g_a@CpnK-MqZgY%(D{-nqLM_X#KIJza0LR_(|^uC%k7E0UhLe)Zm% zle(4-hsuhJcLCL)0>ODui#(OS?b1xz$KTA8NVcAh1-di}I*+u(x`{)ow$1R3>%K8+ z@7}#RpL`QFA!#{0sh}Ez{s7=V-^( teaoWfrje`*^evMvCwmO6b-K7_^z+Q_jvHe}b=f}Pg98?d^F^yZ{V%a@$e{oL diff --git a/packages/overmind-website/src/overmind/actions.ts b/packages/overmind-website/src/overmind/actions.ts index 631f2330..c8944d0b 100644 --- a/packages/overmind-website/src/overmind/actions.ts +++ b/packages/overmind-website/src/overmind/actions.ts @@ -58,14 +58,21 @@ export const openApi: Action> = async ({ } export const selectTheme: Action = ({ - value: theme, + value: selection, state, css, storage, }) => { + const selectionArray = selection.split('_') + const theme = selectionArray[0] + const typescript = Boolean(selectionArray[1]) + state.theme = theme + state.typescript = typescript + css.changePrimary(theme) storage.set('theme', theme) + storage.set('typescript', typescript) } export const toggleTypescript: Action = ({ state, storage }) => {