Add logic to hide specific artworks from search results [WEB-2804]

index.html

@@ -37,6 +37,7 @@
           null,
           React.createElement(MyMuseumTourBuilder, {
             apiSaveEndpoint: "http://www-dev.artic.edu/api/v1/my-museum-tour",
+            hideFromTours: []
           }),
         ),
         document.querySelector("#root"),

src/MyMuseumTourBuilder.jsx

@@ -18,6 +18,7 @@ const MyMuseumTourBuilder = (props) => {
   // Mainly used for testing, but could be used for hydrating the app
   const {
     apiSaveEndpoint,
+    hideFromTours,
     tourTitle,
     tourDescription,
     tourItems,
@@ -35,6 +36,10 @@ const MyMuseumTourBuilder = (props) => {
     iiifBaseUrl,
   };
 
+  const SearchProps = {
+    hideFromTours,
+  };
+
   return (
     <div id="my-museum-tour-builder" className="my-museum-tour">
       <AppProvider {...AppProviderProps}>
@@ -55,8 +60,8 @@ const MyMuseumTourBuilder = (props) => {
             </div>
             <SearchProvider>
               <div className="aic-ct__core">
-                <SearchBar />
-                <Themes />
+                <SearchBar {...SearchProps} />
+                <Themes {...SearchProps} />
                 <SearchResults />
               </div>
             </SearchProvider>
@@ -127,6 +132,7 @@ const MyMuseumTourBuilder = (props) => {
 
 MyMuseumTourBuilder.propTypes = {
   apiSaveEndpoint: PropTypes.string,
+  hideFromTours: PropTypes.array,
   tourTitle: PropTypes.string,
   tourDescription: PropTypes.string,
   tourItems: PropTypes.array,

src/components/search/SearchBar.cy.jsx

@@ -41,4 +41,28 @@ describe("<SearchBar />", () => {
     cy.get("#aic-ct-search__button").click();
     cy.get("@search").its("request.url").should("include", "q=test");
   });
+
+  it("Hides artwork from search", () => {
+    cy.intercept("GET", "https://api.artic.edu/api/v1/artworks/search*", {
+      fixture: "json/search.json",
+      delayMs: 80,
+    }).as("search");
+
+    cy.mount(
+      <AppProvider>
+        <SearchProvider>
+          <SearchBar hideFromTours={["111111"]} />
+        </SearchProvider>
+      </AppProvider>,
+    );
+    cy.get("#aic-ct-search__input").type("test");
+    cy.get("#aic-ct-search__button").click();
+    cy.get("@search").its("request.url").should("include", "q=test");
+    cy.get("@search")
+      .its("request.url")
+      .should(
+        "include",
+        "&query%5Bbool%5D%5Bmust_not%5D%5B%5D%5Bterm%5D%5Bid%5D%5Bvalue%5D%3D111111",
+      );
+  });
 });

src/components/search/SearchBar.jsx

@@ -3,11 +3,12 @@
 import useFetch from "../../hooks/useFetch";
 import { createSearchUrl } from "../../utils";
 import classNames from "classnames";
+import PropTypes from "prop-types";
 
 /**
  * SearchBar
  */
-function SearchBar() {
+function SearchBar(props) {
   const {
     searchQuery,
     setSearchQuery,
@@ -26,8 +27,10 @@
     errorSetter: setSearchError,
   });
 
+  const { hideFromTours } = props;
+
   const handleSubmit = (event) => {
-    fetchData(createSearchUrl({ keywords: searchQuery }));
+    fetchData(createSearchUrl({ keywords: searchQuery }, hideFromTours));
     // Deselect any active theme
     setActiveTheme(null);
     event.preventDefault();
@@ -45,9 +48,9 @@
   useEffect(() => {
     if (initialRender) {
       setInitialRender(false);
-      fetchData(createSearchUrl({ keywords: "" }));
+      fetchData(createSearchUrl({ keywords: "" }, hideFromTours));
     }
   }, [fetchData, initialRender, setInitialRender]);
 
   return (
     <form
@@ -94,7 +97,7 @@
             setSearchResultItems(null);
             setActiveTheme(null);
             // Apply results for empty keyword search
-            fetchData(createSearchUrl({ keywords: "" }));
+            fetchData(createSearchUrl({ keywords: "" }, hideFromTours));
             searchButtonRef.current.focus();
           }}
         >
@@ -107,4 +110,8 @@
   );
 }
 
+SearchBar.propTypes = {
+  hideFromTours: PropTypes.array,
+};
+
 export default SearchBar;

src/components/search/ThemeToggle.jsx

@@ -10,7 +10,7 @@ import PropTypes from "prop-types";
  * ThemeToggle
  */
 function ThemeToggle(props) {
-  const { id, label, thumbnailId, searchParams } = props;
+  const { id, label, thumbnailId, searchParams, hideFromTours } = props;
   const { iiifBaseUrl } = useContext(AppContext);
   const {
     setSearchResultItems,
@@ -32,9 +32,9 @@ function ThemeToggle(props) {
       // Deselect the theme
       setActiveTheme(null);
       // Apply results for empty keyword search
-      fetchData(createSearchUrl({ keywords: "" }));
+      fetchData(createSearchUrl({ keywords: "" }, hideFromTours));
     } else {
-      fetchData(createSearchUrl(searchParams));
+      fetchData(createSearchUrl(searchParams, hideFromTours));
       // Clicking while active removes the theme
       setActiveTheme(label);
       // Empty the search field
@@ -85,6 +85,7 @@ ThemeToggle.propTypes = {
   label: PropTypes.string.isRequired,
   thumbnailId: PropTypes.string.isRequired,
   searchParams: PropTypes.object.isRequired,
+  hideFromTours: PropTypes.array,
 };
 
 export default ThemeToggle;

src/components/search/Themes.jsx

@@ -1,10 +1,13 @@
 import React from "react";
 import ThemeToggle from "./ThemeToggle";
+import PropTypes from "prop-types";
 
 /**
  * Themes
  */
-function Themes() {
+function Themes(props) {
+  const { hideFromTours } = props;
+
   // TODO: There's interest in having this in some way configurable
   // Best way to achieve this is TBD
   const themes = [
@@ -82,10 +85,15 @@ function Themes() {
           label={theme.label}
           thumbnailId={theme.thumbnailId}
           searchParams={theme.searchParams}
+          hideFromTours={hideFromTours}
         />
       ))}
     </ul>
   );
 }
 
+Themes.propTypes = {
+  hideFromTours: PropTypes.array,
+};
+
 export default Themes;

src/components/search/ThemesToggle.cy.jsx

@@ -66,4 +66,31 @@ describe("<Themes />", () => {
         "&query%5Bbool%5D%5Bmust%5D%5B%5D%5Bterms%5D%5Bcategory_ids%5D%5B%5D=PC-154",
       );
   });
+
+  it("Requests the correct URL with hiding artworks", () => {
+    cy.intercept("GET", "https://api.artic.edu/api/v1/artworks/search*", {
+      fixture: "json/search.json",
+      delayMs: 80,
+    }).as("search");
+
+    cy.mount(
+      <AppProvider>
+        <SearchProvider>
+          <ThemeToggle
+            id="0"
+            label="Test theme"
+            searchParams={{ category_ids: ["PC-154"] }}
+            hideFromTours={["111111"]}
+          />
+        </SearchProvider>
+      </AppProvider>,
+    );
+    cy.get("#aic-ct-theme-toggle-0").click();
+    cy.get("@search")
+      .its("request.url")
+      .should(
+        "include",
+        "&query%5Bbool%5D%5Bmust_not%5D%5B%5D%5Bterm%5D%5Bid%5D%5Bvalue%5D%3D111111",
+      );
+  });
 });

src/utils.js

@@ -45,7 +45,7 @@ export function camelToSnakeCase(str) {
  * @param {QueryParams} queryParams - QueryParams object with keywords and/or themes
  * @returns {URL} - URL object for API query
  */
-export function createSearchUrl(queryParams) {
+export function createSearchUrl(queryParams, hideFromTours) {
   // Build the query string
   // I've broken this up to make it easer to reason about and manipulate
   const url = new URL("https://api.artic.edu/api/v1/artworks/search");
@@ -91,6 +91,15 @@ export function createSearchUrl(queryParams) {
     url.searchParams.set("q", queryParams.keywords);
   }
 
+  if (hideFromTours) {
+    for (const val of Object.values(hideFromTours)) {
+      url.searchParams.set(
+        `query[bool][must_not][][term][id][value]=${val}`,
+        val,
+      );
+    }
+  }
+
   // Uniform treatment for subject, category, and style ids
   // This works for now, but we may need to tune this later
   for (const [key, value] of Object.entries(queryParams)) {