diff --git a/apps/console/src/pages/organizations/measures/MeasureDetailPage.tsx b/apps/console/src/pages/organizations/measures/MeasureDetailPage.tsx index fa344b103..ef52c405d 100644 --- a/apps/console/src/pages/organizations/measures/MeasureDetailPage.tsx +++ b/apps/console/src/pages/organizations/measures/MeasureDetailPage.tsx @@ -1,7 +1,6 @@ import { getMeasureStateLabel, measureStates, - slugify, sprintf, } from "@probo/helpers"; import { useTranslate } from "@probo/i18n"; @@ -148,7 +147,7 @@ export default function MeasureDetailPage(props: Props) { ? [ { label: measure.category, - to: `/organizations/${organizationId}/measures/category/${slugify(measure.category)}`, + to: `/organizations/${organizationId}/measures?category=${encodeURIComponent(measure.category)}`, }, ] : []), diff --git a/apps/console/src/pages/organizations/measures/MeasuresPage.tsx b/apps/console/src/pages/organizations/measures/MeasuresPage.tsx index 0c5af7121..e9185d13e 100644 --- a/apps/console/src/pages/organizations/measures/MeasuresPage.tsx +++ b/apps/console/src/pages/organizations/measures/MeasuresPage.tsx @@ -32,7 +32,8 @@ import { useToast, } from "@probo/ui"; import { MeasureBadge } from "@probo/ui/src/Molecules/Badge/MeasureBadge"; -import { type ChangeEventHandler, useRef, useState, useTransition } from "react"; +import { type ChangeEventHandler, useEffect, useRef, useState, useTransition } from "react"; +import { useSearchParams } from "react-router"; import { ConnectionHandler, graphql, @@ -164,10 +165,13 @@ export default function MeasuresPage({ queryRef }: MeasuresPageProps) { throw new Error("invalid node type"); } + const [searchParams, setSearchParams] = useSearchParams(); + const initialCategory = searchParams.get("category"); + const [isPending, startTransition] = useTransition(); const [queryFilter, setQueryFilter] = useState(null); const [stateFilter, setStateFilter] = useState(null); - const [categoryFilter, setCategoryFilter] = useState(null); + const [categoryFilter, setCategoryFilter] = useState(initialCategory); const { data, loadNext, hasNext, isLoadingNext, refetch } = usePaginationFragment( @@ -189,6 +193,13 @@ export default function MeasuresPage({ queryRef }: MeasuresPageProps) { }); }; + useEffect(() => { + if (initialCategory) { + refetchFilters({ category: initialCategory }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const handleQueryFilterChange = (value: string) => { const newQuery = value === "" ? null : value; setQueryFilter(newQuery); @@ -204,6 +215,15 @@ export default function MeasuresPage({ queryRef }: MeasuresPageProps) { const handleCategoryFilterChange = (value: string) => { const newCategory = value === "ALL" ? null : value; setCategoryFilter(newCategory); + setSearchParams(prev => { + const next = new URLSearchParams(prev); + if (newCategory) { + next.set("category", newCategory); + } else { + next.delete("category"); + } + return next; + }, { replace: true }); refetchFilters({ category: newCategory }); }; diff --git a/apps/console/src/routes/measureRoutes.ts b/apps/console/src/routes/measureRoutes.ts index 110bed6cb..00fac7bf0 100644 --- a/apps/console/src/routes/measureRoutes.ts +++ b/apps/console/src/routes/measureRoutes.ts @@ -22,12 +22,6 @@ export const measureRoutes = [ () => import("#/pages/organizations/measures/MeasuresPageLoader"), ), - children: [ - { - path: "category/:categoryId", - Component: Fragment, - }, - ], }, { path: "measures/:measureId",