Fix many issues with backend compatibility

Author: Alexandra Zwinger

src/api/UserGroupApi.tsx

@@ -7,6 +7,12 @@ export function joinStudyGroup(axios: AxiosInstance, meetingId: string): Promise
         .then(handleSuccessResponse, handleErrorResponse);
 }
 
+export function joinSuperStudyGroup(axios: AxiosInstance, superMeetingId: string): Promise<void> {
+    const meetingId = "";
+    return axios.post(`/${Resources.USERGROUP}`, {superMeetingId, meetingId})
+        .then(handleSuccessResponse, handleErrorResponse);
+}
+
 export async function getUserIdsForMeeting(axios: AxiosInstance, uuid: string): Promise<string[]> {
     const res = await axios.get(`/studygroup?uuid=${uuid}`);
     const data = res.data;
@@ -19,4 +25,11 @@ export function leaveStudyGroup(axios: AxiosInstance, targetUUID: string): Promi
         params: {targetUUID}
     })
         .then(handleSuccessResponse, handleErrorResponse);
+}
+
+export function leaveSuperStudyGroup(axios: AxiosInstance, targetUUID: string): Promise<void> {
+    return axios.delete(`/${Resources.USERGROUP}`, {
+        params: {targetUUID}
+    })
+        .then(handleSuccessResponse, handleErrorResponse);
 }

src/components/CalendarComponent.tsx

@@ -34,7 +34,7 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
         return meetings.map(meeting => ({
             id: meeting.id.toString(),
             superId: meeting.superId.toString(),
-            title: meeting.title,
+            title: meeting.module,
             start: new Date(meeting.dateFrom).toISOString(),
             end: new Date(meeting.dateUntil).toISOString(),
             description: meeting.description,
@@ -50,9 +50,10 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
     }, [props.isDialogOpen, isMeetingFormOpen]);
 
     const Eventhandler = (info: any) => {
+        console.log(info);
         const {event} = info;
         const id = event.id;
-        const title = event.title;
+        const module = event.title;
         const date_from = new Date(event.start).toLocaleString();
         const date_until = new Date(event.end).toLocaleString();
         const superId = event.extendedProps?.superId || '';
@@ -64,7 +65,7 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
         setSelectedMeeting({
             id: id,
             superId: superId,
-            title,
+            module,
             dateFrom: date_from,
             dateUntil: date_until,
             description,

src/components/meeting/GroupedMeeting.tsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react'
 import {MeetingDto} from '../../dtos/MeetingDto'
 import MeetingSearchResult from './MeetingSearchResult'
-import {Grid2} from '@mui/material'
+import Grid from '@mui/material/Grid2';
 
 export default function GroupedMeeting({meetings}: { meetings: MeetingDto[] }) {
     const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
@@ -25,7 +25,7 @@ export default function GroupedMeeting({meetings}: { meetings: MeetingDto[] }) {
     }
 
     return (
-        <Grid2 container spacing={3} className="my-5 overflow-y-scroll">
+        <Grid container spacing={3} className="my-5 overflow-y-scroll">
             {Object.entries(grouped).map(([sidStr, group]) => {
                 const sid = sidStr;
                 const [first, ...rest] = group;
@@ -34,28 +34,25 @@ export default function GroupedMeeting({meetings}: { meetings: MeetingDto[] }) {
 
                 return (
                     <React.Fragment key={sid}>
-                        <Grid2 size={{xs: 12, md: 6, lg: 4}}>
-                            <div className="relative">
-                                <MeetingSearchResult
-                                    meeting={first}
-                                    isRepeatable={isRepeat}
-                                    isExpanded={isExp}
-                                    onToggle={isRepeat ? () => toggle(sid) : undefined}
-                                />
-                            </div>
-                        </Grid2>
+                        <Grid size={{xs: 12, md: 6, lg: 4}}>
+                            <MeetingSearchResult
+                                meeting={first}
+                                isExpanded={!isRepeat ? undefined : isExp}
+                                onToggle={isRepeat ? () => toggle(sid) : undefined}
+                            />
+                        </Grid>
 
                         {isExp && rest.map(m => (
-                            <Grid2 size={{xs: 12, md: 6, lg: 4}} key={m.id}> <MeetingSearchResult
-                                meeting={m}
-                                isRepeatable={false}
-                                isExpanded={true}
-                            />
-                            </Grid2>
+                            <Grid size={{xs: 12, md: 6, lg: 4}} key={m.id}>
+                                <MeetingSearchResult
+                                    meeting={m}
+                                    isExpanded={true}
+                                />
+                            </Grid>
                         ))}
                     </React.Fragment>
                 )
             })}
-        </Grid2>
+        </Grid>
     )
 }

src/components/meeting/MeetingDetails.tsx

@@ -64,7 +64,7 @@ const MeetingDetails: React.FC<ModalProps> = ({isOpen, meeting, onClose, openMee
                     ×
                 </button>
 
-                <h2 className="font-bold text-2xl text-white mb-4">{meeting?.title}</h2>
+                <h2 className="font-bold text-2xl text-white mb-4">{meeting?.module}</h2>
 
                 <div className="flex flex-col gap-4 mb-4">
                     <p className="text-bs font-medium text-white">

src/components/meeting/MeetingSearchResult.tsx

@@ -2,15 +2,20 @@ import React, {ReactNode, useEffect, useState} from 'react';
 import {MeetingDto} from '../../dtos/MeetingDto';
 import {UserDto} from '../../dtos/UserDto';
 import {getUser} from '../../api/UserApi';
-import {getUserIdsForMeeting, joinStudyGroup, leaveStudyGroup} from '../../api/UserGroupApi';
+import {
+    getUserIdsForMeeting,
+    joinStudyGroup,
+    joinSuperStudyGroup,
+    leaveStudyGroup,
+    leaveSuperStudyGroup
+} from '../../api/UserGroupApi';
 import axiosInstance from '../../AxiosConfig';
 import {CuteButton} from '../CuteButton';
 import {Theme, Tooltip} from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 interface Props {
     meeting: MeetingDto;
-    isRepeatable?: boolean;
     isExpanded?: boolean;
     onToggle?: () => void;
     children?: ReactNode;
@@ -19,7 +24,6 @@ interface Props {
 export default function MeetingSearchResult(
     {
         meeting,
-        isRepeatable,
         isExpanded,
         onToggle
     }: Props
@@ -59,17 +63,36 @@ export default function MeetingSearchResult(
             .finally(() => setLoading(false));
     };
 
+    const joinSuperMeeting = () => {
+        setLoading(true);
+        if (myUserId === undefined) {
+            setLoading(false);
+            alert("userId undefined");
+            return;
+        }
+        joinSuperStudyGroup(axiosInstance, meeting.superId.toString())
+            .then(() => setUserIds(prev => [...prev, myUserId]))
+            .finally(() => setLoading(false));
+    };
+
     const leaveMeeting = () => {
         setLoading(true);
         leaveStudyGroup(axiosInstance, meeting.id)
             .then(() => setUserIds(prev => prev.filter(id => id !== myUserId)))
             .finally(() => setLoading(false));
     };
 
+    const leaveSuperMeeting = () => {
+        setLoading(true);
+        leaveSuperStudyGroup(axiosInstance, meeting.superId.toString())
+            .then(() => setUserIds(prev => prev.filter(id => id !== myUserId)))
+            .finally(() => setLoading(false));
+    };
+
     return (
         <div className="bg-[#333C4F] p-4 flex flex-col gap-4">
             <div className="min-h-80">
-                <h2 className="font-bold text-2xl text-white mb-4 line-clamp-2 h-14">{meeting.title}</h2>
+                <h2 className="font-bold text-2xl text-white mb-4 line-clamp-2 h-14">{meeting.module}</h2>
 
                 <div className="flex flex-col gap-4 mb-4">
                     <p className="text-bs font-medium text-white">
@@ -142,8 +165,8 @@ export default function MeetingSearchResult(
             <div className="flex gap-2 pt-2">
                 {!loading && !isMember && (
                     <CuteButton
-                        onClick={joinMeeting}
-                        text={isRepeatable ? 'An allen Meetings teilnehmen' : 'Teilnehmen'}
+                        onClick={isExpanded == false ? joinSuperMeeting : joinMeeting}
+                        text={isExpanded == false ? 'An allen Meetings teilnehmen' : 'Teilnehmen'}
                         textColor="#e8fcf6"
                         bgColor="#56A095"
                         classname="text-sm w-full"
@@ -154,8 +177,8 @@ export default function MeetingSearchResult(
 
                     {!loading && isMember && (
                         <CuteButton
-                            onClick={leaveMeeting}
-                            text={isRepeatable ? 'Alle Meetings verlassen' : 'Meeting verlassen'}
+                            onClick={isExpanded == false ? leaveSuperMeeting : leaveMeeting}
+                            text={isExpanded == false ? 'Alle Meetings verlassen' : 'Meeting verlassen'}
                             textColor="#e8fcf6"
                             bgColor="#974242"
                             classname="text-sm w-full"

src/components/yourStudies/UserInfo.tsx

@@ -88,7 +88,7 @@ export default function UserInfo() {
                     <tbody>
                     {weeklyMeetings.map((meeting, index) => (
                         <tr key={index}>
-                            <td className="px-1 py-1 text-[#9B9B9B]">{meeting.title}</td>
+                            <td className="px-1 py-1 text-[#9B9B9B]">{meeting.module}</td>
                             <td className="px-1 py-1 text-[#2AB19D]">
                                 {new Date(meeting.dateFrom).toLocaleDateString()}
                             </td>
@@ -108,7 +108,7 @@ export default function UserInfo() {
                     {weeklyMeetings.map((meeting, index) => (
                         <div key={index} className="p-3 shadow-sm">
                             <p className="text-[#9B9B9B]">
-                                {meeting.title}
+                                {meeting.module}
                             </p>
                             <p className="text-[#2AB19D] inline">
                                 {new Date(meeting.dateFrom).toLocaleDateString()}

src/dtos/MeetingDto.tsx

@@ -3,7 +3,7 @@ import {ChangeType} from "../enum/ChangeType";
 export type MeetingDto = {
     id: string,
     superId: number,
-    title: string,
+    module: string,
     description: string,
     dateFrom: string,
     dateUntil: string,
@@ -14,7 +14,7 @@ export type MeetingDto = {
 }
 
 export type CreateMeetingDto = {
-    title: string,
+    module: string,
     description: string,
     dateFrom: string,
     dateUntil: string,

src/form/CreateOrUpdateMeetingForm.tsx

@@ -30,7 +30,7 @@ export function CreateOrUpdateMeetingForm({open, onClose, meeting, onlyThisMeeti
     const dateFrom = dayjs(meeting?.dateFrom, "D.M.YYYY, H:mm:ss");
     const dateUntil = dayjs(meeting?.dateUntil, "D.M.YYYY, H:mm:ss");
 
-    const [meetingTitle, setMeetingTitle] = useState(meeting ? meeting.title : "");
+    const [meetingTitle, setMeetingTitle] = useState(meeting ? meeting.module : "");
     const [repeatable, setRepeatable] = useState(meeting ? meeting.repeatable : "never");
     const [meetingDescription, setMeetingDescription] = useState(meeting ? meeting.description : '');
     const [meetingRoom, setMeetingRoom] = useState(meeting ? meeting.place : '');
@@ -100,7 +100,7 @@ export function CreateOrUpdateMeetingForm({open, onClose, meeting, onlyThisMeeti
             changeType = ChangeType.SERIES;
 
         const meetingData: CreateMeetingDto = {
-            title: meetingTitle,
+            module: meetingTitle,
             description: meetingDescription,
             place: meetingRoom,
             dateFrom: date1.hour(time1.hour()).minute(time1.minute()).format("DD-MM-YYYY:HH:mm") || "",

src/form/SearchMeetingForm.tsx

@@ -7,7 +7,6 @@ import {
     Select,
     MenuItem,
     SelectChangeEvent,
-    Grid2
 } from '@mui/material';
 import CloseIconPath from '../data/close_icon_red.png';
 import {getMeetingsForModule} from '../api/MeetingApi';
@@ -112,9 +111,7 @@ export function SearchMeetingForm({open, onClose}: Props) {
                         ))}
                     </Select>
 
-                    <Grid2 container spacing={3} className="my-5 overflow-y-scroll">
-                        <GroupedMeeting meetings={meetings}/>
-                    </Grid2>
+                    <GroupedMeeting meetings={meetings}/>
                 </form>
             </DialogContent>
         </Dialog>

src/pages/CalendarPage.tsx

@@ -37,7 +37,7 @@ export default function CalenderPage() {
             <CreateOrUpdateMeetingForm open={isCreateMeetingDialogOpen} onClose={closeCreateMeetingForm}/>
             <SearchMeetingForm open={isSearchMeetingDialogOpen} onClose={closeSearchMeetingForm}/>
             <div className="flex overflow-hidden flex-col justify-center sm:mx-10 mx-3">
-                <CalendarComponent isDialogOpen={isCreateMeetingDialogOpen}/>
+                <CalendarComponent isDialogOpen={isCreateMeetingDialogOpen || isSearchMeetingDialogOpen}/>
             </div>
         </>
     );