Add suspense boundary around search page results

frontend/src/app/[locale]/search/QueryProvider.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { createContext, useCallback, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+
+interface QueryContextParams {
+  queryTerm: string | null | undefined;
+  updateQueryTerm: (term: string) => void;
+  totalPages: string | null | undefined;
+  updateTotalPages: (page: string) => void;
+  totalResults: string;
+  updateTotalResults: (total: string) => void;
+}
+
+export const QueryContext = createContext({} as QueryContextParams);
+
+export default function QueryProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const searchParams = useSearchParams() || undefined;
+  const defaultTerm = searchParams?.get("query");
+  const [queryTerm, setQueryTerm] = useState(defaultTerm);
+  const [totalPages, setTotalPages] = useState("na");
+  const [totalResults, setTotalResults] = useState("");
+
+  const updateQueryTerm = useCallback((term: string) => {
+    setQueryTerm(term);
+  }, []);
+
+  const updateTotalResults = useCallback((total: string) => {
+    setTotalResults(total);
+  }, []);
+
+  const updateTotalPages = useCallback((page: string) => {
+    setTotalPages(page);
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      queryTerm,
+      updateQueryTerm,
+      totalPages,
+      updateTotalPages,
+      totalResults,
+      updateTotalResults,
+    }),
+    [
+      queryTerm,
+      updateQueryTerm,
+      totalPages,
+      updateTotalPages,
+      totalResults,
+      updateTotalResults,
+    ],
+  );
+
+  return (
+    <QueryContext.Provider value={contextValue}>
+      {children}
+    </QueryContext.Provider>
+  );
+}

frontend/src/app/[locale]/search/error.tsx

@@ -1,15 +1,23 @@
 "use client"; // Error components must be Client Components
-
-import {
-  PaginationInfo,
-  SearchAPIResponse,
-} from "src/types/search/searchResponseTypes";
-
+import BetaAlert from "src/components/BetaAlert";
+import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
-import { QueryParamData } from "src/services/search/searchfetcher/SearchFetcher";
+import QueryProvider from "src/app/[locale]/search/QueryProvider";
+import SearchBar from "src/components/search/SearchBar";
 import SearchCallToAction from "src/components/search/SearchCallToAction";
-import { SearchForm } from "src/app/[locale]/search/SearchForm";
+import SearchFilterAccordion from "src/components/search/SearchFilterAccordion/SearchFilterAccordion";
+import SearchOpportunityStatus from "src/components/search/SearchOpportunityStatus";
+import SearchResultsHeader from "src/components/search/SearchResultsHeader";
+import {
+  agencyOptions,
+  categoryOptions,
+  eligibilityOptions,
+  fundingOptions,
+} from "src/components/search/SearchFilterAccordion/SearchFilterOptions";
+import { SEARCH_CRUMBS } from "src/constants/breadcrumbs";
+import { QueryParamData } from "src/services/search/searchfetcher/SearchFetcher";
 import { useEffect } from "react";
+import SearchErrorAlert from "src/components/search/error/SearchErrorAlert";
 
 interface ErrorProps {
   // Next's error boundary also includes a reset function as a prop for retries,
@@ -29,8 +37,8 @@ export default function Error({ error }: ErrorProps) {
   // Parse it here.
 
   let parsedErrorData;
-  const pagination_info = getErrorPaginationInfo();
   let convertedSearchParams;
+
   if (!isValidJSON(error.message)) {
     // the error likely is just a string with a non-specific Server Component error when running the built app
     // "An error occurred in the Server Components render. The specific message is omitted in production builds..."
@@ -46,11 +54,15 @@ export default function Error({ error }: ErrorProps) {
       parsedErrorData.searchInputs,
     );
   }
-
-  const initialSearchResults: SearchAPIResponse = getErrorInitialSearchResults(
-    pagination_info,
-    parsedErrorData,
-  );
+  const {
+    agency,
+    category,
+    eligibility,
+    fundingInstrument,
+    query,
+    sortby,
+    status,
+  } = convertedSearchParams;
 
   useEffect(() => {
     console.error(error);
@@ -62,46 +74,55 @@ export default function Error({ error }: ErrorProps) {
         title="Search Funding Opportunities"
         description="Try out our experimental search page."
       />
+      <BetaAlert />
+      <Breadcrumbs breadcrumbList={SEARCH_CRUMBS} />
       <SearchCallToAction />
-      <SearchForm
-        initialSearchResults={initialSearchResults}
-        requestURLQueryParams={convertedSearchParams}
-      />
+      <QueryProvider>
+        <div className="grid-container">
+          <div className="search-bar">
+            <SearchBar query={query} />
+          </div>
+          <div className="grid-row grid-gap">
+            <div className="tablet:grid-col-4">
+              <SearchOpportunityStatus query={status} />
+              <SearchFilterAccordion
+                filterOptions={fundingOptions}
+                title="Funding instrument"
+                queryParamKey="fundingInstrument"
+                query={fundingInstrument}
+              />
+              <SearchFilterAccordion
+                filterOptions={eligibilityOptions}
+                title="Eligibility"
+                queryParamKey="eligibility"
+                query={eligibility}
+              />
+              <SearchFilterAccordion
+                filterOptions={agencyOptions}
+                title="Agency"
+                queryParamKey="agency"
+                query={agency}
+              />
+              <SearchFilterAccordion
+                filterOptions={categoryOptions}
+                title="Category"
+                queryParamKey="category"
+                query={category}
+              />
+            </div>
+            <div className="tablet:grid-col-8">
+              <SearchResultsHeader sortby={sortby} />
+              <div className="usa-prose">
+                <SearchErrorAlert />
+              </div>
+            </div>
+          </div>
+        </div>
+      </QueryProvider>
     </>
   );
 }
 
-/*
- * Generate empty response data to render the full page on an error
- * which otherwise may not have any data.
- */
-function getErrorInitialSearchResults(
-  pagination_info: PaginationInfo,
-  parsedError: ParsedError,
-) {
-  return {
-    errors: parsedError ? [{ ...parsedError }] : [{}],
-    data: [],
-    pagination_info,
-    status_code: parsedError?.status || -1,
-    message: parsedError?.message || "Unable to parse thrown error",
-  };
-}
-
-// There will be no pagination shown on an error
-// so the values here just need to be valid for the page to
-// load without error
-function getErrorPaginationInfo() {
-  return {
-    order_by: "opportunity_id",
-    page_offset: 0,
-    page_size: 25,
-    sort_direction: "ascending",
-    total_pages: 1,
-    total_records: 0,
-  };
-}
-
 function convertSearchInputArraysToSets(
   searchInputs: QueryParamData,
 ): QueryParamData {

frontend/src/app/[locale]/search/loading.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Spinner from "../../../components/Spinner";
+import Spinner from "src/components/Spinner";
 
 export default function Loading() {
   // TODO (Issue #1937): Use translation utility for strings in this file