Skip to content

Commit

Permalink
пришёл к нормально организованному коду с удалением карт
Browse files Browse the repository at this point in the history
  • Loading branch information
@semant1cs
semant1cs committed Dec 17, 2023
1 parent 6a6343e commit ad9881a
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 157 deletions.
13 changes: 9 additions & 4 deletions frontend/src/UIComponents/customButton/CustomButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,19 @@ import styles from './customButton.module.scss'

interface ICustomButtonInterface {
text: string,
handleOnClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
className?: string
handleOnClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
className?: string,
type?: "button" | "submit" | "reset"
}

const CustomButton: React.FC<ICustomButtonInterface> =
({text, handleOnClick, className}: ICustomButtonInterface) => {
({text, handleOnClick, className, type}: ICustomButtonInterface) => {
return (
<button className={styles.custom__btn + " " + className} onClick={(e) => handleOnClick(e)}>
<button
className={styles.custom__btn + " " + className}
onClick={(e) => handleOnClick ? handleOnClick(e) : undefined}
type={type ? type : undefined}
>
{text}
</button>
);
Expand Down
9 changes: 7 additions & 2 deletions frontend/src/components/authentication/AuthForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {observer} from "mobx-react-lite";
import authStore from "../../store/authStore";
import auth from "../../utils/auth";
import Starfield from "react-starfield";
import CustomButton from "../../UIComponents/customButton/CustomButton.tsx";

export type FormValues = {
login: string,
Expand All @@ -29,7 +30,7 @@ const AuthForm: React.FC = observer(() => {

const onHandleSubmit = useCallback((data: { login: string, password: string }) => {
authStore.signIn(data.login, data.password).then(() => navigateTo('/map'))
}, [navigateTo])
}, [])

return (
<div>
Expand Down Expand Up @@ -72,7 +73,11 @@ const AuthForm: React.FC = observer(() => {
isChecked={isPasswordShows}
/>

<input type="submit" className="auth__btn" value="ВОЙТИ"/>
<CustomButton
type="submit"
className="auth__btn"
text="ВОЙТИ"
/>
</form>
</div>
);
Expand Down
10 changes: 4 additions & 6 deletions frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useEffect, useState} from 'react';
import React, {useEffect} from 'react';

import Coins from "../UIMapMenu/Coins.tsx";
import ChooseModuleWindow from "../UIMapMenu/ChooseModuleWindow.tsx";
Expand All @@ -13,7 +13,7 @@ import moduleMenuStore from "../../../store/moduleMenuStore.ts";
import mapMenuStore from "../../../store/mapMenuStore.ts"

import {IUserType} from "../../../types/UserType.ts";
import {ILevelType} from "../../../types/LevelType.ts";
import levelStore from "../../../store/levelStore.ts";


interface IEmployeeMap {
Expand All @@ -23,14 +23,12 @@ interface IEmployeeMap {
}

const EmployeeMap: React.FC<IEmployeeMap> = observer(({user, formattedDate, logOut}) => {
const [currentLevel, setCurrentLevel] = useState<ILevelType>()

useEffect(() => {
mapMenuStore.fetchAvailableMaps().then(() => {
mapMenuStore.fetchMapById(mapMenuStore.availableMaps[0].id).then(() => {
moduleMenuStore.fetchModules().then(() => {
moduleMenuStore.fetchModuleById(moduleMenuStore.availableModules[0].id).then(() => {
mapMenuStore.fetchLevels().then(() => {
levelStore.fetchLevels().then(() => {

}).catch(() => alert("Нет доступных уровней для данного модуля"))
})
Expand All @@ -47,7 +45,7 @@ const EmployeeMap: React.FC<IEmployeeMap> = observer(({user, formattedDate, logO
<CustomProgressBar className="progress-bar-wrapper" progress={54}/>
<div className="geolocations">
<div className="geolocations__wrapper">
{mapMenuStore.availableLevels.map((level, index) => {
{levelStore.availableLevels.map((level, index) => {
return <Level
id={(index + 1).toString()}
level={level}
Expand Down
82 changes: 32 additions & 50 deletions frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,84 +8,66 @@ import CreateUnit from "./superUserControlPanel/CreateUnit.tsx";
import {observer} from "mobx-react-lite";
import mapMenuStore from "../../../store/mapMenuStore.ts";
import superUserStore from "../../../store/superUserStore.ts";

import moduleMenuStore from "../../../store/moduleMenuStore.ts";

import {IMapType} from "../../../types/MapType.ts";
import {IModuleType} from "../../../types/ModuleType.ts";
import {ILevelType} from "../../../types/LevelType.ts";

const SuperUserMap: React.FC = 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[currentMapIndex].id)
.then(() => mapMenuStore.fetchMapById(mapMenuStore.availableMaps[mapMenuStore.currentMapIndex].id)
.then(() => moduleMenuStore.fetchModules()))
}, []);

const handleOnClickChangeIsModalOpen = useCallback(() => {
setIsUserListModalOpen(!isUsersListModalOpen)
}, [isUsersListModalOpen])

// Работа с картами

const handleOnClickOptionMap = useCallback((map: IMapType, indexMap: number) => {
setCurrentMap(map)
setCurrentMapIndex(indexMap)
mapMenuStore.fetchMapById(map.id).then()
}, [])

const handleOnChangeMapName = useCallback((e: React.FormEvent<HTMLInputElement>) => {
setMapName(e.currentTarget.value)
}, [])


const handleOnClickCreateMap = useCallback((mapName: string) => {
mapName !== "" ? mapMenuStore.createMap(mapName).then(() => currentMap ? mapMenuStore.fetchAvailableMaps().then() : undefined) : alert("Введите название карты")
const handleOnClickOptionMap = useCallback((map: IMapType) => {
mapMenuStore.chooseMap(map)
}, [])

const handleOnClickDeleteMap = useCallback((mapId: string) => {
mapMenuStore.deleteMap(mapId).then(() => mapMenuStore.fetchAvailableMaps())
mapMenuStore.deleteMap(mapId).then(() => mapMenuStore.fetchAvailableMaps().then())
}, [])


// Работа с модулями

const handleOnClickOptionModule = useCallback((module: IModuleType, index: number) => {
console.log(module)
moduleMenuStore.selectModule(module).then(() => moduleMenuStore.changeCurrentModuleIndex(index))
const handleOnClickCreateMap = useCallback((mapName: string) => {
mapMenuStore.createMap(mapName)
.then(() => mapMenuStore.fetchAvailableMaps()
.then(() => setMapName("")))
}, [])

const handleOnChangeModuleName = useCallback((e: React.FormEvent<HTMLInputElement>) => {
setModuleName(e.currentTarget.value)
}, [])

const handleOnClickCreateModule = useCallback((moduleName: string) => {
moduleName !== "" ? moduleMenuStore.createModule(moduleName) : alert("Введите название модуля")
moduleMenuStore.fetchModules().then()
const handleOnClickOptionModule = useCallback((module: IModuleType) => {
moduleMenuStore.chooseModule(module)
}, [])

const handleOnClickDeleteModule = useCallback((mapId: string) => {
moduleMenuStore.deleteModule(mapId).then(() => moduleMenuStore.fetchModules().then())
}, [])

const handleOnClickDeleteModule = useCallback((moduleId: string) => {
moduleMenuStore.deleteModule(moduleId).then(() => moduleMenuStore.fetchModules())
const handleOnClickCreateModule = useCallback((moduleName: string) => {
moduleMenuStore.createModule(moduleName)
.then(() => moduleMenuStore.fetchModules()
.then(() => setModuleName("")))
}, [])


return (
<div>
{
Expand Down Expand Up @@ -114,21 +96,21 @@ const SuperUserMap: React.FC = observer(() => {
unitNameValue={mapName}
handleOnChangeUnitName={handleOnChangeMapName}
handleOnClickCreateUnit={handleOnClickCreateMap}
currentUnitId={currentMap?.id}
currentUnitId={mapMenuStore.choosedMap ? mapMenuStore.choosedMap.id : null}
availableUnits={mapMenuStore.availableMaps}
/>

<CreateUnit
classNameSelect="available-modules"
handleOnClickOptionUnit={handleOnClickOptionModule}
handleOnClickDeleteUnit={handleOnClickDeleteModule}
unitName="module"
unitNameValue={moduleName}
handleOnChangeUnitName={handleOnChangeModuleName}
handleOnClickCreateUnit={handleOnClickCreateModule}
currentUnitId={currentModule?.id}
availableUnits={moduleMenuStore.availableModules}
/>
{/*<CreateUnit*/}
{/* classNameSelect="available-modules"*/}
{/* handleOnClickOptionUnit={handleOnClickOptionModule}*/}
{/* handleOnClickDeleteUnit={handleOnClickDeleteModule}*/}
{/* unitName="module"*/}
{/* unitNameValue={moduleName}*/}
{/* handleOnChangeUnitName={handleOnChangeModuleName}*/}
{/* handleOnClickCreateUnit={handleOnClickCreateModule}*/}
{/* currentUnitId={currentModule?.id}*/}
{/* availableUnits={moduleMenuStore.availableModules}*/}
{/*/>*/}
</div>
);
});
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ interface IPropTypes {
unitNameValue: string,
handleOnChangeUnitName: (e: React.FormEvent<HTMLInputElement>) => void,
handleOnClickCreateUnit: (unitName: string) => void,
currentUnitId?: string,
availableUnits: IMapType[] & IModuleType[] & ILevelType[]
currentUnitId?: string | null,
availableUnits: IMapType[]
}

const CreateUnit: React.FC<IPropTypes> =
Expand Down
93 changes: 9 additions & 84 deletions frontend/src/store/mapMenuStore.ts
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,43 @@
import {makeAutoObservable} from "mobx";
import axios from "axios";
import {IMapType} from "../types/MapType.ts";
import {ILevelType} from "../types/LevelType.ts";
import moduleMenuStore from "./moduleMenuStore.ts";

class MapMenuStore {
// Доступное всем пользователям
mapMenu: IMapType | null = null
choosedMap: IMapType | null = null
availableMaps: IMapType[] = []
currentMapId: string | null = null
currentMapIndex: number = 0

currentLevelId: string | null = null

availableLevels: ILevelType[] = []

// Для суперпользователя
newNameMap: string = ""

constructor() {
makeAutoObservable(this)
}

async fetchAvailableMaps() {
await axios.get("http://localhost:8000/maps/").then((response) => this.setMaps(response.data))
await axios.get("http://localhost:8000/maps/").then((response) => {
this.setMaps(response.data)
this.chooseMap(response.data[0])
})
}

setMaps(maps: IMapType[]) {
this.availableMaps = maps
}

chooseMap(map: IMapType) {
this.choosedMap = map
}

async fetchMapById(id: string) {
await axios.get("http://localhost:8000/maps/" + id).then((response) => {
this.mapMenu = response?.data
this.currentMapId = response?.data.id
})
}

updateMapById(id: string, title: string, modulesIds?: string[]) {
axios.patch("http://localhost:8000/maps/" + id, {
id: id,
title: title,
modules_ids: modulesIds
})
}


setAvailableLevels(levels: ILevelType[]) {
this.availableLevels = levels.map((level) => {
return {
id: level.id,
title: level.title,
body: level.body,
theoryUnits: level.theoryUnits,
taskUnits: level.taskUnits,
}
})
}


async fetchLevels() {
await axios.get("http://localhost:8000/maps/" + this.currentMapId + "/modules/" + moduleMenuStore.currentModuleId + "/levels/")
.then((response) => this.setAvailableLevels(response.data))
}

// async fetchLevelById(id: string) {
// await axios.get("http://localhost:8000/maps/" + this.currentMapId + "/modules/" + this.currentModuleId + "/levels/" + id).then((response) => {
// this.currentLevelId = response.data
// })
// }

// createTheoryUnit() {
// axios.post("http://localhost:8000/maps/" + this.currentMapId + "/modules/" + this.currentModuleId + "/levels/" + this.currentLevelId + "/theory", {
// title: "Заголовок 1",
// content: "Контент"
// })
// }

// createTaskUnit() {
// axios.post("http://localhost:8000/maps/" + this.currentMapId + "/modules/" + this.currentModuleId + "/levels/" + this.currentLevelId + "/tasks", {
// type: "test",
// score_reward: 100,
// requires_review: false
// })
// }

// addQuestionToTaskUnit() {
// axios.post("http://localhost:8000/maps/" + this.currentMapId + "/modules/" + this.currentModuleId
// + "/levels/" + this.currentLevelId + "/tasks/" + "b12de86e-fcd9-4761-89f0-b80d9583822d",
// {
// type: "singlechoice",
// question: "Кто такой вопрос?",
// possible_answers: [
// {
// answer: "Я",
// is_correct: false
// },
// {
// answer: "Не я",
// is_correct: true
// },
// {
// answer: "Не ты",
// is_correct: false
// }
// ]
// })
// }

// Для суперпользователя

async createMap(mapName: string) {
await axios.post("http://localhost:8000/maps/", {title: mapName}).then()
this.newNameMap = ""
}

async deleteMap(mapId?: string) {
Expand Down
Loading

0 comments on commit ad9881a

Please sign in to comment.