feat: adds redirect for 404 how tos

There are many reasons a how to may not be available
on the server. Such as:

* Deleted 🔥
* Renamed ✏️

In an effort to make the experience less of a dead
end for the visitor we redirect them to the search
page.

This current implementation takes place on the client
side after attempting to load a how-to entry from
the backend data store.

Reference:
#1168

cypress/integration/howto/read.spec.ts

@@ -1,3 +1,5 @@
+import crypto from 'crypto'
+
 describe('[How To]', () => {
   const SKIP_TIMEOUT = { timeout: 300 }
   const totalHowTo = 7
@@ -195,4 +197,18 @@ describe('[How To]', () => {
         .should('include', `${specificHowtoUrl}/edit`)
     })
   })
+
+  describe('[Fail to find a How-to]', () => {
+    const uuid = crypto.randomBytes(16).toString('hex')
+    const howToNotFoundUrl = `/how-to/this-how-to-does-not-exist-${uuid}`
+
+    it('[Redirects to search]', () => {
+      cy.visit(howToNotFoundUrl)
+      cy.location('pathname').should('eq', '/how-to')
+      cy.location('search').should(
+        'eq',
+        `?search=this+how+to+does+not+exist+${uuid}`,
+      )
+    })
+  })
 })

src/pages/Howto/Content/Howto/Howto.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { RouteComponentProps } from 'react-router'
+import { RouteComponentProps, Redirect } from 'react-router'
 // TODO add loader (and remove this material-ui dep)
 import { inject, observer } from 'mobx-react'
 import { HowtoStore } from 'src/stores/Howto/howto.store'
@@ -19,8 +19,6 @@ import WhiteBubble3 from 'src/assets/images/white-bubble_3.svg'
 import { Link } from 'src/components/Links'
 import { zIndex } from 'src/themes/styled.theme'
 import { Loader } from 'src/components/Loader'
-import { Route } from 'react-router-dom'
-import { NotFoundPage } from '../../../NotFound/NotFound'
 import { UserStore } from 'src/stores/User/user.store'
 import { HowToComments } from './HowToComments/HowToComments'
 // The parent container injects router props along with a custom slug parameter (RouteComponentProps<IRouterCustomParams>).
@@ -122,6 +120,7 @@ export class Howto extends React.Component<
     const { isLoading } = this.state
     const loggedInUser = this.injected.userStore.activeUser
     const { activeHowto } = this.store
+
     if (activeHowto) {
       return (
         <>
@@ -158,7 +157,18 @@ export class Howto extends React.Component<
         </>
       )
     } else {
-      return isLoading ? <Loader /> : <Route component={NotFoundPage} />
+      return isLoading ? (
+        <Loader />
+      ) : (
+        <Redirect
+          to={{
+            pathname: '/how-to',
+            search:
+              '?search=' +
+              (this.props?.match?.params?.slug).replace(/\-/gi, ' '),
+          }}
+        />
+      )
     }
   }
 }