From 03ab502b79c1920e0e6b0c083a575602848ce842 Mon Sep 17 00:00:00 2001 From: Jim Grimes Date: Sat, 8 Jun 2024 13:50:24 -0400 Subject: [PATCH 1/4] Added initialSelectedPanelKeys function to correcly set initial state --- src/components/Filters/DimensionFilter.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Filters/DimensionFilter.tsx b/src/components/Filters/DimensionFilter.tsx index 9d3bdb67..893ae9a6 100644 --- a/src/components/Filters/DimensionFilter.tsx +++ b/src/components/Filters/DimensionFilter.tsx @@ -25,8 +25,15 @@ const DimensionFilter: FC = ({ const [selectedKeys, setSelectedKeys] = useState( 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]) { From fccf8709972cb89be6af511b2b0d1725dad74914 Mon Sep 17 00:00:00 2001 From: Jim Grimes Date: Sun, 9 Jun 2024 09:00:37 -0400 Subject: [PATCH 2/4] Revised fitlerCount to match count to appearance of selected filter panels --- src/components/SidePanelControlBar.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/SidePanelControlBar.tsx b/src/components/SidePanelControlBar.tsx index e7c08c11..2a5b19a4 100644 --- a/src/components/SidePanelControlBar.tsx +++ b/src/components/SidePanelControlBar.tsx @@ -32,11 +32,19 @@ const SearchBarComponent: FC = ({ const savedRef = useRef(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 = ({ label={
Filter - {filterCount !== 0 && ({filterCount})} + {filterCount() !== 0 && ({filterCount()})}
} onPress={() => { @@ -117,7 +125,7 @@ const SearchBarComponent: FC = ({ updateCurrentView("filter"); }} - isSelected={currentView === "filter" || filterCount !== 0} + isSelected={currentView === "filter" || filterCount() !== 0} startContent={} className="max-lg:min-w-[4rem]" data-hover={false} From 5b5c2dbde84a95ac34a87ad80d77bb32555935c2 Mon Sep 17 00:00:00 2001 From: Jim Grimes Date: Sun, 9 Jun 2024 10:05:29 -0400 Subject: [PATCH 3/4] Moved FilterProvider to FilterProviderWrapper in RootLayout --- src/app/FilterProviderWrapper.tsx | 11 +++++++++++ src/app/find-properties/[[...opa_id]]/page.tsx | 2 -- src/app/layout.tsx | 7 ++++++- 3 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 src/app/FilterProviderWrapper.tsx diff --git a/src/app/FilterProviderWrapper.tsx b/src/app/FilterProviderWrapper.tsx new file mode 100644 index 00000000..4589fe65 --- /dev/null +++ b/src/app/FilterProviderWrapper.tsx @@ -0,0 +1,11 @@ +"use client"; + +import { FilterProvider } from "@/context/FilterContext"; + +export const FilterProviderWrapper = ({ + children, +}: { + children: React.ReactNode; +}) => { + return {children} +} \ No newline at end of file diff --git a/src/app/find-properties/[[...opa_id]]/page.tsx b/src/app/find-properties/[[...opa_id]]/page.tsx index 7aad81ac..ece48965 100644 --- a/src/app/find-properties/[[...opa_id]]/page.tsx +++ b/src/app/find-properties/[[...opa_id]]/page.tsx @@ -208,7 +208,6 @@ const MapPage = ({ params }: MapPageProps) => { }, [currentView, selectedProperty, shouldFilterSavedProperties]); return ( -
@@ -321,7 +320,6 @@ const MapPage = ({ params }: MapPageProps) => {
- ); }; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2860d06a..8a4e65f0 100644 --- a/src/app/layout.tsx +++ b/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 - {children} + + + {children} + + ); From d49d889cfa40741e09da3f44871b949bdc518acf Mon Sep 17 00:00:00 2001 From: Jim Grimes Date: Sun, 9 Jun 2024 20:05:34 -0400 Subject: [PATCH 4/4] Added useMemo to reduce calls to filterCount function --- src/components/SidePanelControlBar.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/SidePanelControlBar.tsx b/src/components/SidePanelControlBar.tsx index 2a5b19a4..fe3d9f8c 100644 --- a/src/components/SidePanelControlBar.tsx +++ b/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,20 +32,20 @@ const SearchBarComponent: FC = ({ const savedRef = useRef(null); const { dispatch, appFilter } = useFilter(); - const filterCount = () => { + const filterCount: number = useMemo(() => { let count = 0 for (let property of Object.keys(appFilter)) { - if (property === "access_process") { - count = count + appFilter[property].values.length - } else { - count++ + if (property === "access_process") { + count += appFilter[property].values.length + } else { + count++ + } + } + if (shouldFilterSavedProperties) { + count-- } - } - if (shouldFilterSavedProperties) { - count-- - } return count - } + }, [appFilter]) const onClickSavedButton = () => { let propertyIds = getPropertyIdsFromLocalStorage(); @@ -115,7 +115,7 @@ const SearchBarComponent: FC = ({ label={
Filter - {filterCount() !== 0 && ({filterCount()})} + {filterCount !== 0 && ({filterCount})}
} onPress={() => { @@ -125,7 +125,7 @@ const SearchBarComponent: FC = ({ updateCurrentView("filter"); }} - isSelected={currentView === "filter" || filterCount() !== 0} + isSelected={currentView === "filter" || filterCount !== 0} startContent={} className="max-lg:min-w-[4rem]" data-hover={false}