refact: extract layout page logic

src/layouts/HomeLayout/index.tsx

@@ -0,0 +1,34 @@
+import { RouteComponentProps } from "@reach/router"
+import React, { FC, useEffect } from "react"
+
+import { HomeHeader } from "../../components/HomeHeader"
+import { SEO } from "../../components/SEO"
+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 HomeLayout: FC<RouteComponentProps> = () => {
+  const { isHome } = useLocation()
+  const { locked, unlock } = useLockBodyScroll()
+
+  useEffect(() => {
+    if (locked) {
+      unlock()
+    }
+  }, [locked])
+
+  return (
+    <ThemeProvider>
+      <SC.LayoutWrapper>
+        <GlobalStyles />
+        <SEO
+          title="Home"
+          description="The Programmer's Hangout (TPH) is a discord community geared towards programming."
+        />
+        <HomeHeader isHome={isHome} />
+      </SC.LayoutWrapper>
+    </ThemeProvider>
+  )
+}

src/layouts/Layout/index.tsx

@@ -1,50 +0,0 @@
-import { RouteComponentProps } from "@reach/router"
-import React, { FC, Fragment, useEffect } from "react"
-
-import { HomeHeader } from "../../components/HomeHeader"
-import { SEO } from "../../components/SEO"
-import { Sidebar } from "../../components/Sidebar"
-import { GlobalStyles } from "../../globalStyles"
-import useLocation from "../../hooks/useLocation"
-import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
-import { ThemeProvider } from "../../ThemeProvider"
-import { ColumnLayout } from "../ColumnLayout"
-import * as SC from "./styles"
-
-export const Layout: FC<RouteComponentProps> = ({ path, children }) => {
-  const { isHome } = useLocation()
-  const { locked, unlock } = useLockBodyScroll()
-  const pageName = path?.split("/")[1] === "rules" ? "Rules" : "About"
-
-  useEffect(() => {
-    if (locked) {
-      unlock()
-    }
-  }, [locked])
-
-  return (
-    <ThemeProvider>
-      <SC.LayoutWrapper>
-        <GlobalStyles />
-        {isHome && (
-          <Fragment>
-            <SEO
-              title="Home"
-              description="The Programmer's Hangout (TPH) is a discord community geared towards programming."
-            />
-            <HomeHeader isHome={isHome} />
-          </Fragment>
-        )}
-        {!isHome && (
-          <Fragment>
-            <ColumnLayout
-              title={pageName}
-              sidebar={Sidebar}
-              content={children}
-            />
-          </Fragment>
-        )}
-      </SC.LayoutWrapper>
-    </ThemeProvider>
-  )
-}

src/layouts/PageLayout/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from "react"
+
+import { RouteComponentProps } from "@reach/router"
+import startCase from "lodash/startCase"
+import { Sidebar } from "../../components/Sidebar"
+import { ColumnLayout } from "../ColumnLayout"
+import { IPageContext } from "../index"
+
+export const PageLayout: FC<IPageContext & RouteComponentProps> = ({
+  path,
+  children,
+}) => {
+  const [, page] = path?.split("/")!
+
+  return (
+    <ColumnLayout
+      title={startCase(page)}
+      sidebar={Sidebar}
+      content={children}
+    />
+  )
+}

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