685: Bug Fix: Selected Panels 'Selected' State

src/app/FilterProviderWrapper.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { FilterProvider } from "@/context/FilterContext";
+
+export const FilterProviderWrapper = ({
+    children,
+}: {
+    children: React.ReactNode;
+}) => {
+    return <FilterProvider>{children}</FilterProvider>
+}

src/app/find-properties/[[...opa_id]]/page.tsx

@@ -208,7 +208,6 @@ const MapPage = ({ params }: MapPageProps) => {
   }, [currentView, selectedProperty, shouldFilterSavedProperties]);
 
   return (
-    <FilterProvider>
       <NextUIProvider>
         <div className="flex flex-col">
           <div className="flex flex-grow overflow-hidden">
@@ -321,7 +320,6 @@ const MapPage = ({ params }: MapPageProps) => {
           </div>
         </div>
       </NextUIProvider>
-    </FilterProvider>
   );
 };
 

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { CookieProviderWrapper } from "./CookieProviderWrapper";
+import { FilterProviderWrapper } from "./FilterProviderWrapper";
 
 export const metadata: Metadata = {
   title: {
@@ -29,7 +30,11 @@ export default function RootLayout({
         >
           Skip to main content
         </a>
-        <CookieProviderWrapper>{children}</CookieProviderWrapper>
+        <CookieProviderWrapper>
+          <FilterProviderWrapper>
+            {children}
+          </FilterProviderWrapper>
+        </CookieProviderWrapper>
       </body>
     </html>
   );

src/components/Filters/DimensionFilter.tsx

@@ -25,8 +25,15 @@ const DimensionFilter: FC<DimensionFilterProps> = ({
   const [selectedKeys, setSelectedKeys] = useState<string[]>(
     appFilter[property]?.values || []
   );
-  const [selectedPanelKeys, setSelectedPanelkeys] = useState<{[property: string]: string[]}>({})
-
+  const initialSelectedPanelKeys = () => {
+    let panelKeyObj: {[key: string]: string[]} = {}
+    for (const key in appFilter) {
+      panelKeyObj[key] = appFilter[key].values
+    }
+    return panelKeyObj
+  }
+  const [selectedPanelKeys, setSelectedPanelkeys] = useState<{[property: string]: string[]}>(initialSelectedPanelKeys())
+
   const toggleDimensionForPanel = (dimension: string, panel_property: string) => {
     let newSelectedPanelKeys
     if (selectedPanelKeys[panel_property]) {

src/components/SidePanelControlBar.tsx

@@ -32,11 +32,19 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
   const savedRef = useRef<HTMLButtonElement | null>(null);
   const { dispatch, appFilter } = useFilter();
 
-  let filterCount = Object.keys(appFilter).length;
-
-  if (shouldFilterSavedProperties) {
-    // Exclude opa_id from filterCount, which counts opa_id as a filter by default
-    filterCount--;
+  const filterCount = () => {
+    let count = 0
+    for (let property of Object.keys(appFilter)) {
+      if (property === "access_process") {
+        count = count + appFilter[property].values.length
+      } else {
+        count++
+      }
+    }
+    if (shouldFilterSavedProperties) {
+      count--
+    }
+    return count
   }
 
   const onClickSavedButton = () => {
@@ -107,7 +115,7 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
             label={
               <div className="lg:space-x-1 body-md">
                 <span className="max-lg:hidden">Filter</span>
-                {filterCount !== 0 && <span>({filterCount})</span>}
+                {filterCount() !== 0 && <span>({filterCount()})</span>}
               </div>
             }
             onPress={() => {
@@ -117,7 +125,7 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
 
               updateCurrentView("filter");
             }}
-            isSelected={currentView === "filter" || filterCount !== 0}
+            isSelected={currentView === "filter" || filterCount() !== 0}
             startContent={<Funnel />}
             className="max-lg:min-w-[4rem]"
             data-hover={false}