Skip to content

Commit 8d757db

Browse files
author
Alexandra Zwinger
committed
Make everything work
1 parent cbb2551 commit 8d757db

File tree

10 files changed

+83
-64
lines changed

10 files changed

+83
-64
lines changed

‎src/App.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ export enum Resources {
4646
MEETING = "meeting",
4747
USER = "user",
4848
MODULES = "module",
49-
USER_MODULE = "userModule",
5049
CHECKBOX = "checkbox",
5150
USERGROUP = "studygroup"
5251
}

‎src/api/ModuleApi.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {AxiosInstance} from "axios";
22
import {Resources} from "../App";
33
import {handleErrorResponse, handleSuccessResponse} from "./ErrorHandling";
4-
import {ModuleDto, UserModule} from "../dtos/ModuleDto";
4+
import {UserModule} from "../dtos/ModuleDto";
55

6-
export function getModules(axios: AxiosInstance): Promise<ModuleDto[]> {
6+
export function getModules(axios: AxiosInstance): Promise<UserModule[]> {
77
const url = `/${Resources.MODULES}`;
88
return axios.get(url)
99
.then(handleSuccessResponse, handleErrorResponse);
@@ -15,15 +15,9 @@ export function createModule(axios: AxiosInstance, moduleName: string) {
1515
.then(handleSuccessResponse, handleErrorResponse);
1616
}
1717

18-
export function saveModuleProgress(axios: AxiosInstance, userModule: UserModule) {
19-
const url = `/${Resources.USER_MODULE}`;
20-
axios.put(url, userModule)
21-
.then(handleSuccessResponse, handleErrorResponse);
22-
}
23-
2418
//TODO HANDLE TOGGLE FUNCTION. WHAT ENDPOINT TO USE? ASK BACKEND
25-
export function toggleCheckbox(axios: AxiosInstance,) {
19+
export function toggleCheckbox(axios: AxiosInstance) {
2620
const url = `/${Resources.CHECKBOX}`;
27-
axios.put(url,)
21+
axios.put(url)
2822
.then(handleSuccessResponse, handleErrorResponse);
2923
}

‎src/api/UserApi.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {AxiosInstance} from "axios";
22
import {Resources} from "../App";
33
import {handleErrorResponse, handleSuccessResponse} from "./ErrorHandling";
44
import {UserDto} from "../dtos/UserDto";
5-
import {ModuleDto} from "../dtos/ModuleDto";
5+
import {UserModule} from "../dtos/ModuleDto";
66

77
export function getUser(axios: AxiosInstance): Promise<UserDto> {
88
return axios.get(Resources.USER)
@@ -14,7 +14,23 @@ export function updateUsername(axios: AxiosInstance, name: string) {
1414
.then(handleSuccessResponse, handleErrorResponse);
1515
}
1616

17-
export function updateUserModules(axios: AxiosInstance, modules: ModuleDto[]) {
18-
return axios.put(Resources.USER, modules)
17+
export function updateUserModules(axios: AxiosInstance, modules: UserModule[]) {
18+
const fullModules = addExamData(modules);
19+
return axios.put(Resources.USER, fullModules)
1920
.then(handleSuccessResponse, handleErrorResponse);
2021
}
22+
23+
export function saveModuleProgress(axios: AxiosInstance, userModules: UserModule[]) {
24+
const url = `/${Resources.USER}`;
25+
const fullModules = addExamData(userModules);
26+
axios.put(url, fullModules)
27+
.then(handleSuccessResponse, handleErrorResponse);
28+
}
29+
30+
const addExamData = (userModules: UserModule[]) => {
31+
return userModules.map(userModule => ({
32+
...userModule,
33+
examDate: "2025-08-20",
34+
examLoc: "loco",
35+
}));
36+
};

‎src/components/ModuleProgressSettings.tsx‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@ import '../styles/Modal.css';
33
import {CuteButton} from './CuteButton';
44
import {Chapter, UserModule} from "../dtos/ModuleDto";
55
import axiosInstance from "../AxiosConfig";
6-
import {saveModuleProgress} from "../api/ModuleApi";
6+
import {saveModuleProgress} from "../api/UserApi";
77

88
interface ModalProps {
9-
isOpen: boolean;
109
onClose: () => void;
1110
module: UserModule;
11+
allUserModules: UserModule[];
1212
}
1313

14-
const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module}) => {
14+
const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module, allUserModules}) => {
1515
const [chapters, setChapters] = useState<Chapter[]>(module.chapter);
1616

17-
const toggleCheckbox = (chapterId: string, checkboxId: string) => {
17+
const toggleCheckbox = (chapterId: number, checkboxId: number) => {
1818
setChapters((prevChapters) =>
1919
prevChapters.map((chapter) =>
2020
chapter.id === chapterId
2121
? {
2222
...chapter,
23-
checkboxes: chapter.checkboxes.map((checkbox) =>
23+
checkbox: chapter.checkbox.map((checkbox) =>
2424
checkbox.id === checkboxId
2525
? {...checkbox, checked: !checkbox.checked}
2626
: checkbox
@@ -31,29 +31,29 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module}) => {
3131
);
3232
};
3333

34-
const addCheckbox = (chapterId: string) => {
34+
const addCheckbox = (chapterId: number) => {
3535
const newCheckbox = {
36-
id: Date.now().toString(),
37-
text: `Checkbox ${Math.random()}`,
36+
id: Date.now() + Math.floor(Math.random() * 1000),
37+
title: `Add Title`,
3838
checked: false,
3939
};
4040

4141
setChapters((prevChapters) =>
4242
prevChapters.map((chapter) =>
4343
chapter.id === chapterId
44-
? {...chapter, checkboxes: [...chapter.checkboxes, newCheckbox]}
44+
? {...chapter, checkbox: [...chapter.checkbox, newCheckbox]}
4545
: chapter
4646
)
4747
);
4848
};
4949

50-
const deleteCheckbox = (chapterId: string, checkboxId: string) => {
50+
const deleteCheckbox = (chapterId: number, checkboxId: number) => {
5151
setChapters((prevChapters) =>
5252
prevChapters.map((chapter) =>
5353
chapter.id === chapterId
5454
? {
5555
...chapter,
56-
checkboxes: chapter.checkboxes.filter(
56+
checkbox: chapter.checkbox.filter(
5757
(checkbox) => checkbox.id !== checkboxId
5858
),
5959
}
@@ -64,17 +64,21 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module}) => {
6464

6565
const addChapter = () => {
6666
const newChapter = {
67-
id: Date.now().toString(),
67+
id: Date.now() + Math.floor(Math.random() * 1000),
6868
title: `Kapitel ${chapters.length + 1}`,
69-
checkboxes: [],
69+
checkbox: [],
7070
};
7171
setChapters((prev) => [...prev, newChapter]);
7272
};
7373

7474
const saveProgress = () => {
7575
try {
7676
module.chapter = chapters;
77-
saveModuleProgress(axiosInstance, module);
77+
const updatedModules = allUserModules.map(userModule =>
78+
userModule.name === module.name ? module : userModule
79+
);
80+
saveModuleProgress(axiosInstance, updatedModules);
81+
onClose();
7882
} catch (error) {
7983
console.error("Error saving progress:" + error);
8084
}
@@ -102,7 +106,7 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module}) => {
102106
</button>
103107
</div>
104108
<div className="checkbox-group sm:ml-8 mb-4">
105-
{chapter.checkboxes.map((checkbox) => (
109+
{chapter.checkbox.map((checkbox) => (
106110
<div key={checkbox.id} className="checkbox-item w-[65%]">
107111
<input
108112
type="checkbox"
@@ -113,17 +117,17 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module}) => {
113117
<input
114118
type="text"
115119
className={"flex-grow px-2"}
116-
value={checkbox.text}
120+
value={checkbox.title}
117121
onChange={(e) => {
118122
const newText = e.target.value;
119123
setChapters((prevChapters) =>
120124
prevChapters.map((ch) =>
121125
ch.id === chapter.id
122126
? {
123127
...ch,
124-
checkboxes: ch.checkboxes.map((c) =>
128+
checkbox: ch.checkbox.map((c) =>
125129
c.id === checkbox.id
126-
? {...c, text: newText}
130+
? {...c, title: newText}
127131
: c
128132
),
129133
}
@@ -151,14 +155,17 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module}) => {
151155
</button>
152156
<label className="text-white">Checkbox </label>
153157

154-
<button className="add-chapter-btn" onClick={addChapter}>
155-
+
156-
</button>
157-
<label className="text-white">Kapitel </label>
158158
</div>
159159
</div>
160160
))}
161161

162+
<div className="add-checkbox-container sm:ml-8">
163+
<button className="add-chapter-btn" onClick={addChapter}>
164+
+
165+
</button>
166+
<label className="text-white">Kapitel </label>
167+
</div>
168+
162169
<div className="mt-auto flex justify-end items-center gap-4">
163170
<CuteButton
164171
onClick={onClose}

‎src/components/yourStudies/UserInfo.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import ModuleProgressSettings from "../ModuleProgressSettings";
77
import {Chapter, Checkbox, UserModule} from "../../dtos/ModuleDto";
88
import {getUser} from "../../api/UserApi";
99

10-
export default function UserInfo() {
10+
export default function UserInfo(props: { reload: boolean }) {
1111
const [weeklyMeetings, setWeeklyMeetings] = useState<MeetingDto[]>([]);
1212
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
1313
const [modules, setModules] = useState<UserModule[]>([]);
@@ -23,6 +23,7 @@ export default function UserInfo() {
2323
return meetingDate >= startOfWeek && meetingDate <= endOfWeek;
2424
});
2525
};
26+
2627
const fetchUserInfo = async () => {
2728
try {
2829
const response = await getUser(axiosInstance);
@@ -46,6 +47,10 @@ export default function UserInfo() {
4647
fetchUserInfo();
4748
}, []);
4849

50+
useEffect(() => {
51+
fetchUserInfo();
52+
}, [props.reload]);
53+
4954
const openModal = (moduleName: string) => {
5055
setActiveModule(modules.find((m) => m.name === moduleName));
5156
setIsModalOpen(true);
@@ -62,8 +67,8 @@ export default function UserInfo() {
6267
let total = 0;
6368

6469
module.chapter.forEach((chapter: Chapter) => {
65-
total += chapter.checkboxes.length;
66-
checked += chapter.checkboxes.filter((box: Checkbox) => box.checked).length;
70+
total += chapter.checkbox.length;
71+
checked += chapter.checkbox.filter((box: Checkbox) => box.checked).length;
6772
});
6873

6974
return total === 0 ? 0 : checked / total;
@@ -157,7 +162,7 @@ export default function UserInfo() {
157162
</div>
158163
{
159164
isModalOpen && activeModule &&
160-
<ModuleProgressSettings isOpen={isModalOpen} onClose={closeModal} module={activeModule}/>
165+
<ModuleProgressSettings onClose={closeModal} module={activeModule} allUserModules={modules}/>
161166
}
162167
</div>
163168
);

‎src/components/yourStudies/UserSettings.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import React, {useEffect, useState} from "react";
1+
import React, {Dispatch, SetStateAction, useEffect, useState} from "react";
22
import {CuteButton} from "../CuteButton";
33
import axiosInstance from "../../AxiosConfig";
44
import {getUser, updateUserModules, updateUsername} from "../../api/UserApi";
55
import {UserDto} from "../../dtos/UserDto";
6-
import {ModuleDto} from "../../dtos/ModuleDto";
6+
import {UserModule} from "../../dtos/ModuleDto";
77
import {createModule, getModules} from "../../api/ModuleApi";
88

99

10-
export default function UserSettings() {
10+
export default function UserSettings(props: { reload: boolean, setReload: Dispatch<SetStateAction<boolean>> }) {
1111
const [user, setUser] = useState<UserDto>();
1212
const [editProfile, setEditProfile] = useState(false);
1313
const [editModule, setEditModule] = useState(false);
1414
const [profileName, setProfileName] = useState(user?.username);
15-
const [ownModules, setOwnModules] = useState<ModuleDto[]>([]);
16-
const [allModules, setAllModules] = useState<ModuleDto[]>([]);
15+
const [ownModules, setOwnModules] = useState<UserModule[]>([]);
16+
const [allModules, setAllModules] = useState<UserModule[]>([]);
1717
const [module, setModule] = useState<string>("");
1818
const [moduleEmptyAlert, setModuleEmptyAlert] = useState<boolean>(false);
1919

@@ -67,7 +67,8 @@ export default function UserSettings() {
6767
const saveModules = async () => {
6868
try {
6969
await updateUserModules(axiosInstance, ownModules);
70-
fetchUserInfo();
70+
await fetchUserInfo();
71+
props.setReload(!props.reload);
7172
setEditModule(false);
7273
} catch (error) {
7374
console.error("Error fetching user modules:" + error);
@@ -81,7 +82,7 @@ export default function UserSettings() {
8182
}
8283
setModuleEmptyAlert(false);
8384
if (!ownModules.some(m => m.name.toUpperCase() === module.toUpperCase()))
84-
setOwnModules([...ownModules, {name: module}]);
85+
setOwnModules([...ownModules, {name: module, chapter: []}]);
8586
setModule("");
8687
if (!allModules.some(m => m.name.toUpperCase() === module.toUpperCase())) {
8788
saveNewModule();

‎src/dtos/ModuleDto.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
1-
export type ModuleDto = {
2-
name: string;
3-
}
4-
51
export type UserModule = {
62
name: string;
73
chapter: Chapter[];
84
}
95

10-
export type Checkbox = {
11-
id: string;
12-
text: string;
6+
export type Checkbox = {
7+
id: number;
8+
title: string;
139
checked: boolean;
1410
}
1511

16-
export type Chapter = {
17-
id: string;
12+
export type Chapter = {
13+
id: number;
1814
title: string;
19-
checkboxes: Checkbox[];
15+
checkbox: Checkbox[];
2016
}

‎src/form/CreateOrUpdateMeetingForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {CreateMeetingDto, MeetingDto} from "../dtos/MeetingDto";
1515
import axiosInstance from "../AxiosConfig";
1616
import {getModules} from "../api/ModuleApi";
1717
import {ChangeType} from "../enum/ChangeType";
18-
import {ModuleDto} from "../dtos/ModuleDto";
18+
import {UserModule} from "../dtos/ModuleDto";
1919

2020
interface MeetingFormProps {
2121
open: boolean;
@@ -38,7 +38,7 @@ export function CreateOrUpdateMeetingForm({open, onClose, meeting, onlyThisMeeti
3838
const [time1, setTime1] = useState<Dayjs>(meeting ? dateFrom : dayjs().hour(12).minute(0).second(0));
3939
const [date2, setDate2] = useState<Dayjs>(meeting ? dateUntil : dayjs());
4040
const [time2, setTime2] = useState<Dayjs>(meeting ? dateUntil : dayjs().hour(13).minute(0).second(0));
41-
const [moduleNames, setModuleNames] = useState<ModuleDto[]>([]);
41+
const [moduleNames, setModuleNames] = useState<UserModule[]>([]);
4242
const [descriptionError, setDescriptionError] = useState("");
4343

4444
useEffect(() => {

‎src/form/SearchMeetingForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@ import {
1111
import CloseIconPath from '../data/close_icon_red.png';
1212
import {getMeetingsForModule} from '../api/MeetingApi';
1313
import axiosInstance from '../AxiosConfig';
14-
import {ModuleDto} from '../dtos/ModuleDto';
1514
import {MeetingDto} from '../dtos/MeetingDto';
1615
import GroupedMeeting from '../components/meeting/GroupedMeeting';
1716
import {getUser} from "../api/UserApi";
17+
import {UserModule} from "../dtos/ModuleDto";
1818

1919
interface Props {
2020
open: boolean;
2121
onClose: () => void;
2222
}
2323

2424
export function SearchMeetingForm({open, onClose}: Props) {
25-
const [modules, setModules] = useState<ModuleDto[]>([]);
25+
const [modules, setModules] = useState<UserModule[]>([]);
2626
const [meetings, setMeetings] = useState<MeetingDto[]>([]);
2727
const [selectedModule, setSelectedModule] = useState<string>("");
2828

‎src/pages/YourStudies.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import React from "react";
1+
import React, {useState} from "react";
22
import UserSettings from "../components/yourStudies/UserSettings";
33
import UserInfo from "../components/yourStudies/UserInfo";
44
import '../styles/Scrollbar.css';
55

66
export default function YourStudies() {
7+
const [reload, setReload] = useState<boolean>(false);
78
return (
89
<div
910
className="flex lg:justify-between justify-start lg:flex-row scrollbar flex-col overflow-y-scroll lg:items-start items-center lg:mt-12 mt-4 h-full">
10-
<UserSettings/>
11+
<UserSettings reload={reload} setReload={setReload}/>
1112
<div className="lg:h-[90%] lg:w-[1px] w-[90%] min-h-[2px] bg-[#1C7E70]"></div>
12-
<UserInfo/>
13+
<UserInfo reload={reload}/>
1314
</div>
1415
);
1516
}

0 commit comments

Comments
 (0)