Moved 'local' variables from ViewerContent to context store and retri…

src/components/Viewer/Viewer/Content.tsx

@@ -1,9 +1,3 @@
-import {
-  AnnotationPageNormalized,
-  Canvas,
-  IIIFExternalWebResource,
-} from "@iiif/presentation-3";
-import { AnnotationResource, AnnotationResources } from "src/types/annotations";
 import {
   Aside,
   Content,
@@ -15,40 +9,31 @@ import InformationPanel from "src/components/Viewer/InformationPanel/Information
 import Media from "src/components/Viewer/Media/Media";
 import Painting from "../Painting/Painting";
 import React from "react";
-import { useViewerState } from "src/context/viewer-context";
-
-export interface ViewerContentProps {
-  activeCanvas: string;
-  annotationResources: AnnotationResources;
-  searchServiceUrl?: string;
-  setContentSearchResource: React.Dispatch<
-    React.SetStateAction<AnnotationPageNormalized | undefined>
-  >;
-  contentSearchResource?: AnnotationResource;
-  painting: IIIFExternalWebResource[];
-  items: Canvas[];
-  isAudioVideo: boolean;
-}
-
-const ViewerContent: React.FC<ViewerContentProps> = ({
-  activeCanvas,
-  annotationResources,
-  searchServiceUrl,
+import {
   setContentSearchResource,
-  contentSearchResource,
-  isAudioVideo,
-  items,
-  painting,
-}) => {
+  useViewerState,
+} from "src/context/viewer-context";
+
+const ViewerContent: React.FC = () => {
   const {
     contentStateAnnotation,
     isInformationOpen,
     configOptions,
     sequence,
     visibleCanvases,
+    activeCanvas,
+    activeManifest,
+    annotationResources,
+    searchServiceUrl,
+    painting,
+    contentSearchResource,
+    vault,
+    isAudioVideo,
   } = useViewerState();
   const { informationPanel } = configOptions;
 
+  const { items } = vault.get(activeManifest);
+
   /**
    * The information panel should be rendered if toggled true and if
    * there is content (About or Annotations Resources) to display.
@@ -81,9 +66,8 @@ const ViewerContent: React.FC<ViewerContentProps> = ({
           annotationResources={annotationResources}
           contentSearchResource={contentSearchResource}
           isMedia={isAudioVideo}
-          painting={painting}
+          painting={painting!}
         />
-
         {sequence[1].length > 1 && (
           <MediaWrapper className="clover-viewer-media-wrapper">
             <Media items={items} activeItem={0} />

src/components/Viewer/Viewer/Viewer.tsx

@@ -1,14 +1,18 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 
-import { AnnotationResource, AnnotationResources } from "src/types/annotations";
 import {
   ExternalResourceTypes,
   InternationalString,
   ManifestNormalized,
 } from "@iiif/presentation-3";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import {
   ViewerContextStore,
+  setAnnotationResources,
+  setContentSearchResource,
+  setIsAudioVideo,
+  setPainting,
+  setSearchServiceUrl,
   useViewerDispatch,
   useViewerState,
 } from "src/context/viewer-context";
@@ -21,7 +25,6 @@ import {
 import { ContentSearchQuery } from "src/types/annotations";
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorFallback from "src/components/UI/ErrorFallback/ErrorFallback";
-import { IIIFExternalWebResource } from "@iiif/presentation-3";
 import ViewerContent from "src/components/Viewer/Viewer/Content";
 import ViewerHeader from "src/components/Viewer/Viewer/Header";
 import { Wrapper } from "src/components/Viewer/Viewer/Viewer.styled";
@@ -51,25 +54,15 @@ const Viewer: React.FC<ViewerProps> = ({
     vault,
     configOptions,
     visibleCanvases,
+    searchServiceUrl,
   } = viewerState;
 
   const absoluteCanvasHeights = ["100%", "auto"];
   const isAbsolutePosition =
     configOptions?.canvasHeight &&
     absoluteCanvasHeights.includes(configOptions?.canvasHeight);
 
-  /**
-   * Local state
-   */
-  const [isAudioVideo, setIsAudioVideo] = useState(false);
-  const [painting, setPainting] = useState<IIIFExternalWebResource[]>([]);
-  const [annotationResources, setAnnotationResources] =
-    useState<AnnotationResources>([]);
-  const [contentSearchResource, setContentSearchResource] =
-    useState<AnnotationResource>();
-
   const isSmallViewport = useMediaQuery(media.sm);
-  const [searchServiceUrl, setSearchServiceUrl] = useState();
 
   const setInformationOpen = useCallback(
     (open: boolean) => {
@@ -179,16 +172,7 @@ const Viewer: React.FC<ViewerProps> = ({
             manifestLabel={manifest.label as InternationalString}
             manifestId={manifest.id}
           />
-          <ViewerContent
-            activeCanvas={activeCanvas}
-            painting={painting}
-            annotationResources={annotationResources}
-            searchServiceUrl={searchServiceUrl}
-            setContentSearchResource={setContentSearchResource}
-            contentSearchResource={contentSearchResource}
-            items={manifest.items}
-            isAudioVideo={isAudioVideo}
-          />
+          <ViewerContent />
         </Collapsible.Root>
       </Wrapper>
     </ErrorBoundary>

src/context/viewer-context.tsx

@@ -1,6 +1,7 @@
 import {
   AnnotationNormalized,
   CollectionNormalized,
+  IIIFExternalWebResource,
   InternationalString,
   Reference,
 } from "@iiif/presentation-3";
@@ -11,6 +12,7 @@ import { IncomingHttpHeaders } from "http";
 import { Vault } from "@iiif/helpers/vault";
 import { deepMerge } from "src/lib/utils";
 import { v4 as uuidv4 } from "uuid";
+import { AnnotationResource, AnnotationResources } from "src/types/annotations";
 
 export type AutoScrollSettings = {
   behavior: string; // ScrollBehavior ("auto" | "instant" | "smooth")
@@ -24,6 +26,7 @@ export type AutoScrollOptions = {
 
 export type ViewerConfigOptions = {
   annotationOverlays?: OverlayOptions;
+  annotationResources: AnnotationResources;
   background?: string;
   canvasBackgroundColor?: string;
   canvasHeight?: string;
@@ -88,6 +91,7 @@ const defaultConfigOptions = {
     renderOverlays: true,
     zoomLevel: 2,
   },
+  annotationResources: [],
   background: "transparent",
   canvasBackgroundColor: "#6662",
   canvasHeight: "500px",
@@ -156,18 +160,23 @@ export interface ViewerContextStore {
   activeCanvas: string;
   activeManifest: string;
   activeSelector?: string;
+  annotationResources: AnnotationResources;
   OSDImageLoaded?: boolean;
   collection?: CollectionNormalized | Record<string, never>;
   contentStateAnnotation?: AnnotationNormalized;
+  contentSearchResource?: AnnotationResource;
   configOptions: ViewerConfigOptions;
   customDisplays: Array<CustomDisplay>;
+  painting?: Array<IIIFExternalWebResource>;
   plugins: Array<PluginConfig>;
   informationPanelResource?: string;
+  isAudioVideo: boolean;
   isAutoScrollEnabled?: boolean;
   isAutoScrolling?: boolean;
   isInformationOpen: boolean;
   isLoaded: boolean;
   isUserScrolling?: number | undefined;
+  searchServiceUrl?: string;
   sequence: [Reference<"Canvas">[], number[][]];
   vault: Vault;
   openSeadragonViewer: OpenSeadragon.Viewer | null;
@@ -199,6 +208,22 @@ export interface ViewerAction {
   visibleCanvases: Array<Reference<"Canvas">>;
 }
 
+export const setIsAudioVideo = (mediaType: boolean) =>
+  (defaultState.isAudioVideo = mediaType);
+
+export const setContentSearchResource = (
+  annotationResource: AnnotationResource,
+) => (defaultState.contentSearchResource = annotationResource);
+
+export const setSearchServiceUrl = (url: string) =>
+  (defaultState.searchServiceUrl = url);
+
+export const setAnnotationResources = (resources: AnnotationResources) =>
+  (defaultState.annotationResources = resources);
+
+export const setPainting = (painting: IIIFExternalWebResource[]) =>
+  (defaultState.painting = painting);
+
 export function expandAutoScrollOptions(
   value: AutoScrollOptions | AutoScrollSettings | boolean | undefined,
 ): AutoScrollOptions {
@@ -230,17 +255,20 @@ export const defaultState: ViewerContextStore = {
   activeCanvas: "",
   activeManifest: "",
   activeSelector: undefined,
+  annotationResources: [],
   OSDImageLoaded: false,
   collection: {},
   configOptions: defaultConfigOptions,
   customDisplays: [],
   plugins: [],
+  isAudioVideo: false,
   isAutoScrollEnabled: expandedAutoScrollOptions.enabled,
   isAutoScrolling: false,
   isInformationOpen: defaultConfigOptions?.informationPanel?.open,
   isLoaded: false,
   isUserScrolling: undefined,
   sequence: [[], []],
+  searchServiceUrl: undefined,
   vault: new Vault(),
   openSeadragonViewer: null,
   viewerId: uuidv4(),