From 3b3a68698fad0a1154b4d0f620235c84ec26b2b4 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Fri, 8 Nov 2019 16:58:31 -0800
Subject: [PATCH] refact: extract location to provider/hook

---
 src/LocationProvider.tsx     | 33 +++++++++++++++++++++++++++++++++
 src/hooks/useLocation.tsx    | 12 ++++++++++++
 src/layouts/Layout/index.tsx |  5 +++--
 src/layouts/index.tsx        | 18 ++++++++++++------
 4 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 src/LocationProvider.tsx
 create mode 100644 src/hooks/useLocation.tsx

diff --git a/src/LocationProvider.tsx b/src/LocationProvider.tsx
new file mode 100644
index 0000000..84816bc
--- /dev/null
+++ b/src/LocationProvider.tsx
@@ -0,0 +1,33 @@
+import { WindowLocation } from "@reach/router"
+import React, { FC, PropsWithChildren, useMemo } from "react"
+
+export interface ILocationContextInterface {
+  location: WindowLocation | void
+  isHome: boolean
+}
+
+interface ILocationProviderProps {
+  location: WindowLocation | void
+}
+
+export const LocationContext = React.createContext<ILocationContextInterface | null>(
+  null
+)
+
+export const LocationProvider: FC<
+  PropsWithChildren<ILocationProviderProps>
+> = ({ children, location }) => {
+  const memoizedContextValue = useMemo(
+    () => ({
+      location,
+      isHome: location ? location.pathname === "/" : false,
+    }),
+    [location]
+  )
+
+  return (
+    <LocationContext.Provider value={memoizedContextValue}>
+      {children}
+    </LocationContext.Provider>
+  )
+}
diff --git a/src/hooks/useLocation.tsx b/src/hooks/useLocation.tsx
new file mode 100644
index 0000000..730a9f5
--- /dev/null
+++ b/src/hooks/useLocation.tsx
@@ -0,0 +1,12 @@
+import { useContext } from "react"
+import { ILocationContextInterface, LocationContext } from "../LocationProvider"
+
+export default function useLocation(): ILocationContextInterface {
+  const locationContext = useContext(LocationContext)
+
+  if (!locationContext) {
+    throw Error("Need context")
+  }
+
+  return locationContext
+}
diff --git a/src/layouts/Layout/index.tsx b/src/layouts/Layout/index.tsx
index 339806f..cc9fcf9 100644
--- a/src/layouts/Layout/index.tsx
+++ b/src/layouts/Layout/index.tsx
@@ -13,12 +13,13 @@ import { Footer } from "../../components/Footer"
 import { Header } from "../../components/Header"
 import { WavesBottom } from "../../components/Waves"
 import { GlobalStyles } from "../../globalStyles"
+import useLocation from "../../hooks/useLocation"
 import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
 import { ThemeProvider } from "../../ThemeProvider"
 import * as SC from "./styles"
 
-export const Layout: FC<RouteComponentProps> = ({ children, location }) => {
-  const isHome = location ? location.pathname === "/" : false
+export const Layout: FC<RouteComponentProps> = ({ children }) => {
+  const { isHome } = useLocation()
   const { locked, unlock } = useLockBodyScroll()
 
   useEffect(() => {
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 8b4f54b..10dcad1 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -1,4 +1,6 @@
+import { WindowLocation } from "@reach/router"
 import React, { PropsWithChildren } from "react"
+import { LocationProvider } from "../LocationProvider"
 import { Layout } from "./Layout"
 import { ResourcesLayout } from "./ResourcesLayout"
 
@@ -10,11 +12,15 @@ export default function BaseLayout({
   pageContext: {
     layout?: string
   }
-  location: Location
+  location: WindowLocation
 }>) {
-  if (pageContext.layout === "resources") {
-    return <ResourcesLayout>{children}</ResourcesLayout>
-  }
-
-  return <Layout location={location}>{children}</Layout>
+  return (
+    <LocationProvider location={location}>
+      {pageContext.layout === "resources" ? (
+        <ResourcesLayout>{children}</ResourcesLayout>
+      ) : (
+        <Layout>{children}</Layout>
+      )}
+    </LocationProvider>
+  )
 }