From a4277f7c4d78886243fa60b883ed1080f21cb942 Mon Sep 17 00:00:00 2001 From: Edwin Guzman Date: Wed, 13 Dec 2023 11:16:24 -0500 Subject: [PATCH] Updates based on feedback for the Advanced Search page --- .../pages/search/advancedSearchForm.test.tsx | 27 +- package-lock.json | 150 ++++----- package.json | 2 +- pages/search/advanced.tsx | 306 ++++++++++-------- 4 files changed, 269 insertions(+), 216 deletions(-) diff --git a/__test__/pages/search/advancedSearchForm.test.tsx b/__test__/pages/search/advancedSearchForm.test.tsx index 8a7ba6b51..69ebfbd83 100644 --- a/__test__/pages/search/advancedSearchForm.test.tsx +++ b/__test__/pages/search/advancedSearchForm.test.tsx @@ -3,7 +3,10 @@ import { fireEvent, render, screen, act } from "@testing-library/react" import mockRouter from "next-router-mock" import userEvent from "@testing-library/user-event" -import AdvancedSearch from "../../../pages/search/advanced" +import AdvancedSearch, { + badDateErrorMessage, + defaultEmptySearchErrorMessage, +} from "../../../pages/search/advanced" // Mock next router jest.mock("next/router", () => jest.requireActual("next-router-mock")) @@ -24,9 +27,7 @@ describe("Advanced Search Form", () => { render() submit() - screen.getByText( - "Please enter at least one field to submit an advanced search." - ) + screen.getByText(defaultEmptySearchErrorMessage) }) // this test is broken due to debounce/userEvent/timing weirdness. // this functionality works in the browser, but won't include @@ -82,6 +83,18 @@ describe("Advanced Search Form", () => { ) }) }) + it("should throw an error when the date from is bigger than the date to", async () => { + render() + await act(async () => { + const dateFromInput = screen.getByLabelText("From") + const dateToInput = screen.getByLabelText("To") + await userEvent.type(dateFromInput, "1999") + await userEvent.type(dateToInput, "1900") + submit() + + expect(screen.getByText(badDateErrorMessage)).toBeInTheDocument() + }) + }) it("can clear the form", async () => { render() @@ -107,9 +120,9 @@ describe("Advanced Search Form", () => { expect(notatedMusic).not.toBeChecked() submit() // presence of alert means the form was cleared before hitting submit - screen.getByText( - "Please enter at least one field to submit an advanced search." - ) + expect( + screen.getByText(defaultEmptySearchErrorMessage) + ).toBeInTheDocument() }) }) }) diff --git a/package-lock.json b/package-lock.json index 3d7b550c7..f92209777 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "research-catalog", "version": "0.1.0", "dependencies": { - "@nypl/design-system-react-components": "^2.1.0", + "@nypl/design-system-react-components": "2.1.3", "@nypl/nypl-data-api-client": "1.0.5", "@types/node": "20.3.1", "@types/react": "18.2.13", @@ -164,20 +164,20 @@ } }, "node_modules/@babel/core": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.5.tgz", - "integrity": "sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.6.tgz", + "integrity": "sha512-FxpRyGjrMJXh7X3wGLGhNDCRiwpWEF74sKjTLDJSG5Kyvow3QZaG0Adbqzi9ZrVjTWpsX+2cxWXD71NMg93kdw==", "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.23.5", - "@babel/generator": "^7.23.5", - "@babel/helper-compilation-targets": "^7.22.15", + "@babel/generator": "^7.23.6", + "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.23.5", - "@babel/parser": "^7.23.5", + "@babel/helpers": "^7.23.6", + "@babel/parser": "^7.23.6", "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.5", - "@babel/types": "^7.23.5", + "@babel/traverse": "^7.23.6", + "@babel/types": "^7.23.6", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -206,11 +206,11 @@ } }, "node_modules/@babel/generator": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz", - "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz", + "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==", "dependencies": { - "@babel/types": "^7.23.5", + "@babel/types": "^7.23.6", "@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" @@ -220,13 +220,13 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz", - "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz", + "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==", "dependencies": { - "@babel/compat-data": "^7.22.9", - "@babel/helper-validator-option": "^7.22.15", - "browserslist": "^4.21.9", + "@babel/compat-data": "^7.23.5", + "@babel/helper-validator-option": "^7.23.5", + "browserslist": "^4.22.2", "lru-cache": "^5.1.1", "semver": "^6.3.1" }, @@ -357,13 +357,13 @@ } }, "node_modules/@babel/helpers": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.5.tgz", - "integrity": "sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.6.tgz", + "integrity": "sha512-wCfsbN4nBidDRhpDhvcKlzHWCTlgJYUUdSJfzXb2NuBssDSIjc3xcb+znA7l+zYsFljAcGM0aFkN40cR3lXiGA==", "dependencies": { "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.5", - "@babel/types": "^7.23.5" + "@babel/traverse": "^7.23.6", + "@babel/types": "^7.23.6" }, "engines": { "node": ">=6.9.0" @@ -447,9 +447,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz", - "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", + "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==", "bin": { "parser": "bin/babel-parser.js" }, @@ -621,9 +621,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz", - "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz", + "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -645,19 +645,19 @@ } }, "node_modules/@babel/traverse": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz", - "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.6.tgz", + "integrity": "sha512-czastdK1e8YByZqezMPFiZ8ahwVMh/ESl9vPgvgdB9AmFMGP5jfpFax74AQgl5zj4XHzqeYAg2l8PuUeRS1MgQ==", "dependencies": { "@babel/code-frame": "^7.23.5", - "@babel/generator": "^7.23.5", + "@babel/generator": "^7.23.6", "@babel/helper-environment-visitor": "^7.22.20", "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.5", - "@babel/types": "^7.23.5", - "debug": "^4.1.0", + "@babel/parser": "^7.23.6", + "@babel/types": "^7.23.6", + "debug": "^4.3.1", "globals": "^11.1.0" }, "engines": { @@ -673,9 +673,9 @@ } }, "node_modules/@babel/types": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz", - "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", + "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", "dependencies": { "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", @@ -2835,9 +2835,9 @@ } }, "node_modules/@nypl/design-system-react-components": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@nypl/design-system-react-components/-/design-system-react-components-2.1.2.tgz", - "integrity": "sha512-i+jkEE784Rwbvayd1tpB8iu1puo4Al+Ttgn1wOKlOeoNudiW7QD9hzONL4/rb+VyS3tcZIeYzOdclUi6gnSS1A==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@nypl/design-system-react-components/-/design-system-react-components-2.1.3.tgz", + "integrity": "sha512-l+sCwprDxf708Q2QAwn4pcAaEs+Ts6OX05JAzUFiGbSsrO+vwZNaOui83i8jUctx91x6pYeoMSpgSTM7ia5qfA==", "dependencies": { "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0", "@chakra-ui/react": ">=1.8.5 <=1.8.9", @@ -3450,9 +3450,9 @@ } }, "node_modules/@types/jest": { - "version": "29.5.10", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.10.tgz", - "integrity": "sha512-tE4yxKEphEyxj9s4inideLHktW/x6DwesIwWZ9NN1FKf9zbJYsnhBoA9vrHA/IuIOKwPa5PcFBNV4lpMIOEzyQ==", + "version": "29.5.11", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.11.tgz", + "integrity": "sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==", "dev": true, "dependencies": { "expect": "^29.0.0", @@ -3846,9 +3846,9 @@ } }, "node_modules/acorn-walk": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz", - "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==", + "version": "8.3.1", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz", + "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==", "dev": true, "engines": { "node": ">=0.4.0" @@ -4380,9 +4380,9 @@ } }, "node_modules/browserslist": { - "version": "4.22.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz", - "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==", + "version": "4.22.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz", + "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==", "funding": [ { "type": "opencollective", @@ -4398,9 +4398,9 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001541", - "electron-to-chromium": "^1.4.535", - "node-releases": "^2.0.13", + "caniuse-lite": "^1.0.30001565", + "electron-to-chromium": "^1.4.601", + "node-releases": "^2.0.14", "update-browserslist-db": "^1.0.13" }, "bin": { @@ -4484,9 +4484,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001565", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz", - "integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==", + "version": "1.0.30001568", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001568.tgz", + "integrity": "sha512-vSUkH84HontZJ88MiNrOau1EBrCqEQYgkC5gIySiDlpsm8sGVrhU7Kx4V6h0tnqaHzIHZv08HlJIwPbL4XL9+A==", "funding": [ { "type": "opencollective", @@ -5206,9 +5206,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.601", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.601.tgz", - "integrity": "sha512-SpwUMDWe9tQu8JX5QCO1+p/hChAi9AE9UpoC3rcHVc+gdCGlbT3SGb5I1klgb952HRIyvt9wZhSz9bNBYz9swA==" + "version": "1.4.610", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.610.tgz", + "integrity": "sha512-mqi2oL1mfeHYtOdCxbPQYV/PL7YrQlxbvFEZ0Ee8GbDdShimqt2/S6z2RWqysuvlwdOrQdqvE0KZrBTipAeJzg==" }, "node_modules/emittery": { "version": "0.13.1", @@ -6537,9 +6537,9 @@ } }, "node_modules/globals": { - "version": "13.23.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", - "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==", + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", "dependencies": { "type-fest": "^0.20.2" }, @@ -11297,9 +11297,9 @@ } }, "node_modules/vite": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", - "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz", + "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==", "peer": true, "dependencies": { "esbuild": "^0.18.10", @@ -11364,9 +11364,9 @@ } }, "node_modules/vite/node_modules/postcss": { - "version": "8.4.31", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", - "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "version": "8.4.32", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz", + "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==", "funding": [ { "type": "opencollective", @@ -11383,7 +11383,7 @@ ], "peer": true, "dependencies": { - "nanoid": "^3.3.6", + "nanoid": "^3.3.7", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -11659,9 +11659,9 @@ } }, "node_modules/ws": { - "version": "8.14.2", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz", - "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==", + "version": "8.15.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.15.0.tgz", + "integrity": "sha512-H/Z3H55mrcrgjFwI+5jKavgXvwQLtfPCUEp6pi35VhoB0pfcHnSoyuTzkBEZpzq49g1193CUEwIvmsjcotenYw==", "dev": true, "engines": { "node": ">=10.0.0" diff --git a/package.json b/package.json index c0da63a1f..3e87faac5 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "coverage": "jest --coverage" }, "dependencies": { - "@nypl/design-system-react-components": "^2.1.0", + "@nypl/design-system-react-components": "2.1.3", "@nypl/nypl-data-api-client": "1.0.5", "@types/node": "20.3.1", "@types/react": "18.2.13", diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index ec2987801..cfffa4698 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -1,12 +1,9 @@ import Head from "next/head" -import { useState, useReducer, useRef } from "react" +import { useState, useReducer, useRef, useEffect } from "react" import { useRouter } from "next/router" import { debounce } from "underscore" import type { SyntheticEvent } from "react" -import type { - FullDateType, - TextInputRefType, -} from "@nypl/design-system-react-components" +import type { TextInputRefType } from "@nypl/design-system-react-components" import { Heading, Notification, @@ -14,13 +11,14 @@ import { FormField, FormRow, TextInput, - DatePicker, Select, CheckboxGroup, Checkbox, HorizontalRule, ButtonGroup, Button, + Box, + Fieldset, } from "@nypl/design-system-react-components" import Layout from "../../src/components/Layout/Layout" @@ -38,6 +36,11 @@ import type { } from "../../src/types/searchTypes" import { getQueryString } from "../../src/utils/searchUtils" +export const defaultEmptySearchErrorMessage = + "Error: please enter at least one field to submit an advanced search." +export const badDateErrorMessage = + "Error: the date range is invalid. Please try again." + /** * The Advanced Search page is responsible for displaying the Advanced Search form fields and * buttons that clear the fields and submit a search request. @@ -45,10 +48,13 @@ import { getQueryString } from "../../src/utils/searchUtils" export default function AdvancedSearch() { const router = useRouter() const inputRef = useRef() + const notificationRef = useRef() const debounceInterval = 20 const [alert, setAlert] = useState(false) - + const [errorMessage, setErrorMessage] = useState( + defaultEmptySearchErrorMessage + ) const [searchFormState, dispatch] = useReducer( searchFormReducer, initialSearchFormState @@ -58,6 +64,7 @@ export default function AdvancedSearch() { e.preventDefault() alert && setAlert(false) const target = e.target as HTMLInputElement + dispatch({ type: type, field: target.name, @@ -65,24 +72,6 @@ export default function AdvancedSearch() { }) } - const handleDateChange = (e: FullDateType) => { - alert && setAlert(false) - const startDateString = e.startDate?.getFullYear()?.toString() - const endDateString = e.endDate?.getFullYear()?.toString() - - dispatch({ - type: "filter_change", - field: "dateAfter", - payload: startDateString || "", - }) - - dispatch({ - type: "filter_change", - field: "dateBefore", - payload: endDateString || "", - }) - } - const handleCheckboxChange = (types: string[]) => { alert && setAlert(false) dispatch({ @@ -95,7 +84,17 @@ export default function AdvancedSearch() { const handleSubmit = async (e: SyntheticEvent) => { e.preventDefault() const queryString = getQueryString(searchFormState as SearchParams) + if (!queryString.length) { + setErrorMessage(defaultEmptySearchErrorMessage) + setAlert(true) + // Very basic validation for the date range. + } else if ( + searchFormState["filters"].dateAfter > + searchFormState["filters"].dateBefore + ) { + // The error message can be better, but this is a start. + setErrorMessage(badDateErrorMessage) setAlert(true) } else { await router.push(`/search/${queryString}`) @@ -104,139 +103,180 @@ export default function AdvancedSearch() { const handleClear = (e: SyntheticEvent) => { e.preventDefault() + alert && setAlert(false) inputRef.current.value = "" dispatch({ type: "form_reset", payload: initialSearchFormState }) } + useEffect(() => { + if (alert && notificationRef.current) { + notificationRef.current.focus() + } + }, [alert]) + return ( <> Advanced Search | {SITE_NAME} - {alert && ( - Please enter at least one field to submit an advanced search. - } - /> - )} + {/* Always render the wrapper element that will display the + dynamically rendered notification */} + + {alert && ( + + )} + Advanced Search
- - - {textInputFields.map(({ name, label }) => { - return ( - handleInputChange(e, "input_change"), - debounceInterval - )} - ref={inputRef} - /> - ) - })} - - - - handleDateChange(e), - debounceInterval - )} - /> - div": { - display: "grid", - gridTemplateColumns: "repeat(2, minmax(0, 1fr))", - gridGap: "var(--nypl-space-s)", - div: { - marginTop: "0 !important", + + + +
+ handleInputChange(e, "filter_change"), + debounceInterval + )} + ref={inputRef} + /> + handleInputChange(e, "filter_change"), + debounceInterval + )} + ref={inputRef} + /> +
+ + + + + + + div": { + display: "grid", + gridTemplateColumns: "repeat(2, minmax(0, 1fr))", + gridGap: "var(--nypl-space-s)", + div: { + marginTop: "0 !important", + }, }, - }, + }} + > + {materialTypeOptions.map((materialType) => { + return ( + + ) + })} + + + + + + + + - {materialTypeOptions.map((materialType) => { - return ( - - ) - })} - + + + - - - - -