feat(website): use query to manage theme and typescript

Author: christianalfoni

package-lock.json

@@ -29,26 +29,27 @@
     "color-hash": "1.0.3",
     "electron": "2.0.8",
     "electron-json-storage": "4.1.0",
+    "emotion": "9.2.12",
     "express": "4.16.3",
     "install": "0.12.1",
     "is-plain-obj": "1.1.0",
     "marksy": "6.1.0",
     "npm": "6.3.0",
     "page": "1.8.6",
+    "petit-dom": "0.2.2",
+    "preact": "8.3.1",
+    "preact-compat": "3.18.4",
     "prismjs": "1.15.0",
+    "query-string": "^6.2.0",
+    "react": "16.7.0-alpha.2",
+    "react-dom": "16.7.0-alpha.2",
     "react-hot-loader": "^4.3.4",
     "styled-components": "3.3.3",
     "tslib": "1.9.3",
     "vue": "2.5.16",
     "vue-hot-reload-api": "2.3.0",
     "vue-styled-components": "1.3.0",
-    "ws": "5.2.1",
-    "preact": "8.3.1",
-    "preact-compat": "3.18.4",
-    "react": "16.7.0-alpha.2",
-    "react-dom": "16.7.0-alpha.2",
-    "emotion": "9.2.12",
-    "petit-dom": "0.2.2"
+    "ws": "5.2.1"
   },
   "devDependencies": {
     "@babel/core": "7.2.2",

package.json

@@ -17,7 +17,7 @@ import { Operator, pipe, action } from 'overmind'
 import { doSomeStateChange } from './operators'
 
 export const setInput: Operator<string> = pipe(
-  doSomeStateChange<string>(),
+  doSomeStateChange(),
   action(({ value: input, state }) => {
     state.input = input
   })

packages/overmind-website/examples/guide/typescript/operatorinfer_solution.ts

@@ -90,9 +90,9 @@ You might create an operator that does not care about its input. For example:
 h(Example, { name: "guide/typescript/operatorinfer" })
 ```
 
-Composing **doSomeStateChange** into the **pipe** gives an error, cause this operator expects a **void** type. There is no other way to make this work than inlining the **doSomeStateChange** operator into the pipe in question, which infers the correct input.
+Composing **doSomeStateChange** into the **pipe** gives an error, cause this operator expects a **void** type. 
 
-You could use the same trick here though:
+To fix this you can do the same trick as above, though you do not need to pass in the type, it will be inferred:
 
 ```marksy
 h(Example, { name: "guide/typescript/operatorinfer_solution" })

packages/overmind-website/guides/intermediate/03_typescript.md

@@ -42,6 +42,7 @@
 		"npm": "^6.3.0",
 		"overmind-react": "next",
 		"page": "^1.8.6",
-		"prismjs": "^1.15.0"
+    "prismjs": "^1.15.0",
+    "query-string": "^6.2.0"
 	}
 }

packages/overmind-website/package.json

@@ -1,83 +1,80 @@
 import { Action, pipe, action, filter, debounce, Operator } from 'overmind'
 import { Page, RouteContext, GuideParams, VideoParams } from './types'
+import { ensureViewAndTypescript } from './operators'
 
-export const openHome: Action<RouteContext> = async ({ state, effects }) => {
-  state.page = Page.HOME
-  if (!state.demos.length) {
-    state.demos = await effects.request('/backend/demos')
-  }
-}
+export const openHome: Operator<RouteContext> = pipe(
+  ensureViewAndTypescript(),
+  action(async ({ state, effects }) => {
+    state.page = Page.HOME
+    if (!state.demos.length) {
+      state.demos = await effects.request('/backend/demos')
+    }
+  })
+)
 
-export const openGuides: Action<RouteContext> = async ({ state, effects }) => {
-  state.page = Page.GUIDES
-  if (!state.guides.length) {
-    state.isLoadingGuides = true
-    state.guides = await effects.request('/backend/guides')
-    state.isLoadingGuides = false
-  }
-}
+export const openGuides: Operator<RouteContext> = pipe(
+  ensureViewAndTypescript(),
+  action(async ({ state, effects }) => {
+    state.page = Page.GUIDES
+    if (!state.guides.length) {
+      state.isLoadingGuides = true
+      state.guides = await effects.request('/backend/guides')
+      state.isLoadingGuides = false
+    }
+  })
+)
 
-export const openVideos: Operator<RouteContext<VideoParams>> = action(
-  async ({ state, effects }) => {
+export const openVideos: Operator<RouteContext<VideoParams>> = pipe(
+  ensureViewAndTypescript(),
+  action(async ({ state, effects }) => {
     state.page = Page.VIDEOS
     state.currentVideo = null
     if (!state.videos.length) {
       state.isLoadingVideos = true
       state.videos = await effects.request('/backend/videos')
       state.isLoadingVideos = false
     }
-  }
+  })
 )
 
 export const openVideo: Operator<RouteContext<VideoParams>> = pipe(
+  ensureViewAndTypescript(),
   openVideos,
   action(({ value: routeContext, state }) => {
     state.currentVideo = routeContext.params.title
   })
 )
 
-export const openGuide: Action<RouteContext<GuideParams>> = async ({
-  value: routeContext,
-  state,
-}) => {
-  state.page = Page.GUIDE
-  state.currentGuide = routeContext.params
-}
+export const openGuide: Operator<RouteContext<GuideParams>> = pipe(
+  ensureViewAndTypescript(),
+  action(async ({ value: routeContext, state }) => {
+    state.page = Page.GUIDE
+    state.currentGuide = routeContext.params
+  })
+)
 
-export const openApi: Action<RouteContext<VideoParams>> = async ({
-  value: routeContext,
-  state,
-  effects,
-}) => {
-  state.page = Page.API
-  state.currentApi = routeContext.params.title
-  if (!state.apis.length) {
-    state.isLoadingApis = true
-    state.apis = await effects.request('/backend/apis')
-    state.isLoadingApis = false
-  }
-}
+export const openApi: Operator<RouteContext<VideoParams>> = pipe(
+  ensureViewAndTypescript(),
+  action(async ({ value: routeContext, state, effects }) => {
+    state.page = Page.API
+    state.currentApi = routeContext.params.title
+    if (!state.apis.length) {
+      state.isLoadingApis = true
+      state.apis = await effects.request('/backend/apis')
+      state.isLoadingApis = false
+    }
+  })
+)
 
-export const selectTheme: Action<string> = ({
-  value: selection,
-  state,
-  effects,
-}) => {
+export const selectTheme: Action<string> = ({ value: selection, effects }) => {
   const selectionArray = selection.split('_')
-  const theme = selectionArray[0]
-  const typescript = Boolean(selectionArray[1])
-
-  state.theme = theme
-  state.typescript = typescript
+  const view = selectionArray[0]
+  const typescript = String(Boolean(selectionArray[1]))
 
-  effects.css.changePrimary(theme)
-  effects.storage.set('theme', theme)
-  effects.storage.set('typescript', typescript)
-}
-
-export const toggleTypescript: Action = ({ state, effects }) => {
-  state.typescript = !state.typescript
-  effects.storage.set('typescript', state.typescript)
+  effects.router.redirectWithQuery(effects.router.getPath(), {
+    view,
+    typescript,
+  })
 }
 
 export const closeSearch: Action = ({ state }) => {
@@ -105,6 +102,4 @@ export const changeQuery: Operator<React.ChangeEvent<HTMLInputElement>> = pipe(
 
 export const viewHelpGotIt: Action = ({ state, effects }) => {
   state.showViewHelp = false
-  effects.storage.set('typescript', false)
-  effects.storage.set('theme', 'react')
 }

packages/overmind-website/src/overmind/actions.ts

@@ -1,16 +1,6 @@
 import * as page from 'page'
-import { RouteContext } from './types'
-
-export const router = {
-  route(url: string, action: (payload: RouteContext) => void) {
-    page(url, ({ params, path }) => action({ params, path }))
-  },
-  redirect: page.redirect,
-  start: () => page.start({}),
-}
-
-export const request = (url: string) =>
-  fetch(url).then((response) => response.json())
+import { RouteContext, Query } from './types'
+import * as queryString from 'query-string'
 
 export const storage = {
   get(key: string) {
@@ -27,6 +17,62 @@ export const storage = {
   },
 }
 
+export const router = (() => {
+  let currentPath
+  let currentQuery: Query = {
+    view: storage.get('theme'),
+    typescript: storage.get('typescript'),
+  }
+
+  return {
+    getPath() {
+      return currentPath
+    },
+    route(url: string, action: (payload: RouteContext) => void) {
+      page(url, ({ params, pathname, querystring }) => {
+        // We want to preserve the query
+        if (!querystring) {
+          page.redirect(
+            `${pathname}?view=${currentQuery.view}&typescript=${
+              currentQuery.typescript
+            }${location.hash}`
+          )
+          return
+        }
+
+        const query = queryString.parse(querystring)
+
+        currentPath = pathname.split('?')[0]
+        currentQuery = {
+          view: query.view,
+          typescript: query.typescript,
+        }
+
+        action({
+          params,
+          path: pathname,
+          query,
+        })
+      })
+    },
+    redirect: page.redirect,
+    redirectWithQuery: (path: string, query: Query) => {
+      currentPath = path
+      currentQuery = query
+
+      page.redirect(
+        `${path}?view=${query.view}&typescript=${query.typescript}${
+          location.hash
+        }`
+      )
+    },
+    start: () => page.start({}),
+  }
+})()
+
+export const request = (url: string) =>
+  fetch(url).then((response) => response.json())
+
 export const css = {
   changePrimary(theme: string) {
     const colors = {

packages/overmind-website/src/overmind/effects.ts

@@ -1,10 +1,7 @@
 import { OnInitialize } from 'overmind'
 
 const onInitialize: OnInitialize = ({ value: app, effects, state }) => {
-  state.typescript = effects.storage.get('typescript') || false
-  state.theme = effects.storage.get('theme') || 'react'
   state.showViewHelp = !effects.storage.get('theme')
-  effects.css.changePrimary(state.theme)
 
   effects.router.route('/', app.actions.openHome)
   effects.router.route('/guides', app.actions.openGuides)

packages/overmind-website/src/overmind/onInitialize.ts

@@ -0,0 +1,19 @@
+import { Operator, action } from 'overmind'
+import { RouteContext } from './types'
+
+export const ensureViewAndTypescript: <T extends object>() => Operator<
+  RouteContext<T>
+> = () =>
+  action(({ value: routeContext, state, effects }) => {
+    if (
+      state.typescript !== Boolean(routeContext.query.typescript) ||
+      state.theme !== routeContext.query.view
+    ) {
+      state.typescript = routeContext.query.typescript === 'true'
+      state.theme = routeContext.query.view
+
+      effects.storage.set('theme', state.theme)
+      effects.storage.set('typescript', state.typescript)
+      effects.css.changePrimary(state.theme)
+    }
+  })