Port specific subjects page to ts

src/app/components/accordion-group/accordion-group.js

@@ -109,7 +109,7 @@ export default function AccordionGroup({
     items,
     accordionProps={allowZeroExpanded: true},
     noScroll=false,
-    forwardOnChange,
+    forwardOnChange=false,
     preExpanded=[],
     ...props
 }) {

src/app/components/carousel/carousel.js

@@ -41,7 +41,8 @@ function HoverText({which, thing}) {
 export default function Carousel({
     atATime = 1,
     children,
-    hoverTextThing
+    hoverTextThing,
+    ref
 }) {
     const slides = React.useMemo(
         () => {
@@ -52,7 +53,7 @@ export default function Carousel({
     );
 
     return (
-        <BaseCarousel className="carousel" itemsPerPage={atATime}>
+        <BaseCarousel className="carousel" itemsPerPage={atATime} ref={ref}>
             <CarouselScroller className="scroller">
                 {slides}
             </CarouselScroller>

src/app/contexts/subject-category.ts

@@ -11,7 +11,7 @@ type InputItem = {
     subject_color: string;
 };
 
-type Category = {
+export type Category = {
     value: string;
     cms: string;
     html: string;

src/app/pages/subjects/new/about-openstax.js → src/app/pages/subjects/new/about-openstax.tsx

@@ -1,16 +1,32 @@
 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 './about-openstax.scss';
 
+export type AboutOsData = {
+    heading: string;
+    osText: string;
+    linkText: string;
+    linkHref: string;
+    image: ImageData;
+};
+
 export default function AboutOpenStax({
-    forceButtonUrl='',
-    forceButtonText='',
+    forceButtonUrl = '',
+    forceButtonText = '',
     aboutOs
+}: {
+    forceButtonUrl?: string;
+    forceButtonText?: string;
+    aboutOs: AboutOsData;
 }) {
     const {
-        heading, osText: paragraph, linkText: buttonText, linkHref: buttonUrl, image: {file: imgSrc}
+        heading,
+        osText: paragraph,
+        linkText: buttonText,
+        linkHref: buttonUrl,
+        image: {file: imgSrc}
     } = aboutOs;
     const url = forceButtonUrl || buttonUrl;
     const text = forceButtonText || buttonText;
@@ -21,7 +37,9 @@ export default function AboutOpenStax({
             <div className="content">
                 <h2>{heading}</h2>
                 <RawHTML html={paragraph} />
-                <a className="btn primary" href={url}>{text}</a>
+                <a className="btn primary" href={url}>
+                    {text}
+                </a>
                 <img src={optimizedImage} alt="" />
             </div>
         </section>
@@ -31,7 +49,5 @@ export default function AboutOpenStax({
 export function AllSubjectsAboutOpenStax() {
     const {aboutOs} = useSubjectsContext();
 
-    return (
-        <AboutOpenStax aboutOs={aboutOs[0].value} />
-    );
+    return <AboutOpenStax aboutOs={aboutOs[0].value} />;
 }

src/app/pages/subjects/new/context.tsx → src/app/pages/subjects/new/context.ts

@@ -5,6 +5,7 @@ import useLanguageContext from '~/contexts/language';
 import type {LocaleEntry} from '~/components/language-selector/language-selector';
 import type {InfoBoxValues} from './info-boxes';
 import type {TutorValue} from './tutor-ad';
+import type {AboutOsData} from './about-openstax';
 import {toNumber} from 'lodash';
 
 type DevStandardKeys = 'devStandard1Heading';
@@ -41,6 +42,7 @@ type SubjectsPageData = {
         }
     ];
     philanthropicSupport: string;
+    aboutOs: [{value: AboutOsData}];
 };
 
 // The Page data before DevStandardPair is translated to aboutBlurbs

src/app/pages/subjects/new/hero.tsx

@@ -17,7 +17,9 @@ export default function Hero() {
                 <img className="bg1" role="presentation" src={linesUrl} />
             </div>
             <ClippedImage
-                className="overlapping" src={headingImage.meta.downloadUrl} alt=""
+                className="overlapping"
+                src={headingImage.meta.downloadUrl}
+                alt=""
             />
             <div className="content">
                 <h1>{heading}</h1>

src/app/pages/subjects/new/specific/blog-posts.js → src/app/pages/subjects/new/specific/blog-posts.tsx

@@ -6,8 +6,16 @@ import useOptimizedImage from '~/helpers/use-optimized-image';
 import useEnglishSubject from './use-english-subject';
 import {useIntl} from 'react-intl';
 import './blog-posts.scss';
+import { assertDefined } from '~/helpers/data';
 
-function Card({article_image: image, title: linkText, slug}) {
+type Blurb = {
+    id: number;
+    article_image: string;
+    title: string;
+    slug: string;
+}
+
+function Card({article_image: image, title: linkText, slug}: Omit<Blurb, 'id'>) {
     const link = `/blog/${slug}`;
     const optimizedImage = useOptimizedImage(image, 400);
 
@@ -21,23 +29,22 @@ function Card({article_image: image, title: linkText, slug}) {
 
 function BlogPosts() {
     const {
-        blogHeader: {content: {heading, blogDescription, linkText, linkHref}}
-    } = useSpecificSubjectContext();
+        content: {heading, blogDescription, linkText, linkHref}
+    } = assertDefined(useSpecificSubjectContext().blogHeader);
     const cms = useEnglishSubject();
-    const blurbs = useDataFromSlug(`search/?subjects=${cms}`) || [];
+    const blurbs: Blurb[] = useDataFromSlug(`search/?subjects=${cms}`) || [];
     const intl = useIntl();
 
     return (
         blurbs.length ?
             <CarouselSection
-                id="blog-posts" className="blog-posts"
                 heading={heading}
                 description={blogDescription}
                 linkUrl={linkHref} linkText={linkText}
                 thing='blog entries'
                 minWidth={260}
             >
-                {blurbs.map((blurb) => <Card {...blurb} key={blurb.link} />)}
+                {blurbs.map((blurb) => <Card {...blurb} key={blurb.id} />)}
             </CarouselSection> :
             <h2>{intl.formatMessage({id: 'subject.noBlog'})}</h2>
     );

src/app/pages/subjects/new/specific/book-viewer.js → src/app/pages/subjects/new/specific/book-viewer.tsx

@@ -1,26 +1,31 @@
 import React from 'react';
-import useSpecificSubjectContext from './context';
+import useSpecificSubjectContext, {CategoryData} from './context';
 import BookTile from '~/components/book-tile/book-tile';
 import {ActiveElementContextProvider} from '~/contexts/active-element';
 import {useLocation} from 'react-router-dom';
 import throttle from 'lodash/throttle';
 import './book-viewer.scss';
 
-function Category({category: [heading, categoryData]}) {
+function Category({
+    category: [heading, categoryData]
+}: {
+    category: [string, CategoryData];
+}) {
     const booksObj = categoryData.books;
     const books = Object.values(booksObj);
     const text = categoryData.categoryDescription;
     const {hash} = useLocation();
-    const ref = React.useRef();
+    const ref = React.useRef(null);
 
     // Image loads screw up the scroll-to location, so we listen for them
     // and re-scroll when images complete loading
     // throttled to reduce possible jitter
     React.useEffect(() => {
-        const isInitialScrollTarget = window.decodeURIComponent(hash.substring(1)) === heading;
+        const isInitialScrollTarget =
+            window.decodeURIComponent(hash.substring(1)) === heading;
 
         if (!isInitialScrollTarget) {
-            return null;
+            return undefined;
         }
         const throttleGoTo = throttle((el) => {
             el.scrollIntoView({block: 'center', behavior: 'smooth'});
@@ -36,12 +41,12 @@ function Category({category: [heading, categoryData]}) {
     }, [heading, hash]);
 
     return (
-        <div id={heading} className='category' ref={ref}>
+        <div id={heading} className="category" ref={ref}>
             <h2>{heading}</h2>
             <div>{text}</div>
-            <div className='books'>
+            <div className="books">
                 {books.map((b) => (
-                    <BookTile key={b.id} book={b} />
+                    <BookTile key={b[0].id} book={b} />
                 ))}
             </div>
         </div>
@@ -53,8 +58,8 @@ export default function BookViewer() {
 
     return (
         <ActiveElementContextProvider>
-            <section className='book-viewer'>
-                <div className='content'>
+            <section className="book-viewer">
+                <div className="content">
                     {categories.map((c) => (
                         <Category key={c[0]} category={c} />
                     ))}

src/app/pages/subjects/new/specific/components/carousel-section.js → src/app/pages/subjects/new/specific/components/carousel-section.tsx

@@ -5,14 +5,21 @@ import './carousel-section.scss';
 
 export default function CarouselSection({
     heading, description, linkUrl, linkText, children, thing, minWidth
-}) {
+}: React.PropsWithChildren<{
+    heading: string;
+    description: string;
+    linkUrl: string;
+    linkText: string;
+    thing: string;
+    minWidth: number;
+}>) {
     const {innerWidth} = useWindowContext();
-    const ref = React.useRef();
+    const ref = React.useRef<{base: HTMLDivElement}>();
     const [atATime, setAtATime] = React.useState(1);
 
     React.useEffect(
         () => {
-            const carouselWidth = ref.current.base?.getBoundingClientRect().width ?? 0;
+            const carouselWidth = ref.current?.base?.getBoundingClientRect().width ?? 0;
 
             setAtATime(Math.max(1, Math.floor(carouselWidth / minWidth)));
         },