docs(website): improve view selector

Author: christianalfoni

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/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>

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);
 `
 

packages/overmind-website/src/images/js.png

@@ -58,14 +58,21 @@ export const openApi: Action<RouteContext<VideoParams>> = async ({
 }
 
 export const selectTheme: Action<string> = ({
-  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 }) => {