Port institutional-partnership page JavaScript files to TypeScript (CORE-1249)

src/app/helpers/use-optimized-image.ts

@@ -1,6 +1,10 @@
 const distributionUrl = 'https://images.openstax.org';
 const version = 'v1';
 
+export function maxDimIfNarrowerThan(width: number) {
+    return window.innerWidth < width ? width : undefined;
+}
+
 export default function useOptimizedImage(src: string, maxDim?: number) {
     if (!src) {
         return src;

src/app/pages/about/about.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import LoaderPage from '~/components/jsx-helpers/loader-page';
 import LazyLoad from 'react-lazyload';
 import RawHTML from '~/components/jsx-helpers/raw-html';
-import useOptimizedImage from '~/helpers/use-optimized-image';
+import useOptimizedImage, {maxDimIfNarrowerThan} from '~/helpers/use-optimized-image';
 import './about.scss';
 
 const slug = 'pages/about';
@@ -86,7 +86,7 @@ function About({
     const mapAlt =
         whereMapAlt ||
         'animated map suggesting where our books are being adopted';
-    const maxDim = window.innerWidth < 1920 ? 1015 : undefined;
+    const maxDim = maxDimIfNarrowerThan(1920);
     const optimizedWhoImage = useOptimizedImage(whoImageUrl, maxDim);
 
     return (

src/app/pages/institutional-partnership/institutional-partnership.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import LoaderPage from '~/components/jsx-helpers/loader-page';
+import LazyLoad from 'react-lazyload';
+import {camelCaseKeys} from '~/helpers/page-data-utils';
+import Banner, {BannerProps} from './sections/banner/banner';
+import OverlappingQuote, {
+    OverlappingQuoteProps
+} from './sections/overlapping-quote/overlapping-quote';
+import About, {AboutProps} from './sections/about/about';
+import Promoting, {PromotingProps} from './sections/promoting/promoting';
+import BigQuote, {BigQuoteProps} from './sections/big-quote/big-quote';
+import Speaking, {SpeakingProps} from './sections/speaking/speaking';
+import Results, {ResultsProps} from './sections/results/results';
+import Participants, {
+    ParticipantsProps
+} from './sections/participants/participants';
+import SmallQuote, {SmallQuoteProps} from './sections/small-quote/small-quote';
+import SignUp, {SignUpProps} from './sections/sign-up/sign-up';
+import './institutional-partnership.scss';
+
+type DataObject = Record<string, unknown>;
+
+type ImageMeta = {
+    download_url: string;
+};
+
+type SectionData = {
+    section_4_background_image: {
+        meta: ImageMeta;
+    };
+} & DataObject;
+
+function unprefixKey(
+    newObject: DataObject,
+    oldKey: string,
+    prefix: string,
+    data: DataObject
+) {
+    const newKey = oldKey.replace(prefix, '');
+
+    newObject[newKey] = data[oldKey];
+    return newObject;
+}
+
+function sectionData(data: DataObject, sectionNumber: string | number) {
+    const sectionPrefix = `section_${sectionNumber}_`;
+
+    return camelCaseKeys(
+        Reflect.ownKeys(data)
+            .filter((k) => String(k).startsWith(sectionPrefix))
+            .reduce(
+                (a, oldKey) =>
+                    unprefixKey(a, String(oldKey), sectionPrefix, data),
+                {}
+            )
+    );
+}
+
+function quoteData(data: DataObject) {
+    return Reflect.ownKeys(data)
+        .filter((k) => String(k).startsWith('quote'))
+        .reduce(
+            (a, oldKey) => unprefixKey(a, String(oldKey), 'quote_', data),
+            {}
+        );
+}
+
+function InstitutionalPartnership({data}: {data: SectionData}) {
+    return (
+        <React.Fragment>
+            <Banner {...(sectionData(data, 1) as BannerProps)} />
+            <OverlappingQuote {...(quoteData(data) as OverlappingQuoteProps)} />
+            <About {...(sectionData(data, 2) as AboutProps)} />
+            <LazyLoad>
+                <Promoting {...(sectionData(data, 3) as PromotingProps)} />
+                <BigQuote
+                    {...{
+                        backgroundImage:
+                            data.section_4_background_image.meta.download_url,
+                        ...(sectionData(data, '4_quote') as Omit<
+                            BigQuoteProps,
+                            'backgroundImage'
+                        >)
+                    }}
+                />
+            </LazyLoad>
+            <LazyLoad>
+                <Speaking {...(sectionData(data, 5) as SpeakingProps)} />
+                <Results {...(sectionData(data, 6) as ResultsProps)} />
+            </LazyLoad>
+            <LazyLoad>
+                <Participants
+                    {...(sectionData(data, 7) as ParticipantsProps)}
+                />
+                <SmallQuote
+                    {...(sectionData(data, '8_quote') as SmallQuoteProps)}
+                />
+            </LazyLoad>
+            <LazyLoad>
+                <SignUp {...(sectionData(data, 9) as SignUpProps)} />
+            </LazyLoad>
+        </React.Fragment>
+    );
+}
+
+const slug = 'pages/institutional-partners';
+
+export default function PageLoader() {
+    return (
+        <main className="institutional-partnership page">
+            <LoaderPage
+                slug={slug}
+                Child={InstitutionalPartnership}
+                doDocumentSetup
+                noCamelCase
+            />
+        </main>
+    );
+}

src/app/pages/institutional-partnership/sections/about/about.js → src/app/pages/institutional-partnership/sections/about/about.tsx

@@ -3,10 +3,25 @@ import RawHTML from '~/components/jsx-helpers/raw-html';
 import useOptimizedImage from '~/helpers/use-optimized-image';
 import './about.scss';
 
+export type AboutProps = {
+    heading: string;
+    description: string;
+    altText: string;
+    image: {
+        meta: {
+            downloadUrl: string;
+        };
+    };
+};
+
 export default function About({
-    heading, description, altText,
-    image: {meta: {downloadUrl: image}}
-}) {
+    heading,
+    description,
+    altText,
+    image: {
+        meta: {downloadUrl: image}
+    }
+}: AboutProps) {
     const optimizedImage = useOptimizedImage(image);
 
     return (

src/app/pages/institutional-partnership/sections/banner/banner.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import RawHTML from '~/components/jsx-helpers/raw-html';
+import useOptimizedImage, {
+    maxDimIfNarrowerThan
+} from '~/helpers/use-optimized-image';
+import './banner.scss';
+
+export type BannerProps = {
+    heading: string;
+    description: string;
+    linkText: string;
+    link: string;
+    backgroundImage: {
+        meta: {
+            downloadUrl: string;
+        };
+    };
+};
+
+export default function Banner({
+    heading,
+    description,
+    linkText,
+    link,
+    backgroundImage: {
+        meta: {downloadUrl: backgroundImage}
+    }
+}: BannerProps) {
+    const maxDim = maxDimIfNarrowerThan(1920);
+    const optimizedImage = useOptimizedImage(backgroundImage, maxDim);
+
+    return (
+        <section className="banner">
+            <div
+                className="background-image"
+                style={{backgroundImage: `url(${optimizedImage})`}}
+            />
+            <div className="content-block">
+                <h1>{heading}</h1>
+                <RawHTML html={description} />
+                <a className="btn primary" href={link}>
+                    {linkText}
+                </a>
+            </div>
+        </section>
+    );
+}

src/app/pages/institutional-partnership/sections/big-quote/big-quote.js → src/app/pages/institutional-partnership/sections/big-quote/big-quote.tsx

@@ -1,17 +1,36 @@
 import React from 'react';
-import useOptimizedImage from '~/helpers/use-optimized-image';
+import useOptimizedImage, {
+    maxDimIfNarrowerThan
+} from '~/helpers/use-optimized-image';
 import './big-quote.scss';
 
-export default function BigQuote({text, name, title, school, backgroundImage}) {
-    const maxDim = window.innerWidth < 1920 ? 1920 : null;
+export type BigQuoteProps = {
+    text: string;
+    name: string;
+    title: string;
+    school: string;
+    backgroundImage: string;
+};
+
+export default function BigQuote({
+    text,
+    name,
+    title,
+    school,
+    backgroundImage
+}: BigQuoteProps) {
+    const maxDim = maxDimIfNarrowerThan(1920);
     const optimizedImage = useOptimizedImage(backgroundImage, maxDim);
 
     return (
         <section className="big-quote">
-            <div className="background-image" style={{backgroundImage: `url(${optimizedImage})`}} />
+            <div
+                className="background-image"
+                style={{backgroundImage: `url(${optimizedImage})`}}
+            />
             <div className="gradient-overlay" />
             <div className="content">
-                <div className="big-quote-mark">“</div>
+                <div className="big-quote-mark">&quot;</div>
                 <div className="text-block">
                     <div className="quote">{text}</div>
                     <div className="name">- {name}</div>