71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { Container } from '@mui/material';
|
|
import Navbar from '../ComponentUtils/Headers/Navbar';
|
|
import Footer from '../ComponentUtils/Footer';
|
|
import ImageGalleryCard from '../ComponentUtils/ImageGalleryCard';
|
|
import ImageGallery from '../ComponentUtils/ImageGallery';
|
|
|
|
|
|
const PublicGroupImagesPage = () => {
|
|
const { groupId } = useParams();
|
|
const [group, setGroup] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
loadGroup();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [groupId]);
|
|
|
|
const loadGroup = async () => {
|
|
try {
|
|
setLoading(true);
|
|
// Public endpoint (no moderation controls)
|
|
const res = await fetch(`/groups/${groupId}`);
|
|
if (!res.ok) throw new Error('Nicht gefunden');
|
|
const data = await res.json();
|
|
setGroup(data);
|
|
} catch (e) {
|
|
setError('Fehler beim Laden der Gruppe');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) return <div className="moderation-loading">Lade Gruppe...</div>;
|
|
if (error) return <div className="moderation-error">{error}</div>;
|
|
if (!group) return <div className="moderation-error">Gruppe nicht gefunden</div>;
|
|
|
|
return (
|
|
<div className="allContainer">
|
|
<Navbar />
|
|
|
|
<Container maxWidth="lg" className="page-container" style={{ marginTop: '40px' }}>
|
|
<ImageGalleryCard
|
|
item={group}
|
|
showActions={false}
|
|
isPending={!group.approved}
|
|
mode="group"
|
|
hidePreview={true}
|
|
/>
|
|
|
|
<ImageGallery
|
|
items={group.images && group.images.length > 0 ? group.images.map(img => ({
|
|
remoteUrl: `/download/${img.fileName}`,
|
|
originalName: img.originalName || img.fileName,
|
|
id: img.id
|
|
})) : []}
|
|
showActions={false}
|
|
mode="single-image"
|
|
emptyMessage="Keine Bilder in dieser Gruppe."
|
|
/>
|
|
</Container>
|
|
|
|
<div className="footerContainer"><Footer /></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PublicGroupImagesPage;
|