✨ hoc / not found routes

components/react/k-ramel/src/__snapshots__/hoc.spec.js.snap

@@ -26,6 +26,14 @@ exports[`hoc array of codes should print relative route -strict equality- 1`] =
 </div>
 `;
 
+exports[`hoc not found should print the failover component when route is not found 1`] = `
+<div>
+  <div>
+    Not found component
+  </div>
+</div>
+`;
+
 exports[`hoc uniq code (string) should not print absolute route -child- 1`] = `<div />`;
 
 exports[`hoc uniq code (string) should print absolute route -strict equality- 1`] = `

components/react/k-ramel/src/hoc.jsx

@@ -48,6 +48,15 @@ const hoc = (code, options) => Component => class extends React.Component {
       return
     }
 
+    // The route is not found
+    // we can show the wrapped component if `notFound` is given into options
+    if (!router.isFound()) {
+      const show = (options && options.notFound)
+      this.setState(innerState => ({ ...innerState, show }))
+
+      return
+    }
+
     // Absolute mode, we are looking in top level only
     const codes = [].concat(code)
     let currentRoute = router.getCurrentRoute()
@@ -81,5 +90,6 @@ const hoc = (code, options) => Component => class extends React.Component {
 }
 
 hoc.absolute = (code, options) => hoc(code, { ...options, absolute: true })
+hoc.notFound = options => hoc(undefined, { ...options, notFound: true })
 
 export default hoc

components/react/k-ramel/src/hoc.spec.js

@@ -8,7 +8,7 @@ import { createStore } from 'k-ramel'
 import { provider } from '@k-ramel/react'
 import hoc from './hoc'
 
-const matchApp = (code, multiple = false) => () => {
+const matchApp = (code, multiple = false, notFound) => () => {
   const store = createStore(
     {
       dummy: (state = 'nothing') => state, // dummy reducer to get rid of error from redux
@@ -17,6 +17,7 @@ const matchApp = (code, multiple = false) => () => {
       drivers: {
         router: {
           getDriver: () => ({
+            isFound: () => !notFound,
             getState: () => 'state',
             getResult: () => 'result',
             getRoute: () => ({
@@ -34,10 +35,12 @@ const matchApp = (code, multiple = false) => () => {
 
   const RelativeDecoratedComponent = hoc(multiple ? ['relative', 'dummy'] : 'relative')(() => <div>Relative component</div>)
   const AbsoluteDecoratedComponent = hoc.absolute(multiple ? ['dummy', 'absolute'] : 'absolute')(() => <div>Absolute component</div>)
+  const NotFoundDecoratedComponent = hoc.notFound()(() => <div>Not found component</div>)
   const App = provider(store)(() => (
     <div>
       <RelativeDecoratedComponent />
       <AbsoluteDecoratedComponent />
+      <NotFoundDecoratedComponent />
     </div>
   ))
 
@@ -58,4 +61,8 @@ describe('hoc', () => {
     it('should print absolute route -strict equality-', matchApp('absolute', true))
     it('should not print absolute route -child-', matchApp('absolute_child', true))
   })
+
+  describe('not found', () => {
+    it('should print the failover component when route is not found', matchApp(undefined, false, true))
+  })
 })