Merge pull request #2361 from gordon-cs/revert-2360-revert-2318-s24-m…

…igrate-components-typescript-pt2

Revert "Revert "S24 migrate components typescript pt2""

src/components/GordonDialogBox/index.tsx

@@ -7,15 +7,15 @@ import {
   DialogProps,
   DialogTitle,
 } from '@mui/material';
-import { KeyboardEvent, PropsWithChildren } from 'react';
+import { KeyboardEvent, MouseEvent, MouseEventHandler, PropsWithChildren } from 'react';
 
 type Props = {
   open: boolean;
   title: string;
-  buttonClicked: (event: {}) => void;
+  buttonClicked?: (event: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLButtonElement>) => void;
   buttonName?: string;
   isButtonDisabled?: boolean;
-  cancelButtonClicked?: (event: {}) => void;
+  cancelButtonClicked?: MouseEventHandler<HTMLButtonElement>;
   cancelButtonName?: string;
   severity?: AlertColor;
 } & Partial<DialogProps>;
@@ -33,7 +33,7 @@ const GordonDialogBox = ({
 }: PropsWithChildren<Props>) => {
   const handleKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {
     if (
-      !isButtonDisabled &&
+      buttonClicked &&
       event.key === 'Enter' &&
       event.currentTarget.classList.contains('MuiDialog-root')
     ) {

src/components/GordonOffline/index.tsx

@@ -2,6 +2,11 @@ import { Button, Card, CardContent, Grid } from '@mui/material/';
 import { Link } from 'react-router-dom';
 import styles from './GordonOffline.module.css';
 
+/**
+ * @param {Object} props props
+ * @param {string} props.feature - Text representing the content the user tried to access
+ * @returns {JSX.Element} A card with a message that the user must connect to view content
+ */
 type Props = {
   feature: string;
 };

src/components/GordonTooltip/index.tsx

@@ -2,12 +2,12 @@ import { Tooltip, TooltipProps } from '@mui/material';
 import HelpIcon from '@mui/icons-material/Help';
 import styles from './GordonTooltip.module.css';
 
-const GordonTooltip = (props: TooltipProps) => {
+const GordonTooltip = ({ children, title, ...OtherProps }: TooltipProps) => {
   return (
     <Tooltip
-      {...props}
       classes={{ tooltip: styles.tooltip }}
-      title={<span className={styles.tooltipTitle}>{props.children}</span>}
+      title={<span className={styles.tooltipTitle}>{children}</span>}
+      {...OtherProps}
     >
       <HelpIcon className={styles.helpIcon} />
     </Tooltip>

src/components/Header/components/QuickSearch/index.tsx

@@ -80,9 +80,9 @@ const performSearch = debounce(
 
 type Props =
   | {
-      disableLink: true;
-      customPlaceholderText: string;
-      onSearchSubmit: (person: SearchResult) => void;
+      disableLink?: true;
+      customPlaceholderText?: string;
+      onSearchSubmit?: (person: SearchResult) => void;
       searchFunction?: SearchFunction;
     }
   | {
@@ -106,7 +106,7 @@ const GordonQuickSearch = ({
     ? 'Offline'
     : customPlaceholderText ?? (width < BREAKPOINT_WIDTH ? 'People' : 'People Search');
 
-  const handleInput = (_event: any, value: string) => {
+  const handleInput = (_event: React.SyntheticEvent, value: string) => {
     // remove special characters
     const query = value.replace(specialCharactersRegex, '');
 
@@ -118,7 +118,7 @@ const GordonQuickSearch = ({
     }
   };
 
-  const handleSubmit = (_event: any, person: SearchResult | null) => {
+  const handleSubmit = (_event: React.SyntheticEvent, person: SearchResult | null) => {
     if (!person) return;
     disableLink ? onSearchSubmit!(person) : navigate(`/profile/${person.UserName}`);
   };

src/components/PWAInstructions/index.jsx → src/components/PWAInstructions/index.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import BeforeInstallPromptEvent from '@mui/material';
 import styles from './PWAInstructions.module.css';
 
 import DesktopChromeInstall from './images/Desktop/Desktop-Chrome-Install-360.png';
@@ -118,12 +119,30 @@ const devices = {
   },
 };
 
-const PWAInstructions = (props) => {
-  const [device, setDevice] = useState(null);
-  const [platform, setPlatform] = useState(null);
+interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: string[];
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+  prompt(): Promise<void>;
+}
+
+type Props = {
+  open: boolean;
+  handleDisplay: () => void;
+  deferredPWAPrompt: BeforeInstallPromptEvent;
+};
+
+const PWAInstructions = ({ open, handleDisplay, deferredPWAPrompt }: Props) => {
+  const [device, setDevice] = useState<string | null>(null);
+  const [platform, setPlatform] = useState<string | null>(null);
 
   // Handles which device is selected
-  const handleDeviceChange = (event, selectedDevice) => {
+  const handleDeviceChange = (
+    event: React.MouseEvent<HTMLElement>,
+    selectedDevice: string | null,
+  ) => {
     // Checks the selected device to prevent the user from deselecting a selected toggle
     if (selectedDevice === 'Desktop') {
       setDevice(selectedDevice);
@@ -136,7 +155,10 @@ const PWAInstructions = (props) => {
   };
 
   // Handles which platform is selected
-  const handlePlatformChange = (event, selectedPlatform) => {
+  const handlePlatformChange = (
+    event: React.MouseEvent<HTMLElement>,
+    selectedPlatform: string | null,
+  ) => {
     // Checks the selected platform to prevent the user from deselecting a selected toggle
     if (selectedPlatform !== null) setPlatform(selectedPlatform);
   };
@@ -178,93 +200,105 @@ const PWAInstructions = (props) => {
           >
             <Typography variant="h5">Instructions for {preText}</Typography>
           </Grid>
-          {devices[device][platform].map((step, index) => {
-            /**
-             * The first step is processed differently from the rest in order to show a link to
-             * download Google Chrome. This is for all platforms except "Apple" since the PWA can
-             * only be installed through Safari with Apple
-             */
-            if (index === 0 && platform !== 'Apple') {
-              return (
-                <Grid container xs={12}>
-                  <Grid
-                    container
-                    xs={12}
-                    alignItems="center"
-                    className={styles.pwa_instructions_content_container_toggles_instructions_text}
-                  >
-                    <Typography
-                      variant="h6"
+          {
+            //@ts-ignore TypeScript cannot encode the fact that platform may have a different value depending on the value of device
+            devices[device][platform] //
+              .map((step: string[], index: number) => {
+                /**
+                 * The first step is processed differently from the rest in order to show a link to
+                 * download Google Chrome. This is for all platforms except "Apple" since the PWA can
+                 * only be installed through Safari with Apple
+                 */
+                if (index === 0 && platform !== 'Apple') {
+                  return (
+                    <Grid container xs={12}>
+                      <Grid
+                        container
+                        xs={12}
+                        alignItems="center"
+                        className={
+                          styles.pwa_instructions_content_container_toggles_instructions_text
+                        }
+                      >
+                        <Typography
+                          variant="h6"
+                          className={
+                            styles.pwa_instructions_content_container_toggles_instructions_text_step
+                          }
+                        >
+                          Step {index + 1}:&nbsp;
+                        </Typography>
+                        <Typography
+                          variant="subtitle1"
+                          className={
+                            styles.pwa_instructions_content_container_toggles_instructions_text_instruction
+                          }
+                        >
+                          {step[0]}&nbsp;
+                          <a href={step[1]}>click here</a>.
+                        </Typography>
+                      </Grid>
+                      <Grid
+                        container
+                        xs={12}
+                        className={
+                          styles.pwa_instructions_content_container_toggles_instructions_image
+                        }
+                      >
+                        <img src={step[2]} alt={step[3]} />
+                      </Grid>
+                    </Grid>
+                  );
+                }
+                // Creates the JSX of the current step containing the instruction and its corresponding image
+                return (
+                  <Grid container xs={12}>
+                    <Grid
+                      container
+                      xs={12}
+                      alignItems="center"
                       className={
-                        styles.pwa_instructions_content_container_toggles_instructions_text_step
+                        styles.pwa_instructions_content_container_toggles_instructions_text
                       }
                     >
-                      Step {index + 1}:&nbsp;
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
+                      <Typography
+                        variant="h6"
+                        className={
+                          styles.pwa_instructions_content_container_toggles_instructions_text_step
+                        }
+                      >
+                        Step {index + 1}:&nbsp;
+                      </Typography>
+                      <Typography
+                        variant="subtitle1"
+                        className={
+                          styles.pwa_instructions_content_container_toggles_instructions_text_instruction
+                        }
+                      >
+                        {step[0]}
+                      </Typography>
+                    </Grid>
+                    <Grid
+                      container
+                      xs={12}
                       className={
-                        styles.pwa_instructions_content_container_toggles_instructions_text_instruction
+                        styles.pwa_instructions_content_container_toggles_instructions_image
                       }
                     >
-                      {step[0]}&nbsp;
-                      <a href={step[1]}>click here</a>.
-                    </Typography>
-                  </Grid>
-                  <Grid
-                    container
-                    xs={12}
-                    className={styles.pwa_instructions_content_container_toggles_instructions_image}
-                  >
-                    <img src={step[2]} alt={step[3]} />
+                      <img src={step[1]} alt={step[2]} />
+                    </Grid>
                   </Grid>
-                </Grid>
-              );
-            }
-            // Creates the JSX of the current step containing the instruction and its corresponding image
-            return (
-              <Grid container xs={12}>
-                <Grid
-                  container
-                  xs={12}
-                  alignItems="center"
-                  className={styles.pwa_instructions_content_container_toggles_instructions_text}
-                >
-                  <Typography
-                    variant="h6"
-                    className={
-                      styles.pwa_instructions_content_container_toggles_instructions_text_step
-                    }
-                  >
-                    Step {index + 1}:&nbsp;
-                  </Typography>
-                  <Typography
-                    variant="subtitle1"
-                    className={
-                      styles.pwa_instructions_content_container_toggles_instructions_text_instruction
-                    }
-                  >
-                    {step[0]}
-                  </Typography>
-                </Grid>
-                <Grid
-                  container
-                  xs={12}
-                  className={styles.pwa_instructions_content_container_toggles_instructions_image}
-                >
-                  <img src={step[1]} alt={step[2]} />
-                </Grid>
-              </Grid>
-            );
-          })}
+                );
+              })
+          }
         </Grid>
       );
     }
   }
 
   function createContent() {
     // If the browser has quick PWA installation capability
-    if (props.deferredPWAPrompt) {
+    if (deferredPWAPrompt) {
       return (
         <Grid
           container
@@ -286,7 +320,7 @@ const PWAInstructions = (props) => {
             <Button
               onClick={() => {
                 // Exits out the dialog box
-                props.handleDisplay();
+                handleDisplay();
               }}
               className={styles.button_cancel}
             >
@@ -295,7 +329,7 @@ const PWAInstructions = (props) => {
             <Button
               onClick={() => {
                 // Calls the browser's default prompt to do a quick installation of the PWA
-                props.deferredPWAPrompt.prompt();
+                deferredPWAPrompt.prompt();
               }}
               className={styles.button_install}
             >
@@ -423,7 +457,7 @@ const PWAInstructions = (props) => {
             <Button
               onClick={() => {
                 // Exits out the dialog box
-                props.handleDisplay();
+                handleDisplay();
               }}
               className={styles.button_cancel}
             >
@@ -437,7 +471,7 @@ const PWAInstructions = (props) => {
 
   return (
     <Dialog
-      open={props.open}
+      open={open}
       fullWidth
       maxWidth="sm"
       aria-labelledby="alert-dialog-slide-title"
@@ -446,9 +480,7 @@ const PWAInstructions = (props) => {
       <Grid container className={styles.pwa_instructions}>
         <Grid container xs={12} justifyContent="center" className={styles.pwa_instructions_title}>
           <Typography variant="h5">
-            {props.deferredPWAPrompt
-              ? 'Install Gordon 360'
-              : ' Instructions to install Gordon 360 '}
+            {deferredPWAPrompt ? 'Install Gordon 360' : ' Instructions to install Gordon 360 '}
           </Typography>
         </Grid>
         <DialogContent className={styles.pwa_instructions_content}>{createContent()}</DialogContent>

src/components/PhotoCropper/index.tsx

@@ -32,9 +32,9 @@ const PhotoCropper = ({ open, onClose, onSubmit }: PropTypes) => {
   const [preview, setPreview] = useState<string | null>(null);
   const [snackbar, setSnackbar] = useState<{
     message: string;
-    severity: AlertColor | null;
+    severity?: AlertColor;
     open: boolean;
-  }>({ message: '', severity: null, open: false });
+  }>({ message: '', severity: undefined, open: false });
   const [cropperData, setCropperData] = useState<{
     cropBoxDim: number | undefined;
     aspectRatio: number;