From cd81d841dfab003b6141c7d74f2296aa4528d753 Mon Sep 17 00:00:00 2001
From: acouch <acinternets@gmail.com>
Date: Mon, 1 Jul 2024 11:08:19 -0400
Subject: [PATCH] Add search filters without separate component

---
 .../SearchFilterAccordion.tsx                    |  9 ++++-----
 frontend/src/app/[locale]/look/page.tsx          | 16 ++++++++++++++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/[locale]/look/SearchFilterAccordion/SearchFilterAccordion.tsx b/frontend/src/app/[locale]/look/SearchFilterAccordion/SearchFilterAccordion.tsx
index 726f7d249b..9d100b2751 100644
--- 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
index b6621a794a..2ed3b8cef9 100644
--- a/frontend/src/app/[locale]/look/page.tsx
+++ b/frontend/src/app/[locale]/look/page.tsx
@@ -37,6 +37,7 @@ export default function Look({
     status?: string;
     fundingInstrument?: string;
     eligibility?: string;
+    category?: string;
     page?: string;
   };
 }) {
@@ -44,7 +45,7 @@ export default function Look({
   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 />}>