Merge pull request #151 from samvera-labs/hotfix-head-requests

Remove faulty GET (should have been HEAD) requests on content resources.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samvera/clover-iiif",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "Extensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source.",
   "files": [
     "dist"

src/components/Slider/Figure/Figure.test.tsx

@@ -12,7 +12,6 @@ const figure = {
   summary: {
     none: ["Mollit ullamco quis exercitation voluptate."],
   },
-  status: 200,
   thumbnail: [
     {
       id: "https://api.dc.library.northwestern.edu/api/v2/works/fea55bcc-ec7e-4f22-9c70-9d7c1b37ae93/thumbnail",
@@ -25,21 +24,12 @@ const figure = {
 };
 
 describe("Figure component", () => {
-  test("renders title and summary with no icon for a regular public resource", () => {
+  test("renders title and summary ", () => {
     render(<Figure {...figure} />);
     expect(screen.getByRole("figure")).toHaveTextContent(figure.label.none[0]);
     expect(screen.getByRole("figure")).toHaveTextContent(
       figure.summary.none[0],
     );
-
-    // No status icon expected for regular 200 response
-    expect(screen.queryByTestId("status-icon")).toBeNull();
-  });
-
-  test("renders a status icon to indicate a non-200 response", () => {
-    const non200Figure = { ...figure, status: 404 };
-    render(<Figure {...non200Figure} />);
-    expect(screen.getByTestId("status-icon")).toBeInTheDocument();
   });
 
   test("renders the thumbnail component", async () => {

src/components/Slider/Figure/Figure.tsx

@@ -10,12 +10,10 @@ import {
 import React, { useRef } from "react";
 
 import { InternationalString } from "@iiif/presentation-3";
-import StatusIcon from "./StatusIcon";
 import { Thumbnail } from "src/components/Primitives";
 
 interface FigureProps {
   label: InternationalString;
-  status: number;
   summary?: InternationalString;
   thumbnail: Array<any>;
   index: number;
@@ -25,7 +23,6 @@ interface FigureProps {
 const Figure: React.FC<FigureProps> = ({
   isFocused,
   label,
-  status,
   summary,
   thumbnail,
 }) => {
@@ -36,7 +33,6 @@ const Figure: React.FC<FigureProps> = ({
       <AspectRatio.Root ratio={1 / 1}>
         <Width ref={widthRef} />
         <Placeholder>
-          {status !== 200 && <StatusIcon status={status} />}
           <Thumbnail
             altAsLabel={label}
             thumbnail={thumbnail}

src/components/Slider/Items/Item.test.tsx

@@ -1,18 +1,11 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 
 import Item from "./Item";
 import React from "react";
 import { sliderItem } from "src/fixtures/slider/slider-item";
 
 describe("SliderItem", () => {
   test("renders a figure element wrapped by an anchor tag", async () => {
-    // mock getResponseStatus() to return 200
-    vi.mock("src/lib/get-response-status", () => {
-      return {
-        getResponseStatus: vi.fn().mockResolvedValue(200),
-      };
-    });
-
     render(<Item index={0} item={sliderItem} />);
     const el = await screen.findByTestId("slider-item");
 
@@ -38,20 +31,4 @@ describe("SliderItem", () => {
     el.click();
     expect(mockHandleItemInteraction).toHaveBeenCalledWith(sliderItem);
   });
-
-  test("renders the placeholder component", async () => {
-    render(<Item index={0} item={sliderItem} />);
-    const el = await screen.findByTestId("slider-item-placeholder");
-    expect(el).toBeInTheDocument();
-  });
-
-  test("does not render the placeholder component if no thumbnail exists (is this even possible?)", async () => {
-    const noThumbItem = { ...sliderItem };
-    delete noThumbItem.thumbnail;
-
-    render(<Item index={0} item={noThumbItem} />);
-    await waitFor(() => {
-      expect(screen.queryByTestId("slider-item-placeholder")).toBeNull();
-    });
-  });
 });

src/components/Slider/Items/Item.tsx

@@ -1,12 +1,10 @@
 import { Anchor, ItemStyled } from "./Item.styled";
-import React, { MouseEvent, useEffect, useState } from "react";
+import React, { MouseEvent, useState } from "react";
 
 import Figure from "src/components/Slider/Figure/Figure";
 import { IIIFExternalWebResource } from "@iiif/presentation-3";
 import Placeholder from "./Placeholder";
 import { SliderItem } from "src/types/slider";
-import { getResponseStatus } from "src/lib/get-response-status";
-import { useCollectionState } from "src/context/slider-context";
 
 interface ItemProps {
   handleItemInteraction?: (item: SliderItem) => void;
@@ -15,29 +13,16 @@ interface ItemProps {
 }
 
 const Item: React.FC<ItemProps> = ({ handleItemInteraction, index, item }) => {
-  const store = useCollectionState();
-  const { options } = store;
-  const { credentials } = options;
-
-  const [href, setHref] = useState<string>();
   const [isFocused, setIsFocused] = useState<boolean>(false);
-  const [placeholder, setPlaceholder] = useState<string>();
-  const [status, setStatus] = useState<number>(200);
-  const [thumbnail, setThumbnail] = useState<IIIFExternalWebResource[]>([]);
 
-  useEffect(() => {
-    if (item?.thumbnail && item?.thumbnail?.length > 0) {
-      getResponseStatus(item, credentials).then((status) => {
-        setStatus(status);
-      });
+  let thumbnail: IIIFExternalWebResource[] = [];
+  let href: string = "#";
+
+  if (item?.thumbnail && item?.thumbnail?.length > 0)
+    thumbnail = item.thumbnail as IIIFExternalWebResource[];
 
-      const { thumbnail } = item;
-      setPlaceholder(thumbnail[0].id);
-      setThumbnail(thumbnail as IIIFExternalWebResource[]);
-    }
-    if (item?.homepage && item.homepage?.length > 0)
-      setHref(item.homepage[0].id);
-  }, [credentials, item]);
+  if (item?.homepage && item.homepage?.length > 0)
+    href = item.homepage[0].id as string;
 
   const onFocus = () => setIsFocused(true);
   const onBlur = () => setIsFocused(false);
@@ -66,15 +51,14 @@ const Item: React.FC<ItemProps> = ({ handleItemInteraction, index, item }) => {
         onMouseEnter={onFocus}
         onMouseLeave={onBlur}
       >
-        {placeholder && <Placeholder backgroundImage={""} />}
+        <Placeholder backgroundImage="" />
         <Figure
           data-testid="slider-item-figure"
           index={index}
           isFocused={isFocused}
           key={item.id}
           label={item.label}
           summary={item.summary}
-          status={status}
           thumbnail={thumbnail}
         />
       </Anchor>

src/lib/get-response-status.ts

@@ -25,7 +25,7 @@ export async function getResponseStatus(
 
         if (id) {
           return fetch(id, {
-            method: "GET",
+            method: "HEAD",
             headers: {
               accept: "image/*",
             },