Port to TS

src/app/components/select/drop-down/drop-down.js

@@ -72,7 +72,7 @@ function AutoFocusVerticalList({options}) {
     );
 }
 
-export default function DropDownSelect({options, placeholder, ...passThruProps}) {
+export default function DropDownSelect({options, placeholder='Please select', ...passThruProps}) {
     return (
         <Select {...passThruProps}>
             <ToggleContextProvider>

src/app/pages/contact/contact.js → src/app/pages/contact/contact.tsx

@@ -4,8 +4,16 @@ import RawHTML from '~/components/jsx-helpers/raw-html';
 import Form from './form';
 import './contact.scss';
 
+type PageData = {
+    title: string;
+    tagline: string;
+    mailingHeader: string;
+    mailingAddress: string;
+    customerService: string;
+}
+
 export default function ContactPage() {
-    const pageData = usePageData('pages/contact');
+    const pageData = usePageData<PageData>('pages/contact');
 
     if (!pageData) {
         return null;

src/app/pages/contact/form.js → src/app/pages/contact/form.tsx

@@ -6,7 +6,13 @@ import { FileButton } from '../errata-form/form/FileUploader';
 import useUserContext from '~/contexts/user';
 import './form.scss';
 
-const options = [
+type SetSubmitted = React.Dispatch<React.SetStateAction<boolean>>;
+
+const options: {
+    label: string;
+    value: string;
+    selected?: boolean;
+}[] = [
     'General',
     'Adopting OpenStax Textbooks',
     'OpenStax Kinetic',
@@ -34,12 +40,22 @@ const assignableOptions = [
 
 function LabeledInputWithInvalidMessage({
     className, children, eventType='input', showMessage
-}) {
-    const ref = useRef();
+}: React.PropsWithChildren<{
+    className?: string;
+    eventType?: string;
+    showMessage?: boolean;
+}>) {
+    const ref = useRef<HTMLLabelElement>(null);
     const [message, setMessage] = useState('');
 
     useEffect(() => {
-        const el = ref.current.querySelector('[name]');
+        const el = ref?.current?.querySelector<HTMLInputElement & {
+            validationMessage: string;
+        }>('[name]');
+
+        if (!el) {
+            return () => null; // Get assertDefined() instead
+        }
         const updateMessage = () => setMessage(el.validationMessage);
 
         updateMessage();
@@ -64,14 +80,14 @@ function useIsEmbedded() {
     return pathname.includes('embedded');
 }
 
-function useAfterSubmit(setSubmitted) {
+function useAfterSubmit(setSubmitted?: SetSubmitted) {
     const navigate = useNavigate();
     const isEmbedded = useIsEmbedded();
 
     return React.useCallback(
         () => {
             if (isEmbedded) {
-                setSubmitted(true);
+                (setSubmitted as SetSubmitted)(true); // the embedded form passes it
             } else {
                 navigate('/confirmation/contact');
             }
@@ -106,7 +122,7 @@ function useSubjectWithInitialization() {
 // in the salesforceForm will be right.
 const newPostSite = 'https://hooks.zapier.com/hooks/catch/175480/3n62dhe/';
 
-export default function ContactForm({setSubmitted}) {
+export default function ContactForm({setSubmitted}: {setSubmitted?: SetSubmitted}) {
     const [showInvalidMessages, setShowInvalidMessages] = useState(false);
     const [subject, setSubject] = useSubjectWithInitialization();
     const assignableSelected = React.useMemo(
@@ -129,7 +145,7 @@ export default function ContactForm({setSubmitted}) {
     const searchParams = new window.URLSearchParams(window.location.search);
     const bodyParams = searchParams.getAll('body').join('\n');
     const {userStatus} = useUserContext();
-    const userUuid = searchParams.get('user_id') ?? userStatus.uuid;
+    const userUuid = searchParams.get('user_id') ?? userStatus?.uuid;
 
     return (
         <SalesforceForm postTo={postTo} afterSubmit={afterSubmit}>
@@ -161,7 +177,7 @@ export default function ContactForm({setSubmitted}) {
                 <div className="label-text">
                     Your Name
                 </div>
-                <input name="name" type="text" size="20" required />
+                <input name="name" type="text" size={20} required />
             </LabeledInputWithInvalidMessage>
             <LabeledInputWithInvalidMessage showMessage={showInvalidMessages}>
                 <div className="label-text">
@@ -173,7 +189,7 @@ export default function ContactForm({setSubmitted}) {
                 <div className="label-text">
                     Your Message
                 </div>
-                <textarea cols="50" name="description" rows="6" required />
+                <textarea cols={50} name="description" rows={6} required />
             </LabeledInputWithInvalidMessage>
             <div className="label-text">
                 Please add a screenshot or any other file that helps explain your request.