VACMS-16986 Resources & Support landing and taxonomy pages - add web …

…components (#28236) * VACMS-16986 Resources & Support landing page web components * fixing style issues * feedback updates * fixing unit test
department-of-veterans-affairs · Mar 4, 2024 · afbb219 · afbb219
1 parent 5a96985
commit afbb219
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 215 deletions.
diff --git 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 "
         <strong>{query}</strong>
         ." Try using different words or{' '}
-        <a href={`${getAppUrl('search')}/?query=${encodeURIComponent(query)}`}>
-          search all of VA.gov
-        </a>
+        <va-link
+          href={`${getAppUrl('search')}/?query=${encodeURIComponent(query)}`}
+          text="search all of VA.gov"
+        />
         .
       </>
     );
@@ -96,7 +98,7 @@ const ResourcesAndSupportSearchApp = () => {
     <div className="usa-grid usa-grid-full">
       <div className="usa-content vads-u-margin-bottom--0 medium-screen:vads-u-margin-bottom--3">
         {errorMessage && (
-          <va-alert status="error">
+          <va-alert status="error" uswds>
             <h3 slot="headline">Something went wrong</h3>
             {errorMessage}
           </va-alert>
@@ -108,12 +110,13 @@ const ResourcesAndSupportSearchApp = () => {
               Resources and Support Search Results
             </h1>
             <SearchBar
-              onSearch={onSearch}
               userInput={userInput}
               onInputChange={setUserInput}
+              previousValue={previousValue}
+              setSearchData={setSearchData}
             />
             <h2
-              className="vads-u-padding-x--1 vads-u-font-family--sans large-screen:vads-u-padding-x--0 vads-u-font-size--base vads-u-margin-top--0 vads-u-margin-bottom--2p5 vads-u-font-weight--normal"
+              className="vads-u-max-width--full vads-u-margin-x--1 vads-u-font-family--sans vads-u-margin-top--2 medium-screen:vads-u-margin-top--0 large-screen:vads-u-padding-x--0 vads-u-font-size--base vads-u-margin-bottom--2p5 vads-u-font-weight--normal"
               id="pagination-summary"
             >
               {paginationSummary}