From 663dc07e3af086374bfe1a64c8eb5b6ee4a1f3b5 Mon Sep 17 00:00:00 2001 From: dc Date: Tue, 7 Oct 2025 19:06:35 +0530 Subject: [PATCH 1/2] Disable selected sector in sector details page --- .../(user)/components/ListingComponent.tsx | 38 +++++++++++++------ .../datasets/components/FIlter/Filter.tsx | 20 ++++++++-- .../[sectorSlug]/SectorDetailsClient.tsx | 1 + 3 files changed, 45 insertions(+), 14 deletions(-) diff --git a/app/[locale]/(user)/components/ListingComponent.tsx b/app/[locale]/(user)/components/ListingComponent.tsx index 152a7875..6f31996b 100644 --- a/app/[locale]/(user)/components/ListingComponent.tsx +++ b/app/[locale]/(user)/components/ListingComponent.tsx @@ -149,7 +149,8 @@ const queryReducer = (state: QueryParams, action: Action): QueryParams => { const useUrlParams = ( queryParams: QueryParams, setQueryParams: React.Dispatch, - setVariables: (vars: string) => void + setVariables: (vars: string) => void, + lockedFilters: Record ) => { const router = useRouter(); @@ -165,6 +166,13 @@ const useUrlParams = ( } }); + // Merge locked filters with URL filters + Object.entries(lockedFilters).forEach(([category, values]) => { + if (values.length > 0) { + filters[category] = Array.from(new Set([...(filters[category] || []), ...values])); + } + }); + const initialParams: QueryParams = { pageSize: sizeParam ? Number(sizeParam) : 9, currentPage: pageParam ? Number(pageParam) : 1, @@ -173,7 +181,7 @@ const useUrlParams = ( }; setQueryParams({ type: 'INITIALIZE', payload: initialParams }); - }, [setQueryParams]); + }, [setQueryParams, lockedFilters]); useEffect(() => { const filtersString = Object.entries(queryParams.filters) @@ -234,6 +242,7 @@ interface ListingProps { categoryImage?: string; placeholder: string; redirectionURL: string; + lockedFilters?: Record; } const ListingComponent: React.FC = ({ @@ -245,6 +254,7 @@ const ListingComponent: React.FC = ({ categoryImage, placeholder, redirectionURL, + lockedFilters = {}, }) => { const [facets, setFacets] = useState<{ results: any[]; @@ -259,7 +269,7 @@ const ListingComponent: React.FC = ({ const count = facets?.total ?? 0; const datasetDetails = facets?.results ?? []; - useUrlParams(queryParams, setQueryParams, setVariables); + useUrlParams(queryParams, setQueryParams, setVariables, lockedFilters); const latestFetchId = useRef(0); useEffect(() => { @@ -389,6 +399,7 @@ const ListingComponent: React.FC = ({ options={filterOptions} setSelectedOptions={handleFilterChange} selectedOptions={queryParams.filters} + lockedFilters={lockedFilters} /> @@ -484,6 +495,7 @@ const ListingComponent: React.FC = ({ options={filterOptions} setSelectedOptions={handleFilterChange} selectedOptions={queryParams.filters} + lockedFilters={lockedFilters} /> @@ -497,14 +509,18 @@ const ListingComponent: React.FC = ({ ([category, values]) => values .filter((value) => category !== 'sort') - .map((value) => ( - handleRemoveFilter(category, value)} - > - {value} - - )) + .map((value) => { + // Check if this filter value is locked + const isLocked = lockedFilters[category]?.includes(value); + return ( + handleRemoveFilter(category, value)} + > + {value} + + ); + }) )} )} diff --git a/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx b/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx index 84a390e9..28ad1021 100644 --- a/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx +++ b/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx @@ -19,6 +19,7 @@ interface FilterProps { options: Record; setSelectedOptions: (category: string, values: string[]) => void; selectedOptions: Record; + lockedFilters?: Record; } const Filter: React.FC = ({ @@ -26,10 +27,13 @@ const Filter: React.FC = ({ options, setSelectedOptions, selectedOptions, + lockedFilters = {}, }) => { const handleReset = () => { Object.keys(options).forEach((category) => { - setSelectedOptions(category, []); // Reset selected options for each category + // Keep locked filters when resetting + const locked = lockedFilters[category] || []; + setSelectedOptions(category, locked); }); }; @@ -97,11 +101,21 @@ const Filter: React.FC = ({ > ({ + ...option, + disabled: lockedFilters[category]?.includes(option.value) || false, + }))} title={undefined} value={selectedOptions[category] || []} onChange={(values) => { - setSelectedOptions(category, values as string[]); + // Prevent unselecting locked filters + const locked = lockedFilters[category] || []; + const newValues = values as string[]; + + // Ensure all locked values remain selected + const finalValues = Array.from(new Set([...locked, ...newValues])); + + setSelectedOptions(category, finalValues); }} /> diff --git a/app/[locale]/(user)/sectors/[sectorSlug]/SectorDetailsClient.tsx b/app/[locale]/(user)/sectors/[sectorSlug]/SectorDetailsClient.tsx index a7e534d4..7cf4ac07 100644 --- a/app/[locale]/(user)/sectors/[sectorSlug]/SectorDetailsClient.tsx +++ b/app/[locale]/(user)/sectors/[sectorSlug]/SectorDetailsClient.tsx @@ -43,6 +43,7 @@ const SectorDetailsClient = ({ sector }: { sector: TypeSector }) => { categoryImage={`/Sectors/${sector.name}.svg`} redirectionURL={`/datasets`} placeholder="Start typing to search for any Dataset" + lockedFilters={{ sectors: [sector.name] }} /> ); From 17a996ca2809c7fc885466295e678ee5e6961c1b Mon Sep 17 00:00:00 2001 From: dc Date: Tue, 7 Oct 2025 19:15:50 +0530 Subject: [PATCH 2/2] fix usecase listing page infinte loop issue --- app/[locale]/(user)/components/ListingComponent.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/app/[locale]/(user)/components/ListingComponent.tsx b/app/[locale]/(user)/components/ListingComponent.tsx index 6f31996b..62bad2e7 100644 --- a/app/[locale]/(user)/components/ListingComponent.tsx +++ b/app/[locale]/(user)/components/ListingComponent.tsx @@ -14,7 +14,7 @@ import { Text, Tray, } from 'opub-ui'; -import React, { useEffect, useReducer, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react'; import BreadCrumbs from '@/components/BreadCrumbs'; import { Icons } from '@/components/icons'; @@ -269,7 +269,10 @@ const ListingComponent: React.FC = ({ const count = facets?.total ?? 0; const datasetDetails = facets?.results ?? []; - useUrlParams(queryParams, setQueryParams, setVariables, lockedFilters); + // Stabilize lockedFilters reference to prevent infinite loops + const stableLockedFilters = useMemo(() => lockedFilters, [JSON.stringify(lockedFilters)]); + + useUrlParams(queryParams, setQueryParams, setVariables, stableLockedFilters); const latestFetchId = useRef(0); useEffect(() => { @@ -399,7 +402,7 @@ const ListingComponent: React.FC = ({ options={filterOptions} setSelectedOptions={handleFilterChange} selectedOptions={queryParams.filters} - lockedFilters={lockedFilters} + lockedFilters={stableLockedFilters} /> @@ -495,7 +498,7 @@ const ListingComponent: React.FC = ({ options={filterOptions} setSelectedOptions={handleFilterChange} selectedOptions={queryParams.filters} - lockedFilters={lockedFilters} + lockedFilters={stableLockedFilters} /> @@ -511,7 +514,7 @@ const ListingComponent: React.FC = ({ .filter((value) => category !== 'sort') .map((value) => { // Check if this filter value is locked - const isLocked = lockedFilters[category]?.includes(value); + const isLocked = stableLockedFilters[category]?.includes(value); return (