feat(website): routing guide, force version bump

Author: christianalfoni

packages/overmind-website/examples/guide/routing/compose.ts

@@ -10,7 +10,7 @@ import * as operations from './operations'
 
 ...
 
-export const showUser: Action<string> = action =>
+export const showUserModal: Action<string> = action =>
   action()
     .compose(showUsersPage) // <-- WE ADD COMPOSE
     .mutate(mutations.setModalUserId)

packages/overmind-website/examples/guide/routing/parallel.ts

@@ -21,14 +21,14 @@ export const showUsersPage: Action<any> = action =>
 
 const getUserWithDetails: Action<string> = action =>
   action()
-    .mutate(mutations.setModalUserId)
     .mutate(mutations.setLoadingUserWithDetails(true))
     .map(operations.getUserWithDetails)
     .mutate(mutations.updateUserWithDetails)
     .mutate(mutations.setLoadingUserWithDetails(false))
 
-export const showUser: Action<string> = action =>
+export const showUserModal: Action<string> = action =>
   action()
+    .mutate(mutations.setModalUserId)
     .parallel([
       showUsersPage,
       getUserWithDetails
@@ -58,14 +58,14 @@ export const showUsersPage = action =>
 
 const getUserWithDetails = action =>
   action()
-    .mutate(mutations.setModalUserId)
     .mutate(mutations.setLoadingUserWithDetails(true))
     .map(operations.getUserWithDetails)
     .mutate(mutations.updateUserWithDetails)
     .mutate(mutations.setLoadingUserWithDetails(false))
 
-export const showUser = action =>
+export const showUserModal = action =>
   action()
+    .mutate(mutations.setModalUserId)
     .parallel([
       showUsersPage,
       getUserWithDetails

packages/overmind-website/examples/guide/routing/query.ts

@@ -15,18 +15,12 @@ import * as effects from './effects'
 
 const app = new App(config)
 
-function parseQuery (action) {
-  return (context) {
-    action({
-      params: context.params,
-      query: queryString.parse(context.querystring)
-    })
-  }
-}
+const withParamsAndQuery = <T>(action: (payload: T) => any) => ({ params, querystring }) =>
+  action(Object.assign({}, params, queryString.parse(querystring)))
 
-page('/', parseQuery(app.actions.showHomePage))
-page('/users', parseQuery(app.actions.showUsersPage))
-page('/users/:id', parseQuery(app.actions.showUserModal))
+page('/', withParamsAndQuery(app.actions.showHomePage))
+page('/users', withParamsAndQuery(app.actions.showUsersPage))
+page('/users/:id', withParamsAndQuery<{ id: string, tabIndex: string   }>(app.actions.showUserModal))
 
 ...
   `,
@@ -49,18 +43,12 @@ const app = new App({
   effects
 })
 
-function parseQuery (action) {
-  return (context) {
-    action({
-      params: context.params,
-      query: queryString.parse(context.querystring)
-    })
-  }
-}
+const withParamsAndQuery = (action) => ({ params, querystring }) =>
+  action(Object.assign({}, params, queryString.parse(querystring)))
 
-page('/', parseQuery(app.actions.showHomePage))
-page('/users', parseQuery(app.actions.showUsersPage))
-page('/users/:id', parseQuery(app.actions.showUserModal))
+page('/', withParamsAndQuery(app.actions.showHomePage))
+page('/users', withParamsAndQuery(app.actions.showUsersPage))
+page('/users/:id', withParamsAndQuery(app.actions.showUserModal))
 
 ...
 `,

packages/overmind-website/examples/guide/routing/router.ts

@@ -23,6 +23,12 @@ declare module 'overmind' {
 
 const app = new App(config)
 
+const withParams = <T>(action: (payload: T) => any) => ({ params }) => action(params)
+
+page('/', withParams(app.actions.showHomePage))
+page('/users', withParams(app.actions.showUsersPage))
+page('/users/:id', withParams<{ id: string }>(app.actions.showUserModal))
+
 page.start()
 
 export type Connect = TConnect<typeof app>
@@ -47,7 +53,11 @@ const app = new App({
   effects
 })
 
-page('/', ({ params }) => app.actions.showHomePage(params))
+const withParams = (action) => ({ params }) => action(params)
+
+page('/', withParams(app.actions.showHomePage))
+page('/users', withParams(app.actions.showUsersPage))
+page('/users/:id', withParams(app.actions.showUserModal))
 
 page.start()
 

packages/overmind-website/examples/guide/routing/setup.ts

@@ -14,19 +14,24 @@ export const showHomePage: Action = action =>
 
 export const showUsersPage: Action = action =>
   action()
+    .mutate(mutations.unsetModalUserId)
     .mutate(mutations.setPage('users'))
     .mutate(mutations.setLoadingUsers(true))
     .map(operations.getUsers)
     .mutate(mutations.setUsers)
     .mutate(mutations.setLoadingUsers(false))
 
-export const showUser: Action<string> = action =>
+export const showUserModal: Action<string> = action =>
   action()
-    .mutate(mutations.setCurrentUserId)
+    .mutate(mutations.setModalUserId)
+    .mutate(mutations.setLoadingUserWithDetails(true))
+    .map(operations.getUserWithDetails)
+    .mutate(mutations.updateUserWithDetails)
+    .mutate(mutations.setLoadingUserWithDetails(false))
 
-export const changeUserTab: Action<number> = action =>
+export const changeUserModalTab: Action<number> = action =>
   action()
-    .mutate(mutations.setUserTabIndex)
+    .mutate(mutations.setUserModalTabIndex)
     `,
         },
       ]
@@ -51,11 +56,15 @@ export const showUsersPage = action =>
 
 export const showUser = action =>
   action()
-    .mutate(mutations.setCurrentUserId)
+    .mutate(mutations.setModalUserId)
+    .mutate(mutations.setLoadingUserWithDetails(true))
+    .map(operations.getUserWithDetails)
+    .mutate(mutations.updateUserWithDetails)
+    .mutate(mutations.setLoadingUserWithDetails(false))
 
-export const changeUserTab = action =>
+export const changeUserModalTab = action =>
   action()
-    .mutate(mutations.setUserTabIndex)
+    .mutate(mutations.setUserModalTabIndex)
     `,
         },
       ]

packages/overmind-website/guides/intermediate/01_routing.md

@@ -62,3 +62,10 @@ h(Example, { name: "guide/routing/parallel" })
 **Page js** also allows us to manage query strings, the stuff after the **?** in the url. Page js does not parse it though, so we introduce a library which does just that, [query-string](https://www.npmjs.com/package/query-string). With this we can update our route to also pass in any query params.
 
 
+```marksy
+h(Example, { name: "guide/routing/query" })
+```
+
+## Summary
+
+With very little effort we were able to build a custom "**application state first**" router for our application. Like many common tools needed in an application, like talking to the server, local storage etc., there are often small differences in the requirements. And even more often you do not need the full implementation of the tool you are using. By using simple tools you can meet the actual requirements of the application more "head on".