Fix type issues (#4176)

ui/v2.5/src/App.tsx

@@ -135,10 +135,7 @@ export const App: React.FC = () => {
         }
       );
 
-      const newMessages = flattenMessages(mergedMessages) as Record<
+      const newMessages = flattenMessages(mergedMessages);
-        string,
-        string
-      >;
 
       yup.setLocale({
         mixed: {

ui/v2.5/src/components/List/ListFilter.tsx

@@ -107,7 +107,7 @@ export const ListFilter: React.FC<IListFilterProps> = ({
   // clear search input when filter is cleared
   useEffect(() => {
     if (!filter.searchTerm) {
-      queryRef.current.value = "";
+      if (queryRef.current) queryRef.current.value = "";
       setQueryClearShowing(false);
     }
   }, [filter.searchTerm, queryRef]);
@@ -139,7 +139,7 @@ export const ListFilter: React.FC<IListFilterProps> = ({
   }
 
   function onClearQuery() {
-    queryRef.current.value = "";
+    if (queryRef.current) queryRef.current.value = "";
     searchQueryUpdated("");
     setQueryFocus();
     setQueryClearShowing(false);

ui/v2.5/src/components/MainNavbar.tsx

@@ -181,8 +181,7 @@ export const MainNavbar: React.FC = () => {
   }, [configuration]);
 
   // react-bootstrap typing bug
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const navbarRef = useRef<HTMLElement | null>(null);
-  const navbarRef = useRef<any>();
   const intl = useIntl();
 
   const maybeCollapse = useCallback(

ui/v2.5/src/components/Shared/DetailItem.tsx

@@ -3,8 +3,7 @@ import { FormattedMessage } from "react-intl";
 
 interface IDetailItem {
   id?: string | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: React.ReactNode;
-  value?: any;
   title?: string;
   fullWidth?: boolean;
 }

ui/v2.5/src/components/Shared/ScrapeDialog/scrapeResult.ts

@@ -106,7 +106,6 @@ export class ObjectListScrapeResult<
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function hasScrapedValues(values: { scraped: boolean }[]): boolean {
-export function hasScrapedValues(values: ScrapeResult<any>[]) {
   return values.some((r) => r.scraped);
 }

ui/v2.5/src/components/Tagger/studios/StashSearchResult.tsx

@@ -7,6 +7,7 @@ import StudioModal from "../scenes/StudioModal";
 import { faTags } from "@fortawesome/free-solid-svg-icons";
 import { useStudioCreate } from "src/core/StashService";
 import { useIntl } from "react-intl";
+import { apolloError } from "src/utils";
 
 interface IStashSearchResultProps {
   studio: GQL.SlimStudioDataFragment;
@@ -75,9 +76,8 @@ const StashSearchResult: React.FC<IStashSearchResultProps> = ({
           });
           input.parent_id = parentRes.data?.studioCreate?.id;
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (e) {
-      } catch (e: any) {
+        handleSaveError(parentInput.name, apolloError(e));
-        handleSaveError(parentInput.name, e.message ?? "");
       }
     }
 

ui/v2.5/src/components/Tagger/studios/StudioTagger.tsx

@@ -25,6 +25,7 @@ import StudioConfig from "./Config";
 import { LOCAL_FORAGE_KEY, ITaggerConfig, initialConfig } from "../constants";
 import StudioModal from "../scenes/StudioModal";
 import { useUpdateStudio } from "../queries";
+import { apolloError } from "src/utils";
 import { faStar, faTags } from "@fortawesome/free-solid-svg-icons";
 
 type JobFragment = Pick<
@@ -431,9 +432,8 @@ const StudioTaggerList: React.FC<IStudioTaggerListProps> = ({
             });
             input.parent_id = parentRes.data?.studioCreate?.id;
           }
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (e) {
-        } catch (e: any) {
+          handleSaveError(studioID, parentInput.name, apolloError(e));
-          handleSaveError(studioID, parentInput.name, e.message ?? "");
         }
       }
 

ui/v2.5/src/core/StashService.ts

@@ -838,8 +838,7 @@ export const useImagesDestroy = (input: GQL.ImagesDestroyInput) =>
 
 function updateImageIncrementO(id: string) {
   return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cache: ApolloCache<Record<string, StoreObject>>,
-    cache: ApolloCache<any>,
     result: FetchResult<GQL.ImageIncrementOMutation>
   ) => {
     const updatedOCount = result.data?.imageIncrementO;
@@ -893,8 +892,7 @@ export const mutateImageIncrementO = (id: string) =>
 
 function updateImageDecrementO(id: string) {
   return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cache: ApolloCache<Record<string, StoreObject>>,
-    cache: ApolloCache<any>,
     result: FetchResult<GQL.ImageDecrementOMutation>
   ) => {
     const updatedOCount = result.data?.imageDecrementO;
@@ -949,8 +947,7 @@ export const mutateImageDecrementO = (id: string) =>
 
 function updateImageResetO(id: string) {
   return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cache: ApolloCache<Record<string, StoreObject>>,
-    cache: ApolloCache<any>,
     result: FetchResult<GQL.ImageResetOMutation>
   ) => {
     const updatedOCount = result.data?.imageResetO;

ui/v2.5/src/hooks/Lightbox/Lightbox.tsx

@@ -298,8 +298,7 @@ export const LightboxComponent: React.FC<IProps> = ({
     if (isVisible) {
       if (index === null) setIndex(initialIndex);
       document.body.style.overflow = "hidden";
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Mousetrap.pause();
-      (Mousetrap as any).pause();
     }
   }, [initialIndex, isVisible, setIndex, index]);
 
@@ -323,8 +322,7 @@ export const LightboxComponent: React.FC<IProps> = ({
 
     hide();
     document.body.style.overflow = "auto";
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Mousetrap.unpause();
-    (Mousetrap as any).unpause();
   }, [isFullscreen, hide]);
 
   const handleClose = (e: React.MouseEvent<HTMLDivElement>) => {

ui/v2.5/src/hooks/PageVisibility.ts

@@ -1,50 +1,14 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 
 const usePageVisibility = (
   visibilityChangeCallback: (hidden: boolean) => void
 ): void => {
-  const savedVisibilityChangedCallback = useRef<(hidden: boolean) => void>();
-
   useEffect(() => {
-    // resolve event names for different browsers
+    const callback = () => visibilityChangeCallback(document.hidden);
-    let hidden = "";
+    document.addEventListener("visibilitychange", callback);
-    let visibilityChange = "";
-
-    if (typeof document.hidden !== "undefined") {
-      hidden = "hidden";
-      visibilityChange = "visibilitychange";
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } else if (typeof (document as any).msHidden !== "undefined") {
-      hidden = "msHidden";
-      visibilityChange = "msvisibilitychange";
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } else if (typeof (document as any).webkitHidden !== "undefined") {
-      hidden = "webkitHidden";
-      visibilityChange = "webkitvisibilitychange";
-    }
-
-    if (
-      typeof document.addEventListener === "undefined" ||
-      hidden === undefined
-    ) {
-      // this browser doesn't have support for modern event listeners or the Page Visibility API
-      return;
-    }
-
-    savedVisibilityChangedCallback.current = visibilityChangeCallback;
-
-    function fireCallback() {
-      const callback = savedVisibilityChangedCallback.current;
-      if (callback) {
-        const isHidden = document.visibilityState !== "visible";
-        callback(isHidden);
-      }
-    }
-
-    document.addEventListener(visibilityChange, fireCallback);
 
     return () => {
-      document.removeEventListener(visibilityChange, fireCallback);
+      document.removeEventListener("visibilitychange", callback);
     };
   }, [visibilityChangeCallback]);
 };

ui/v2.5/src/hooks/Toast.tsx

@@ -50,12 +50,12 @@ function createHookObject(toastFunc: (toast: IToast) => void) {
   return {
     success: toastFunc,
     error: (error: unknown) => {
-      /* eslint-disable @typescript-eslint/no-explicit-any, no-console */
+      /* eslint-disable no-console */
       let message: string;
       if (error instanceof Error) {
         message = error.message ?? error.toString();
-      } else if ((error as any).toString) {
+      } else if (error instanceof String) {
-        message = (error as any).toString();
+        message = error.toString();
       } else {
         console.error(error);
         toastFunc({
@@ -72,7 +72,7 @@ function createHookObject(toastFunc: (toast: IToast) => void) {
         header: "Error",
         content: message,
       });
-      /* eslint-enable @typescript-eslint/no-explicit-any, no-console */
+      /* eslint-enable no-console */
     },
   };
 }

ui/v2.5/src/utils/bulkUpdate.ts

@@ -175,9 +175,9 @@ export function getAggregateInputIDs(
   return undefined;
 }
 
-export function getAggregateState<T>(
+export function getAggregateState<T, U>(
   currentValue: T,
-  newValue: T,
+  newValue: U,
   first: boolean
 ) {
   if (!first && !isEqual(currentValue, newValue)) {
@@ -207,8 +207,7 @@ export function getAggregateStateObject<O, I>(
     const inputKey = key as keyof I;
 
     const currentValue = getProperty(output, outputKey);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const performerValue = getProperty(input, inputKey);
-    const performerValue = getProperty(input, inputKey) as any;
 
     setProperty(
       output,

ui/v2.5/src/utils/errors.ts

@@ -0,0 +1,4 @@
+import { ApolloError } from "@apollo/client";
+
+export const apolloError = (error: unknown) =>
+  error instanceof ApolloError ? error.message : "";

ui/v2.5/src/utils/flattenMessages.ts

@@ -1,5 +1,5 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type NestedMessage = { [key: string]: NestedMessage | string };
-const flattenMessages = (nestedMessages: any, prefix = "") => {
+const flattenMessages = (nestedMessages: NestedMessage | null, prefix = "") => {
   if (nestedMessages === null) {
     return {};
   }
@@ -14,7 +14,7 @@ const flattenMessages = (nestedMessages: any, prefix = "") => {
     }
 
     return messages;
-  }, {});
+  }, {} as Record<string, string>);
 };
 
 export default flattenMessages;

ui/v2.5/src/utils/focus.ts

@@ -1,8 +1,7 @@
 import { useRef, useEffect } from "react";
 
 const useFocus = () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const htmlElRef = useRef<HTMLInputElement | null>(null);
-  const htmlElRef = useRef<any>();
   const setFocus = () => {
     const currentEl = htmlElRef.current;
     if (currentEl) {

ui/v2.5/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./errors";

ui/v2.5/src/utils/lazyComponent.ts

@@ -1,4 +1,4 @@
-import { ComponentType, lazy } from "react";
+import { lazy } from "react";
 
 interface ILazyComponentError {
   __lazyComponentError?: true;
@@ -8,11 +8,10 @@ export const isLazyComponentError = (e: unknown) => {
   return !!(e as ILazyComponentError).__lazyComponentError;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const lazyComponent = <Props extends object>(
-export const lazyComponent = <T extends ComponentType<any>>(
+  factory: () => Promise<{ default: React.FC<Props> }>
-  factory: Parameters<typeof lazy<T>>[0]
 ) => {
-  return lazy<T>(async () => {
+  return lazy(async () => {
     try {
       return await factory();
     } catch (e) {