переделал данных в уровень

codEnjoyer · Dec 12, 2023 · 5af0164 · 5af0164
1 parent 74a7e35
commit 5af0164
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 23 deletions.
diff --git a/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx b/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx
@@ -1,19 +1,27 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
+
+
 import Coins from "../UIMapMenu/Coins.tsx";
 import ChooseModuleWindow from "../UIMapMenu/ChooseModuleWindow.tsx";
 import mapMenuStore from "../../../store/mapMenuStore.ts";
 import UserProfile from "../UIMapMenu/UserProfile/UserProfile.tsx";
 import Level from "../UIMapMenu/Level/Level.tsx";
 import {IUserType} from "../../../types/UserType.ts";
+
 import {observer} from "mobx-react-lite";
 import moduleMenuStore from "../../../store/moduleMenuStore.ts";
 
+import {ILevelType} from "../../../types/LevelType.ts";
+
+
 interface IEmployeeMap {
     user?: IUserType,
     formattedDate: string
 }
 
 const EmployeeMap: React.FC<IEmployeeMap> = observer(({user, formattedDate}) => {
+    const [currentLevel, setCurrentLevel] = useState<ILevelType>()
+
     useEffect(() => {
         mapMenuStore.fetchAvailableMaps().then(() => {
             mapMenuStore.fetchMapById(mapMenuStore.availableMaps[0].id).then(() => {
@@ -36,8 +44,10 @@ const EmployeeMap: React.FC<IEmployeeMap> = observer(({user, formattedDate}) =>
             <div className="geolocations">
                 <div className="geolocations__wrapper">
                     {mapMenuStore.availableLevels.map((level, index) => {
-                        return <Level id={(index + 1).toString()} key={level.id} title={level.title}
-                                      theoryUnits={level.theoryUnits} taskUnits={level.taskUnits}/>
+                        return <Level
+                            id={(index + 1).toString()}
+                            level={level}
+                        />
                     })}
                 </div>
             </div>

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/Level.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/Level.tsx
@@ -4,15 +4,14 @@ import ModalLevelBody from "./ModalLevelBody.tsx";
 import {ITheoryUnitType} from "../../../../types/TheoryUnitType.ts";
 import {ITaskType} from "../../../../types/TaskType.ts";
 import levelStore from "../../../../store/levelStore.ts";
+import {ILevelType} from "../../../../types/LevelType.ts";
 
 interface IModuleProps {
-    id: string,
-    title: string,
-    theoryUnits?: ITheoryUnitType[],
-    taskUnits?: ITaskType[]
+    id: number,
+    level: ILevelType,
 }
 
-const Level: React.FC<IModuleProps> = ({id, title, theoryUnits, taskUnits}) => {
+const Level: React.FC<IModuleProps> = ({id, level}) => {
     const [isOpenModalWindow, setOpenModalWindow] = useState(false)
     const classNameGeolocation = "geolocation-" + id
 
@@ -25,7 +24,7 @@ const Level: React.FC<IModuleProps> = ({id, title, theoryUnits, taskUnits}) => {
                         setOpenModalWindow(!isOpenModalWindow)
                         levelStore.closeLevel()
                     }}
-                    body={<ModalLevelBody key={id} title={title} theoryUnits={theoryUnits} taskUnits={taskUnits}/>}
+                    body={<ModalLevelBody level={level}/>}
                 />
                 : ""}
 
@@ -44,7 +43,6 @@ const Level: React.FC<IModuleProps> = ({id, title, theoryUnits, taskUnits}) => {
                         </radialGradient>
                     </defs>
                 </svg>
-
             </div>
         </div>
     );

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -10,25 +10,27 @@ import {ITaskType} from "../../../../types/TaskType.ts";
 import {IMenuItemType} from "../../../../types/MenuItemType.ts";
 import levelStore from "../../../../store/levelStore.ts";
 import {observer} from "mobx-react-lite";
+import {ILevelType} from "../../../../types/LevelType.ts";
 
 interface IModalLevelProps {
-    title: string,
-    theoryUnits?: ITheoryUnitType[],
-    taskUnits?: ITaskType[]
+    level: ILevelType
 }
 
-const ModalLevelBody: React.FC<IModalLevelProps> = observer(({title, theoryUnits = [], taskUnits = []}) => {
+const ModalLevelBody: React.FC<IModalLevelProps> = observer(({level}) => {
     const bodyHeader = renderBodyHeader()
+
+
+
     const menuItems: IMenuItemType[] = [
         {
             type: "theory",
-            length: theoryUnits.length,
-            item: theoryUnits
+            length: level?.theoryUnits.length,
+            item: level?.theoryUnits
         },
         {
-            length: taskUnits.length,
+            length: level?.taskUnits.length,
             type: "tests",
-            item: taskUnits
+            item: level?.taskUnits
         }
     ]
 
@@ -39,7 +41,7 @@ const ModalLevelBody: React.FC<IModalLevelProps> = observer(({title, theoryUnits
                     <ArrowLeft/>
                 </div>
                 <div className="level-name">
-                    {title.toUpperCase()}
+                    {level.title.toUpperCase()}
                 </div>
                 <div className="right-arrow">
                     <ArrowRight/>
@@ -101,11 +103,11 @@ const ModalLevelBody: React.FC<IModalLevelProps> = observer(({title, theoryUnits
         }
     }
 
-    function renderTasks(menuItems: IMenuItemType[], theoryUnits: ITheoryUnitType[], taskUnits: ITaskType[]) {
+    function renderTasks(menuItems?: IMenuItemType[], theoryUnits?: ITheoryUnitType[], taskUnits?: ITaskType[]) {
         console.log(levelStore.chosenTaskIndex)
-        if (levelStore.chosenTaskIndex <= menuItems[0].length)
+        if (menuItems && levelStore.chosenTaskIndex <= menuItems[0].length)
             return renderChosenTask(theoryUnits[levelStore.chosenTaskIndex - 1], "theory")
-        if (levelStore.chosenTaskIndex <= menuItems[0].length + menuItems[1].length)
+        if (menuItems && levelStore.chosenTaskIndex <= menuItems[0].length + menuItems[1].length)
             return renderChosenTask(taskUnits[levelStore.chosenTaskIndex - menuItems[0].length - 1], "test")
 
     }
@@ -120,7 +122,7 @@ const ModalLevelBody: React.FC<IModalLevelProps> = observer(({title, theoryUnits
                 : ""
             }
 
-            {renderTasks(menuItems, theoryUnits, taskUnits)}
+            {renderTasks(menuItems, level.theoryUnits, level.taskUnits)}
         </div>
     );
 });

diff --git a/frontend/src/types/LevelType.ts b/frontend/src/types/LevelType.ts
@@ -0,0 +1,9 @@
+import {ITaskType, ITheoryUnitType} from "./TaskType.ts";
+
+export interface ILevelType {
+    id: string,
+    title: string,
+    body?: string,
+    theoryUnits?: ITheoryUnitType[]
+    taskUnits?: ITaskType[]
+}