From 5fbe067b00affda296642fbd079b8f2db6bf88e3 Mon Sep 17 00:00:00 2001
From: Amy <minds10@hotmail.com>
Date: Mon, 23 Aug 2021 16:28:25 -0400
Subject: [PATCH] Refactor constitution and code of conduct pages shapes
 backgrounds

---
 components/OrganizedContent/ReadAll.tsx | 20 ++++++++++----------
 components/OrganizedContent/Section.tsx | 20 ++++++++++----------
 pages/about/constitution.tsx            |  6 ++++++
 pages/about/constitution/[section].tsx  |  6 ++++++
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/components/OrganizedContent/ReadAll.tsx b/components/OrganizedContent/ReadAll.tsx
index 1cf40b37..6ce0ab68 100644
--- a/components/OrganizedContent/ReadAll.tsx
+++ b/components/OrganizedContent/ReadAll.tsx
@@ -8,11 +8,7 @@ import {
   OrganizedContent,
 } from "@/components/OrganizedContent";
 
-import {
-  mobileShapesConfig,
-  aboutShapesConfig,
-  GetShapesConfig,
-} from "../ShapesBackground";
+import { GetShapesConfig } from "../ShapesBackground";
 
 import { Header } from "./Header";
 
@@ -32,10 +28,17 @@ export interface Options {
   pagePath: string;
   title: string;
   image: string;
+  getShapesConfig: GetShapesConfig;
   link?: ComponentType<LinkProps>;
 }
 
-export function createReadAllPage({ title, image, pagePath, link }: Options) {
+export function createReadAllPage({
+  title,
+  image,
+  pagePath,
+  getShapesConfig,
+  link,
+}: Options) {
   const Link = link ?? createLink(pagePath);
 
   function Page({ sections }: Props) {
@@ -65,10 +68,7 @@ export function createReadAllPage({ title, image, pagePath, link }: Options) {
     );
   }
 
-  // TODO: differentiate between About pages and Resources pages
-  Page.getShapesConfig = (() => {
-    return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
-  }) as GetShapesConfig;
+  Page.getShapesConfig = getShapesConfig;
 
   return Page;
 }
diff --git a/components/OrganizedContent/Section.tsx b/components/OrganizedContent/Section.tsx
index e32ec1c0..0d7cc54d 100644
--- a/components/OrganizedContent/Section.tsx
+++ b/components/OrganizedContent/Section.tsx
@@ -7,11 +7,7 @@ import {
   OrganizedContent,
 } from "@/components/OrganizedContent";
 
-import {
-  mobileShapesConfig,
-  aboutShapesConfig,
-  GetShapesConfig,
-} from "../ShapesBackground";
+import { GetShapesConfig } from "../ShapesBackground";
 
 import { Header } from "./Header";
 
@@ -30,10 +26,17 @@ export interface Options {
   title: string;
   pagePath: string;
   image: string;
+  getShapesConfig: GetShapesConfig;
   link?: ComponentType<LinkProps>;
 }
 
-export function createSectionPage({ title, image, pagePath, link }: Options) {
+export function createSectionPage({
+  title,
+  image,
+  pagePath,
+  getShapesConfig,
+  link,
+}: Options) {
   const Link = link ?? createLink(pagePath);
 
   function Page(this: void, { content, sections, current }: Props) {
@@ -50,10 +53,7 @@ export function createSectionPage({ title, image, pagePath, link }: Options) {
     );
   }
 
-  // TODO: differentiate between About pages and Resources pages
-  Page.getShapesConfig = (() => {
-    return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
-  }) as GetShapesConfig;
+  Page.getShapesConfig = getShapesConfig;
 
   return Page;
 }
diff --git a/pages/about/constitution.tsx b/pages/about/constitution.tsx
index 0e82b62a..9bf557f5 100644
--- a/pages/about/constitution.tsx
+++ b/pages/about/constitution.tsx
@@ -2,6 +2,10 @@ import path from "path";
 
 import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
 import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
+import {
+  mobileShapesConfig,
+  aboutShapesConfig,
+} from "@/components/ShapesBackground";
 
 export const CONSTITUTION_PAGE = path.join("about", "constitution");
 
@@ -9,6 +13,8 @@ export default createReadAllPage({
   title: "Constitution",
   image: "images/constitution.svg",
   pagePath: CONSTITUTION_PAGE,
+  getShapesConfig: () =>
+    window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
 });
 
 export const getStaticProps = createReadAllGetStaticProps(CONSTITUTION_PAGE);
diff --git a/pages/about/constitution/[section].tsx b/pages/about/constitution/[section].tsx
index d8c6f3a4..d6925ff5 100644
--- a/pages/about/constitution/[section].tsx
+++ b/pages/about/constitution/[section].tsx
@@ -3,6 +3,10 @@ import {
   createSectionGetStaticPaths,
   createSectionGetStaticProps,
 } from "@/components/OrganizedContent/static";
+import {
+  mobileShapesConfig,
+  aboutShapesConfig,
+} from "@/components/ShapesBackground";
 
 import { CONSTITUTION_PAGE } from "../constitution";
 
@@ -10,6 +14,8 @@ export default createSectionPage({
   title: "Constitution",
   image: "images/constitution.svg",
   pagePath: CONSTITUTION_PAGE,
+  getShapesConfig: () =>
+    window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
 });
 
 export const getStaticProps = createSectionGetStaticProps(CONSTITUTION_PAGE);