dep-updates-2024-12-20: fix type errors introduced by updating react …

…types dep
ustaxcourt · Dec 20, 2024 · 8a53504 · 8a53504
1 parent d91a443
commit 8a53504
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 43 deletions.
diff --git a/web-client/src/presenter/utilities/focusPaginatorTop.ts b/web-client/src/presenter/utilities/focusPaginatorTop.ts
@@ -1,4 +1,6 @@
-export const focusPaginatorTop = (ref: React.RefObject<HTMLDivElement>) => {
+export const focusPaginatorTop = (
+  ref: React.RefObject<HTMLDivElement | null>,
+) => {
   if (!ref.current) {
     return;
   }

diff --git a/web-client/src/ustc-ui/DateInput/DateRangePickerComponent.tsx b/web-client/src/ustc-ui/DateInput/DateRangePickerComponent.tsx
@@ -49,10 +49,9 @@ export const DateRangePickerComponent = ({
   maxDate?: string; // Must be in YYYY-MM-DD format
   minDate?: string; // Must be in YYYY-MM-DD format
 }) => {
-  const dateRangePickerRef = useRef();
-  const startDatePickerRef = useRef();
-  const endDatePickerRef = useRef();
-
+  const dateRangePickerRef = useRef<HTMLInputElement>(null);
+  const startDatePickerRef = useRef<HTMLInputElement>(null);
+  const endDatePickerRef = useRef<HTMLInputElement>(null);
   const startDateInputRef = useRef<HTMLInputElement>(null);
   const endDateInputRef = useRef<HTMLInputElement>(null);
 

diff --git a/web-client/src/ustc-ui/FormGroup/FormGroup.tsx b/web-client/src/ustc-ui/FormGroup/FormGroup.tsx
@@ -17,7 +17,7 @@ export const FormGroup = ({
   confirmationText?: string;
   errorText?: string | string[];
   errorMessageId?: string;
-  formGroupRef?: React.RefObject<HTMLInputElement>;
+  formGroupRef?: React.RefObject<HTMLInputElement | null>;
   id?: string;
   grow?: boolean;
   omitFormGroupClass?: boolean;

diff --git a/web-client/src/ustc-ui/Table/TableFilters.tsx b/web-client/src/ustc-ui/Table/TableFilters.tsx
@@ -20,7 +20,7 @@ export const TableFilters = ({ filters, onSelect }) => {
         {filters.map(
           ({ isSelected, key, label, options, useInlineSelect = true }) => {
             // track the input element so we can manually reset the value
-            const ref = useRef();
+            const ref = useRef<HTMLSelectElement>(null);
 
             const clearSelect = e => {
               e.preventDefault();
@@ -30,7 +30,7 @@ export const TableFilters = ({ filters, onSelect }) => {
               });
               // the select input is not resetting back (due to cerebral js state or react) not
               // correctly updating the dom, so we need to reset it manually
-              ref.current.value = '';
+              if (ref.current) ref.current.value = '';
             };
 
             return (

diff --git a/web-client/src/ustc-ui/Tabs/Tabs.tsx b/web-client/src/ustc-ui/Tabs/Tabs.tsx
@@ -42,7 +42,7 @@ const renderTabFactory = ({ activeKey, asSwitch, boxed, setTab }) =>
       role: 'presentation',
     };
 
-    const buttonProps = {
+    const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {
       'aria-controls': tabContentId,
       'aria-selected': isActiveTab,
       className: childClassName,
@@ -70,7 +70,7 @@ export function Tab(properties: {
   children?: React.ReactNode;
   className?: string;
   disabled?: boolean;
-  icon?: JSX.Element;
+  icon?: React.JSX.Element;
   id?: string;
   tabName?: string;
   title?: string;
@@ -147,15 +147,13 @@ export function TabsComponent({
     const isActiveTab = tabName === activeKey;
     const tabContentId = `tabContent-${camelCase(tabName)}`;
 
-    let contentProps = {
-      className: 'tab-content',
-      id: tabContentId,
-      role: 'tabpanel',
-    };
-
-    if (asSwitch) {
-      contentProps = {};
-    }
+    const contentProps = asSwitch
+      ? {}
+      : {
+          className: 'tab-content',
+          id: tabContentId,
+          role: 'tabpanel',
+        };
 
     if (tabName && isActiveTab && tabChildren) {
       return (
@@ -192,14 +190,12 @@ export function TabsComponent({
     hasNav && `ustc-num-tabs-${navItems.length}`,
   );
 
-  let baseProps = {
-    className: tabsClass,
-    id,
-  };
-
-  if (asSwitch) {
-    baseProps = {};
-  }
+  const baseProps = asSwitch
+    ? {}
+    : {
+        className: tabsClass,
+        id,
+      };
 
   const TabComponent = renderTabFactory({
     activeKey,

diff --git a/web-client/src/views/AdvancedSearch/PractitionerSearchResults.tsx b/web-client/src/views/AdvancedSearch/PractitionerSearchResults.tsx
@@ -17,8 +17,8 @@ export const PractitionerSearchResults = connect(
     practitionerSearchHelper,
     submitPractitionerNameSearchSequence,
   }) {
-    const paginatorTop = useRef(null);
-    const paginatorBottom = useRef(null);
+    const paginatorTop = useRef<HTMLDivElement>(null);
+    const paginatorBottom = useRef<HTMLDivElement>(null);
     return (
       <>
         {practitionerSearchHelper.showSearchResults && (

diff --git a/web-client/src/views/AdvancedSearch/SearchDateRangePickerComponent.tsx b/web-client/src/views/AdvancedSearch/SearchDateRangePickerComponent.tsx
@@ -17,12 +17,12 @@ export const SearchDateRangePickerComponent = connect(
     validateSequence,
     validationErrors,
   }) {
-    const dateRangePickerRef = useRef();
-    const startDatePickerRef = useRef();
-    const endDatePickerRef = useRef();
+    const dateRangePickerRef = useRef(null);
+    const startDatePickerRef = useRef(null);
+    const endDatePickerRef = useRef(null);
 
-    const startDateInputRef = useRef();
-    const endDateInputRef = useRef();
+    const startDateInputRef = useRef(null);
+    const endDateInputRef = useRef(null);
 
     useEffect(() => {
       if (startDatePickerRef.current && endDatePickerRef.current) {

diff --git a/web-client/src/views/FileDocument/StateDrivenFileInput.tsx b/web-client/src/views/FileDocument/StateDrivenFileInput.tsx
@@ -117,7 +117,9 @@ export const StateDrivenFileInput = connect<
           data-testid={id}
           id={id}
           name={fileInputName}
-          ref={ref => (inputRef = ref)}
+          ref={ref => {
+            inputRef = ref;
+          }}
           style={{
             display: fileOnForm || selectedFilename ? 'none' : 'block',
           }}

diff --git a/web-client/src/views/InfoNotification.tsx b/web-client/src/views/InfoNotification.tsx
@@ -15,6 +15,7 @@ export const InfoNotificationComponent = function InfoNotificationComponent({
 }: {
   alertInfo: {
     title?: string;
+    linkText?: string;
     linkUrl?: string;
     inlineLinkUrl?: string;
     inlineLinkText?: string;

diff --git a/web-client/src/views/JudgeActivityReport/Statistics.tsx b/web-client/src/views/JudgeActivityReport/Statistics.tsx
@@ -27,7 +27,7 @@ export const Statistics = connect(
     submitJudgeActivityStatisticsReportSequence,
     validationErrors,
   }) {
-    const closedCases: () => JSX.Element = () => (
+    const closedCases: () => React.JSX.Element = () => (
       <>
         <table
           aria-describedby="casesClosed"
@@ -67,7 +67,7 @@ export const Statistics = connect(
       </>
     );
 
-    const trialSessionsHeld: () => JSX.Element = () => (
+    const trialSessionsHeld: () => React.JSX.Element = () => (
       <>
         <table
           aria-describedby="sessionsHeld"
@@ -108,7 +108,7 @@ export const Statistics = connect(
       </>
     );
 
-    const ordersIssued: () => JSX.Element = () => (
+    const ordersIssued: () => React.JSX.Element = () => (
       <>
         <table
           aria-describedby="ordersIssued"

diff --git a/web-client/src/views/StepIndicator.tsx b/web-client/src/views/StepIndicator.tsx
@@ -108,8 +108,14 @@ export const StepIndicator = connect(
 
 StepIndicator.displayName = 'StepIndicator';
 
-function AccessibilitySpan(isCurrentStep, completed) {
-  if (isCurrentStep) return;
+function AccessibilitySpan({
+  completed,
+  isCurrentStep,
+}: {
+  isCurrentStep: boolean;
+  completed: boolean;
+}) {
+  if (isCurrentStep) return null;
   return (
     <span className="usa-sr-only">
       {completed ? 'completed' : 'not completed'}

diff --git a/web-client/src/views/SuccessNotification.tsx b/web-client/src/views/SuccessNotification.tsx
@@ -59,8 +59,8 @@ export const SuccessNotification = connect<
             className={classNames(
               'usa-alert',
               'usa-alert--success',
-              `${className}`,
-              isMessageOnly && 'usa-alert-success-message-only',
+              className,
+              isMessageOnly ? 'usa-alert-success-message-only' : null,
             )}
             data-metadata={`${alertSuccess.metaData}`}
             data-testid="success-alert"

diff --git a/web-client/src/views/WarningNotification.tsx b/web-client/src/views/WarningNotification.tsx
@@ -47,7 +47,7 @@ export const WarningNotificationComponent =
             className={classNames(
               'usa-alert',
               'usa-alert--warning',
-              isMessageOnly && 'usa-alert-warning-message-only',
+              isMessageOnly ? 'usa-alert-warning-message-only' : null,
             )}
             data-testid="warning-alert"
             ref={notificationRef}