feat: adds redirect for 404 how tos

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,19 @@ 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, ' ') +
+              '&source=how-to-not-found',
+          }}
+        />
+      )
     }
   }
 }

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

@@ -50,6 +50,7 @@ export class HowtoList extends React.Component<any, IState> {
     this.state = {
       isLoading: true,
     }
+
     if (props.location.search) {
       const searchParams = new URLSearchParams(props.location.search)
 
@@ -67,21 +68,41 @@ export class HowtoList extends React.Component<any, IState> {
       if (searchQuery) {
         this.props.howtoStore.updateSearchValue(searchQuery)
       }
+
+      this.props.howtoStore.updateReferrerSource(
+        searchParams.get('source')?.toString(),
+      )
     }
   }
   get injected() {
     return this.props as InjectedProps
   }
 
   public render() {
-    const { filteredHowtos, selectedTags, searchValue } = this.props.howtoStore
+    const {
+      filteredHowtos,
+      selectedTags,
+      searchValue,
+      referrerSource,
+    } = this.props.howtoStore
 
     return (
       <>
         <Flex py={26}>
-          <Heading medium bold txtcenter width={1} my={20}>
-            Learn & share how to recycle, build and work with plastic
-          </Heading>
+          {referrerSource ? (
+            <Box width={1}>
+              <Heading medium bold txtcenter mt={20}>
+                The page you were looking for was moved or doesn't exist.
+              </Heading>
+              <Heading small txtcenter mt={3} mb={10}>
+                Search all of our how-to's below
+              </Heading>
+            </Box>
+          ) : (
+            <Heading medium bold txtcenter width={1} my={20}>
+              Learn & share how to recycle, build and work with plastic
+            </Heading>
+          )}
         </Flex>
         <Flex
           flexWrap={'nowrap'}

src/stores/Howto/howto.store.tsx

@@ -42,8 +42,11 @@ export class HowtoStore extends ModuleStore {
   @observable
   public searchValue: string
   @observable
+  public referrerSource: string
+  @observable
   public uploadStatus: IHowToUploadStatus = getInitialUploadStatus()
   @observable howtoStats: IHowtoStats | undefined
+
   constructor(rootStore: RootStore) {
     // call constructor on common ModuleStore (with db endpoint), which automatically fetches all docs at
     // the given endpoint and emits changes as data is retrieved from cache and live collection
@@ -52,6 +55,7 @@ export class HowtoStore extends ModuleStore {
     this.allDocs$.subscribe((docs: IHowtoDB[]) => this.setAllHowtos(docs))
     this.selectedTags = {}
     this.searchValue = ''
+    this.referrerSource = ''
   }
 
   @action
@@ -121,6 +125,10 @@ export class HowtoStore extends ModuleStore {
     this.searchValue = query
   }
 
+  public updateReferrerSource(source: string) {
+    this.referrerSource = source
+  }
+
   public updateSelectedTags(tagKey: ISelectedTags) {
     this.selectedTags = tagKey
   }