diff --git a/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx b/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx index ced93aa..4138a94 100644 --- 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 = observer(({user, formattedDate}) => { + const [currentLevel, setCurrentLevel] = useState() + useEffect(() => { mapMenuStore.fetchAvailableMaps().then(() => { mapMenuStore.fetchMapById(mapMenuStore.availableMaps[0].id).then(() => { @@ -36,8 +44,10 @@ const EmployeeMap: React.FC = observer(({user, formattedDate}) =>
{mapMenuStore.availableLevels.map((level, index) => { - return + return })}
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/Level.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/Level.tsx index 00a9e3e..6ee0c27 100644 --- 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 = ({id, title, theoryUnits, taskUnits}) => { +const Level: React.FC = ({id, level}) => { const [isOpenModalWindow, setOpenModalWindow] = useState(false) const classNameGeolocation = "geolocation-" + id @@ -25,7 +24,7 @@ const Level: React.FC = ({id, title, theoryUnits, taskUnits}) => { setOpenModalWindow(!isOpenModalWindow) levelStore.closeLevel() }} - body={} + body={} /> : ""} @@ -44,7 +43,6 @@ const Level: React.FC = ({id, title, theoryUnits, taskUnits}) => { - ); diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx index 67ab478..86ed816 100644 --- 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 = observer(({title, theoryUnits = [], taskUnits = []}) => { +const ModalLevelBody: React.FC = 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 = observer(({title, theoryUnits
- {title.toUpperCase()} + {level.title.toUpperCase()}
@@ -101,11 +103,11 @@ const ModalLevelBody: React.FC = 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 = observer(({title, theoryUnits : "" } - {renderTasks(menuItems, theoryUnits, taskUnits)} + {renderTasks(menuItems, level.theoryUnits, level.taskUnits)}
); }); diff --git a/frontend/src/types/LevelType.ts b/frontend/src/types/LevelType.ts new file mode 100644 index 0000000..35ef91c --- /dev/null +++ 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[] +}