Tutor ad

openstax · Oct 23, 2024 · bf6fc0f · bf6fc0f
1 parent 8c8794a
commit bf6fc0f
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 46 deletions.
diff --git a/src/app/pages/subjects/new/context.tsx b/src/app/pages/subjects/new/context.tsx
@@ -2,20 +2,26 @@ import React from 'react';
 import buildContext from '~/components/jsx-helpers/build-context';
 import usePageData from '~/helpers/use-page-data';
 import useLanguageContext from '~/contexts/language';
-import type { LocaleEntry } from '~components/language-selector/language-selector';
-import type { InfoBox } from './info-boxes';
-import { toNumber } from 'lodash';
+import type {LocaleEntry} from '~/components/language-selector/language-selector';
+import type {InfoBox} from './info-boxes';
+import type {TutorValue} from './tutor-ad';
+import {toNumber} from 'lodash';
 
 type DevStandardKeys = 'devStandard1Heading';
 type DevStandardPair = {[key in DevStandardKeys]: string};
 export type SubjectData = {
     icon: string;
     categories: string[];
-}
+};
+export type ImageData = {
+    id: number;
+    title: string;
+    file: string;
+};
 type SubjectsPageData = {
     title: string;
     pageDescription: string;
-    subjects: { [key: string]: SubjectData}
+    subjects: {[key: string]: SubjectData};
     translations: Array<{value: LocaleEntry[]}>;
     books?: {
         bookState: string;
@@ -26,10 +32,16 @@ type SubjectsPageData = {
     headingImage: {
         meta: {
             downloadUrl: string;
+        };
+    };
+    infoBoxes: InfoBox[];
+    tutorAd: [
+        {
+            value: TutorValue;
         }
-    }
-    infoBoxes: InfoBox[]
+    ];
 };
+
 // The Page data before DevStandardPair is translated to aboutBlurbs
 type RawPageData = SubjectsPageData & DevStandardPair;
 
@@ -86,7 +98,4 @@ function useContextValue() {
 
 const {useContext, ContextProvider} = buildContext({useContextValue});
 
-export {
-    useContext as default,
-    ContextProvider as SubjectsContextProvider
-};
+export {useContext as default, ContextProvider as SubjectsContextProvider};
diff --git a/src/app/pages/subjects/new/import-tutor-ad.js b/src/app/pages/subjects/new/import-tutor-ad.js
@@ -0,0 +1,3 @@
+import TutorAd from './tutor-ad';
+
+export default TutorAd;
diff --git a/src/app/pages/subjects/new/info-boxes.tsx b/src/app/pages/subjects/new/info-boxes.tsx
@@ -1,19 +1,15 @@
 import React from 'react';
-import useSubjectsContext from './context';
+import useSubjectsContext, {ImageData} from './context';
 import RawHTML from '~/components/jsx-helpers/raw-html';
 import './info-boxes.scss';
 
 export type InfoBox = {
     value: {
         heading: string;
         text: string;
-        image: {
-            id: number;
-            title: string;
-            file: string;
-        }
-    }[]
-}
+        image: ImageData;
+    }[];
+};
 
 function AboutBlurb({image, heading, text: description}: InfoBox['value'][0]) {
     return (
@@ -33,7 +29,9 @@ export function InfoBoxes({infoBoxes}: {infoBoxes: InfoBox['value']}) {
     return (
         <section className="info-boxes">
             <div className="content">
-                {infoBoxes.map((b, i) => <AboutBlurb {...b} key={i} />)}
+                {infoBoxes.map((b, i) => (
+                    <AboutBlurb {...b} key={i} />
+                ))}
             </div>
         </section>
     );
@@ -43,5 +41,5 @@ export default function InfoBoxesUsingContext() {
     const {infoBoxes} = useSubjectsContext();
     const unwrappedData = infoBoxes[0]?.value;
 
-    return (<InfoBoxes infoBoxes={unwrappedData} />);
+    return <InfoBoxes infoBoxes={unwrappedData} />;
 }
diff --git a/src/app/pages/subjects/new/specific/context.d.ts b/src/app/pages/subjects/new/specific/context.d.ts
@@ -1,5 +1,6 @@
 import React from 'react';
 import { LocaleEntry } from '~/components/language-selector/language-selector';
+import { ImageData } from '../context';
 import type { InfoBox } from '../info-boxes';
 
 // There will be more, but this is what I need for now
@@ -36,7 +37,7 @@ type SectionContent = {
 
 type SectionInfo = {
     content: SectionContent & {
-        image: string;
+        image: ImageData;
         adHtml: string;
     }
 };

diff --git a/src/app/pages/subjects/new/specific/specific.tsx b/src/app/pages/subjects/new/specific/specific.tsx
@@ -17,7 +17,7 @@ import LazyLoad from 'react-lazyload';
 import useFoundSubject from './use-found-subject';
 import AboutOpenStax from '../about-openstax';
 import {InfoBoxes} from '../info-boxes';
-import { useCanonicalLink } from '~/helpers/use-document-head';
+import {useCanonicalLink} from '~/helpers/use-document-head';
 import cn from 'classnames';
 import './specific.scss';
 
@@ -43,17 +43,13 @@ function TutorAd() {
         return null;
     }
     const {
-        content: {
-            image,
-            heading,
-            adHtml: html,
-            linkHref: ctaLink,
-            linkText: ctaText
-        }
+        content: {image, heading, adHtml, linkHref, linkText}
     } = tutorAd;
 
     return (
-        <TutorAdThatTakesData {...{heading, image, html, ctaLink, ctaText}} />
+        <TutorAdThatTakesData
+            {...{heading, image, adHtml, linkHref, linkText}}
+        />
     );
 }
 
@@ -89,32 +85,32 @@ function MainContent({subject}: {subject: FoundSubject}) {
                 <LazyLoad once offset={100} height={400}>
                     <TutorAd />
                 </LazyLoad>
-                <section id='blog-posts' className='blog-posts'>
+                <section id="blog-posts" className="blog-posts">
                     <LazyLoad
                         once
                         offset={100}
                         height={400}
-                        className='content'
+                        className="content"
                     >
                         <JITLoad importFn={importBlogPosts} />
                     </LazyLoad>
                 </section>
-                <section id='webinars' className='webinars'>
+                <section id="webinars" className="webinars">
                     <LazyLoad
                         once
                         offset={100}
                         height={400}
-                        className='content'
+                        className="content"
                     >
                         <JITLoad importFn={importWebinars} />
                     </LazyLoad>
                 </section>
-                <section id='learn' className='learn-more'>
+                <section id="learn" className="learn-more">
                     <LazyLoad
                         once
                         offset={100}
                         height={400}
-                        className='content'
+                        className="content"
                     >
                         <JITLoad importFn={importLearnMore} />
                     </LazyLoad>
@@ -138,8 +134,8 @@ function SubjectInContext({subject}: {subject: FoundSubject}) {
         <SpecificSubjectContextProvider contextValueParameters={subject.value}>
             <WindowContextProvider>
                 <NavigatorContextProvider>
-                    <div className='subject-specific'>
-                        <div className='content'>
+                    <div className="subject-specific">
+                        <div className="content">
                             <Navigator subject={subject} />
                             <MainContent subject={subject} />
                         </div>

diff --git a/src/app/pages/subjects/new/subjects.tsx b/src/app/pages/subjects/new/subjects.tsx
@@ -11,7 +11,7 @@ import './subjects.scss';
 
 const importLanguageSelector = () => import('./language-selector-section.js');
 const importSubjectsListing = () => import('./import-subjects-listing.js');
-const importTutorAd = () => import('./tutor-ad.js');
+const importTutorAd = () => import('./import-tutor-ad.js');
 const importInfoBoxes = () => import('./import-info-boxes.js');
 const importPhilanthropicSupport = () => import('./philanthropic-support.js');
 

diff --git a/src/app/pages/subjects/new/tutor-ad.js → src/app/pages/subjects/new/tutor-ad.tsx b/src/app/pages/subjects/new/tutor-ad.js → src/app/pages/subjects/new/tutor-ad.tsx
@@ -1,29 +1,47 @@
 import React from 'react';
-import useSubjectsContext from './context';
+import useSubjectsContext, {ImageData} from './context';
 import RawHTML from '~/components/jsx-helpers/raw-html';
 import useOptimizedImage from '~/helpers/use-optimized-image';
 import './tutor-ad.scss';
 
-export function TutorAdThatTakesData({heading, image, html, ctaLink, ctaText}) {
+export type TutorValue = {
+    heading: string;
+    image: ImageData;
+    adHtml: string;
+    linkHref: string;
+    linkText: string;
+};
+
+export function TutorAdThatTakesData({
+    heading,
+    image,
+    adHtml,
+    linkHref,
+    linkText
+}: TutorValue) {
     const optimizedImage = useOptimizedImage(image?.file, 400);
 
     return (
         <section className="tutor-ad">
             <div className="content">
                 <h2>{heading}</h2>
                 <img role="presentation" src={optimizedImage} />
-                <RawHTML html={html} />
-                <a data-analytics-link className="btn primary" href={ctaLink}>{ctaText}</a>
+                <RawHTML html={adHtml} />
+                <a data-analytics-link className="btn primary" href={linkHref}>
+                    {linkText}
+                </a>
             </div>
         </section>
     );
 }
 
 export default function TutorAd() {
     const {tutorAd} = useSubjectsContext();
-    const {image, heading, adHtml: html, linkHref: ctaLink, linkText: ctaText} = tutorAd[0].value;
+    const {image, heading, adHtml, linkHref, linkText} = tutorAd[0].value;
 
     return (
-        <TutorAdThatTakesData {...{heading, image, html, ctaLink, ctaText}} />
+        <TutorAdThatTakesData
+            {...{heading, image, adHtml, linkHref, linkText}}
+        />
     );
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import TutorAd from './tutor-ad';

		export default TutorAd;