From 8722d15be5f926d2cce631a92308b7ee45231eb6 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sat, 25 Jan 2020 14:04:28 -0500 Subject: [PATCH] refact: extract layout page logic --- gatsby-node.js | 5 ++ package-lock.json | 6 +++ package.json | 2 + src/layouts/HomeLayout/index.tsx | 34 +++++++++++++ src/layouts/{Layout => HomeLayout}/styles.tsx | 0 src/layouts/Layout/index.tsx | 50 ------------------- src/layouts/PageLayout/index.tsx | 22 ++++++++ src/layouts/index.tsx | 32 +++++++----- 8 files changed, 88 insertions(+), 63 deletions(-) create mode 100644 src/layouts/HomeLayout/index.tsx rename src/layouts/{Layout => HomeLayout}/styles.tsx (100%) delete mode 100644 src/layouts/Layout/index.tsx create mode 100644 src/layouts/PageLayout/index.tsx diff --git a/gatsby-node.js b/gatsby-node.js index e078a5b..a62e9b8 100644 --- a/gatsby-node.js +++ b/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 } diff --git a/package-lock.json b/package-lock.json index 5479f9c..52e26f6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4e5c2a4..f9f0ba6 100644 --- a/package.json +++ b/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", diff --git a/src/layouts/HomeLayout/index.tsx b/src/layouts/HomeLayout/index.tsx new file mode 100644 index 0000000..1dcfb39 --- /dev/null +++ b/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 = () => { + const { isHome } = useLocation() + const { locked, unlock } = useLockBodyScroll() + + useEffect(() => { + if (locked) { + unlock() + } + }, [locked]) + + return ( + + + + + + + + ) +} diff --git a/src/layouts/Layout/styles.tsx b/src/layouts/HomeLayout/styles.tsx similarity index 100% rename from src/layouts/Layout/styles.tsx rename to src/layouts/HomeLayout/styles.tsx diff --git a/src/layouts/Layout/index.tsx b/src/layouts/Layout/index.tsx deleted file mode 100644 index 3580531..0000000 --- a/src/layouts/Layout/index.tsx +++ /dev/null @@ -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 = ({ path, children }) => { - const { isHome } = useLocation() - const { locked, unlock } = useLockBodyScroll() - const pageName = path?.split("/")[1] === "rules" ? "Rules" : "About" - - useEffect(() => { - if (locked) { - unlock() - } - }, [locked]) - - return ( - - - - {isHome && ( - - - - - )} - {!isHome && ( - - - - )} - - - ) -} diff --git a/src/layouts/PageLayout/index.tsx b/src/layouts/PageLayout/index.tsx new file mode 100644 index 0000000..593b16f --- /dev/null +++ b/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 = ({ + path, + children, +}) => { + const [, page] = path?.split("/")! + + return ( + + ) +} diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 3b2d46d..b58e12e 100644 --- a/src/layouts/index.tsx +++ b/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 = 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 ( - - {children} + + {props.children} ) } + +export default BaseLayout