Address PR review comments

- Fix import order: react-relay before react-router
- Add parentheses around arrow function parameter
- Sync category filter with URL param changes, not just on mount

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2026-03-19 18:33:05 +01:00
parent ad7a3ecbe9
commit c2a1843c67

View File

@@ -33,7 +33,6 @@ import {
} from "@probo/ui"; } from "@probo/ui";
import { MeasureBadge } from "@probo/ui/src/Molecules/Badge/MeasureBadge"; import { MeasureBadge } from "@probo/ui/src/Molecules/Badge/MeasureBadge";
import { type ChangeEventHandler, useEffect, useRef, useState, useTransition } from "react"; import { type ChangeEventHandler, useEffect, useRef, useState, useTransition } from "react";
import { useSearchParams } from "react-router";
import { import {
ConnectionHandler, ConnectionHandler,
graphql, graphql,
@@ -43,6 +42,7 @@ import {
usePaginationFragment, usePaginationFragment,
usePreloadedQuery, usePreloadedQuery,
} from "react-relay"; } from "react-relay";
import { useSearchParams } from "react-router";
import type { MeasuresPageDeleteMutation } from "#/__generated__/core/MeasuresPageDeleteMutation.graphql"; import type { MeasuresPageDeleteMutation } from "#/__generated__/core/MeasuresPageDeleteMutation.graphql";
import type { MeasuresPageFragment$key } from "#/__generated__/core/MeasuresPageFragment.graphql"; import type { MeasuresPageFragment$key } from "#/__generated__/core/MeasuresPageFragment.graphql";
@@ -166,12 +166,12 @@ export default function MeasuresPage({ queryRef }: MeasuresPageProps) {
} }
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const initialCategory = searchParams.get("category"); const urlCategory = searchParams.get("category") ?? null;
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
const [queryFilter, setQueryFilter] = useState<string | null>(null); const [queryFilter, setQueryFilter] = useState<string | null>(null);
const [stateFilter, setStateFilter] = useState<MeasureState | null>(null); const [stateFilter, setStateFilter] = useState<MeasureState | null>(null);
const [categoryFilter, setCategoryFilter] = useState<string | null>(initialCategory); const [categoryFilter, setCategoryFilter] = useState<string | null>(urlCategory);
const { data, loadNext, hasNext, isLoadingNext, refetch } const { data, loadNext, hasNext, isLoadingNext, refetch }
= usePaginationFragment<MeasuresPageRefetchQuery, MeasuresPageFragment$key>( = usePaginationFragment<MeasuresPageRefetchQuery, MeasuresPageFragment$key>(
@@ -194,11 +194,12 @@ export default function MeasuresPage({ queryRef }: MeasuresPageProps) {
}; };
useEffect(() => { useEffect(() => {
if (initialCategory) { if (urlCategory !== categoryFilter) {
refetchFilters({ category: initialCategory }); setCategoryFilter(urlCategory);
refetchFilters({ category: urlCategory });
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, [urlCategory]);
const handleQueryFilterChange = (value: string) => { const handleQueryFilterChange = (value: string) => {
const newQuery = value === "" ? null : value; const newQuery = value === "" ? null : value;
@@ -215,7 +216,7 @@ export default function MeasuresPage({ queryRef }: MeasuresPageProps) {
const handleCategoryFilterChange = (value: string) => { const handleCategoryFilterChange = (value: string) => {
const newCategory = value === "ALL" ? null : value; const newCategory = value === "ALL" ? null : value;
setCategoryFilter(newCategory); setCategoryFilter(newCategory);
setSearchParams(prev => { setSearchParams((prev) => {
const next = new URLSearchParams(prev); const next = new URLSearchParams(prev);
if (newCategory) { if (newCategory) {
next.set("category", newCategory); next.set("category", newCategory);