Port src/app/pages files from JS to TS

src/app/components/language-selector/language-selector.tsx

@@ -72,7 +72,7 @@ export default function LanguageSelector({
 }: {
     LeadIn: () => React.JSX.Element;
     otherLocales: string[];
-    LinkPresentation: LinkPresentationType;
+    LinkPresentation?: LinkPresentationType;
     addPolish?: boolean;
 }) {
     if (addPolish) {

src/app/pages/partners/partner-details/info-request-form/school-selector.js → src/app/pages/partners/partner-details/info-request-form/school-selector.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,25 @@ export default function SchoolSelector({value, setValue}) {
                     required: true,
                     value,
                     autoComplete: 'off',
-                    onChange({target}) {setValue(target.value);}
+                    onChange: useSetValueFromTarget(setValue)
                 }}
-                accept={(option) => setValue(option.value)}
+                accept={useAcceptValue(setValue)}
                 accepted={schoolIsOk}
             />
         </div>
     );
 }
 
-export function useDoSubmit(afterSubmit) {
-    return React.useCallback((form) => {
+export function useAcceptValue(setValue: (value: string) => void) {
+    return React.useCallback(({value}: {value: string}) => setValue(value), [setValue]);
+}
+
+export function useSetValueFromTarget(setValue: (value: string) => void) {
+    return React.useCallback(({target}: React.ChangeEvent<HTMLInputElement>) => setValue(target.value), [setValue]);
+}
+
+export function useDoSubmit(afterSubmit: () => void) {
+    return React.useCallback((form: HTMLFormElement) => {
         form.submit();
         afterSubmit();
     }, [afterSubmit]);

src/app/pages/press/page-context.tsx

@@ -7,7 +7,14 @@ type FeaturedInRollup = {
     image: string;
 };
 
-// This will need more filling in as other components move to TSX
+export type TestimonialData = {
+    image: {
+        title: string;
+        file: string;
+    },
+    testimonial: string;
+};
+
 type PressPageData = {
     meta: object;
     title: string;
@@ -55,6 +62,7 @@ type PressPageData = {
             author: string;
         };
     };
+    testimonials: [TestimonialData[]]
 };
 
 function useContextValue() {

src/app/pages/press/testimonials/testimonials.js → src/app/pages/press/testimonials/testimonials.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
-import usePageContext from '../page-context';
+import usePageContext, {TestimonialData} from '../page-context';
 import ClippedImage from '~/components/clipped-image/clipped-image';
 import Carousel from '~/components/carousel/carousel';
+import {assertDefined} from '~/helpers/data';
 import './testimonials.scss';
 
-function Card({data: {image, testimonial}}) {
+function Card({data}: {data: TestimonialData}) {
+    const {image, testimonial} = data;
+
     return (
         <div className='card'>
             <div className='picture-part'>
@@ -18,14 +21,15 @@ function Card({data: {image, testimonial}}) {
 }
 
 export default function Testimonials() {
-    const {testimonials: [testimonials]} = usePageContext();
+    const ctx = assertDefined(usePageContext());
+    const {testimonials: [testimonials]} = ctx;
 
     return (
         <div className='content-block'>
             <h2>Making an impact</h2>
             <Carousel atATime={2} hoverTextThing='testimonials'>
-                {testimonials.map((c) => (
-                    <Card data={c} key={c.description} />
+                {testimonials.map((c: TestimonialData) => (
+                    <Card data={c} key={c.image.file} />
                 ))}
             </Carousel>
         </div>

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

@@ -26,6 +26,7 @@ type SubjectsPageData = {
     translations: Array<{value: LocaleEntry[]}>;
     books?: {
         bookState: string;
+        subjects: string[];
     }[];
     aboutBlurbs?: ReturnType<typeof aboutBlurbs>;
     heading: string;

src/app/pages/subjects/new/import-language-selector-section.js

@@ -0,0 +1,3 @@
+import LanguageSelectorSection from './language-selector-section';
+
+export default LanguageSelectorSection;

src/app/pages/subjects/new/language-selector-section.js → src/app/pages/subjects/new/language-selector-section.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: Omit<Parameters<typeof LanguageSelector>[0], 'LeadIn'>) {
     return (
         <section className='language-selector-section'>
             <div className='content'>

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

@@ -9,7 +9,7 @@ import {AllSubjectsAboutOpenStax} from './about-openstax';
 import LoadSubject from './specific/specific';
 import './subjects.scss';
 
-const importLanguageSelector = () => import('./language-selector-section.js');
+const importLanguageSelector = () => import('./import-language-selector-section.js');
 const importSubjectsListing = () => import('./import-subjects-listing.js');
 const importTutorAd = () => import('./import-tutor-ad.js');
 const importInfoBoxes = () => import('./import-info-boxes.js');

test/src/pages/partners/info-request-form.test.tsx

@@ -7,6 +7,11 @@ import * as SFBC from '~/components/multiselect/book-tags/sf-book-context';
 import sfBooks from '~/../../test/src/data/sf-all-books';
 import InfoRequestForm from '~/pages/partners/partner-details/info-request-form/info-request-form';
 import {SearchContextProvider} from '~/pages/partners/search-context';
+import {
+    useAcceptValue,
+    useSetValueFromTarget,
+    useDoSubmit
+} from '~/pages/partners/partner-details/info-request-form/school-selector';
 
 async function renderForm() {
     render(
@@ -57,23 +62,57 @@ describe('partners/info-rquest-form', () => {
 
         await user.click(screen.getAllByRole('radio', {name: 'No'})[1]);
         await user.click(screen.getByRole('button', {name: 'Next'}));
-
-        // -- The book selector is not working right in tests, so all of this
-        // -- can't be tested until that gets figured out.
-        // const schoolSelector = await screen.findByRole('textbox', {name: 'School'});
-        // const roleSelector = screen.getByRole('combobox');
-        // const studentField = screen.getByRole('spinbutton');
-
-        // await user.click(roleSelector);
-        // await user.click(screen.getByRole('option', {name: 'Other'}));
-        // await user.type(schoolSelector, 'Ric');
-        // await user.type(studentField, '12');
-
-        // await user.click(screen.getByRole('button', {name: 'Submit', hidden: true}));
+        // Going past the first page is unreliable in testing, so the pieces
+        // are tested separately
     });
     it('does a partner type beginning with a vowel', () => {
         mockPC.mockReturnValue(mockPC2);
         renderForm();
         screen.getByText('is an abnormal', {exact: false});
     });
 });
+
+describe('school-selector utilities', () => {
+    it('useAcceptValue sets a value', () => {
+        const setValue = jest.fn();
+
+        function Component() {
+            const accept = useAcceptValue(setValue);
+
+            accept({value: 'a value'});
+            return null;
+        }
+
+        render(<Component />);
+        expect(setValue).toHaveBeenCalledWith('a value');
+    });
+    it('useSetValueFromTarget sets a value', () => {
+        const setValue = jest.fn();
+
+        function Component() {
+            const accept = useSetValueFromTarget(setValue);
+
+            accept({target: {value: 'a value'}} as unknown as React.ChangeEvent<HTMLInputElement>);
+            return null;
+        }
+
+        render(<Component />);
+        expect(setValue).toHaveBeenCalledWith('a value');
+    });
+    it('useDoSubmit calls form.submit and afterSubmit', () => {
+        const form = {submit: jest.fn()} as unknown as HTMLFormElement;
+        const afterSubmit = jest.fn();
+
+        function Component() {
+            const doSubmit = useDoSubmit(afterSubmit);
+
+            doSubmit(form);
+
+            return null;
+        }
+
+        render(<Component />);
+        expect(form.submit).toHaveBeenCalled();
+        expect(afterSubmit).toHaveBeenCalled();
+    });
+});