refact: extract location to provider/hook

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(() => {

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>
+  )
 }