diff --git a/src/components/ItemFilters/FiltersContainer.tsx b/src/components/ItemFilters/FiltersContainer.tsx index 8a4994505..e97d4a26e 100644 --- a/src/components/ItemFilters/FiltersContainer.tsx +++ b/src/components/ItemFilters/FiltersContainer.tsx @@ -1,7 +1,11 @@ -import { useEffect, useRef, useState } from "react" +import { useMemo, useRef, useState } from "react" import { useRouter } from "next/router" import React from "react" -import { Text, useCloseDropDown } from "@nypl/design-system-react-components" +import { + Heading, + Text, + useCloseDropDown, +} from "@nypl/design-system-react-components" import styles from "../../../styles/components/ItemFilters.module.scss" import type { AppliedFilters, ItemAggregation } from "../../types/filterTypes" @@ -27,20 +31,17 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => { else return new ItemFilterData(agg) }) ).current - - const [appliedFilters, setAppliedFilters] = useState({ - location: [], - format: [], - status: [], - }) - + const parsedParams = parseItemFilterQueryParams(router.query) + const [appliedFilters, setAppliedFilters] = useState(parsedParams) + const appliedFiltersDisplay = buildAppliedFiltersString( + parsedParams, + filterData + ) const ref = useRef(null) useCloseDropDown(() => setWhichFilterIsOpen(""), ref) const [whichFilterIsOpen, setWhichFilterIsOpen] = useState("") - const [appliedFiltersDisplay, setAppliedFiltersDisplay] = useState("") - const [itemsMatched] = useState(buildItemsString(router.query)) const submitFilters = (selection: string[], field: string) => { @@ -57,16 +58,12 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => { locationFilterData.recapLocations() ) router.push("/search/advanced" + url) - setAppliedFiltersDisplay(url) } - useEffect(() => { + useMemo(() => { const parsedParams = parseItemFilterQueryParams(router.query) setAppliedFilters(parsedParams) - setAppliedFiltersDisplay( - buildAppliedFiltersString(parsedParams, filterData) - ) - }, [router.query, filterData]) + }, [router.query]) return (
@@ -85,7 +82,7 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => { /> ))}
- {itemsMatched} + {itemsMatched} {appliedFiltersDisplay} )