Add search filters without separate component

navapbc · Jul 1, 2024 · cd81d84 · cd81d84
1 parent c64f6ff
commit cd81d84
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/frontend/src/app/[locale]/look/SearchFilterAccordion/SearchFilterAccordion.tsx b/frontend/src/app/[locale]/look/SearchFilterAccordion/SearchFilterAccordion.tsx
@@ -86,16 +86,15 @@ export function SearchFilterAccordion({
     updateQueryParams(updated, key, queryTerm);
   }
 
-  const isAllSelected = false;
-  const isNoneSelected = true;
+  const isExpanded = query.size ? true: false;
 
   const getAccordionContent = () => (
     <>
       <SearchFilterToggleAll
         onSelectAll={() => toggleSelectAll(true, allSelected)}
         onClearAll={() => toggleSelectAll(false, allSelected)}
-        isAllSelected={isAllSelected}
-        isNoneSelected={isNoneSelected}
+        isAllSelected={isSectionAllSelected(allSelected, query)}
+        isNoneSelected={isSectionNoneSelected(query)}
       />
 
       <ul className="usa-list usa-list--unstyled">
@@ -133,7 +132,7 @@ export function SearchFilterAccordion({
     {
       title: getAccordionTitle(),
       content: getAccordionContent(),
-      expanded: false,
+      expanded: isExpanded,
       id: `funding-instrument-filter-${queryParamKey}`,
       headingLevel: "h2",
     },

diff --git a/frontend/src/app/[locale]/look/page.tsx b/frontend/src/app/[locale]/look/page.tsx
@@ -37,14 +37,15 @@ export default function Look({
     status?: string;
     fundingInstrument?: string;
     eligibility?: string;
+    category?: string;
     page?: string;
   };
 }) {
   unstable_setRequestLocale("en");
   const t = useTranslations("Process");
   const key = Object.entries(searchParams).join(',')
   const convertedSearchParams = convertSearchParamsToProperTypes(searchParams);
-  const { query, status, eligibility, fundingInstrument } = convertedSearchParams;
+  const { category, eligibility, fundingInstrument, query, status } = convertedSearchParams;
 
   return (
     <>
@@ -60,13 +61,24 @@ export default function Look({
           <div className="grid-row grid-gap">
             <div className="tablet:grid-col-4">
                 <SearchOpportunityStatus query={status} />
-                // TODO: These could be a single component.
                 <SearchFilterAccordion
                   options={fundingOptions}
                   title="Funding instrument"
                   queryParamKey="fundingInstrument"
                   query={fundingInstrument}
                 />
+                <SearchFilterAccordion
+                  options={eligibilityOptions}
+                  title="Eligibility"
+                  queryParamKey="eligibility"
+                  query={eligibility}
+                />
+                <SearchFilterAccordion
+                  options={categoryOptions}
+                  title="Category"
+                  queryParamKey="category"
+                  query={category}
+                />
             </div>
             <div className="tablet:grid-col-8">
               <Suspense key={key} fallback={<Loading />}>