search card gird and adding more mocks

NYPL · Jan 29, 2025 · a770219 · a770219
1 parent 384f420
commit a770219
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 35 deletions.
diff --git a/__tests__/__mocks__/data/mockSearchCards.tsx b/__tests__/__mocks__/data/mockSearchCards.tsx
@@ -10,9 +10,9 @@ export const mockSearchCards: SearchCardType[] = [
       "https://iiif.nypl.org/iiif/2/58270299/square/!288,288/0/default.jpg",
     numberOfDigitizedItems: 34,
     containsOnSiteMaterial: true,
-    recordType: "collection",
+    recordType: "Collection",
     containsAVMaterial: false,
-    contentType: "image",
+    contentType: "PDF",
     highlights: ["Christopher Walken in the stage production Kid Champion"],
     firstIndexed: "1907-01-01T00:00:00Z",
   },
@@ -25,10 +25,10 @@ export const mockSearchCards: SearchCardType[] = [
       "https://iiif.nypl.org/iiif/2/58886955/square/!288,288/0/default.jpg",
     numberOfDigitizedItems: 1,
     containsOnSiteMaterial: false,
-    recordType: "item",
+    recordType: "Item",
     containsAVMaterial: false,
     containsMultipleCaptures: false,
-    contentType: "image",
+    contentType: "Image",
     highlights: ["Sarah sitting in tree"],
     firstIndexed: "1907-02-01T00:00:00Z",
   },
@@ -41,9 +41,9 @@ export const mockSearchCards: SearchCardType[] = [
       "https://iiif.nypl.org/iiif/2/1952272/square/!288,288/0/default.jpg",
     numberOfDigitizedItems: 36,
     containsOnSiteMaterial: false,
-    recordType: "collection",
+    recordType: "Collection",
     containsAVMaterial: true,
-    contentType: "image",
+    contentType: "Image",
     highlights: [],
     firstIndexed: "1907-02-01T00:00:00Z",
   },
@@ -55,12 +55,12 @@ export const mockSearchCards: SearchCardType[] = [
     url: "https://digitalcollections.nypl.org/items/12563fb0-63a2-013b-bd44-0242ac110003",
     imageURL:
       "https://iiif.nypl.org/iiif/2/58613608/square/!288,288/0/default.jpg",
-    recordType: "item",
+    recordType: "Item",
     numberOfDigitizedItems: 1,
     containsOnSiteMaterial: true,
     containsAVMaterial: false,
     containsMultipleCaptures: true,
-    contentType: "image",
+    contentType: "Image",
     highlights: [],
     firstIndexed: "",
   },

diff --git a/__tests__/__mocks__/data/mockSearchResponse.tsx b/__tests__/__mocks__/data/mockSearchResponse.tsx
@@ -0,0 +1,47 @@
+export const mockSearchResponse = {
+  keyword: "example",
+  numResults: 4,
+  page: 1,
+  perPage: 48,
+  results: [
+    {
+      uuid: "string",
+      recordType: "collection | sub-collection | item",
+      title: "string",
+      imageID: "string | null",
+      numberOfDigitizedItems: "number",
+      containsOnSiteMaterial: "boolean",
+      containsAVMaterial: "boolean", // keeping bc the logic exists and it's already there
+      containsMultipleCaptures: "boolean", // used to determine whether or not an item should display the "multiple images" tag,
+      contentType: "image | audio | video | pdf | null", // null
+      highlights: { highlighted_field_name: ["string"] },
+      firstIndexed_dt: "date",
+    },
+    {
+      uuid: "string",
+      recordType: "collection | sub-collection | item",
+      title: "string",
+      imageID: "string | null",
+      numberOfDigitizedItems: "number",
+      containsOnSiteMaterial: "boolean",
+      containsAVMaterial: "boolean", // keeping bc the logic exists and it's already there
+      containsMultipleCaptures: "boolean", // used to determine whether or not an item should display the "multiple images" tag
+      contentType: "image | audio | video | pdf | null", // null
+      highlights: { highlighted_field_name: ["string"] },
+      firstIndexed_dt: "date",
+    },
+    {
+      uuid: "string",
+      recordType: "collection | sub-collection | item",
+      title: "string",
+      imageID: "string | null",
+      numberOfDigitizedItems: "number",
+      containsOnSiteMaterial: "boolean",
+      containsAVMaterial: "boolean", // keeping bc the logic exists and it's already there
+      containsMultipleCaptures: "boolean", // used to determine whether or not an item should display the "multiple images" tag
+      contentType: "image | audio | video | pdf | null", // null
+      highlights: { highlighted_field_name: ["string"] },
+      firstIndexed_dt: "date",
+    },
+  ],
+};
diff --git a/app/src/components/card/searchCard.tsx b/app/src/components/card/searchCard.tsx
@@ -5,20 +5,10 @@ import {
   CardHeading,
   Text,
   CardContent,
-  Tooltip,
   StatusBadge,
-  Button,
-  CardActions,
-  Link,
   TagSet,
+  Flex,
 } from "@nypl/design-system-react-components";
-import { headerBreakpoints } from "../../utils/breakpoints";
-import { TRUNCATED_LENGTH } from "@/src/config/constants";
-import ItemCardDataType from "@/src/types/ItemCardDataType";
-import { CollectionCardDataType } from "../../types/CollectionCardDataType";
-import { Offset } from "@/src/hooks/useTooltipOffset";
-import { stringToSlug } from "@/src/utils/utils";
-import CardImage from "./cardImage";
 import SearchCardType, {
   SearchResultContentType,
   SearchResultRecordType,
@@ -31,21 +21,22 @@ export interface SearchCardProps {
 const onSiteMaterialBadge = (recordType: SearchResultRecordType) => {
   return (
     <StatusBadge sx={{ marginBottom: "0px" }} type="informative">
-      {recordType === "item"
+      {recordType === "Item"
         ? "Available onsite only"
         : "Contains on-site materials"}
     </StatusBadge>
   );
 };
 
-const contentTypeTag = (contentType: SearchResultContentType) => {
-  return (
-    <TagSet
-      onClick={() => {}}
-      tagSetData={[{ id: "content-type", label: contentType }]}
-      type="filter"
-    />
-  );
+const contentTypeTag = (
+  recordType: SearchResultRecordType,
+  contentType: SearchResultContentType
+) => {
+  const displayData =
+    recordType === "Item"
+      ? [{ id: "content-type", label: contentType }]
+      : [{ id: "record-type", label: recordType }];
+  return <TagSet onClick={() => {}} tagSetData={displayData} type="filter" />;
 };
 
 export const SearchCard = ({ result }: SearchCardProps) => {
@@ -70,9 +61,15 @@ export const SearchCard = ({ result }: SearchCardProps) => {
         {result.title}
       </CardHeading>
       <CardContent>
-        {result.containsOnSiteMaterial &&
-          onSiteMaterialBadge(result.recordType)}
-        {result.contentType && contentTypeTag(result.contentType)}
+        <Flex flexDir="column" gap="xs">
+          {result.containsOnSiteMaterial &&
+            onSiteMaterialBadge(result.recordType)}
+          {result.highlights?.length > 0 && (
+            <Text margin="0">{result.highlights}</Text>
+          )}
+          {result.contentType &&
+            contentTypeTag(result.recordType, result.contentType)}
+        </Flex>
       </CardContent>
     </Card>
   );

diff --git a/app/src/components/grids/searchCardsGrid.tsx b/app/src/components/grids/searchCardsGrid.tsx
@@ -0,0 +1,16 @@
+import { SearchCardModel } from "@/src/models/searchCard";
+import SearchCard from "../card/searchCard";
+import { SimpleGrid } from "@nypl/design-system-react-components";
+
+const SearchCardsGrid = ({ results }) => {
+  return (
+    <SimpleGrid columns={1} gap="grid.m">
+      {results?.map((result, index) => {
+        const searchResult = new SearchCardModel(result);
+        return <SearchCard key={index} result={searchResult} />;
+      })}
+    </SimpleGrid>
+  );
+};
+
+export default SearchCardsGrid;
diff --git a/app/src/components/pages/searchPage/searchPage.tsx b/app/src/components/pages/searchPage/searchPage.tsx
@@ -17,6 +17,7 @@ import { displayResults } from "@/src/utils/utils";
 import Filters from "../../search/filters";
 import { mockSearchCards } from "__tests__/__mocks__/data/mockSearchCards";
 import SearchCard from "../../card/searchCard";
+import SearchCardsGrid from "../../grids/searchCardsGrid";
 
 const SearchPage = ({ data }) => {
   const totalPages = 10;
@@ -79,6 +80,7 @@ const SearchPage = ({ data }) => {
         {mockSearchCards.map((result) => {
           return <SearchCard key={result.imageID} result={result} />;
         })}
+        <SearchCardsGrid results={mockSearchCards} />
         <Flex marginTop="xxl" marginBottom="xxl" alignContent="center">
           <Link
             minWidth="100px"

diff --git a/app/src/models/searchCard.ts b/app/src/models/searchCard.ts
@@ -1,3 +1,7 @@
+import {
+  SearchResultContentType,
+  SearchResultRecordType,
+} from "../types/SearchCardType";
 import { imageURL, getHighlightText } from "../utils/utils";
 
 export class SearchCardModel {
@@ -6,12 +10,12 @@ export class SearchCardModel {
   url: string;
   imageID: string;
   imageURL: string;
-  recordType: "collection" | "sub-collection" | "item";
+  recordType: SearchResultRecordType;
   numberOfDigitizedItems: number;
   containsOnSiteMaterial: boolean;
   containsAVMaterial: boolean;
   containsMultipleCaptures?: boolean;
-  contentType: "image" | "audio" | "video" | "pdf";
+  contentType: SearchResultContentType;
   highlights: string[];
   firstIndexed: string;
 

diff --git a/app/src/types/SearchCardType.ts b/app/src/types/SearchCardType.ts
@@ -1,5 +1,5 @@
-export type SearchResultRecordType = "collection" | "sub-collection" | "item";
-export type SearchResultContentType = "image" | "audio" | "video" | "pdf";
+export type SearchResultRecordType = "Collection" | "Sub-collection" | "Item";
+export type SearchResultContentType = "Image" | "Audio" | "Video" | "PDF";
 export interface SearchCardType {
   title: string;
   uuid: string;