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:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user