feat(site-finder): deep-link tabs via ?tab= URL param #86
1 changed files with 52 additions and 3 deletions
|
|
@ -1,8 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import type { FeatureCollection } from "geojson";
|
||||
|
||||
import { CadInput } from "@/components/site-finder/CadInput";
|
||||
|
|
@ -47,6 +48,12 @@ const TABS: Array<{ id: TabId; label: string }> = [
|
|||
{ id: "market", label: "Рынок" },
|
||||
];
|
||||
|
||||
const TAB_IDS = TABS.map((t) => t.id);
|
||||
|
||||
function isTabId(v: string | null | undefined): v is TabId {
|
||||
return !!v && (TAB_IDS as readonly string[]).includes(v);
|
||||
}
|
||||
|
||||
// ── KPI helpers ───────────────────────────────────────────────────────────────
|
||||
|
||||
type KpiColor = "neutral" | "amber" | "green" | "red" | "blue";
|
||||
|
|
@ -73,12 +80,44 @@ function scoreKpiColor(score: number, max: number): KpiColor {
|
|||
|
||||
// ── Page ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function SiteFinderPage() {
|
||||
function SiteFinderContent() {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const { mutate, data, isPending, error, isIdle } = useSiteAnalysis();
|
||||
const [isochrones, setIsochrones] = useState<FeatureCollection | undefined>(
|
||||
undefined,
|
||||
);
|
||||
const [tab, setTab] = useState<TabId>("overview");
|
||||
// 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.
|
||||
function setTab(next: TabId) {
|
||||
setTabState(next);
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (next === "overview") {
|
||||
params.delete("tab");
|
||||
} else {
|
||||
params.set("tab", next);
|
||||
}
|
||||
const qs = params.toString();
|
||||
// Используем 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.
|
||||
// setState с тем же значением React сам бэйлит через Object.is, поэтому
|
||||
// guard по tab не нужен (и не вводит stale-closure через eslint-disable).
|
||||
useEffect(() => {
|
||||
const urlTab = searchParams.get("tab");
|
||||
setTabState(isTabId(urlTab) ? urlTab : "overview");
|
||||
}, [searchParams]);
|
||||
|
||||
function handleAnalyze(cadNum: string) {
|
||||
setIsochrones(undefined);
|
||||
|
|
@ -342,3 +381,13 @@ export default function SiteFinderPage() {
|
|||
</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