fix(site-finder): address PR #86 auto-review minor recommendations
- Use usePathname() for router.replace fallback (avoid dangling "?" in Next 15)
- Remove stale-closure guard in useEffect — React bails Object.is, no eslint-disable
- Wrap page in <Suspense> for useSearchParams (Next 15 App Router req for static)
- Lazy useState initializer — skip wasted CPU on re-renders
Per auto-review on c47e56b.
This commit is contained in:
parent
c47e56b931
commit
6aa8222e3b
1 changed files with 27 additions and 13 deletions
|
|
@ -1,9 +1,9 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { Suspense, useEffect, useState } from "react";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter, useSearchParams } from "next/navigation";
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||||
import type { FeatureCollection } from "geojson";
|
import type { FeatureCollection } from "geojson";
|
||||||
|
|
||||||
import { CadInput } from "@/components/site-finder/CadInput";
|
import { CadInput } from "@/components/site-finder/CadInput";
|
||||||
|
|
@ -80,19 +80,21 @@ function scoreKpiColor(score: number, max: number): KpiColor {
|
||||||
|
|
||||||
// ── Page ──────────────────────────────────────────────────────────────────────
|
// ── Page ──────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
export default function SiteFinderPage() {
|
function SiteFinderContent() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const initialTab: TabId = (() => {
|
|
||||||
const t = searchParams.get("tab");
|
|
||||||
return isTabId(t) ? t : "overview";
|
|
||||||
})();
|
|
||||||
|
|
||||||
const { mutate, data, isPending, error, isIdle } = useSiteAnalysis();
|
const { mutate, data, isPending, error, isIdle } = useSiteAnalysis();
|
||||||
const [isochrones, setIsochrones] = useState<FeatureCollection | undefined>(
|
const [isochrones, setIsochrones] = useState<FeatureCollection | undefined>(
|
||||||
undefined,
|
undefined,
|
||||||
);
|
);
|
||||||
const [tab, setTabState] = useState<TabId>(initialTab);
|
// Lazy init: считаем initialTab один раз на mount (useState всё равно
|
||||||
|
// игнорирует initializer после первого render — не тратим CPU).
|
||||||
|
const [tab, setTabState] = useState<TabId>(() => {
|
||||||
|
const t = searchParams.get("tab");
|
||||||
|
return isTabId(t) ? t : "overview";
|
||||||
|
});
|
||||||
|
|
||||||
// Sync tab → URL query (?tab=env). overview = default, не пишем в URL.
|
// Sync tab → URL query (?tab=env). overview = default, не пишем в URL.
|
||||||
function setTab(next: TabId) {
|
function setTab(next: TabId) {
|
||||||
|
|
@ -104,15 +106,17 @@ export default function SiteFinderPage() {
|
||||||
params.set("tab", next);
|
params.set("tab", next);
|
||||||
}
|
}
|
||||||
const qs = params.toString();
|
const qs = params.toString();
|
||||||
router.replace(qs ? `?${qs}` : "?", { scroll: false });
|
// Используем pathname вместо голого "?" — Next 15 App Router не всегда
|
||||||
|
// чисто чистит query при `router.replace("?")` (dangling `?` остаётся).
|
||||||
|
router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Listen to back/forward navigation — reflect URL tab in state
|
// Listen to back/forward navigation — reflect URL tab in state.
|
||||||
|
// setState с тем же значением React сам бэйлит через Object.is, поэтому
|
||||||
|
// guard по tab не нужен (и не вводит stale-closure через eslint-disable).
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const urlTab = searchParams.get("tab");
|
const urlTab = searchParams.get("tab");
|
||||||
const validTab: TabId = isTabId(urlTab) ? urlTab : "overview";
|
setTabState(isTabId(urlTab) ? urlTab : "overview");
|
||||||
if (validTab !== tab) setTabState(validTab);
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [searchParams]);
|
}, [searchParams]);
|
||||||
|
|
||||||
function handleAnalyze(cadNum: string) {
|
function handleAnalyze(cadNum: string) {
|
||||||
|
|
@ -377,3 +381,13 @@ export default function SiteFinderPage() {
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// useSearchParams() в Next 15 App Router throw'ит при static rendering без
|
||||||
|
// <Suspense> boundary — поэтому оборачиваем page-level.
|
||||||
|
export default function SiteFinderPage() {
|
||||||
|
return (
|
||||||
|
<Suspense fallback={null}>
|
||||||
|
<SiteFinderContent />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue