Merge pull request #688 from jgrimes86/jgrimes86/685-fix-filter-panel…

…-selected-state

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

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { FC, useRef } from "react";
+import React, { FC, useMemo, useRef } from "react";
 import { BarClickOptions } from "@/app/find-properties/[[...opa_id]]/page";
 import { BookmarkSimple, DownloadSimple, Funnel } from "@phosphor-icons/react";
 import { ThemeButton } from "./ThemeButton";
@@ -32,12 +32,20 @@ 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: number = useMemo(() => {
+    let count = 0
+    for (let property of Object.keys(appFilter)) {
+        if (property === "access_process") {
+          count += appFilter[property].values.length
+        } else {
+          count++
+        }
+      }
+      if (shouldFilterSavedProperties) {
+        count--
+      }
+    return count
+  }, [appFilter])
 
   const onClickSavedButton = () => {
     let propertyIds = getPropertyIdsFromLocalStorage();