Port components to ts 4 (#2723)

* loader-page

* language-selector

* link-with-chevron

* more-fewer

* multi-page-form

* multiselect/book-tags/book-options

* Tests

* Create/use/test assertNotNull

Author: RoyEJohnson

src/app/components/jsx-helpers/loader-page.js renamed to src/app/components/jsx-helpers/loader-page.tsx

@@ -1,12 +1,25 @@
 import React from 'react';
 import {camelCaseKeys} from '~/helpers/page-data-utils';
 import usePageData from '~/helpers/use-page-data';
-import {setPageTitleAndDescriptionFromBookData, useCanonicalLink} from '~/helpers/use-document-head';
+import {setPageTitleAndDescriptionFromBookData, useCanonicalLink, BookData} from '~/helpers/use-document-head';
 import LoadingPlaceholder from '~/components/loading-placeholder/loading-placeholder';
 import Error404 from '~/pages/404/404';
 
+type RawPageData = {
+    error?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ChildType = (p: any) => React.JSX.Element;
+
 export function LoadedPage({
     Child, data, props, doDocumentSetup, noCamelCase
+} : {
+    Child: ChildType;
+    data: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+    props: object;
+    doDocumentSetup?: boolean;
+    noCamelCase?: boolean;
 }) {
     const camelCaseData = React.useMemo(
         () => noCamelCase ? data : camelCaseKeys(data),
@@ -16,7 +29,7 @@ export function LoadedPage({
     useCanonicalLink(doDocumentSetup);
     React.useEffect(() => {
         if (doDocumentSetup) {
-            setPageTitleAndDescriptionFromBookData(data);
+            setPageTitleAndDescriptionFromBookData(data as BookData);
         }
     }, [data, doDocumentSetup]);
 
@@ -32,8 +45,15 @@ export function LoadedPage({
 export default function LoaderPage({
     slug, Child, props={}, preserveWrapping=false, doDocumentSetup=false,
     noCamelCase=false
+}: {
+    slug: string;
+    Child: ChildType;
+    props?: object;
+    preserveWrapping?: boolean;
+    doDocumentSetup?: boolean;
+    noCamelCase?: boolean;
 }) {
-    const data = usePageData(slug, preserveWrapping, noCamelCase);
+    const data = usePageData<RawPageData>(slug, preserveWrapping, noCamelCase);
 
     if (!data) {
         return <LoadingPlaceholder />;

src/app/components/language-selector/language-selector.d.ts

@@ -7,9 +7,16 @@ import './language-selector.scss';
 
 const polishSite = 'https://openstax.pl/podreczniki';
 
-export function LanguageLink({locale, slug}) {
+type PLocaleEntry = {
+    locale: string;
+    slug?: string;
+};
+
+export type LocaleEntry = Required<PLocaleEntry>
+
+export function LanguageLink({locale, slug}: PLocaleEntry) {
     const {setLanguage} = useLanguageContext();
-    const onClick = React.useCallback((event) => {
+    const onClick = React.useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
         event.preventDefault();
         setLanguage(locale);
     }, [locale, setLanguage]);
@@ -19,29 +26,24 @@ export function LanguageLink({locale, slug}) {
     return (<a {...props}><LanguageText locale={locale} /></a>);
 }
 
-// Provide a fallback so ancient browsers don't outright fail
-export function LanguageText({locale}) {
-    if (Intl.DisplayNames) {
-        return (<LanguageTextUsingIntl locale={locale} />);
-    }
-    return locale;
-}
-
-function LanguageTextUsingIntl({locale}) {
+export function LanguageText({locale}: {locale: string}) {
     const {language} = useLanguageContext();
-    const languageName = React.useMemo(
-        () => new Intl.DisplayNames([language], {type: 'language'}),
-        [language]
+    const text = React.useMemo(
+        () => (new Intl.DisplayNames([language], {type: 'language'})).of(locale),
+        [language, locale]
     );
 
-    return (
-        <React.Fragment>
-            {languageName.of(locale)}
-        </React.Fragment>
-    );
+    return text;
 }
 
-function AnotherLanguage({locale, LinkPresentation, position, listLength}) {
+type LinkPresentationType = ({locale}: PLocaleEntry) => React.JSX.Element | null;
+
+function AnotherLanguage({locale, LinkPresentation, position, listLength}: {
+    locale: string;
+    LinkPresentation: LinkPresentationType;
+    position: number;
+    listLength: number;
+}) {
     return (
         <React.Fragment>
             {listLength > 1 ? ', ' : ' '}
@@ -56,7 +58,7 @@ function AnotherLanguage({locale, LinkPresentation, position, listLength}) {
     );
 }
 
-export function LanguageSelectorWrapper({children}) {
+export function LanguageSelectorWrapper({children}: React.PropsWithChildren<Record<never, never>>) {
     return (
         <div className="language-selector">
             <FontAwesomeIcon icon={faGlobe} />
@@ -66,7 +68,12 @@ export function LanguageSelectorWrapper({children}) {
 }
 
 export default function LanguageSelector({
-    LeadIn, otherLocales=[], LinkPresentation=LanguageLink, addPolish=false
+    LeadIn, otherLocales, LinkPresentation=LanguageLink, addPolish=false
+}: {
+    LeadIn: () => React.JSX.Element;
+    otherLocales: string[];
+    LinkPresentation: LinkPresentationType;
+    addPolish?: boolean;
 }) {
     if (addPolish) {
         otherLocales.push('pl');

src/app/components/language-selector/language-selector.js renamed to src/app/components/language-selector/language-selector.tsx

@@ -4,7 +4,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faChevronRight} from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import './link-with-chevron.scss';
 
-export default function LinkWithChevron({children, className=undefined, ...props}) {
+export default function LinkWithChevron({children, className, ...props}:
+    React.AnchorHTMLAttributes<HTMLAnchorElement>
+) {
     return (
         <a className={cn('link-with-chevron', className)} {...props}>
             {children}{' '}

src/app/components/link-with-chevron/link-with-chevron.js renamed to src/app/components/link-with-chevron/link-with-chevron.tsx

@@ -4,32 +4,41 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCaretLeft} from '@fortawesome/free-solid-svg-icons/faCaretLeft';
 import {faCaretRight} from '@fortawesome/free-solid-svg-icons/faCaretRight';
 import $ from '~/helpers/$';
+import {assertNotNull} from '~/helpers/data';
 import {treatSpaceOrEnterAsClick} from '~/helpers/events';
 
-function PseudoButton({onClick, children}) {
+function PseudoButton({onClick, children}: React.PropsWithChildren<{
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}>) {
     return (
-        <div role="button" tabIndex="0" onClick={onClick} onKeyDown={treatSpaceOrEnterAsClick}>
+        <div role="button" tabIndex={0} onClick={onClick} onKeyDown={treatSpaceOrEnterAsClick}>
             {children}
         </div>
     );
 }
 
-function ButtonOrPresentation({condition, children, onClick}) {
+function ButtonOrPresentation({condition, children, onClick}: React.PropsWithChildren<{
+    condition: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}>) {
     return (
         condition ?
             <PseudoButton onClick={onClick} children={children} /> :
             <div role="presentation" children={children} />
     );
 }
 
-export function Paginated({children, perPage=10}) {
+export function Paginated({children, perPage=10}: {
+    perPage?: number;
+    children: React.ReactNode[];
+}) {
     const [pageNumber, setPageNumber] = useState(1);
-    const [pageChanged, setPageChanged] = useState();
+    const [pageChanged, setPageChanged] = useState<number>();
     const lastPage = Math.ceil(children.length / perPage);
     const firstDisplayed = perPage * (pageNumber - 1);
     const displayedChildren = children
         .slice(perPage * (pageNumber - 1), firstDisplayed + perPage);
-    const ref=useRef();
+    const ref=useRef<HTMLDivElement>(null);
 
     function nextPage() {
         setPageNumber(pageNumber + 1);
@@ -41,7 +50,7 @@ export function Paginated({children, perPage=10}) {
     }
     useEffect(() => {
         if (pageChanged) {
-            $.scrollTo(ref.current, 70);
+            $.scrollTo(assertNotNull(ref.current), 70);
         }
     }, [pageChanged]);
 
@@ -62,7 +71,10 @@ export function Paginated({children, perPage=10}) {
     );
 }
 
-export default function MoreFewer({children, pluralItemName}) {
+export default function MoreFewer({children, pluralItemName}: {
+    pluralItemName: string;
+    children: React.ReactNode[];
+}) {
     const [expanded, setExpanded] = useState(false);
     const displayedChildren = expanded ?
         <Paginated>{children}</Paginated> :

src/app/components/more-fewer/more-fewer.js renamed to src/app/components/more-fewer/more-fewer.tsx

@@ -3,12 +3,12 @@ import usePaginatorContext from '~/components/paginator/paginator-context';
 import usePagesContext from './pages-context';
 
 type Args = {
-    formRef: React.MutableRefObject<HTMLFormElement>;
+    formRef: React.RefObject<HTMLFormElement>;
     disabled: boolean;
     onSubmit: (form: HTMLFormElement) => void;
 };
 
-export default function ButtonRow({formRef, onSubmit, disabled = false}: Args) {
+export default function ButtonRow({formRef, onSubmit, disabled}: Args) {
     return (
         <div className="button-row">
             <BackButton disabled={disabled} />
@@ -48,7 +48,7 @@ function SubmitButton({disabled, formRef, onSubmit}: Args) {
     const validateAndSubmit = useCallback<React.MouseEventHandler>(
         (event) => {
             if (validateCurrentPage()) {
-                onSubmit(formRef.current);
+                onSubmit(formRef.current as HTMLFormElement);
             }
             event.preventDefault();
         },

src/app/components/multi-page-form/buttons.tsx

@@ -9,7 +9,7 @@ function pass() {
     return true;
 }
 
-function MarkupChildren({children}) {
+function MarkupChildren({children}: {children: React.ReactNode[]}) {
     const {isVisible} = usePaginatorContext();
     const {validatedPages, activeRef} = usePagesContext();
 
@@ -44,12 +44,20 @@ function PageCount() {
     );
 }
 
+type MultiPageFormProps = {
+    children: React.ReactNode[];
+    validatePage?: (p: unknown) => boolean;
+    onPageChange?: (p: unknown) => boolean;
+    onSubmit: () => void;
+    submitting: boolean;
+} & React.FormHTMLAttributes<HTMLFormElement>;
+
 function MultiPageFormInContext({
     children,
     validatePage=pass, onPageChange=pass, onSubmit,
     submitting, ...formParams
-}) {
-    const formRef = React.useRef();
+}: MultiPageFormProps) {
+    const formRef = React.useRef<HTMLFormElement>(null);
 
     return (
         <div className="multi-page-form">
@@ -78,7 +86,7 @@ function MultiPageFormInContext({
     );
 }
 
-export default function MultiPageForm(params) {
+export default function MultiPageForm(params: MultiPageFormProps) {
     return (
         <PaginatorContextProvider>
             <MultiPageFormInContext {...params} />

src/app/components/multi-page-form/multi-page-form.js renamed to src/app/components/multi-page-form/multi-page-form.tsx

@@ -2,13 +2,17 @@ import {useState, useRef, useEffect, useCallback} from 'react';
 import usePaginatorContext from '~/components/paginator/paginator-context';
 import buildContext from '~/components/jsx-helpers/build-context';
 
-function useContextValue({pages, validatePage, onPageChange}) {
+function useContextValue({pages, validatePage, onPageChange}: {
+    pages: number;
+    validatePage: (p: unknown) => boolean;
+    onPageChange: (p: unknown) => void;
+}) {
     const [validatedPages, setValidatedPages] = useState({});
-    const activeRef = useRef();
+    const activeRef = useRef<HTMLDivElement>(null);
     const {currentPage} = usePaginatorContext();
     const validateCurrentPage = useCallback(
         () => {
-            const invalid = activeRef.current.querySelector(':invalid');
+            const invalid = activeRef.current?.querySelector(':invalid');
 
             setValidatedPages({[currentPage]: true, ...validatedPages});
             return invalid === null && validatePage(currentPage);

src/app/components/multi-page-form/pages-context.js renamed to src/app/components/multi-page-form/pages-context.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import useMultiselectContext from '../multiselect-context';
 import useSFBookContext from './sf-book-context';
+import type {SalesforceBook} from '~/helpers/books';
 import useToggleContext from '~/components/toggle/toggle-context';
 import {treatSpaceOrEnterAsClick} from '~/helpers/events';
 import './book-options.scss';
 
 
-function BookOption({book}) {
+function BookOption({book}: {book: SalesforceBook}) {
     const {select, deselect, isSelected} = useMultiselectContext();
     const {toggle} = useToggleContext();
     const toggleBook = React.useCallback(
         () => isSelected(book) ? deselect(book) : select(book),
         [book, isSelected, deselect, select]
     );
     const onKeyDown = React.useCallback(
-        (event) => {
+        (event: React.KeyboardEvent) => {
             if (event.key === 'Escape') {
                 event.preventDefault();
                 event.stopPropagation();
@@ -28,7 +29,7 @@ function BookOption({book}) {
 
     return (
         <span
-            className="book-option" tabIndex="0"
+            className="book-option" tabIndex={0}
             role="option" aria-selected={isSelected(book)}
             onClick={toggleBook}
             onKeyDown={onKeyDown}
@@ -38,7 +39,10 @@ function BookOption({book}) {
     );
 }
 
-function SubjectListing({subject, books}) {
+function SubjectListing({subject, books}: {
+    subject: string;
+    books: SalesforceBook[];
+}) {
     const booksInSubject = books.filter((b) => b.subjects.includes(subject));
     const groupId = `group-${subject}`;
 

src/app/components/multiselect/book-tags/book-options.js renamed to src/app/components/multiselect/book-tags/book-options.tsx

@@ -7,6 +7,13 @@ export function assertDefined<T>(value: T | undefined): T {
     return value;
 }
 
+export function assertNotNull<T>(value: T | null): T {
+    if (value === null) {
+        throw new Error('Value is null');
+    }
+    return value;
+}
+
 export function formatDateForBlog(date: string) {
     if (!date) {
         return null;