refact: extract layout page logic

gatsby-node.js

@@ -9,8 +9,13 @@ const requiredArticleFrontmatter = ["authors", "date"]
 const LAYOUT_RESOURCES = "resources"
 const LAYOUT_ARCHIVES = "archives"
 const LAYOUT_REGULAR = "regular"
+const LAYOUT_HOME = "home"
 
 function resolveLayout(path) {
+  if (path === "/") {
+    return LAYOUT_HOME
+  }
+
   if (path.match(/resources/)) {
     return LAYOUT_RESOURCES
   }

package-lock.json

@@ -3677,6 +3677,12 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
       "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA=="
     },
+    "@types/lodash": {
+      "version": "4.14.149",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.149.tgz",
+      "integrity": "sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==",
+      "dev": true
+    },
     "@types/mdast": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.3.tgz",

package.json

@@ -44,6 +44,7 @@
     "gatsby-transformer-remark": "^2.6.45",
     "gatsby-transformer-sharp": "^2.3.9",
     "katex": "^0.11.1",
+    "lodash": "^4.17.15",
     "polished": "^3.4.2",
     "prismjs": "^1.17.1",
     "ramda": "^0.26.1",
@@ -61,6 +62,7 @@
     "@graphql-codegen/typescript": "1.9.1",
     "@graphql-codegen/typescript-operations": "1.9.1",
     "@graphql-codegen/typescript-react-apollo": "1.9.1",
+    "@types/lodash": "^4.14.149",
     "@types/prismjs": "^1.16.0",
     "@types/ramda": "^0.26.39",
     "@types/react": "^16.9.17",

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