feat: role system

src/widgets/CitySelector/index.tsx

@@ -8,16 +8,40 @@ import {
   Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { cityStore, selectedCityStore } from "@shared";
+import { authStore, cityStore, selectedCityStore, type City } from "@shared";
 import { MapPin } from "lucide-react";
 
 export const CitySelector: React.FC = observer(() => {
-  const { getCities, cities } = cityStore;
   const { selectedCity, setSelectedCity } = selectedCityStore;
+  const canReadCities = authStore.canRead("cities");
 
   useEffect(() => {
-    getCities("ru");
-  }, []);
+    if (canReadCities) {
+      cityStore.getCities("ru");
+      return;
+    }
+    authStore.fetchMeCities().catch(() => undefined);
+  }, [canReadCities]);
+
+  const baseCities: City[] = canReadCities
+    ? cityStore.cities["ru"].data
+    : authStore.meCities["ru"].map((uc) => ({
+        id: uc.city_id,
+        name: uc.name,
+        country: "",
+        country_code: "",
+        arms: "",
+      }));
+
+  const currentCities: City[] = selectedCity?.id
+    ? (() => {
+        const exists = baseCities.some((city) => city.id === selectedCity.id);
+        if (exists) {
+          return baseCities;
+        }
+        return [selectedCity, ...baseCities];
+      })()
+    : baseCities;
 
   const handleCityChange = (event: SelectChangeEvent<string>) => {
     const cityId = event.target.value;
@@ -26,14 +50,12 @@ export const CitySelector: React.FC = observer(() => {
       return;
     }
 
-    const city = cities["ru"].data.find((c) => c.id === Number(cityId));
+    const city = currentCities.find((c) => c.id === Number(cityId));
     if (city) {
       setSelectedCity(city);
     }
   };
 
-  const currentCities = cities["ru"].data;
-
   return (
     <Box className="flex items-center gap-2">
       <MapPin size={16} className="text-white" />
@@ -51,16 +73,13 @@ export const CitySelector: React.FC = observer(() => {
             "&:hover .MuiOutlinedInput-notchedOutline": {
               borderColor: "rgba(255, 255, 255, 0.5)",
             },
-            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            "&.Mui.focused .MuiOutlinedInput-notchedOutline": {
               borderColor: "white",
             },
             "& .MuiSvgIcon-root": {
               color: "white",
             },
           }}
-          MenuProps={{
-            PaperProps: {},
-          }}
         >
           <MenuItem value="">
             <Typography variant="body2">Выберите город</Typography>