Core 1196 port global reach page to ts

src/app/pages/global-reach/global-reach.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import LoaderPage from '~/components/jsx-helpers/loader-page';
+import {camelCaseKeys, Json} from '~/helpers/page-data-utils';
+import Map from './map/map';
+import Statistics, {CardData} from './statistics/stat';
+import StudentInfo, {StudentData} from './studentinfo/studentinfo';
+import SchoolMap from './schoolmap/schoolmap';
+
+type RawData = Record<string, Json>;
+type ProcessedData = {
+    title: string;
+    headerText: string;
+    mapImageUrl: string;
+    section1: {cards: CardData[]};
+    section2: StudentData;
+    section3: Parameters<typeof SchoolMap>[0];
+};
+
+function preprocessData(data: RawData) {
+    return camelCaseKeys(
+        Object.keys(data).reduce(
+            (result, key) => {
+                const value = data[key];
+                const matches = key.match(/(section_.)_(.*)/);
+
+                if (matches) {
+                    const [_, sectionKey, newKey] = matches;
+
+                    if (!(sectionKey in result)) {
+                        result[sectionKey] = {};
+                    }
+                    (result[sectionKey] as Record<string, Json>)[newKey] =
+                        value;
+                } else {
+                    result[key] = value;
+                }
+                return result;
+            },
+            {} as Record<string, Json>
+        )
+    ) as ProcessedData;
+}
+
+function GlobalReachPage({data}: {data: RawData}) {
+    const ppData = preprocessData(data);
+
+    return (
+        <React.Fragment>
+            <Map
+                title={ppData.title}
+                buttonText={ppData.headerText}
+                imageUrl={ppData.mapImageUrl}
+            />
+            <Statistics {...ppData.section1} />
+            <StudentInfo {...ppData.section2} />
+            <SchoolMap {...ppData.section3} />
+        </React.Fragment>
+    );
+}
+
+const slug = 'pages/global-reach';
+
+export default function GlobalReachLoader() {
+    return (
+        <main className="global-reach page">
+            <LoaderPage
+                slug={slug}
+                Child={GlobalReachPage}
+                noCamelCase
+                doDocumentSetup
+            />
+        </main>
+    );
+}

src/app/pages/global-reach/map/map.js → src/app/pages/global-reach/map/map.tsx

@@ -1,10 +1,21 @@
 import React from 'react';
 import './map.scss';
 
-export default function Map({title, buttonText, imageUrl}) {
+export default function Map({
+    title,
+    buttonText,
+    imageUrl
+}: {
+    title: string;
+    buttonText: string;
+    imageUrl: string;
+}) {
     return (
         <div className="mapbox">
-            <div className="map-image" style={{backgroundImage: `url(${imageUrl})`}}></div>
+            <div
+                className="map-image"
+                style={{backgroundImage: `url(${imageUrl})`}}
+            ></div>
             <div className="overlay">
                 <div className="boxed">
                     <h1>{title}</h1>

src/app/pages/global-reach/schoolmap/schoolmap.js → src/app/pages/global-reach/schoolmap/schoolmap.tsx

@@ -3,7 +3,17 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faChevronRight} from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import './schoolmap.scss';
 
-export default function SchoolMap({heading, blurb, link: linkUrl, cta: linkText}) {
+export default function SchoolMap({
+    heading,
+    blurb,
+    link: linkUrl,
+    cta: linkText
+}: {
+    heading: string;
+    blurb: string;
+    link: string;
+    cta: string;
+}) {
     return (
         <div className="schoolmapbox">
             <div className="content schoolmapdiv">
@@ -17,7 +27,12 @@ export default function SchoolMap({heading, blurb, link: linkUrl, cta: linkText}
                         </span>
                     </div>
                 </div>
-                <div><img className="map-img" src="/dist/images/home/map2.webp" /></div>
+                <div>
+                    <img
+                        className="map-img"
+                        src="/dist/images/home/map2.webp"
+                    />
+                </div>
             </div>
         </div>
     );

src/app/pages/global-reach/statistics/stat.js → src/app/pages/global-reach/statistics/stat.tsx

@@ -1,11 +1,25 @@
 import React from 'react';
 import './stat.scss';
 
-function Card({item}) {
+export type CardData = {
+    image: {
+        image: string;
+        altText: string;
+    };
+    number: string;
+    unit: string;
+    description: string;
+};
+
+function Card({item}: {item: CardData}) {
     return (
         <div className="col1">
             <div className="col-img-div">
-                <img className="col-img" src={item.image.image} alt={item.image.altText} />
+                <img
+                    className="col-img"
+                    src={item.image.image}
+                    alt={item.image.altText}
+                />
             </div>
             <div className="col-txt">
                 <div className="upper-txt">
@@ -18,11 +32,13 @@ function Card({item}) {
     );
 }
 
-export default function Statistics({cards}) {
+export default function Statistics({cards}: {cards: CardData[]}) {
     return (
         <div className="stat-bg">
             <div className="statbox">
-                {cards.map((card) => <Card item={card} key={card} />)}
+                {cards.map((card) => (
+                    <Card item={card} key={card.description} />
+                ))}
             </div>
         </div>
     );

src/app/pages/global-reach/studentinfo/studentinfo.js → src/app/pages/global-reach/studentinfo/studentinfo.tsx

@@ -1,17 +1,40 @@
 import React from 'react';
 import './studentinfo.scss';
 
+export type StudentData = {
+    header1: string;
+    blurb1: string;
+    cta1: string;
+    link1: string;
+    image1Url: string;
+    header2: string;
+    blurb2: string;
+    cta2: string;
+    link2: string;
+    image2Url: string;
+};
+
 export default function StudentInfo({
-    header1, blurb1, cta1, link1, image1Url,
-    header2, blurb2, cta2, link2, image2Url
-}) {
+    header1,
+    blurb1,
+    cta1,
+    link1,
+    image1Url,
+    header2,
+    blurb2,
+    cta2,
+    link2,
+    image2Url
+}: StudentData) {
     return (
         <div className="studentinfobox">
             <div className="photo-and-text">
                 <div>
                     <div className="girl-txt-head">{header1}</div>
                     <p>{blurb1}</p>
-                    <a href={link1} className="sbox">{cta1}</a>
+                    <a href={link1} className="sbox">
+                        {cta1}
+                    </a>
                 </div>
                 <img className="girl-img" src={image1Url} alt="Student" />
             </div>
@@ -21,7 +44,9 @@ export default function StudentInfo({
                 <div className="first-in-mobile">
                     <div className="std-txt-head">{header2}</div>
                     <p>{blurb2}</p>
-                    <a href={link2} className="sbox">{cta2}</a>
+                    <a href={link2} className="sbox">
+                        {cta2}
+                    </a>
                 </div>
             </div>
         </div>

test/helpers/fetch-mocker.js

@@ -21,6 +21,7 @@ import faq from '../src/data/faq';
 import flags from '../src/data/flags';
 import footerData from '../src/data/footer';
 import formHeadings from '../src/data/form-headings';
+import globalReachData from '../src/data/global-reach';
 import impact from '../src/data/impact';
 import institutionalPartnershipData from '../src/data/institutional-partnership';
 import kineticData from '../src/data/kinetic';
@@ -74,6 +75,7 @@ global.fetch = jest.fn().mockImplementation((...args) => {
     const isFooter = (/api\/footer/).test(args[0]);
     const isFormHeading = (/form-headings/).test(args[0]);
     const isGiveBanner = args[0].endsWith('snippets/givebanner/');
+    const isGlobalReach = args[0].includes('/global-reach/');
     const isImpact = args[0].includes('/pages/impact');
     const isInstitutionalPartnership = (/pages\/institutional-partners/).test(args[0]);
     const isKinetic = args[0].endsWith('kinetic/');
@@ -144,6 +146,8 @@ global.fetch = jest.fn().mockImplementation((...args) => {
                 payload = formHeadings;
             } else if (isGiveBanner) {
                 payload = {};
+            } else if (isGlobalReach) {
+                payload = globalReachData;
             } else if (isHomepage) {
                 payload = openstaxHomepageData;
             } else if (isImpact) {