чистка глобального стейта, перенос в локальный

codEnjoyer · Dec 15, 2023 · 49f5a2f · 49f5a2f
1 parent 78f1e18
commit 49f5a2f
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 87 deletions.
diff --git a/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx b/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx
@@ -42,7 +42,7 @@ const EmployeeMap: React.FC<IEmployeeMap> = observer(({user, formattedDate, logO
     return (
         <div className="employee-interface">
             <Coins coins={100} additionalClassname="coins"/>
-            <ChooseModuleWindow moduleName={moduleMenuStore.currentModule?.title}/>
+            <ChooseModuleWindow moduleName={moduleMenuStore.currentModule?.title.toUpperCase()}/>
             <UserProfile logOut={logOut} user={user} formattedDate={formattedDate}/>
             <CustomProgressBar className="progress-bar-wrapper" progress={54}/>
             <div className="geolocations">

diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -62,7 +62,11 @@ const MapMenu: React.FC = observer(() => {
             {
                 user?.is_superuser
                     ? <SuperUserMap/>
-                    : <EmployeeMap logOut={handleOnLogOut} user={user} formattedDate={formattedDate}/>
+                    : <EmployeeMap
+                        logOut={handleOnLogOut}
+                        user={user}
+                        formattedDate={formattedDate}
+                    />
             }
         </div>
     );

diff --git a/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx b/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx
@@ -13,6 +13,9 @@ import moduleMenuStore from "../../../store/moduleMenuStore.ts";
 
 import {IMapType} from "../../../types/MapType.ts";
 import {IModuleType} from "../../../types/ModuleType.ts";
+import CreateUnit from "./superUserControlPanel/CreateUnit.tsx";
+import {ILevelType} from "../../../types/LevelType.ts";
+import {map} from "mobx-state-tree/dist/types/complex-types/map";
 
 interface ISuperUserMap {
 
@@ -22,17 +25,30 @@ const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
     const [isUsersListModalOpen, setIsUserListModalOpen] = useState<boolean>(false)
 
     const [mapName, setMapName] = useState<string>("")
+    const [currentMap, setCurrentMap] = useState<IMapType | undefined>(undefined)
+    const [currentMapIndex, setCurrentMapIndex] = useState<number>(0)
+
     const [moduleName, setModuleName] = useState<string>("")
+    const [currentModule, setCurrentModule] = useState<IModuleType | undefined>(undefined)
+    const [currentModuleId, setCurrentModuleId] = useState<string>("")
+    const [currentModuleIndex, setCurrentModuleIndex] = useState<number>(0)
+
+
     const [levelName, setLevelName] = useState<string>("")
+    const [currentLevel, setCurrentLevel] = useState<ILevelType | undefined>(undefined)
+    const [currentLevelId, setCurrentLevelId] = useState<string>("")
+    const [currentLevelIndex, setCurrentLevelIndex] = useState<number>(0)
 
     useEffect(() => {
         mapMenuStore.fetchAvailableMaps()
-            .then(() => mapMenuStore.fetchMapById(mapMenuStore.availableMaps[mapMenuStore.currentMapIndex].id)
+            .then(() => mapMenuStore.fetchMapById(mapMenuStore.availableMaps[currentMapIndex].id)
                 .then(() => moduleMenuStore.fetchModules()))
     }, []);
 
     const handleOnClickOptionMap = useCallback((map: IMapType, indexMap: number) => {
-        mapMenuStore.selectMap(map).then(() => mapMenuStore.changeCurrentMapIndex(indexMap))
+        setCurrentMap(map)
+        setCurrentMapIndex(indexMap)
+        mapMenuStore.fetchMapById(map.id).then()
     }, [])
 
     const handleOnClickOptionModule = useCallback((module: IModuleType, index: number) => {
@@ -50,8 +66,7 @@ const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
     }, [])
 
     const handleOnClickCreateMap = useCallback((mapName: string) => {
-        mapName !== "" ? mapMenuStore.createMap(mapName) : alert("Введите название карты")
-        mapMenuStore.fetchAvailableMaps().then()
+        mapName !== "" ? mapMenuStore.createMap(mapName).then(() => currentMap ? mapMenuStore.fetchMapById(currentMap?.id).then() : undefined) : alert("Введите название карты")
     }, [])
 
 
@@ -64,6 +79,14 @@ const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
         moduleMenuStore.fetchModules().then()
     }, [])
 
+    const handleOnClickDeleteMap = useCallback((mapId: string) => {
+        mapMenuStore.deleteMap(mapId).then(() => mapMenuStore.fetchAvailableMaps())
+    }, [])
+
+    const handleOnClickDeleteModule = useCallback((moduleId: string) => {
+        moduleMenuStore.deleteModule(moduleId).then(() => moduleMenuStore.fetchModules())
+    }, [])
+
     return (
         <div>
             {
@@ -84,69 +107,29 @@ const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
 
             <br/>
 
-            <select className="available-maps">
-                <option value="-">-</option>
-                {mapMenuStore.availableMaps?.map((map, index) =>
-                    <option
-                        key={map.id}
-                        value={map.title}
-                        onClick={() => handleOnClickOptionMap(map, index)}
-                    >
-                        {map.title}
-                    </option>)
-                }
-            </select>
-
-            <CustomButton
-                text="Удалить выбранную карту"
-                className="delete-map__btn"
-                handleOnClick={() => mapMenuStore.deleteMap(mapMenuStore.mapMenu?.id)}
+            <CreateUnit
+                classNameSelect="available-maps"
+                handleOnClickOptionUnit={handleOnClickOptionMap}
+                handleOnClickDeleteUnit={handleOnClickDeleteMap}
+                unitName="map"
+                unitNameValue={mapName}
+                handleOnChangeUnitName={handleOnChangeMapName}
+                handleOnClickCreateUnit={handleOnClickCreateMap}
+                currentUnitId={currentMap?.id}
+                availableUnits={mapMenuStore.availableMaps}
             />
 
-            <div className="map-creator-item map-create">
-                <CustomInput
-                    type="text"
-                    value={mapName}
-                    handleOnChange={(e) => handleOnChangeMapName(e)}
-                />
-                <CustomAddButton
-                    handleOnClick={() => handleOnClickCreateMap(mapName)}
-                />
-            </div>
-
-
-            <div className="change-module">
-                <select className="available-modules">
-                    <option value="-">-</option>
-                    {moduleMenuStore.availableModules.map((module, index) =>
-                        <option
-                            key={module.id}
-                            value={module.title}
-                            onClick={() => handleOnClickOptionModule(module, index)}
-                        >
-                            {module.title}
-                        </option>)
-                    }
-                </select>
-
-
-                <CustomButton
-                    text="Удалить выбранный модуль"
-                    className="delete-module__btn"
-                    handleOnClick={() => moduleMenuStore.deleteModule(moduleMenuStore.currentModule?.id)}
-                />
-            </div>
-
-            <div className="map-creator-item module-create">
-                <CustomInput
-                    type="text"
-                    value={moduleName}
-                    handleOnChange={(e) => handleOnChangeModuleName(e)}
-                />
-                <CustomAddButton
-                    handleOnClick={() => handleOnClickCreateModule(moduleName)}
-                />
-            </div>
+            <CreateUnit
+                classNameSelect="available-modules"
+                handleOnClickOptionUnit={handleOnClickOptionModule}
+                handleOnClickDeleteUnit={handleOnClickDeleteModule}
+                unitName="module"
+                unitNameValue={moduleName}
+                handleOnChangeUnitName={handleOnChangeModuleName}
+                handleOnClickCreateUnit={handleOnClickCreateModule}
+                currentUnitId={currentModule?.id}
+                availableUnits={moduleMenuStore.availableModules}
+            />
         </div>
     );
 });

diff --git a/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx b/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import mapMenuStore from "../../../../store/mapMenuStore.ts";
 import CustomButton from "../../../../UIComponents/customButton/CustomButton.tsx";
 import CustomInput from "../../../../UIComponents/customInput/CustomInput.tsx";
 import CustomAddButton from "../../../../UIComponents/customAddButton/CustomAddButton.tsx";
@@ -9,12 +8,14 @@ import {ILevelType} from "../../../../types/LevelType.ts";
 
 interface IPropTypes {
     classNameSelect: string,
-    handleOnClickOptionUnit: (unit: IMapType | IModuleType | ILevelType, index: number) => void,
+    handleOnClickOptionUnit: (unit: IMapType & IModuleType & ILevelType, index: number) => void,
     handleOnClickDeleteUnit: (unitId: string) => void,
     unitName: string,
+    unitNameValue: string,
     handleOnChangeUnitName: (e: React.FormEvent<HTMLInputElement>) => void,
     handleOnClickCreateUnit: (unitName: string) => void,
-    currentUnitId: string
+    currentUnitId?: string,
+    availableUnits: IMapType[] & IModuleType[] & ILevelType[]
 }
 
 const CreateUnit: React.FC<IPropTypes> =
@@ -23,15 +24,27 @@ const CreateUnit: React.FC<IPropTypes> =
          handleOnClickOptionUnit,
          handleOnClickDeleteUnit,
          unitName,
+         unitNameValue,
          handleOnChangeUnitName,
          handleOnClickCreateUnit,
-         currentUnitId
+         currentUnitId,
+         availableUnits
      }) => {
+        let btnText = ""
+
+        if (unitName === "map") {
+            btnText = "Удалить выбранную карту"
+        } else if (unitName === "module") {
+            btnText = "Удалить выбранный модуль"
+        } else {
+            btnText = "Удалить выбранный уровень"
+        }
+
         return (
             <div>
                 <select className={classNameSelect}>
                     <option value="-">-</option>
-                    {mapMenuStore.availableMaps?.map((map, index) =>
+                    {availableUnits.map((map, index) =>
                         <option
                             key={map.id}
                             value={map.title}
@@ -43,19 +56,19 @@ const CreateUnit: React.FC<IPropTypes> =
                 </select>
 
                 <CustomButton
-                    text="Удалить выбранную карту"
+                    text={btnText}
                     className={`delete-${unitName}__btn`}
-                    handleOnClick={() => handleOnClickDeleteUnit(currentUnitId)}
+                    handleOnClick={() => currentUnitId ? handleOnClickDeleteUnit(currentUnitId) : undefined}
                 />
 
                 <div className={`map-creator-item ${unitName}-create`}>
                     <CustomInput
                         type="text"
-                        value={unitName}
+                        value={unitNameValue}
                         handleOnChange={(e) => handleOnChangeUnitName(e)}
                     />
                     <CustomAddButton
-                        handleOnClick={() => handleOnClickCreateUnit(unitName)}
+                        handleOnClick={() => handleOnClickCreateUnit(unitNameValue)}
                     />
                 </div>
             </div>

diff --git a/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx
@@ -35,7 +35,10 @@ const UserProfileModalBody: React.FC<IUserProfileModalProps> = ({user, formatted
             <div className="header-modal-user-profile">
                 <h3 className="user-profile-title">ПРОФИЛЬ СОТРУДНИКА</h3>
             </div>
-            <CustomButton className="user-profile-logout__btn" text="Выйти" handleOnClick={handleOnLogOut}/>
+            {logOut ?
+                <CustomButton className="user-profile-logout__btn" text="Выйти" handleOnClick={handleOnLogOut}/>
+                : null
+            }
             <UserInfo user={user} formattedDate={formattedDate}/>
             <Achievements achievements={achievements}/>
         </div>

diff --git a/frontend/src/store/mapMenuStore.ts b/frontend/src/store/mapMenuStore.ts
@@ -106,8 +106,8 @@ class MapMenuStore {
 
     // Для суперпользователя
 
-    createMap(mapName: string) {
-        axios.post("http://localhost:8000/maps/", {title: mapName}).then(() => this.fetchAvailableMaps())
+    async createMap(mapName: string) {
+        await axios.post("http://localhost:8000/maps/", {title: mapName}).then()
         this.newNameMap = ""
     }
 
@@ -125,10 +125,8 @@ class MapMenuStore {
         this.currentMapId = newMap.id
     }
 
-    deleteMap(mapId?: string) {
-        axios.delete("http://localhost:8000/maps/" + mapId)
-            .then(() => this.fetchAvailableMaps())
-            .catch(() => alert("Выбрана несуществующая карта"))
+    async deleteMap(mapId?: string) {
+        await axios.delete("http://localhost:8000/maps/" + mapId)
     }
 }
 

diff --git a/frontend/src/store/moduleMenuStore.ts b/frontend/src/store/moduleMenuStore.ts
@@ -43,6 +43,7 @@ class ModuleMenuStore {
     }
 
     async createModule(title: string) {
+        console.log(title)
         await axios.post("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/", {
             map_id: mapMenuStore.currentMapId,
             title: title,
@@ -59,7 +60,7 @@ class ModuleMenuStore {
     }
 
     async deleteModule(id?: string) {
-        axios.delete("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/" + id).catch(() => alert("Выберите модуль"))
+        await axios.delete("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/" + id).catch(() => alert("Выберите модуль"))
     }
 
     updateModuleById(mapId: string, id: string, title?: string, previousModuleId?: string, nextModuleId?: string, levels?: string[]) {

diff --git a/frontend/src/types/LevelType.ts b/frontend/src/types/LevelType.ts
@@ -1,6 +1,6 @@
 import {ITaskType, ITheoryUnitType} from "./TaskType.ts";
 
-export interface ILevelType {
+export type ILevelType = {
     id: string,
     title: string,
     body?: string,

diff --git a/frontend/src/types/MapType.ts b/frontend/src/types/MapType.ts
@@ -1,4 +1,4 @@
-export interface IMapType {
+export type IMapType = {
     id: string,
     title: string,
     modules_ids: string[]

diff --git a/frontend/src/types/ModuleType.ts b/frontend/src/types/ModuleType.ts
@@ -1,4 +1,4 @@
-export interface IModuleType {
+export type IModuleType = {
     map_id: string,
     title: string,
     previous_module_id: string,