added usergroup api and core functionality for joining study groups

Author: kerry55

src/App.tsx

@@ -47,6 +47,7 @@ export enum Resources {
     MEETING = "meeting",
     USER = "user",
     MODULES = "modules",
+    USERGROUP = "studygroup"
 }
 
 

src/api/MeetingApi.tsx

@@ -8,12 +8,12 @@ export function createMeeting(axios: AxiosInstance, meetingDto: CreateMeetingDto
         .then(handleSuccessResponse, handleErrorResponse);
 }
 
-export function updateMeeting(axios: AxiosInstance, meetingId: number, meetingDto: CreateMeetingDto): Promise<CreateMeetingDto> {
+export function updateMeeting(axios: AxiosInstance, meetingId: string, meetingDto: CreateMeetingDto): Promise<CreateMeetingDto> {
     return axios.put(`/${Resources.MEETING}?id=${meetingId}`, meetingDto)
         .then(handleSuccessResponse, handleErrorResponse);
 }
 
-export function deleteMeeting(axios: AxiosInstance, meetingId: number): Promise<CreateMeetingDto> {
+export function deleteMeeting(axios: AxiosInstance, meetingId: string): Promise<CreateMeetingDto> {
     return axios.delete(`/${Resources.MEETING}?id=${meetingId}`)
         .then(handleSuccessResponse, handleErrorResponse);
 }
@@ -43,4 +43,5 @@ export function getMeetingsForModule(axios: AxiosInstance, module: string): Prom
         .then((listRes) => {
             return listRes;
         });
-}
+}
+

src/api/UserGroupApi.tsx

@@ -0,0 +1,18 @@
+import {AxiosInstance} from "axios";
+import {Resources} from "../App";
+import {handleErrorResponse, handleSuccessResponse} from "./ErrorHandling";
+
+
+export function joinStudyGroup(axios: AxiosInstance, meetingId: string): Promise<void> {
+    return axios.post(`/${Resources.USERGROUP}`, { 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;
+        const userIds = data.map((entry: { userId: string }) => entry.userId);
+        return userIds;
+}

src/components/meeting/MeetingDetails.tsx

@@ -1,17 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import '../../styles/Modal.css';
-import {CuteButton} from "../CuteButton";
-import {CreateMeetingDto} from "../../dtos/MeetingDto";
+import { CuteButton } from "../CuteButton";
+import { MeetingDto } from "../../dtos/MeetingDto";
+import { getUserIdsForMeeting } from "../../api/UserGroupApi";
+import axiosInstance from "../../AxiosConfig";
+import {joinStudyGroup} from "../../api/UserGroupApi"
 
 interface ModalProps {
     isOpen: boolean;
-    meeting: CreateMeetingDto | null;
+    meeting: MeetingDto | null;
     onClose: () => void;
     openMeetingForm: () => void;
     openChooseMeetingModal: () => void;
 }
 
-const MeetingDetails: React.FC<ModalProps> = ({isOpen, meeting, onClose, openMeetingForm, openChooseMeetingModal}) => {
+const MeetingDetails: React.FC<ModalProps> = ({ isOpen, meeting, onClose, openMeetingForm, openChooseMeetingModal }) => {
+
+    const [userIds, setUserIds] = useState<string[]>([]);
+
+    useEffect(() => {
+        if (isOpen && meeting) {
+            getUserIdsForMeeting(axiosInstance, meeting.id)
+                .then(setUserIds)
+                .catch(err => {
+                    console.error("Fehler beim Laden der Teilnehmer:", err);
+                });
+        }
+    }, [isOpen, meeting]);
+
     if (!isOpen || !meeting) return null;
 
     const updateMeeting = () => {
@@ -21,9 +37,23 @@ const MeetingDetails: React.FC<ModalProps> = ({isOpen, meeting, onClose, openMee
         else
             openMeetingForm();
     }
+
+    const joinMeeting = () => {
+
+        joinStudyGroup(axiosInstance, meeting.id)
+
+    }
+
     return (
         <div className="modal-overlay" onClick={onClose}>
-            <div className="modal-content max-w-[90%] w-[450px]" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-content max-w-[90%] w-[700px] relative p-7" onClick={(e) => e.stopPropagation()}>
+
+                <button
+                    onClick={onClose}
+                    className="absolute top-4 right-4 text-white text-xxl hover:text-red-400"
+                >
+                    ×
+                </button>
 
                 <h2 className="font-bold text-2xl text-white mb-4">{meeting.title}</h2>
 
@@ -40,18 +70,34 @@ const MeetingDetails: React.FC<ModalProps> = ({isOpen, meeting, onClose, openMee
                     <p className="text-bs font-medium text-white">
                         <strong className="text-[#CAE8FF] font-semibold">Raum:</strong> {meeting.place}
                     </p>
+
+                    <p className="text-bs font-medium text-white">
+                        <strong className="text-[#CAE8FF] font-semibold">Teilnehmer:</strong>
+                    </p>
+                    <ul className="text-white text-sm list-disc list-inside">
+                        {userIds.map(id => (<li key={id}>{id}</li>))}
+                        {userIds.length === 0 && <li>(noch keine Teilnehmer)</li>}
+                    </ul>
                 </div>
 
                 <div className="flex flex-row gap-4 mb-4 justify-end mt-auto items-center">
                     <div>
-                        <CuteButton onClick={onClose} text={"Abbrechen"} bgColor={"#598BB1"} textColor={"#e6ebfc"}
-                                    classname={"md:text-base text-sm"}/>
+                        <CuteButton
+                            onClick={updateMeeting}
+                            text={"Meeting bearbeiten"}
+                            bgColor={"#598BB1"}
+                            textColor={"#e6ebfc"}
+                            classname={"md:text-base text-sm"}
+                        />
                     </div>
                     <div>
                         <CuteButton
-                            onClick={updateMeeting}
-                            text={"Meeting Bearbeiten"} bgColor={"#56A095"} textColor={"#e8fcf6"}
-                            classname={"md:text-lg text-base"}/>
+                            onClick={joinMeeting}
+                            text={"Beitreten"}
+                            bgColor={"#56A095"}
+                            textColor={"#e8fcf6"}
+                            classname={"md:text-lg text-base"}
+                        />
                     </div>
                 </div>
 

src/dtos/MeetingDto.tsx

@@ -1,7 +1,7 @@
 import {ChangeType} from "../enum/ChangeType";
 
 export type MeetingDto = {
-    id: number,
+    id: string,
     superId: number,
     title: string,
     description: string,

src/styles/Modal.css

@@ -13,7 +13,7 @@
 
 .modal-content {
     background-color: #1C212C;
-    padding: 20px;
+    padding: 50px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     display: flex;