pageProp fixes

src/app/career-pathways/[industry]/page.tsx

@@ -54,11 +54,13 @@ export async function generateMetadata() {
 export default async function PathwayPage({
   params,
 }: {
-  params: {
-    industry: string;
-  };
+  params: Promise<{ industry: string }>; // Adjust the type to expect a Promise
 }) {
-  const { industryCollection } = (await getIndustryData(params.industry)) as {
+  const resolvedParams = await params; // Await the params before accessing them
+
+  const { industryCollection } = (await getIndustryData(
+    resolvedParams.industry
+  )) as {
     industryCollection: {
       items: IndustryProps[];
     };

src/app/occupation/[code]/page.tsx

@@ -21,7 +21,7 @@ import Script from "next/script";
 
 async function getData(soc: string) {
   const pageData = await fetch(
-    `${process.env.REACT_APP_API_URL}/api/occupations/${soc}`,
+    `${process.env.REACT_APP_API_URL}/api/occupations/${soc}`
   );
 
   return {
@@ -33,16 +33,19 @@ export const generateMetadata = async ({
   params,
   searchParams,
 }: {
-  searchParams: {
+  searchParams: Promise<{
     mockData: string;
-  };
-  params: { code: string };
+  }>;
+  params: Promise<{ code: string }>;
 }) => {
+  const resolvedParams = await params;
+  const resolvedSearchParams = await searchParams;
+
   const pageData = await fetch(
-    `${process.env.REACT_APP_API_URL}/api/occupations/${params.code}`,
+    `${process.env.REACT_APP_API_URL}/api/occupations/${resolvedParams.code}`
   );
 
-  if (pageData.status !== 200 && !searchParams.mockData) {
+  if (pageData.status !== 200 && !resolvedSearchParams.mockData) {
     notFound();
   }
 
@@ -66,14 +69,17 @@ export default async function OccupationPage({
   searchParams,
   params,
 }: {
-  searchParams: {
+  searchParams: Promise<{
     mockData: string;
-  };
-  params: { code: string };
+  }>;
+  params: Promise<{ code: string }>;
 }) {
-  const { pageData } = await getData(params.code);
+  const resolvedParams = await params;
+  const resolvedSearchParams = await searchParams;
 
-  if (pageData.status !== 200 && !searchParams.mockData) {
+  const { pageData } = await getData(resolvedParams.code);
+
+  if (pageData.status !== 200 && !resolvedSearchParams.mockData) {
     notFound();
   }
 
@@ -87,7 +93,7 @@ export default async function OccupationPage({
   } as any;
 
   const occupation =
-    (mockDataMap[searchParams.mockData] as OccupationPageProps) ||
+    (mockDataMap[resolvedSearchParams.mockData] as OccupationPageProps) ||
     occupationData;
 
   const tasks = occupation.tasks?.map((task: {}) => {
@@ -103,11 +109,11 @@ export default async function OccupationPage({
       ? occupation.counties.length === 1
         ? occupation.counties[0] + " County"
         : occupation.counties.length === 2
-          ? occupation.counties.join(" and ") + " Counties"
-          : occupation.counties.slice(0, -1).join(", ") +
-            ", and " +
-            occupation.counties.slice(-1) +
-            " Counties"
+        ? occupation.counties.join(" and ") + " Counties"
+        : occupation.counties.slice(0, -1).join(", ") +
+          ", and " +
+          occupation.counties.slice(-1) +
+          " Counties"
       : "N/A";
 
   const generateJsonLd = {
@@ -161,7 +167,9 @@ export default async function OccupationPage({
           }}
           infoBlocks={{
             titleBlock: {
-              copy: `In-Demand in ${occupation.inDemand ? "all of New Jersey" : counties}.`,
+              copy: `In-Demand in ${
+                occupation.inDemand ? "all of New Jersey" : counties
+              }.`,
               message: "This training may be eligible for funding from your ",
               link: {
                 copy: "One-Stop Career Center.",
@@ -265,25 +273,23 @@ export default async function OccupationPage({
               />
               {occupation.relatedTrainings.length > 0 ? (
                 <>
-                  {occupation.relatedTrainings
-                    ?.splice(0, 3)
-                    .map((training) => (
-                      <ResultCard
-                        key={training.id}
-                        title={training.name}
-                        trainingId={training.id}
-                        url={`/training/${training.id}`}
-                        education={training.providerName}
-                        percentEmployed={training.percentEmployed || undefined}
-                        cipDefinition={training.cipDefinition}
-                        cost={training.totalCost}
-                        timeToComplete={training.calendarLength}
-                        inDemandLabel={
-                          training.inDemand ? "In Demand" : undefined
-                        }
-                        location={`${training.city}, ${training.county}`}
-                      />
-                    ))}
+                  {occupation.relatedTrainings?.splice(0, 3).map((training) => (
+                    <ResultCard
+                      key={training.id}
+                      title={training.name}
+                      trainingId={training.id}
+                      url={`/training/${training.id}`}
+                      education={training.providerName}
+                      percentEmployed={training.percentEmployed || undefined}
+                      cipDefinition={training.cipDefinition}
+                      cost={training.totalCost}
+                      timeToComplete={training.calendarLength}
+                      inDemandLabel={
+                        training.inDemand ? "In Demand" : undefined
+                      }
+                      location={`${training.city}, ${training.county}`}
+                    />
+                  ))}
                 </>
               ) : (
                 "This data is not yet available for this occupation."

src/app/support-resources/[slug]/page.tsx

@@ -45,18 +45,20 @@ async function getData(slug: string) {
     },
     audience: {
       items: [...audience.items].filter((tag) =>
-        usedAudience.includes(tag.title),
+        usedAudience.includes(tag.title)
       ),
     },
     cta,
   };
 }
 
 export const generateMetadata = async ({
-  params: { slug },
+  params,
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }) => {
+  const { slug } = await params;
+
   const data = (await getData(slug)) as ResourceCategoryPageProps;
 
   if (data.page.items.length === 0) {
@@ -78,10 +80,11 @@ export const generateMetadata = async ({
 export const revalidate = 1800;
 
 export default async function ResourcesPage({
-  params: { slug },
+  params,
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }) {
+  const { slug } = await params;
   const data = (await getData(slug)) as ResourceCategoryPageProps;
 
   if (data.page.items.length === 0) {

src/app/training/[code]/Content.tsx

@@ -11,9 +11,7 @@ import { Flex } from "@components/utility/Flex";
 import { Tooltip } from "@components/utility/Tooltip";
 import {
   Baby,
-  Book,
   BookBookmark,
-  Bookmark,
   Briefcase,
   CalendarBlank,
   Clock,
@@ -24,7 +22,6 @@ import {
   ListBullets,
   MapPin,
   Moon,
-  QrCode,
   User,
   WheelchairMotion,
 } from "@phosphor-icons/react";
@@ -53,7 +50,8 @@ const Content = ({ training }: { training: TrainingProps }) => {
   const componentRef = useRef<HTMLDivElement>(null);
 
   const printReactContent = useReactToPrint({
-    content: () => componentRef.current,
+    pageStyle: "@page { size: auto;  margin: 20mm; }",
+    documentTitle: "Training Content",
   });
 
   const [copy, setCopy] = useState<Copy | null>(null);
@@ -262,7 +260,9 @@ const Content = ({ training }: { training: TrainingProps }) => {
         }
         infoBlocks={{
           titleBlock: {
-            copy: `In-Demand in ${training.inDemand ? "all of New Jersey" : counties}.`,
+            copy: `In-Demand in ${
+              training.inDemand ? "all of New Jersey" : counties
+            }.`,
             message: "This training may be eligible for funding from your ",
             link: {
               copy: "One-Stop Career Center.",
@@ -356,7 +356,9 @@ const Content = ({ training }: { training: TrainingProps }) => {
                         <span>CIP Code: </span>
                       </Button>
                       <a
-                        href={`https://nces.ed.gov/ipeds/cipcode/cipdetail.aspx?y=56&cip=${formatCip(training.cipDefinition.cipcode)}`}
+                        href={`https://nces.ed.gov/ipeds/cipcode/cipdetail.aspx?y=56&cip=${formatCip(
+                          training.cipDefinition.cipcode
+                        )}`}
                         target="_blank"
                         rel="noopener noreferrer"
                       >

src/app/training/[code]/page.tsx

@@ -4,7 +4,7 @@ import { TrainingProps } from "@utils/types";
 
 async function getData(soc: string) {
   const pageData = await fetch(
-    `${process.env.REACT_APP_API_URL}/api/trainings/${soc}`,
+    `${process.env.REACT_APP_API_URL}/api/trainings/${soc}`
   );
 
   if (pageData.status !== 200) {
@@ -21,10 +21,11 @@ export const revalidate = 1800;
 export const generateMetadata = async ({
   params,
 }: {
-  params: { code: string };
+  params: Promise<{ code: string }>;
 }) => {
+  const resolvedParams = await params;
   const pageData = await fetch(
-    `${process.env.REACT_APP_API_URL}/api/trainings/${params.code}`,
+    `${process.env.REACT_APP_API_URL}/api/trainings/${resolvedParams.code}`
   );
 
   if (pageData.status !== 200) {
@@ -45,9 +46,10 @@ export const generateMetadata = async ({
 export default async function TrainingPage({
   params,
 }: {
-  params: { code: string };
+  params: Promise<{ code: string }>;
 }) {
-  const { pageData } = await getData(params.code);
+  const resolvedParams = await params;
+  const { pageData } = await getData(resolvedParams.code);
 
   if (pageData.status !== 200) {
     notFound();

src/app/training/search/page.tsx

@@ -7,13 +7,15 @@ export const revalidate = 0;
 export const generateMetadata = async ({
   searchParams,
 }: {
-  searchParams: {
+  searchParams: Promise<{
     [key: string]: string;
-  };
+  }>;
 }) => {
+  const resolvedSearchParams = await searchParams;
+
   return {
     title: `${
-      searchParams.q ? `Results for "${searchParams.q}" | ` : ""
+      resolvedSearchParams.q ? `Results for "${resolvedSearchParams.q}" | ` : ""
     }Search | ${process.env.REACT_APP_SITE_NAME}`,
     openGraph: {
       images: [globalOgImage.src],
@@ -25,11 +27,14 @@ export const generateMetadata = async ({
 };
 
 export default async function SearchPage(props: {
-  searchParams: {
+  searchParams: Promise<{
     [key: string]: string;
-  };
+  }>;
 }) {
-  const searchProps = await getSearchData(props);
+  const resolvedSearchParams = await props.searchParams;
+  const searchProps = await getSearchData({
+    searchParams: resolvedSearchParams,
+  });
 
   const {
     pageData = [],

src/components/blocks/FancyBanner.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Button } from "@components/modules/Button";
-import { ContentfulRichText } from "@components/modules/ContentfulRichText";
 import { ResponsiveImage } from "@components/modules/ResponsiveImage";
 import { parseMarkdownToHTML } from "@utils/parseMarkdownToHTML";
 import { PageBannerProps } from "@utils/types";
@@ -22,7 +21,9 @@ export const FancyBanner = ({
           {message && (
             <div
               className="message"
-              dangerouslySetInnerHTML={{ __html: parseMarkdownToHTML(message) }}
+              dangerouslySetInnerHTML={{
+                __html: parseMarkdownToHTML(message as string),
+              }}
             />
           )}
           {buttonCopy && (

src/components/modules/Spinner.tsx

@@ -9,9 +9,12 @@ interface SpinnerProps {
 
 const Spinner = ({ className, style, size = 50, color }: SpinnerProps) => {
   return (
-    <div style={style} className={`spinner${className ? ` ${className}` : ""}`}>
+    <span
+      style={style}
+      className={`spinner${className ? ` ${className}` : ""}`}
+    >
       <SpinnerGap size={size} color={color} />
-    </div>
+    </span>
   );
 };