fix: fix preview redirect on index, add useRouter hooks

Author: gregberge

packages/smooth/src/client/Routes.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import { Switch, Route } from 'react-router-dom'
+import { Switch, Route } from '../router'
 import Page, { getPages } from '../page/Page'
-import HiddenRouter from '../router/HiddenRouter'
-import { Provider as HiddenHistoryContextProvider } from '../router/HiddenHistoryContext'
+import { HiddenRouter } from '../router/HiddenRouter'
+import { HiddenHistoryProvider } from '../router/HiddenHistory'
 
 const pages = getPages()
 
 export default function Routes() {
   return (
-    <HiddenHistoryContextProvider>
+    <HiddenHistoryProvider>
       <Route
         path="/:lang(.{2})?"
         render={({
@@ -45,6 +45,6 @@ export default function Routes() {
           )
         }}
       />
-    </HiddenHistoryContextProvider>
+    </HiddenHistoryProvider>
   )
 }

packages/smooth/src/client/main-web.js

@@ -3,13 +3,13 @@ import 'regenerator-runtime/runtime'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { BrowserRouter } from 'react-router-dom'
 import { ApolloProvider } from 'react-apollo'
 import { loadableReady } from '@loadable/component'
 import { createApolloClient } from './apollo'
 import Root from './Root'
 import ErrorContext from './ErrorContext'
-import RouterHooks from '../router/RouterHooks'
+import { BrowserRouter } from '../router'
+import { RouterHooks } from '../router/RouterHooks'
 
 loadableReady(() => {
   ReactDOM.hydrate(

packages/smooth/src/content/Query.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import camelcase from 'camelcase'
 import gql from 'graphql-tag'
-import { Redirect } from 'react-router-dom'
+import { Redirect, useRouter } from '../router'
 import { usePageContext } from '../page/PageContext'
 import { HTTPError } from '../router/HTTPError'
 import { applyHook } from '../plugin/browser'
@@ -57,9 +57,10 @@ function Handler({ children, ...props }) {
 
 export function Query({ children }) {
   const { page } = usePageContext()
+  const { location } = useRouter()
 
   if (page.slug === 'index') {
-    return <Redirect to={page.indexUrl} />
+    return <Redirect to={`${page.indexUrl}${location.search}`} />
   }
 
   return (

packages/smooth/src/router/HiddenHistoryContext.js renamed to packages/smooth/src/router/HiddenHistory.js

@@ -1,4 +1,11 @@
-import React, { useMemo, useCallback, createContext, useState } from 'react'
+import React, {
+  useContext,
+  useMemo,
+  useCallback,
+  createContext,
+  useState,
+  useRef,
+} from 'react'
 import { createLocation } from 'history'
 
 const HiddenHistoryContext = createContext()
@@ -10,7 +17,7 @@ function createHiddenLocation(state) {
   return location
 }
 
-export function Provider({ children }) {
+export function HiddenHistoryProvider({ children }) {
   const [state, setState] = useState(null)
   const reset = useCallback(() => setState(null), [])
   const push = useCallback(
@@ -39,4 +46,19 @@ export function Provider({ children }) {
   )
 }
 
-export default HiddenHistoryContext
+export function useHiddenHistory() {
+  return useContext(HiddenHistoryContext)
+}
+
+// Create a local history, a mix with original history & hiddenHistory
+export function useMixedHiddenHistory(originalHistory = {}) {
+  const hiddenHistory = useHiddenHistory()
+  const mixedHistory = useRef({})
+  Object.assign(mixedHistory.current, originalHistory)
+  mixedHistory.current.push = hiddenHistory.push
+  mixedHistory.current.replace = hiddenHistory.replace
+  if (hiddenHistory.location) {
+    mixedHistory.current.location = hiddenHistory.location
+  }
+  return mixedHistory.current
+}

packages/smooth/src/router/HiddenLinkRouter.js

@@ -1,23 +1,9 @@
-import React, { useContext, useRef } from 'react'
-import { withRouter, Router } from 'react-router-dom'
-import HiddenHistoryContext from './HiddenHistoryContext'
+import React from 'react'
+import { Router, useRouter } from './Router'
+import { useMixedHiddenHistory } from './HiddenHistory'
 
-// Create a local history, a mix with original history & hiddenHistory
-function useHiddenHistory(originalHistory) {
-  const hiddenHistory = useContext(HiddenHistoryContext)
-  const mixedHistory = useRef({})
-  Object.assign(mixedHistory.current, originalHistory)
-  mixedHistory.current.push = hiddenHistory.push
-  mixedHistory.current.replace = hiddenHistory.replace
-  if (hiddenHistory.location) {
-    mixedHistory.current.location = hiddenHistory.location
-  }
-  return mixedHistory.current
-}
-
-function HiddenLinkRouter({ history, children }) {
-  const hiddenHistory = useHiddenHistory(history)
+export function HiddenLinkRouter({ children }) {
+  const { history } = useRouter()
+  const hiddenHistory = useMixedHiddenHistory(history)
   return <Router history={hiddenHistory}>{children}</Router>
 }
-
-export default withRouter(HiddenLinkRouter)

packages/smooth/src/router/HiddenRouter.js

@@ -7,10 +7,10 @@ import React, {
   useEffect,
 } from 'react'
 import { createPath } from 'history'
-import { Router, withRouter } from 'react-router-dom'
-import HiddenHistoryContext from './HiddenHistoryContext'
+import { Router, useRouter } from './Router'
+import { useHiddenHistory } from './HiddenHistory'
 
-export const HiddenRouterContext = createContext()
+const HiddenRouterContext = createContext()
 
 export function useHiddenRouter() {
   return useContext(HiddenRouterContext)
@@ -38,8 +38,9 @@ function createURL(location) {
   return typeof location === 'string' ? location : createPath(location)
 }
 
-function HiddenRouter({ history, children }) {
-  const hiddenHistory = useContext(HiddenHistoryContext)
+export function HiddenRouter({ children }) {
+  const { history } = useRouter()
+  const hiddenHistory = useHiddenHistory()
   const promises = useRef([])
 
   const flush = useCallback(() => {
@@ -93,5 +94,3 @@ function HiddenRouter({ history, children }) {
     </div>
   ) : null
 }
-
-export default withRouter(HiddenRouter)

packages/smooth/src/router/Link.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link as BaseLink, NavLink as BaseNavLink } from 'react-router-dom'
 import { useLang } from '../page/PageContext'
-import HiddenLinkRouter from './HiddenLinkRouter'
+import { HiddenLinkRouter } from './HiddenLinkRouter'
 
 function computeTo(to, lang) {
   if (lang) {

packages/smooth/src/router/Router.js

@@ -0,0 +1,19 @@
+import { useContext } from 'react'
+import { __RouterContext } from 'react-router-dom'
+
+export {
+  Router,
+  BrowserRouter,
+  StaticRouter,
+  Route,
+  Redirect,
+  Prompt,
+  Switch,
+  generatePath,
+  matchPath,
+  withRouter,
+} from 'react-router-dom'
+
+export function useRouter() {
+  return useContext(__RouterContext)
+}

packages/smooth/src/router/RouterHooks.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { withRouter } from 'react-router-dom'
+import { useRouter } from './Router'
 import { applyHook } from '../plugin/browser'
 
 function usePreviousLocation(location) {
@@ -19,17 +19,16 @@ function useScrollTop({ location, prevLocation }) {
   }, [location, prevLocation])
 }
 
-function RouterHooks({ location }) {
+function RouterHooksInternal({ location }) {
   const prevLocation = usePreviousLocation(location)
   const options = { location, prevLocation }
   useScrollTop(options)
   applyHook('onRouteUpdate', options)
   return null
 }
 
-function RouterHooksGuard({ location }) {
+export function RouterHooks() {
+  const { location } = useRouter()
   if (location.hidden) return null
-  return <RouterHooks location={location} />
+  return <RouterHooksInternal location={location} />
 }
-
-export default withRouter(RouterHooksGuard)