fix(website): validate view and typescript query

Author: christianalfoni

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

@@ -18,21 +18,36 @@ export const storage = {
 }
 
 export const router = (() => {
+  const validViewQuery = ['react', 'vue', 'angular']
+  const validTypescriptQuery = ['true', 'false']
   let currentPath
   let currentQuery: Query = {
     view: storage.get('theme'),
     typescript: storage.get('typescript'),
   }
   let currentHash = location.hash
 
+  function isValidQuery(query: Query) {
+    return (
+      validViewQuery.includes(query.view) &&
+      validTypescriptQuery.includes(query.typescript)
+    )
+  }
+  if (!isValidQuery(currentQuery)) {
+    currentQuery.view = 'react'
+    currentQuery.typescript = 'false'
+  }
+
   return {
     getPath() {
       return currentPath
     },
     route(url: string, action: (payload: RouteContext) => void) {
-      page(url, ({ params, pathname, path, querystring }) => {
+      page(url, ({ params, pathname, querystring }) => {
         // We want to preserve the query
-        if (!querystring) {
+        const query = queryString.parse(querystring)
+
+        if (!querystring || !isValidQuery(query)) {
           if (location.hash === currentHash) {
             currentHash = ''
           } else {
@@ -47,8 +62,6 @@ export const router = (() => {
           return
         }
 
-        const query = queryString.parse(querystring)
-
         currentPath = pathname.split('?')[0]
         currentQuery = {
           view: query.view,

packages/overmind-website/src/utils.tsx

@@ -98,7 +98,12 @@ const Example: React.SFC<{ name: string }> = ({ name }) => {
 
   useEffect(
     () => {
+      let isUmountedOrChanged = false
       import('../examples/' + name).then((module) => {
+        if (isUmountedOrChanged) {
+          return
+        }
+
         const content = module.default(state.typescript, state.theme)
         if (!content) {
           return console.warn('Missing content for ' + getKey())
@@ -109,6 +114,10 @@ const Example: React.SFC<{ name: string }> = ({ name }) => {
           isLoading: false,
         })
       })
+
+      return () => {
+        isUmountedOrChanged = true
+      }
     },
     [name, state.theme, state.typescript]
   )