Merge pull request #86 from pturchik/master

fix(app): set $render params before route render

packages/app/client/Router/Routes.js

@@ -2,8 +2,7 @@ import React, { useMemo, useState, useEffect } from 'react'
 import {
   $root,
   observer,
-  emit,
-  initLocalCollection
+  emit
 } from 'startupjs'
 import { Route } from 'react-router'
 import { Dimensions, Platform, View } from 'react-native'
@@ -18,7 +17,6 @@ export default observer(function Routes ({
   ...props
 }) {
   function render (route, props) {
-    setRenderParams(props)
     return pug`
       //- TODO: We can remove passing props because
       //- in pages we can use react-router hooks for this
@@ -101,8 +99,3 @@ function getOrientation () {
   const dim = Dimensions.get('screen')
   return dim.width >= dim.height ? 'landscape' : 'portrait'
 }
-
-function setRenderParams ({ location, match }) {
-  if (!$root.get('$render')) initLocalCollection('$render')
-  $root.setDiffDeep('$render.params', match.params)
-}

packages/app/client/Router/index.js

@@ -1,6 +1,7 @@
 import React, { useState, useMemo } from 'react'
 import RouterComponent from './RouterComponent'
 import { withRouter, useHistory } from 'react-router-native'
+import { matchRoutes } from 'react-router-config'
 import { $root, observer, useSyncEffect, initLocalCollection } from 'startupjs'
 import { Linking, Platform } from 'react-native'
 import { matchPath } from 'react-router'
@@ -32,8 +33,12 @@ const AppsFactoryWithRouter = withRouter(observer(function AppsFactory ({
   }, [location.pathname])
 
   useSyncEffect(() => {
-    initRoute(location)
-    const unlisten = history.listen(initRoute)
+    initRoute(location, routes, goTo)
+
+    const unlisten = history.listen((location) => {
+      initRoute(location, routes, goTo)
+    })
+
     $root.on('url', goTo)
 
     return () => {
@@ -90,7 +95,7 @@ function getApp (url, routes) {
   return route ? route.app : null
 }
 
-function initRoute (location) {
+function initRoute (location, routes, goTo) {
   // Check if url or search changed between page rerenderings
   const prevUrl = $root.get('$render.url')
   const prevSearch = $root.get('$render.search')
@@ -103,7 +108,20 @@ function initRoute (location) {
   $root.setDiff('$render.url', url)
   $root.setDiff('$render.search', search)
   $root.setDiffDeep('$render.query', query)
+
   if (url !== prevUrl) {
+    const matched = matchRoutes(routes, url)
+    if (matched.length) {
+      const lastRoute = matched[matched.length - 1]
+      const redirect = lastRoute.route.redirect
+
+      if (redirect) {
+        setTimeout(() => $root.emit('url', redirect, { replace: true }))
+        return
+      }
+
+      $root.setDiffDeep('$render.params', lastRoute.match.params)
+    }
     $root.setDiff('_session.url', location.pathname) // TODO: DEPRECATED
     $root.silent().destroy('_page')
     initLocalCollection('_page')

packages/routes-middleware/lib/index.js

@@ -83,7 +83,7 @@ function matchAppRoutes (location, appRoutes, cb) {
 
 function matchUrl (location, routes, cb) {
   const matched = matchRoutes(routes, location.replace(/\?.*/, ''))
-  if (matched && matched.length) {
+  if (matched.length) {
     // check if the last route has redirect
     const lastRoute = matched[matched.length - 1]
     if (lastRoute.route.redirect) {

styleguide/Root/App.js

@@ -6,8 +6,9 @@ import { BASE_URL } from '@env'
 import init from 'startupjs/init'
 import orm from '../model'
 import React, { useMemo } from 'react'
+import { Platform } from 'react-native'
 import App from 'startupjs/app'
-import { observer, useModel, useSession, useDoc } from 'startupjs'
+import { $root, observer, useModel, useSession, useDoc } from 'startupjs'
 
 // Frontend micro-services
 import * as main from '../main'
@@ -19,6 +20,9 @@ import docs from '../docs'
 // Initialization must start before doing any subscribes to data.
 init({ baseUrl: BASE_URL, orm })
 
+// TODO: Remove in prod
+if (Platform.OS === 'web') window.model = $root
+
 // Global initialization logic
 function useGlobalInit (session) {
   let $session = useModel('_session')

styleguide/main/index.js

@@ -1,11 +1,4 @@
-import { useEffect } from 'react'
-import { emit } from 'startupjs'
 import getRoutes from './routes'
 
 export const Layout = ({ children }) => children
-export const routes = getRoutes({
-  PHome: () => {
-    useEffect(() => { emit('url', '/docs', { replace: true }) }, [])
-    return null
-  }
-})
+export const routes = getRoutes({})

styleguide/main/routes.js

@@ -2,6 +2,6 @@ export default (components = {}) => [
   {
     path: '/',
     exact: true,
-    component: components.PHome
+    redirect: '/docs'
   }
 ]