added show more buttons for repeatable meetings

Author: kerry55

src/components/meeting/GroupedMeeting.tsx

@@ -1,70 +1,60 @@
-import React, { useState } from 'react';
-import { MeetingDto } from '../../dtos/MeetingDto';
-import MeetingSearchResult from './MeetingSearchResult';
-import { Grid2 } from '@mui/material';
+import React, { useState } from 'react'
+import { MeetingDto } from '../../dtos/MeetingDto'
+import MeetingSearchResult from './MeetingSearchResult'
+import { Grid2 } from '@mui/material'
 
-interface Props {
-  meetings: MeetingDto[];
-}
-
-export default function GroupedMeeting({ meetings }: Props) {
-  const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
+export default function GroupedMeeting({ meetings }: { meetings: MeetingDto[] }) {
+  const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set())
 
-  const grouped = meetings.reduce<Record<number, MeetingDto[]>>((acc, m) => {
-    (acc[m.superId] = acc[m.superId] || []).push(m);
-    return acc;
-  }, {});
+  const grouped = meetings.reduce((acc, m) => {
+    acc[m.superId] = acc[m.superId] || []
+    acc[m.superId].push(m)
+    return acc
+  }, {} as Record<number, MeetingDto[]>)
 
   Object.values(grouped).forEach(group =>
     group.sort((a, b) => new Date(a.dateFrom).getTime() - new Date(b.dateFrom).getTime())
-  );
-
- const toggle = (sid: number) => {
-  setExpandedIds(prev => {
-    const newExpandedIds = new Set(prev);
-    if (newExpandedIds.has(sid)) {
-      newExpandedIds.delete(sid);
-    } else {
-      newExpandedIds.add(sid);
-    }
-    return newExpandedIds;
-  });
-};
-
-return (
-  <Grid2 container spacing={3} className="my-5 overflow-y-scroll">
-    {Object.entries(grouped).map(([sidStr, group]) => {
-      const sid = Number(sidStr);
-      const [first, ...rest] = group;
-      const isExp = expandedIds.has(sid);
-      const isRepeatable = rest.length > 0;
-
-      return (
-        <React.Fragment key={sid}>
-          <Grid2 size={{ xs: 12, md: 6, lg: 4 }}>
-            <div className="relative">
-              <MeetingSearchResult
-                meeting={first}
-                isRepeatable={isRepeatable}
-                isExpanded={isExp}
-                onToggle={isRepeatable ? () => toggle(sid) : undefined}
-              />
-            </div>
-          </Grid2>
-
-          {isExp && rest.map(m => (
-            <Grid2 key={m.id} size={{ xs: 12, md: 6, lg: 4 }}>
-              <MeetingSearchResult
-                meeting={m}
-                isRepeatable={false}
-                isExpanded={true}
-              />
+  )
+
+  const toggle = (sid: number) => {
+    setExpandedIds(prev => {
+      const next = new Set(prev)
+      next.has(sid) ? next.delete(sid) : next.add(sid)
+      return next
+    })
+  }
+
+  return (
+    <Grid2 container spacing={3} className="my-5 overflow-y-scroll">
+      {Object.entries(grouped).map(([sidStr, group]) => {
+        const sid = +sidStr
+        const [first, ...rest] = group
+        const isExp = expandedIds.has(sid)
+        const isRepeat = rest.length > 0
+
+        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>
-          ))}
-        </React.Fragment>
-      );
-    })}
-  </Grid2>
-);
 
+            {isExp && rest.map(m => (
+              <Grid2 size={{ xs: 12, md: 6, lg: 4 }}>                <MeetingSearchResult
+                  meeting={m}
+                  isRepeatable={false}
+                  isExpanded={true}
+                />
+              </Grid2>
+            ))}
+          </React.Fragment>
+        )
+      })}
+    </Grid2>
+  )
 }

src/form/SearchMeetingForm.tsx

@@ -16,7 +16,6 @@ import axiosInstance from '../AxiosConfig';
 import { ModuleDto } from '../dtos/ModuleDto';
 import { MeetingDto } from '../dtos/MeetingDto';
 import GroupedMeeting from '../components/meeting/GroupedMeeting';
-
 interface Props {
   open: boolean;
   onClose: () => void;
@@ -28,67 +27,86 @@ export function SearchMeetingForm({ open, onClose }: Props) {
   const [selectedModule, setSelectedModule] = useState<string>('');
 
   useEffect(() => {
-    async function fetchModules() {
+    // Lade die verfügbaren Module beim Öffnen des Dialogs
+    const loadModules = async () => {
       try {
         const res = await getModules(axiosInstance);
         setModules(res);
-      } catch (e) {
-        console.error(e);
+      } catch (err) {
+        console.error('Fehler beim Laden der Module:', err);
       }
-    }
-    fetchModules();
+    };
+    loadModules();
   }, []);
 
   useEffect(() => {
-    async function fetchMeetings() {
+    // Wenn ein Modul ausgewählt wurde, lade passende Meetings
+    const loadMeetings = async () => {
       if (!selectedModule) return;
       try {
         const res = await getMeetingsForModule(axiosInstance, selectedModule);
         setMeetings(res);
-      } catch (e) {
-        console.error(e);
+      } catch (err) {
+        console.error('Fehler beim Laden der Meetings:', err);
       }
-    }
-    fetchMeetings();
+    };
+    loadMeetings();
   }, [selectedModule]);
 
-  const handleSelectChange = (event: SelectChangeEvent) => {
-    setSelectedModule(event.target.value as string);
+  const handleModuleChange = (event: SelectChangeEvent) => {
+    setSelectedModule(event.target.value);
   };
 
   return (
-    <Dialog open={open} onClose={onClose} sx={{
-      '& .MuiDialog-container': {
-        '& .MuiPaper-root': {
+    <Dialog
+      open={open}
+      onClose={onClose}
+      sx={{
+        '& .MuiDialog-container .MuiPaper-root': {
           width: '70%',
           maxWidth: '90%',
           minWidth: '350px',
           bgcolor: '#1C212C',
           padding: '8px',
-          height: '80%'
-        }
-      }
-    }}>
-      <DialogTitle sx={{ color: '#FFFFFF', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          height: '80%',
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          color: '#FFFFFF',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
         <span className="font-bold text-2xl">Lernsession finden</span>
-        <IconButton aria-label="close" onClick={onClose} size="large" sx={{ color: '#FFFFFF' }}>
-          <img src={CloseIconPath} alt="close" style={{ width: 16, height: 16 }} />
+        <IconButton onClick={onClose} size="large" sx={{ color: '#FFFFFF' }}>
+          <img src={CloseIconPath} alt="Schließen" style={{ width: 16, height: 16 }} />
         </IconButton>
       </DialogTitle>
+
       <DialogContent>
         <form className="overflow-y-visible">
           <Select
-            variant="outlined"
             value={selectedModule}
-            onChange={handleSelectChange}
-            sx={{ width: '50%', minWidth: 240, color: '#ffffff', bgcolor: '#333C4F', borderColor: '#333C4F' }}
+            onChange={handleModuleChange}
+            variant="outlined"
+            sx={{
+              width: '50%',
+              minWidth: 240,
+              color: '#ffffff',
+              bgcolor: '#333C4F',
+              borderColor: '#333C4F',
+            }}
           >
-            {modules.map((m, i) => (
-              <MenuItem key={i} value={m.name}>
-                {m.name}
+            {modules.map((mod, i) => (
+              <MenuItem key={i} value={mod.name}>
+                {mod.name}
               </MenuItem>
             ))}
           </Select>
+
           <Grid2 container spacing={3} className="my-5 overflow-y-scroll">
             <GroupedMeeting meetings={meetings} />
           </Grid2>