Region/district select; proper Map tabs

client/src/pages/MapTest.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from "react";
-import { v4 as uuidv4 } from "uuid";
 import { Tab, TabList } from "@fluentui/react-tabs";
 import MapComponent from "../components/map/MapComponent";
 
@@ -7,76 +5,49 @@ import {
     useAppStore,
     setCurrentTab,
     deleteMapTab,
+    addMapTab,
 } from "../store/app";
 import { initializeMapState, useMapStore } from "../store/map";
 import { initializeObjectsState } from "../store/objects";
+import { Button } from "@fluentui/react-components";
+import { Add12Filled, Dismiss12Filled, Map16Regular } from "@fluentui/react-icons";
 
 function MapTest() {
-    const { mapTab, currentTab } = useAppStore();
-    const { id } = useMapStore();
-
-    const tabs = [
-        {
-            id: uuidv4(),
-            year: 2018,
-            region: 11,
-            district: 146,
-        },
-        // {
-        //   id: uuidv4(),
-        //   year: 2023,
-        //   region: 11,
-        //   district: 146,
-        // },
-    ];
-
-    useEffect(() => {
-        tabs.forEach((tab) => {
-            useAppStore.setState((state) => {
-                initializeObjectsState(tab.id, tab.region, tab.district, null, tab.year);
-                initializeMapState(tab.id);
-
-                return {
-                    mapTab: {
-                        ...state.mapTab,
-                        [tab.id]: {
-                            year: tab.year,
-                            region: tab.region,
-                            district: tab.district,
-                        },
-                    },
-                };
-            });
-        });
-
-        setCurrentTab(tabs[0].id);
-
-        return () => {
-            tabs.forEach((tab) => deleteMapTab(tab.id));
-        };
-    }, []);
+    const { mapTab, currentTab } = useAppStore()
+    const { id } = useMapStore()
 
     return (
         <div style={{ height: "100%", width: "100%", position: "relative" }}>
             <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
                 <TabList
+                    size='small'
                     selectedValue={currentTab}
                     onTabSelect={(_, data) => setCurrentTab(data.value as string)}
+                    style={{ borderBottom: '1px solid var(--colorNeutralShadowKey)' }}
                 >
                     {Object.entries(mapTab).map(([key]) => (
-                        <Tab value={key} key={key}>
+                        <Tab key={key} value={key} icon={<Map16Regular />}>
                             {id[key]?.mapLabel ?? `Tab ${key}`}
+
+                            <Button style={{ marginLeft: '0.5rem' }} size='small' icon={<Dismiss12Filled />} appearance='subtle' onClick={(e) => {
+                                e.stopPropagation()
+                                deleteMapTab(key)
+                            }} />
                         </Tab>
                     ))}
+
+                    <Button icon={<Add12Filled />} title="Открыть новую вкладку" appearance='subtle' onClick={() => {
+                        const newId = addMapTab();
+                        initializeObjectsState(newId, null, null, null, null);
+                        initializeMapState(newId);
+                    }} />
                 </TabList>
 
                 <div style={{ flexGrow: 1, position: "relative" }}>
                     {Object.entries(mapTab).map(([key]) =>
-                        currentTab === key ? (
-                            <div key={key} style={{ height: "100%", position: "relative" }}>
-                                <MapComponent key={key} id={key} active={true} />
-                            </div>
-                        ) : null
+                    (<div key={key} style={{ height: "100%", position: "relative", display: currentTab === key ? 'unset' : 'none' }}>
+                        <MapComponent key={key} id={key} active={currentTab === key} />
+                    </div>)
                     )}
                 </div>
             </div>