feat: give access to language in error

Author: gregberge

packages/smooth/src/client/ErrorBoundary.js

@@ -17,7 +17,7 @@ export default class ErrorBoundary extends React.Component {
     if (error) {
       return (
         <Status code={error.statusCode || 500}>
-          <ErrorPage error={error} />
+          <ErrorPage lang={this.props.lang || null} error={error} />
         </Status>
       )
     }

packages/smooth/src/client/ErrorContext.js

@@ -1,3 +1,13 @@
 import React from 'react'
 
-export default React.createContext({ error: null })
+const ErrorContext = React.createContext({ error: null })
+
+export function ErrorContextProvider({ error, children }) {
+  const value = React.useMemo(() => ({ error }), [error])
+  return <ErrorContext.Provider value={value}>{children}</ErrorContext.Provider>
+}
+
+export function useError() {
+  const { error } = React.useContext(ErrorContext)
+  return error
+}

packages/smooth/src/client/Root.js

@@ -1,16 +1,22 @@
 import React from 'react'
+import { Route } from '../router'
 import Routes from './Routes'
 import ErrorBoundary from './ErrorBoundary'
-import ErrorContext from './ErrorContext'
+import { useError } from './ErrorContext'
+import { HiddenHistoryProvider } from '../router/HiddenHistory'
 
 export default function Root() {
+  const error = useError()
   return (
-    <ErrorContext.Consumer>
-      {({ error }) => (
-        <ErrorBoundary error={error}>
-          <Routes />
-        </ErrorBoundary>
-      )}
-    </ErrorContext.Consumer>
+    <HiddenHistoryProvider>
+      <Route
+        path="/:lang(.{2})?"
+        render={routeProps => (
+          <ErrorBoundary lang={routeProps.match.params.lang} error={error}>
+            <Routes {...routeProps} />
+          </ErrorBoundary>
+        )}
+      />
+    </HiddenHistoryProvider>
   )
 }

packages/smooth/src/client/Routes.js

@@ -2,49 +2,39 @@ import React from 'react'
 import { Switch, Route } from '../router'
 import Page, { getPages } from '../page/Page'
 import { HiddenRouter } from '../router/HiddenRouter'
-import { HiddenHistoryProvider } from '../router/HiddenHistory'
 
 const pages = getPages()
 
-export default function Routes() {
+export default function Routes({
+  match: {
+    url,
+    params: { lang = null },
+  },
+}) {
+  const routes = (
+    <Switch>
+      {pages.map((page, index) => (
+        <Route
+          key={index}
+          path={`${url}${page.routePath}`.replace(/\/\//, '/')}
+          render={({ history, match, location }) => (
+            <Page
+              lang={lang}
+              indexUrl={`${url}${page.indexPath}`}
+              page={page}
+              history={history}
+              match={match}
+              location={location}
+            />
+          )}
+        />
+      ))}
+    </Switch>
+  )
   return (
-    <HiddenHistoryProvider>
-      <Route
-        path="/:lang(.{2})?"
-        render={({
-          match: {
-            url,
-            params: { lang = null },
-          },
-        }) => {
-          const routes = (
-            <Switch>
-              {pages.map((page, index) => (
-                <Route
-                  key={index}
-                  path={`${url}${page.routePath}`.replace(/\/\//, '/')}
-                  render={({ history, match, location }) => (
-                    <Page
-                      lang={lang}
-                      indexUrl={`${url}${page.indexPath}`}
-                      page={page}
-                      history={history}
-                      match={match}
-                      location={location}
-                    />
-                  )}
-                />
-              ))}
-            </Switch>
-          )
-          return (
-            <>
-              {routes}
-              <HiddenRouter>{routes}</HiddenRouter>
-            </>
-          )
-        }}
-      />
-    </HiddenHistoryProvider>
+    <>
+      {routes}
+      <HiddenRouter>{routes}</HiddenRouter>
+    </>
   )
 }

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

@@ -2,4 +2,4 @@ import 'core-js'
 
 export { default as Html } from '__smooth_html'
 export { default as Root } from './Root'
-export { default as ErrorContext } from './ErrorContext'
+export { ErrorContextProvider } from './ErrorContext'

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

@@ -7,13 +7,13 @@ import { ApolloProvider } from 'react-apollo'
 import { loadableReady } from '@loadable/component'
 import { createApolloClient } from './apollo'
 import Root from './Root'
-import ErrorContext from './ErrorContext'
+import { ErrorContextProvider } from './ErrorContext'
 import { BrowserRouter } from '../router'
 import { RouterHooks } from '../router/RouterHooks'
 
 loadableReady(() => {
   ReactDOM.hydrate(
-    <ErrorContext.Provider value={{ error: window.__SMOOTH_ERROR__ }}>
+    <ErrorContextProvider error={window.__SMOOTH_ERROR__}>
       <ApolloProvider client={createApolloClient()}>
         <BrowserRouter>
           <>
@@ -22,7 +22,7 @@ loadableReady(() => {
           </>
         </BrowserRouter>
       </ApolloProvider>
-    </ErrorContext.Provider>,
+    </ErrorContextProvider>,
     document.getElementById('___smooth'),
   )
 })

packages/smooth/src/server/ssr.js

@@ -32,7 +32,11 @@ export default function ssrMiddleware({
       outputPath: path.join(config.cachePath, 'node/static'),
     })
 
-    const { Root, Html, ErrorContext } = nodeExtractor.requireEntrypoint()
+    const {
+      Root,
+      Html,
+      ErrorContextProvider,
+    } = nodeExtractor.requireEntrypoint()
 
     const webExtractor = new ChunkExtractor({ statsFile: webStats })
     const routerContext = {}
@@ -44,13 +48,13 @@ export default function ssrMiddleware({
     })
 
     let jsx = (
-      <ErrorContext.Provider value={{ error }}>
+      <ErrorContextProvider error={error}>
         <ApolloProvider client={apolloClient}>
           <StaticRouter location={req.url} context={routerContext}>
             <Root error={error} />
           </StaticRouter>
         </ApolloProvider>
-      </ErrorContext.Provider>
+      </ErrorContextProvider>
     )
 
     const rootElement = wrapRootElement(config)({