refact(404): convert link correction function to functional component

src/components/404LinkCorrection/index.tsx

@@ -1,6 +1,6 @@
 import { WindowLocation } from "@reach/router"
 import { Link } from "gatsby"
-import React, { Fragment } from "react"
+import React, { FC, Fragment } from "react"
 
 import { FileConnection } from "../../../generated/graphql"
 
@@ -55,12 +55,19 @@ function levenshteinDistance(term1: string, term2: string) {
   return matrix[term2.length][term1.length]
 }
 
-export const getPossibleCorrections = (
+interface IPossibleCorrections {
-  basepath: string,
+  basepath: string
-  location: WindowLocation,
+  location: WindowLocation
-  data: { allFile: FileConnection },
+  data: { allFile: FileConnection }
-  threshold: number
+  threshold?: number
-) => {
+}
+
+export const PossibleCorrections: FC<IPossibleCorrections> = ({
+  basepath,
+  location,
+  data,
+  threshold = 8,
+}) => {
   // the data prop has the graphql result
   // we're abstracting it to `linkArray` to just have array of edges matched
   // must use `.node.absolutePath` on each edge to get each node's absolute link

src/pages/archives/404.tsx

@@ -6,7 +6,7 @@ import { FileConnection } from "../../../generated/graphql"
 import { ComponentQuery } from "../../../typings"
 import { SEO } from "../../components/SEO"
 
-import { getPossibleCorrections } from "../../components/404LinkCorrection"
+import { PossibleCorrections } from "../../components/404LinkCorrection"
 
 export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
@@ -14,7 +14,13 @@ export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
     <h1>RESOURCE NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
     <Location>
-      {({ location }) => getPossibleCorrections("archives/", location, data, 8)}
+      {({ location }) => (
+        <PossibleCorrections
+          basepath="archives/"
+          location={location}
+          data={data}
+        />
+      )}
     </Location>
   </Fragment>
 )

src/pages/resources/404.tsx

@@ -4,7 +4,7 @@ import React, { Fragment } from "react"
 
 import { FileConnection } from "../../../generated/graphql"
 import { ComponentQuery } from "../../../typings"
-import { getPossibleCorrections } from "../../components/404LinkCorrection"
+import { PossibleCorrections } from "../../components/404LinkCorrection"
 import { SEO } from "../../components/SEO"
 
 export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
@@ -13,9 +13,13 @@ export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
     <h1>RESOURCE NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
     <Location>
-      {({ location }) =>
+      {({ location }) => (
-        getPossibleCorrections("resources/", location, data, 8)
+        <PossibleCorrections
-      }
+          basepath="resources/"
+          location={location}
+          data={data}
+        />
+      )}
     </Location>
   </Fragment>
 )