NestJS backend rewrite; migrate client to FluentUI V9

client/src/pages/MapTest.tsx

@@ -1,14 +1,19 @@
-import { Container, Stack, Tabs } from '@mantine/core'
-import MapComponent from '../components/map/MapComponent'
-import { useEffect } from 'react'
-import { initializeObjectsState } from '../store/objects'
-import { deleteMapTab, setCurrentTab, useAppStore } from '../store/app'
-import { initializeMapState, useMapStore } from '../store/map'
-import { v4 as uuidv4 } from 'uuid'
+import { useEffect } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { Tab, TabList } from "@fluentui/react-tabs";
+import MapComponent from "../components/map/MapComponent";
+
+import {
+    useAppStore,
+    setCurrentTab,
+    deleteMapTab,
+} from "../store/app";
+import { initializeMapState, useMapStore } from "../store/map";
+import { initializeObjectsState } from "../store/objects";
 
 function MapTest() {
-    const { mapTab, currentTab } = useAppStore()
-    const { id } = useMapStore()
+    const { mapTab, currentTab } = useAppStore();
+    const { id } = useMapStore();
 
     const tabs = [
         {
@@ -18,65 +23,65 @@ function MapTest() {
             district: 146,
         },
         // {
-        //     id: uuidv4(),
-        //     year: 2023,
-        //     region: 11,
-        //     district: 146,
+        //   id: uuidv4(),
+        //   year: 2023,
+        //   region: 11,
+        //   district: 146,
         // },
-    ]
+    ];
 
     useEffect(() => {
-        tabs.map(tab => useAppStore.setState((state) => {
-            initializeObjectsState(tab.id, tab.region, tab.district, null, tab.year)
-            initializeMapState(tab.id)
+        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
-                    }
-                }
-            }
-        }))
+                return {
+                    mapTab: {
+                        ...state.mapTab,
+                        [tab.id]: {
+                            year: tab.year,
+                            region: tab.region,
+                            district: tab.district,
+                        },
+                    },
+                };
+            });
+        });
 
-        setCurrentTab(tabs[0].id)
+        setCurrentTab(tabs[0].id);
 
         return () => {
-            tabs.map(tab => deleteMapTab(tab.id))
-        }
-    }, [])
+            tabs.forEach((tab) => deleteMapTab(tab.id));
+        };
+    }, []);
 
     return (
-        <Container fluid w='100%' pos='relative' p={0}>
-            <Tabs h='100%' variant='default' value={currentTab} onChange={setCurrentTab} keepMounted={true}>
-                <Stack gap={0} h='100%'>
-                    <Tabs.List>
-                        {Object.entries(mapTab).map(([key]) => (
-                            <Tabs.Tab value={key} key={key}>
-                                {id[key]?.mapLabel}
-                            </Tabs.Tab>
-                        ))}
-                    </Tabs.List>
-
+        <div style={{ height: "100%", width: "100%", position: "relative" }}>
+            <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+                <TabList
+                    selectedValue={currentTab}
+                    onTabSelect={(_, data) => setCurrentTab(data.value as string)}
+                >
                     {Object.entries(mapTab).map(([key]) => (
-                        <Tabs.Panel value={key} key={key} h='100%' pos='relative'>
-                            <MapComponent
-                                key={key}
-                                id={key}
-                                active={currentTab === key}
-                            />
-
-                        </Tabs.Panel>
+                        <Tab value={key} key={key}>
+                            {id[key]?.mapLabel ?? `Tab ${key}`}
+                        </Tab>
                     ))}
-                </Stack>
+                </TabList>
 
-            </Tabs>
-
-        </Container>
-    )
+                <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>
+            </div>
+        </div>
+    );
 }
 
-export default MapTest
+export default MapTest;