diff --git a/package.json b/package.json index a8386f07..30fe17ad 100644 --- a/package.json +++ b/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" diff --git a/src/components/Slider/Figure/Figure.test.tsx b/src/components/Slider/Figure/Figure.test.tsx index 2af27ab5..b7335e6c 100644 --- a/src/components/Slider/Figure/Figure.test.tsx +++ b/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(
); 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(
); - expect(screen.getByTestId("status-icon")).toBeInTheDocument(); }); test("renders the thumbnail component", async () => { diff --git a/src/components/Slider/Figure/Figure.tsx b/src/components/Slider/Figure/Figure.tsx index 313ad162..066cc1a9 100644 --- a/src/components/Slider/Figure/Figure.tsx +++ b/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; index: number; @@ -25,7 +23,6 @@ interface FigureProps { const Figure: React.FC = ({ isFocused, label, - status, summary, thumbnail, }) => { @@ -36,7 +33,6 @@ const Figure: React.FC = ({ - {status !== 200 && } { - test("renders the status icon and shows a restricted icon for 403 code", () => { - render(); - expect(screen.getByTestId("status-icon")).toBeInTheDocument(); - expect(screen.getByTitle(/restricted item/i)).toBeInTheDocument(); - }); - - test("renders unknown icon for non-403 status", () => { - render(); - expect(screen.queryByTitle(/unknown item/i)).toBeNull(); - expect(screen.queryByTitle(/unknown status/i)).toBeInTheDocument(); - }); -}); diff --git a/src/components/Slider/Figure/StatusIcon.tsx b/src/components/Slider/Figure/StatusIcon.tsx deleted file mode 100644 index f9b4336a..00000000 --- a/src/components/Slider/Figure/StatusIcon.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useEffect, useState } from "react"; - -import { styled } from "src/styles/stitches.config"; - -interface StatusProps { - status: number; -} - -const IconLock = ( - - Restricted Item - - -); - -const IconUnknown = ( - - Unknown Status - - - -); - -const StatusIcon: React.FC = ({ status }) => { - const [icon, setIcon] = useState(<>); - - useEffect(() => { - switch (status) { - case 403: - setIcon(IconLock); - break; - default: - setIcon(IconUnknown); - break; - } - }, [status]); - - return {icon}; -}; - -const StyledStatusIcon = styled("div", { - width: "2rem", - height: "2rem", - backgroundColor: "#fff", - borderRadius: "50%", - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - position: "absolute", - zIndex: "1", - bottom: "1rem", - right: "1rem", - margin: "-1rem 0 0 -1rem", - boxShadow: "5px 5px 13px #0003", - - svg: { - height: "1rem", - width: "1rem", - color: "$accent", - fill: "$accent", - }, -}); - -export default StatusIcon; diff --git a/src/components/Slider/Items/Item.test.tsx b/src/components/Slider/Items/Item.test.tsx index 2bf69c72..e35cc78a 100644 --- a/src/components/Slider/Items/Item.test.tsx +++ b/src/components/Slider/Items/Item.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import Item from "./Item"; import React from "react"; @@ -6,13 +6,6 @@ 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(); 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(); - 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(); - await waitFor(() => { - expect(screen.queryByTestId("slider-item-placeholder")).toBeNull(); - }); - }); }); diff --git a/src/components/Slider/Items/Item.tsx b/src/components/Slider/Items/Item.tsx index df8f081d..b0695d2f 100644 --- a/src/components/Slider/Items/Item.tsx +++ b/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 = ({ handleItemInteraction, index, item }) => { - const store = useCollectionState(); - const { options } = store; - const { credentials } = options; - - const [href, setHref] = useState(); const [isFocused, setIsFocused] = useState(false); - const [placeholder, setPlaceholder] = useState(); - const [status, setStatus] = useState(200); - const [thumbnail, setThumbnail] = useState([]); - 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,7 +51,7 @@ const Item: React.FC = ({ handleItemInteraction, index, item }) => { onMouseEnter={onFocus} onMouseLeave={onBlur} > - {placeholder && } +
= ({ handleItemInteraction, index, item }) => { key={item.id} label={item.label} summary={item.summary} - status={status} thumbnail={thumbnail} /> diff --git a/src/lib/get-response-status.ts b/src/lib/get-response-status.ts index 32807453..002f48ac 100644 --- a/src/lib/get-response-status.ts +++ b/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/*", },