refact: extract location to provider/hook

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

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

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 }) => {
+export const Layout: FC<RouteComponentProps> = ({ children }) => {
-  const isHome = location ? location.pathname === "/" : false
+  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 (
-    return <ResourcesLayout>{children}</ResourcesLayout>
+    <LocationProvider location={location}>
-  }
+      {pageContext.layout === "resources" ? (
-
+        <ResourcesLayout>{children}</ResourcesLayout>
-  return <Layout location={location}>{children}</Layout>
+      ) : (
+        <Layout>{children}</Layout>
+      )}
+    </LocationProvider>
+  )
 }