Merge pull request #636 from thepolicylab-projectportals/refactor/rem…

…ove-additiona-tsx-files refactor: remove additional .js files for imports
thepolicylab-projectportals · Oct 11, 2023 · 04be28a · 04be28a
2 parents 2189ed3 + 4aa288b
commit 04be28a
Show file tree

Hide file tree

Showing 14 changed files with 247 additions and 296 deletions.
diff --git a/README.md b/README.md
@@ -67,31 +67,6 @@ Updated components in
 [📁`gatsby-theme-project-portal`](./packages/gatsby-theme-project-portal) will be shown in the 
 Storybook.
 
-### Build Site in Separate Directory (Locally)
-
-Load the shell scripts:
-```zsh
-source test-packaging.sh
-```
-
-Run the packaging, build the example site, and serve it locally:
-```zsh
-package-and-install -t "packages/example/" -w @thepolicylab-projectportals/gatsby-theme-project-portal
-```
-
-Please note `yarn` version should be `v3.4.1`. Check it using: 
-
-```
-yarn -v
-```
-
-### Testing
-
-#### Local
-
-Run the "all local build and packaging checks (with npm)" run configuration in WebStorm.
-
-
 ### Release Process
 
  The release process is automated using GitHub Actions. 
@@ -123,7 +98,7 @@ theme and other plugins from the registry instead of the local directory:
 
 ```zsh
 source test-packaging.sh
-package-and-install -t "packages/example-site/" -r react@^18,react-dom@^18,gatsby@^5,@thepolicylab-projectportals/gatsby-theme-project-portal,@thepolicylab-projectportals/project-portal-content-netlify
+package-and-install -t "packages/example-site/" -w @thepolicylab-projectportals/gatsby-theme-project-portal,@thepolicylab-projectportals/project-portal-content-netlify
 ```
 
 ### Use Prettier Code Formatter in WebStorm

diff --git a/packages/gatsby-theme-project-portal/gatsby-node.js b/packages/gatsby-theme-project-portal/gatsby-node.js
@@ -1,16 +1,12 @@
 const { withDefaults } = require(`./utils/default-options`)
+const fs = require("fs")
 
 const {
   projectTypeDefs,
   projectPortalConfigTypeDefs,
   contactTypeDefs,
   pageTypeDefs,
 } = require(`./utils/types`)
-const CardPageTemplate = require.resolve(`./src/templates/card-page`)
-const AboutPageTemplate = require.resolve(`./src/templates/about-page`)
-const ContactPageTemplate = require.resolve(`./src/templates/contact-page`)
-const ThankYouPageTemplate = require.resolve(`./src/templates/thank-you-page`)
-const fs = require("fs")
 
 exports.onPreBootstrap = ({ reporter }, themeOptions) => {
   const { themeImageDirectory } = withDefaults(themeOptions)
@@ -51,46 +47,38 @@ exports.sourceNodes = ({ actions, createContentDigest }, themeOptions) => {
   })
 }
 
-const ProjectDetailPageTemplate = require.resolve(
-  `./src/templates/project-detail-page`
-)
-
 exports.createPages = async ({ graphql, actions, reporter }) => {
   const { createPage } = actions
 
-  const result = await graphql(
-    `
-      query {
-        allProject {
-          nodes {
-            slug
-          }
+  const result = await graphql(`
+    query {
+      allProject {
+        nodes {
+          slug
         }
-        allCardPage {
-          nodes {
-            slug
-            filterOn {
-              status
-            }
+      }
+      allCardPage {
+        nodes {
+          slug
+          filterOn {
+            status
           }
         }
-        aboutPages: allGeneralPage(
-          filter: { templateKey: { eq: "AboutPage" } }
-        ) {
-          nodes {
-            slug
-          }
+      }
+      aboutPages: allGeneralPage(filter: { templateKey: { eq: "AboutPage" } }) {
+        nodes {
+          slug
         }
-        contactPages: allGeneralPage(
-          filter: { templateKey: { eq: "ContactPage" } }
-        ) {
-          nodes {
-            slug
-          }
+      }
+      contactPages: allGeneralPage(
+        filter: { templateKey: { eq: "ContactPage" } }
+      ) {
+        nodes {
+          slug
         }
       }
-    `
-  )
+    }
+  `)
 
   if (result.errors) {
     reporter.panicOnBuild(result.errors)
@@ -105,7 +93,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     const { slug } = project
     createPage({
       path: `project/${slug}`,
-      component: ProjectDetailPageTemplate,
+      component: require.resolve(`./src/layouts/ProjectDetailPage.tsx`),
       context: {
         slug: slug,
       },
@@ -120,7 +108,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     } = page
     createPage({
       path: `/${slug}`,
-      component: CardPageTemplate,
+      component: require.resolve(`./src/layouts/CardPageLayout.tsx`),
       context: {
         slug: slug,
         statusFilter: status,
@@ -133,7 +121,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     const { slug } = page
     createPage({
       path: `/${slug}`,
-      component: AboutPageTemplate,
+      component: require.resolve(`./src/layouts/AboutPageLayout.tsx`),
       context: {
         slug: slug,
       },
@@ -145,15 +133,15 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     const thankYouPagePath = `/${slug}/thank-you`
     createPage({
       path: `/${slug}`,
-      component: ContactPageTemplate,
+      component: require.resolve(`./src/layouts/ContactPageLayout.tsx`),
       context: {
         slug: slug,
         thankYouPagePath: thankYouPagePath,
       },
     })
     createPage({
       path: thankYouPagePath,
-      component: ThankYouPageTemplate,
+      component: require.resolve("./src/layouts/ThankYouPageLayout.tsx"),
       context: {
         slug: slug,
       },

diff --git a/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.tsx
@@ -1,11 +1,10 @@
 import React, { FunctionComponent } from "react"
-import { Accordion } from "../components/Accordion"
-import {
-  HeaderWithImage,
-  MarkdownText,
-} from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/components"
-import { isNA } from "../utils"
+import { graphql } from "gatsby"
 import { ImageDataLike } from "gatsby-plugin-image"
+import { HeaderWithImage, MarkdownText, Accordion } from "../components"
+import { isNA } from "../utils"
+
+export { Head } from "../hooks"
 
 interface AboutProps {
   data: {
@@ -95,3 +94,33 @@ export const AboutPageLayout: FunctionComponent<AboutProps> = ({
     </>
   )
 }
+
+export default AboutPageLayout
+
+export const query = graphql`
+  query AboutQuery($slug: String!) {
+    ...HeadData
+    ...LayoutData
+    page: generalPage(slug: { eq: $slug }) {
+      title
+      description: lede
+    }
+    generalPage(slug: { eq: $slug }) {
+      pageName
+      title
+      header
+      aims {
+        title
+        text
+      }
+      faq {
+        title
+        text
+      }
+      accessibility
+      image {
+        ...HeaderWithImageBackground
+      }
+    }
+  }
+`
diff --git a/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.tsx
@@ -1,6 +1,9 @@
-import { ProjectPage, CardProps } from "../components"
 import React, { FunctionComponent } from "react"
+import { graphql } from "gatsby"
 import { ImageDataLike } from "gatsby-plugin-image"
+import { ProjectPage, CardProps } from "../components"
+
+export { Head } from "../hooks"
 
 export interface CardPageLayoutProps {
   data: {
@@ -39,3 +42,30 @@ export const CardPageLayout: FunctionComponent<CardPageLayoutProps> = ({
     </>
   )
 }
+
+export default CardPageLayout
+
+export const query = graphql`
+  query CardPageQuery($slug: String!, $statusFilter: [String]) {
+    ...HeadData
+    ...LayoutData
+    page: cardPage(slug: { eq: $slug }) {
+      title
+      description: lede
+    }
+    cardPage(slug: { eq: $slug }) {
+      pageName
+      title
+      lede
+      sortOptions
+      image {
+        ...HeaderWithImageBackground
+      }
+    }
+    allProject(filter: { status: { in: $statusFilter } }) {
+      nodes {
+        ...CardDetails
+      }
+    }
+  }
+`
diff --git a/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.tsx b/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.tsx
@@ -1,9 +1,10 @@
 import React, { Component, FunctionComponent } from "react"
-import { navigate } from "gatsby"
-import { MarkdownText } from "../components"
-import { HeaderWithImage } from "../components"
-import ReCAPTCHA from "react-google-recaptcha"
+import { graphql, navigate } from "gatsby"
 import { ImageDataLike } from "gatsby-plugin-image"
+import ReCAPTCHA from "react-google-recaptcha"
+import { MarkdownText, HeaderWithImage } from "../components"
+
+export { Head } from "../hooks"
 
 const encode = (data: { [Key: string]: string }) => {
   return Object.keys(data)
@@ -326,3 +327,26 @@ export const ContactPageLayout: FunctionComponent<ContactProps> = ({
     </>
   )
 }
+
+export default ContactPageLayout
+
+export const query = graphql`
+  query ContactQuery($slug: String!) {
+    ...HeadData
+    ...LayoutData
+    page: generalPage(slug: { eq: $slug }) {
+      title
+      description: lede
+    }
+    generalPage(slug: { eq: $slug }) {
+      title
+      lede
+      image {
+        ...HeaderWithImageBackground
+      }
+    }
+    projectPortalConfig {
+      recaptchaSiteKey
+    }
+  }
+`