refact: extract layout page logic

src/layouts/index.tsx

@@ -1,34 +1,40 @@
 import { WindowLocation } from "@reach/router"
-import React, { PropsWithChildren, useMemo } from "react"
+import React, { FC, useMemo } from "react"
 import { LocationProvider } from "../LocationProvider"
 import { ArchivesLayout } from "./ArchivesLayout"
-import { Layout } from "./Layout"
+import { HomeLayout } from "./HomeLayout"
+import { PageLayout } from "./PageLayout"
 import { ResourcesLayout } from "./ResourcesLayout"
 
-export default function BaseLayout({
-  children,
-  location,
-  pageContext,
-}: PropsWithChildren<{
+export interface IPageContext {
   pageContext: {
     layout?: string
   }
+}
+
+interface IBaseLayout extends IPageContext {
   location: WindowLocation
-}>) {
+}
+
+const BaseLayout: FC<IBaseLayout> = props => {
   const ResolvedLayout = useMemo(() => {
-    switch (pageContext.layout) {
+    switch (props.pageContext.layout) {
       case "resources":
         return ResourcesLayout
       case "archives":
         return ArchivesLayout
+      case "regular":
+        return PageLayout
       default:
-        return Layout
+        return HomeLayout
     }
-  }, [pageContext.layout])
+  }, [props.pageContext])
 
   return (
-    <LocationProvider location={location}>
-      <ResolvedLayout path={location.pathname}>{children}</ResolvedLayout>
+    <LocationProvider location={props.location}>
+      <ResolvedLayout {...props}>{props.children}</ResolvedLayout>
     </LocationProvider>
   )
 }
+
+export default BaseLayout