Port src/app/pages files from JS to TS

- Convert 404.js to TypeScript
- Convert a-page-template.js to TypeScript with PageData type
- Convert school-selector.js to TypeScript with proper event typing
- Convert testimonials.js to TypeScript with testimonial data types
- Convert language-selector-section.js to TypeScript
- Convert use-categorized-books.js to TypeScript with proper book categorization types
- Add proper types for all component props and function parameters
- Type React event handlers properly (onChange)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: OpenStaxClaude

src/app/pages/404/404.js src/app/pages/404/404.tsxsrc/app/pages/404/404.js renamed to src/app/pages/404/404.tsx

@@ -4,10 +4,14 @@ import './a-page-template.scss';
 
 const slug = 'books/biology-2e';
 
-function Pagename({data: {heading}}) {
+type PageData = {
+    heading: string;
+};
+
+function Pagename({data}: {data: PageData}) {
     return (
         <div className="content">
-            <h1>{heading}</h1>
+            <h1>{data.heading}</h1>
         </div>
     );
 }

…pages/a-page-template/a-page-template.js …ages/a-page-template/a-page-template.tsxsrc/app/pages/a-page-template/a-page-template.js renamed to src/app/pages/a-page-template/a-page-template.tsx src/app/pages/a-page-template/a-page-template.js renamed to src/app/pages/a-page-template/a-page-template.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import useMatchingSchools from '~/models/use-school-suggestion-list';
 import {FilteringSelect} from '~/components/form-elements/form-elements';
 
-// Left as JS because I couldn't get the tests to cover these
-export default function SchoolSelector({value, setValue}) {
+export default function SchoolSelector({value, setValue}: {value: string; setValue: (value: string) => void}) {
     const {schoolIsOk, schoolOptions} = useMatchingSchools(value);
 
     return (
@@ -18,17 +17,17 @@ export default function SchoolSelector({value, setValue}) {
                     required: true,
                     value,
                     autoComplete: 'off',
-                    onChange({target}) {setValue(target.value);}
+                    onChange({target}: React.ChangeEvent<HTMLInputElement>) {setValue(target.value);}
                 }}
-                accept={(option) => setValue(option.value)}
+                accept={(option: {value: string}) => setValue(option.value)}
                 accepted={schoolIsOk}
             />
         </div>
     );
 }
 
-export function useDoSubmit(afterSubmit) {
-    return React.useCallback((form) => {
+export function useDoSubmit(afterSubmit: () => void) {
+    return React.useCallback((form: HTMLFormElement) => {
         form.submit();
         afterSubmit();
     }, [afterSubmit]);

…ils/info-request-form/school-selector.js …ls/info-request-form/school-selector.tsxsrc/app/pages/partners/partner-details/info-request-form/school-selector.js renamed to src/app/pages/partners/partner-details/info-request-form/school-selector.tsx src/app/pages/partners/partner-details/info-request-form/school-selector.js renamed to src/app/pages/partners/partner-details/info-request-form/school-selector.tsx

@@ -4,7 +4,20 @@ import ClippedImage from '~/components/clipped-image/clipped-image';
 import Carousel from '~/components/carousel/carousel';
 import './testimonials.scss';
 
-function Card({data: {image, testimonial}}) {
+type ImageData = {
+    file: string;
+    title: string;
+};
+
+type TestimonialData = {
+    image?: ImageData;
+    testimonial: string;
+    description: string;
+};
+
+function Card({data}: {data: TestimonialData}) {
+    const {image, testimonial} = data;
+
     return (
         <div className='card'>
             <div className='picture-part'>
@@ -24,7 +37,7 @@ export default function Testimonials() {
         <div className='content-block'>
             <h2>Making an impact</h2>
             <Carousel atATime={2} hoverTextThing='testimonials'>
-                {testimonials.map((c) => (
+                {testimonials.map((c: TestimonialData) => (
                     <Card data={c} key={c.description} />
                 ))}
             </Carousel>

…pages/press/testimonials/testimonials.js …ages/press/testimonials/testimonials.tsxsrc/app/pages/press/testimonials/testimonials.js renamed to src/app/pages/press/testimonials/testimonials.tsx src/app/pages/press/testimonials/testimonials.js renamed to src/app/pages/press/testimonials/testimonials.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import LanguageSelector from '~/components/language-selector/language-selector';
 import {FormattedMessage} from 'react-intl';
 
-export default function LanguageSelectorSection(props) {
+export default function LanguageSelectorSection(props: Record<string, unknown>) {
     return (
         <section className='language-selector-section'>
             <div className='content'>

…ubjects/new/language-selector-section.js …bjects/new/language-selector-section.tsxsrc/app/pages/subjects/new/language-selector-section.js renamed to src/app/pages/subjects/new/language-selector-section.tsx src/app/pages/subjects/new/language-selector-section.js renamed to src/app/pages/subjects/new/language-selector-section.tsx

@@ -1,10 +1,20 @@
 import useSubjectsContext from './context';
 import useSubjectCategoryContext from '~/contexts/subject-category';
 
-export default function useCategorizedBooks() {
+type Book = {
+    subjects: string[];
+};
+
+type CategoryWithBooks = Book[] & {
+    label?: string;
+};
+
+type CategorizedBooks = Record<string, CategoryWithBooks>;
+
+export default function useCategorizedBooks(): CategorizedBooks {
     const {books} = useSubjectsContext();
     const categories = useSubjectCategoryContext();
-    const result = {};
+    const result: CategorizedBooks = {};
     const addLabels = () => {
         for (const category of categories) {
             if (result[category.cms]) {
@@ -14,9 +24,9 @@ export default function useCategorizedBooks() {
     };
 
     for (const book of books) {
-        book.subjects.forEach((cmsCategory) => {
+        book.subjects.forEach((cmsCategory: string) => {
             if (!(cmsCategory in result)) {
-                result[cmsCategory] = [];
+                result[cmsCategory] = [] as CategoryWithBooks;
             }
             if (!result[cmsCategory].includes(book)) {
                 result[cmsCategory].push(book);