From 1baba25303179da118d0693fc281b07eb08d6c49 Mon Sep 17 00:00:00 2001 From: taDuc Date: Tue, 12 May 2026 04:05:00 +0700 Subject: [PATCH] refactor: modularize Map component logic into dedicated hooks for map instance management, layers, interactions, and state synchronization --- src/app/layout.tsx | 2 +- src/app/page.tsx | 8 +- src/layout/AppHeader.tsx | 13 +- src/layout/AppSidebar.tsx | 7 +- src/uhm/components/Map.tsx | 1908 +------------------ src/uhm/components/map/mapUtils.ts | 601 ++++++ src/uhm/components/map/useMapInstance.ts | 142 ++ src/uhm/components/map/useMapInteraction.ts | 317 +++ src/uhm/components/map/useMapLayers.ts | 607 ++++++ src/uhm/components/map/useMapSync.ts | 193 ++ 10 files changed, 1956 insertions(+), 1842 deletions(-) create mode 100644 src/uhm/components/map/mapUtils.ts create mode 100644 src/uhm/components/map/useMapInstance.ts create mode 100644 src/uhm/components/map/useMapInteraction.ts create mode 100644 src/uhm/components/map/useMapLayers.ts create mode 100644 src/uhm/components/map/useMapSync.ts diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b6b20bb..4d7540d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -19,7 +19,7 @@ export default function RootLayout({ - + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index d8c2648..bbbb49a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -520,8 +520,8 @@ export default function Page() { type="button" onClick={() => handleToggleBackgroundLayer(layer.id)} className={`rounded-md border px-2.5 py-1 text-xs transition ${active - ? "border-sky-400/40 bg-sky-500/10 text-sky-200" - : "border-white/10 bg-white/[0.03] text-slate-400 hover:text-slate-200" + ? "border-sky-400/40 bg-sky-500/10 text-sky-200" + : "border-white/10 bg-white/[0.03] text-slate-400 hover:text-slate-200" }`} > {layer.label} @@ -549,8 +549,8 @@ export default function Page() { })); }} className={`rounded-md border px-2.5 py-1 text-xs capitalize transition ${active - ? "border-emerald-400/40 bg-emerald-500/10 text-emerald-200" - : "border-white/10 bg-white/[0.03] text-slate-400 hover:text-slate-200" + ? "border-emerald-400/40 bg-emerald-500/10 text-emerald-200" + : "border-white/10 bg-white/[0.03] text-slate-400 hover:text-slate-200" }`} > {typeKey.replaceAll("_", " ")} diff --git a/src/layout/AppHeader.tsx b/src/layout/AppHeader.tsx index 53d95c3..bec3dcf 100644 --- a/src/layout/AppHeader.tsx +++ b/src/layout/AppHeader.tsx @@ -5,7 +5,7 @@ import UserDropdown from "@/components/header/UserDropdown"; import { useSidebar } from "@/context/SidebarContext"; import Image from "next/image"; import Link from "next/link"; -import React, { useState ,useEffect,useRef} from "react"; +import React, { useState, useEffect, useRef } from "react"; const AppHeader: React.FC = () => { const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false); @@ -156,21 +156,20 @@ const AppHeader: React.FC = () => {
{/* */} {/* */} {/* */} - {/* */} + {/* */} {/* */}
{/* */} - - + +
diff --git a/src/layout/AppSidebar.tsx b/src/layout/AppSidebar.tsx index 17a0d6c..0c2b973 100644 --- a/src/layout/AppSidebar.tsx +++ b/src/layout/AppSidebar.tsx @@ -54,7 +54,7 @@ const ALL_NAV_ITEMS: NavItem[] = [ name: "Tài Khoản", path: "/user/account", }, - + ]; const OTHERS_ITEMS: NavItem[] = [ @@ -164,11 +164,10 @@ const AppSidebar: React.FC = () => { {nav.subItems ? (