diff --git a/src/applications/resources-and-support/components/ResourcesAndSupportSearchApp.jsx b/src/applications/resources-and-support/components/ResourcesAndSupportSearchApp.jsx index 82b860ef9961..80910d01cc59 100644 --- a/src/applications/resources-and-support/components/ResourcesAndSupportSearchApp.jsx +++ b/src/applications/resources-and-support/components/ResourcesAndSupportSearchApp.jsx @@ -1,10 +1,8 @@ -// Node modules. import React, { useEffect, useState, useCallback } from 'react'; import { VaPagination } from '@department-of-veterans-affairs/component-library/dist/react-bindings'; import URLSearchParams from 'url-search-params'; import { focusElement } from 'platform/utilities/ui'; import { getAppUrl } from 'platform/utilities/registry-helpers'; -// Relative imports. import SearchBar from './SearchBar'; import SearchResultList from './SearchResultList'; import useArticleData from '../hooks/useArticleData'; @@ -17,6 +15,14 @@ const ResourcesAndSupportSearchApp = () => { const [query, setQuery] = useState(''); const [page, setPage] = useState(1); const [results] = useGetSearchResults(articles, query, page); + const [previousValue, setPreviousValue] = useState(''); + + useEffect( + () => { + setPreviousValue(userInput); + }, + [userInput], + ); const totalPages = Math.ceil(results.length / RESULTS_PER_PAGE); @@ -29,6 +35,7 @@ const ResourcesAndSupportSearchApp = () => { const searchParams = new URLSearchParams(window.location.search); const queryFromUrl = searchParams.get('query'); + if (queryFromUrl) { setUserInput(queryFromUrl); setQuery(queryFromUrl); @@ -39,14 +46,8 @@ const ResourcesAndSupportSearchApp = () => { [articles, setUserInput, setQuery], ); - const onSearch = useCallback( + const setSearchData = useCallback( () => { - const queryParams = new URLSearchParams(); - queryParams.set('query', userInput); - - const newUrl = `${window.location.pathname}?${queryParams}`; - history.replaceState({}, '', newUrl); - setPage(1); setQuery(userInput); focusElement('#pagination-summary'); @@ -84,9 +85,10 @@ const ResourcesAndSupportSearchApp = () => { We didn’t find any resources and support articles for " {query} ." Try using different words or{' '} - - search all of VA.gov - + . ); @@ -96,7 +98,7 @@ const ResourcesAndSupportSearchApp = () => {
{errorMessage && ( - +

Something went wrong

{errorMessage} @@ -108,12 +110,13 @@ const ResourcesAndSupportSearchApp = () => { Resources and Support Search Results

{paginationSummary} diff --git a/src/applications/resources-and-support/components/SearchBar.jsx b/src/applications/resources-and-support/components/SearchBar.jsx index 106e37cdda7c..41a18ec90929 100644 --- a/src/applications/resources-and-support/components/SearchBar.jsx +++ b/src/applications/resources-and-support/components/SearchBar.jsx @@ -1,22 +1,23 @@ -// Node modules. import React, { useState, useRef } from 'react'; import PropTypes from 'prop-types'; -// Relative imports. +import classNames from 'classnames'; +import { + VaRadio, + VaSearchInput, +} from '@department-of-veterans-affairs/component-library/dist/react-bindings'; import recordEvent from 'platform/monitoring/record-event'; import { getAppUrl } from 'platform/utilities/registry-helpers'; +import URLSearchParams from 'url-search-params'; import resourcesSettings from '../manifest.json'; const searchUrl = getAppUrl('search'); -export default function SearchBar({ - onInputChange, - onSearch, - useDefaultFormSearch, - userInput, -}) { +function SearchBar({ onInputChange, previousValue, setSearchData, userInput }) { const [isGlobalSearch, setGlobalSearch] = useState(false); const [expanded, setExpanded] = useState(false); const [inputError, setInputError] = useState(false); + const GLOBAL = 'All VA.gov'; + const RESOURCES = 'Resources and Support'; const inputFieldRef = useRef(null); @@ -45,8 +46,29 @@ export default function SearchBar({ onInputChange(onlySpaces(input) ? input.trim() : input); }; + const onSearch = () => { + const queryParams = new URLSearchParams(); + queryParams.set('query', userInput); + + const URL = isGlobalSearch + ? `${searchUrl}/` + : `${resourcesSettings.rootUrl}/`; + const newUrl = `${URL}?${queryParams}`; + + history.replaceState({}, '', newUrl); + window.location.href = newUrl; + }; + const handleSubmit = event => { - // First, check input state is valid and set error status. + if (setSearchData) { + setSearchData(); + } + + // Don't run a search if the new value is the same as what's in the input already + if (previousValue === userInput && !isGlobalSearch) { + return; + } + const inputState = isInputValid(userInput); setInputError(!inputState); @@ -57,7 +79,6 @@ export default function SearchBar({ return; } - // Second, check if a global search, record event and return early if (isGlobalSearch) { recordEvent({ event: 'view_search_results', @@ -65,28 +86,25 @@ export default function SearchBar({ 'search-query': userInput, 'search-results-total-count': undefined, 'search-results-total-pages': undefined, - 'search-selection': 'All VA.gov', + 'search-selection': GLOBAL, 'search-typeahead-enabled': false, - 'search-location': 'Resources And Support', + 'search-location': RESOURCES, 'sitewide-search-app-used': false, // this is not the sitewide search app 'type-ahead-option-keyword-selected': undefined, 'type-ahead-option-position': undefined, 'type-ahead-options-list': undefined, 'type-ahead-options-count': undefined, }); - return; - } - - // Third, check if we are not on the /resources/search page and exit early to let the form submit manually - if (useDefaultFormSearch) { - return; } - // Fourth, we are at /resources/search so handle the search event.preventDefault(); onSearch(); }; + const onValueChange = ({ detail }) => { + setGlobalSearch(detail.value === GLOBAL); + }; + return (
@@ -114,135 +132,99 @@ export default function SearchBar({ aria-hidden="true" /> - {/* Search form */} -