Skip to content

Commit 1cfcfdc

Browse files
author
Alexandra Zwinger
committed
Make code changes
1 parent 81e9af5 commit 1cfcfdc

File tree

4 files changed

+103
-143
lines changed

4 files changed

+103
-143
lines changed

‎src/components/calendar/forms/CreateOrUpdateMeetingForm.tsx‎

Lines changed: 3 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
import React, {useEffect, useState} from 'react';
22
import {Dialog, DialogActions, DialogTitle, DialogContent} from "@mui/material";
33
import {CuteButton} from "../../CuteButton";
4-
import {
5-
DatePicker,
6-
LocalizationProvider,
7-
TimePicker,
8-
} from "@mui/x-date-pickers";
94
import {Dayjs} from 'dayjs';
105
import dayjs from 'dayjs';
11-
import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
12-
import {deDE} from "@mui/x-date-pickers/locales";
136
import {createMeeting, deleteMeeting, updateMeeting} from "../../../api/MeetingApi";
147
import {CreateMeetingDto, MeetingDto} from "../../../dtos/MeetingDto";
158
import axiosInstance from "../../../auth/AxiosConfig";
169
import {ChangeType} from "../../../enum/ChangeType";
1710
import {UserModule} from "../../../dtos/ModuleDto";
1811
import {getUser} from "../../../api/UserApi";
12+
import {TimePickerComponent} from "./TimePickerComponent";
1913

2014
interface MeetingFormProps {
2115
open: boolean;
@@ -58,24 +52,13 @@ export function CreateOrUpdateMeetingForm({open, onClose, meeting, onlyThisMeeti
5852
}
5953
};
6054

61-
const handleDate2Change = (newDate: Dayjs | null) => {
62-
if (newDate) {
63-
setDate2(newDate);
64-
}
65-
};
6655
const handleTime1Change = (newTime: Dayjs | null) => {
6756
if (newTime) {
6857
setTime1(newTime);
6958
setTime2(newTime.add(1, 'hour'));
7059
}
7160
};
7261

73-
const handleTime2Change = (newTime: Dayjs | null) => {
74-
if (newTime) {
75-
setTime2(newTime);
76-
}
77-
};
78-
7962
const handleRepeatChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
8063
setRepeatable(event.target.value);
8164
};
@@ -193,116 +176,10 @@ export function CreateOrUpdateMeetingForm({open, onClose, meeting, onlyThisMeeti
193176

194177
<label htmlFor="Time Span"
195178
className="font-semibold mt-8 block text-lg text-white">Zeitraum</label>
196-
<LocalizationProvider
197-
dateAdapter={AdapterDayjs}
198-
adapterLocale="de"
199-
localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
200-
>
201-
<div className={"ml-5 flex-row flex mt-2 w-80 items-center gap-2 md:mb-0 mb-8"}>
202179

203-
<label htmlFor="From"
204-
className="mr-2 block text-bs font-medium text-white text-center">Von</label>
205-
<div className="flex md:flex-row flex-col gap-2">
206-
<DatePicker
207-
className="mt-1 block bg-[#333C4F] w-36 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
208-
sx={{
209-
'& .MuiIconButton-root': {
210-
color: '#9fa3a8',
211-
},
212-
}}
213-
minDate={dayjs()}
214-
slotProps={{
215-
textField: {
216-
size: 'small', variant: 'standard', InputProps: {
217-
disableUnderline: true,
218-
sx: {
219-
paddingLeft: '8px',
220-
paddingRight: '8px',
221-
color: '#e2e8f0',
222-
}
223-
},
224-
}
225-
}}
226-
format="DD.MM.YYYY" defaultValue={date1} value={date1}
227-
onChange={handleDate1Change}/>
228-
<TimePicker
229-
className="mt-1 block bg-[#333C4F] w-24 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
230-
sx={{
231-
'& .MuiIconButton-root': {
232-
color: '#9fa3a8',
233-
},
234-
}}
235-
slotProps={{
236-
textField: {
237-
size: 'small', variant: 'standard', InputProps: {
238-
disableUnderline: true,
239-
sx: {
240-
paddingLeft: '8px',
241-
paddingRight: '8px',
242-
color: '#e2e8f0',
243-
}
244-
},
245-
}
246-
}}
247-
ampm={false} format="HH:mm" value={time1} onChange={handleTime1Change}/>
248-
</div>
249-
</div>
250-
</LocalizationProvider>
180+
<TimePickerComponent time={time1} date={date1} setDate={handleDate1Change} setTime={handleTime1Change} label={"Von"}/>
181+
<TimePickerComponent time={time2} date={date2} setDate={setDate2} setTime={setTime2} label={"Bis"}/>
251182

252-
<LocalizationProvider
253-
dateAdapter={AdapterDayjs}
254-
adapterLocale="de"
255-
localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
256-
>
257-
<div className={"ml-5 flex-row mt-4 flex w-80 h-12 items-center gap-2 md:mb-0 mb-8"}>
258-
<label htmlFor="To"
259-
className="mr-3 block text-bs font-medium text-white ">Bis</label>
260-
<div className="flex md:flex-row flex-col gap-2 ">
261-
<DatePicker
262-
sx={{
263-
'& .MuiIconButton-root': {
264-
color: '#9fa3a8',
265-
},
266-
}}
267-
minDate={dayjs()}
268-
className="mt-1 block bg-[#333C4F] w-36 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
269-
slotProps={{
270-
textField: {
271-
size: 'small', variant: 'standard', InputProps: {
272-
disableUnderline: true,
273-
sx: {
274-
paddingLeft: '8px',
275-
paddingRight: '8px',
276-
color: '#e2e8f0',
277-
}
278-
},
279-
}
280-
}}
281-
format="DD.MM.YYYY" defaultValue={date2} value={date2}
282-
onChange={handleDate2Change}/>
283-
<TimePicker
284-
sx={{
285-
'& .MuiIconButton-root': {
286-
color: '#9fa3a8',
287-
},
288-
}}
289-
className="mt-1 block bg-[#333C4F] w-24 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
290-
slotProps={{
291-
textField: {
292-
size: 'small', variant: 'standard', InputProps: {
293-
disableUnderline: true,
294-
sx: {
295-
paddingLeft: '8px',
296-
paddingRight: '8px',
297-
color: '#e2e8f0',
298-
}
299-
},
300-
}
301-
}}
302-
ampm={false} format="HH:mm" value={time2} onChange={handleTime2Change}/>
303-
</div>
304-
</div>
305-
</LocalizationProvider>
306183
<div className={"ml-5 flex-row mt-1 flex h-12 items-center gap-2"}>
307184

308185
<label htmlFor="Repeat"

‎src/components/calendar/forms/TimePickerComponent.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React from 'react';
2+
import {
3+
DatePicker,
4+
LocalizationProvider,
5+
TimePicker,
6+
} from "@mui/x-date-pickers";
7+
import {Dayjs} from 'dayjs';
8+
import dayjs from 'dayjs';
9+
import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
10+
import {deDE} from "@mui/x-date-pickers/locales";
11+
12+
interface TimePickerProps {
13+
date: Dayjs;
14+
time: Dayjs;
15+
setDate: (date: Dayjs) => void;
16+
setTime: (time: Dayjs) => void;
17+
label: string;
18+
}
19+
20+
dayjs.locale('de');
21+
22+
export function TimePickerComponent({date, time, setTime, setDate, label}: TimePickerProps) {
23+
return (
24+
<LocalizationProvider
25+
dateAdapter={AdapterDayjs}
26+
adapterLocale="de"
27+
localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
28+
>
29+
<div className={"ml-5 flex-row mt-4 flex w-80 h-12 items-center gap-2 md:mb-0 mb-8"}>
30+
<label htmlFor="To"
31+
className="mr-3 block text-bs font-medium text-white ">{label}</label>
32+
<div className="flex md:flex-row flex-col gap-2 ">
33+
<DatePicker
34+
sx={{
35+
'& .MuiIconButton-root': {
36+
color: '#9fa3a8',
37+
},
38+
}}
39+
minDate={dayjs()}
40+
className="mt-1 block bg-[#333C4F] w-36 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
41+
slotProps={{
42+
textField: {
43+
size: 'small', variant: 'standard', InputProps: {
44+
disableUnderline: true,
45+
sx: {
46+
paddingLeft: '8px',
47+
paddingRight: '8px',
48+
color: '#e2e8f0',
49+
}
50+
},
51+
}
52+
}}
53+
format="DD.MM.YYYY" defaultValue={date} value={date}
54+
onChange={(newDate: Dayjs | null) => {
55+
if (newDate) setDate(newDate);
56+
}}
57+
/>
58+
<TimePicker
59+
sx={{
60+
'& .MuiIconButton-root': {
61+
color: '#9fa3a8',
62+
},
63+
}}
64+
className="mt-1 block bg-[#333C4F] w-24 px-2 py-1 mb-4 border rounded-full shadow-sm border-[#333C4F] placeholder-gray-400 placeholder:text-xs"
65+
slotProps={{
66+
textField: {
67+
size: 'small', variant: 'standard', InputProps: {
68+
disableUnderline: true,
69+
sx: {
70+
paddingLeft: '8px',
71+
paddingRight: '8px',
72+
color: '#e2e8f0',
73+
}
74+
},
75+
}
76+
}}
77+
ampm={false} format="HH:mm" value={time}
78+
onChange={(newTime: Dayjs | null) => {
79+
if (newTime)
80+
setTime(newTime);
81+
}}
82+
/>
83+
</div>
84+
</div>
85+
</LocalizationProvider>
86+
)
87+
}

‎src/components/calendar/meeting/MeetingSearchResult.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,10 @@ export default function MeetingSearchResult(
3737

3838
useEffect(() => {
3939
getUser(axiosInstance).then(setMyUser).catch(console.error);
40-
}, []);
41-
42-
useEffect(() => {
4340
getUserIdsForMeeting(axiosInstance, meeting.id)
4441
.then(setUserIds)
4542
.catch(console.error);
46-
}, []);
43+
}, [meeting.id]);
4744

4845
useEffect(() => {
4946
if (myUser == null) return;

‎src/components/yourStudies/UserInfo.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,20 @@ export default function UserInfo(props: { reload: boolean }) {
1616
const [activeModule, setActiveModule] = useState<UserModule | undefined>();
1717

1818
useEffect(() => {
19-
fetchUserInfo();
20-
fetchMeetings();
19+
async function fetchMeetings() {
20+
try {
21+
const resp = await getMeetingsOfWeek(axiosInstance);
22+
setWeeklyMeetings(filterMeetingsThisWeek(resp)); // this is necessary, because backend doesn't have filter function yet
23+
} catch (e) {
24+
console.error(e);
25+
}
26+
}
27+
fetchUserInfo().catch(console.error);
28+
fetchMeetings().catch(console.error);
2129
}, []);
2230

2331
useEffect(() => {
24-
fetchUserInfo();
32+
fetchUserInfo().catch(console.error);
2533
}, [props.reload]);
2634

2735
async function fetchUserInfo() {
@@ -33,15 +41,6 @@ export default function UserInfo(props: { reload: boolean }) {
3341
}
3442
}
3543

36-
async function fetchMeetings() {
37-
try {
38-
const resp = await getMeetingsOfWeek(axiosInstance);
39-
setWeeklyMeetings(filterMeetingsThisWeek(resp)); // this is necessary, because backend doesn't have filter function yet
40-
} catch (e) {
41-
console.error(e);
42-
}
43-
}
44-
4544
function filterMeetingsThisWeek(meetings: MeetingDto[]): MeetingDto[] {
4645
const now = new Date();
4746
const startOfWeek = new Date(now);
@@ -75,7 +74,7 @@ export default function UserInfo(props: { reload: boolean }) {
7574

7675
const closeProgressModal = () => {
7776
setIsProgressModalOpen(false);
78-
fetchUserInfo();
77+
fetchUserInfo().catch(console.error);
7978
};
8079

8180
const openExamModal = () => setIsExamModalOpen(true);

0 commit comments

Comments
 (0)