ESLint fixes round 2

src/components/Viewer/Viewer/Viewer.tsx

@@ -5,12 +5,16 @@ import {
   InternationalString,
   ManifestNormalized,
 } from "@iiif/presentation-3";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  ViewerContextStore,
+  useViewerDispatch,
+  useViewerState,
+} from "src/context/viewer-context";
 import {
   getPaintingResource,
   getSupplementingResources,
 } from "src/hooks/use-iiif";
-import { useViewerDispatch, useViewerState } from "src/context/viewer-context";
 
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorFallback from "src/components/Viewer/Viewer/ErrorFallback";
@@ -25,14 +29,14 @@ import { useMediaQuery } from "src/hooks/useMediaQuery";
 
 interface ViewerProps {
   manifest: ManifestNormalized;
-  theme?: any;
+  theme?: unknown;
 }
 
 const Viewer: React.FC<ViewerProps> = ({ manifest, theme }) => {
   /**
    * Viewer State
    */
-  const viewerState: any = useViewerState();
+  const viewerState: ViewerContextStore = useViewerState();
   const viewerDispatch: any = useViewerDispatch();
   const { activeCanvas, informationOpen, vault, configOptions } = viewerState;
 
@@ -50,25 +54,33 @@ const Viewer: React.FC<ViewerProps> = ({ manifest, theme }) => {
   const [isBodyLocked, setIsBodyLocked] = useBodyLocked(false);
   const isSmallViewport = useMediaQuery(media.sm);
 
-  const setInformationOpen = (open: boolean) => {
-    viewerDispatch({
-      type: "updateInformationOpen",
-      informationOpen: open,
-    });
-  };
+  const setInformationOpen = useCallback(
+    (open: boolean) => {
+      viewerDispatch({
+        type: "updateInformationOpen",
+        informationOpen: open,
+      });
+    },
+    [viewerDispatch],
+  );
 
   useEffect(() => {
-    if (configOptions?.informationPanel.open)
+    if (configOptions?.informationPanel?.open) {
       setInformationOpen(!isSmallViewport);
-  }, [isSmallViewport]);
+    }
+  }, [
+    isSmallViewport,
+    configOptions?.informationPanel?.open,
+    setInformationOpen,
+  ]);
 
   useEffect(() => {
     if (!isSmallViewport) {
       setIsBodyLocked(false);
       return;
     }
     setIsBodyLocked(informationOpen);
-  }, [informationOpen]);
+  }, [informationOpen, isSmallViewport, setIsBodyLocked]);
 
   useEffect(() => {
     const painting = getPaintingResource(vault, activeCanvas);
@@ -87,7 +99,7 @@ const Viewer: React.FC<ViewerProps> = ({ manifest, theme }) => {
     }
     setResources(resources);
     setIsInformationPanel(resources.length !== 0);
-  }, [activeCanvas]);
+  }, [activeCanvas, vault]);
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>

src/components/Viewer/index.tsx

@@ -101,14 +101,14 @@ const RenderViewer: React.FC<CloverViewerProps> = ({
     if (activeManifest)
       vault
         .loadManifest(activeManifest)
-        .then((data: any) => {
+        .then((data: ManifestNormalized) => {
           setManifest(data);
           dispatch({
             type: "updateActiveCanvas",
             canvasId: data.items[0] && data.items[0].id,
           });
         })
-        .catch((error: any) => {
+        .catch((error: Error) => {
           console.error(`Manifest failed to load: ${error}`);
         })
         .finally(() => {
@@ -127,10 +127,10 @@ const RenderViewer: React.FC<CloverViewerProps> = ({
 
     vault
       .load(iiifContent)
-      .then((data: any) => {
+      .then((data: CollectionNormalized | ManifestNormalized) => {
         setIiifResource(data);
       })
-      .catch((error: any) => {
+      .catch((error: Error) => {
         console.error(
           `The IIIF resource ${iiifContent} failed to load: ${error}`,
         );

src/components/internal/Icon/Icon.tsx

@@ -23,7 +23,7 @@ type IconShape = {
   children: React.ReactNode | React.ReactNode[];
 };
 interface IconComposition {
-  Add: React.FC<any>;
+  Add: React.FC;
   Audio: React.FC;
   Close: React.FC;
   Image: React.FC;

src/context/slider-context.test.tsx

@@ -36,11 +36,12 @@ describe("Slider Context", () => {
       const dispatch: any = useCollectionDispatch();
 
       React.useEffect(() => {
+        if (!dispatch) return;
         dispatch({
           type: "updateIsLoaded",
           isLoaded: false,
         });
-      }, []);
+      }, [dispatch]);
 
       return <div>{JSON.stringify(state)}</div>;
     }