69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useEffect } from 'react';
|
||
|
|
import { api, Announcement } from '@/lib/api';
|
||
|
|
|
||
|
|
interface AnnouncementListProps {
|
||
|
|
eventId: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AnnouncementList({ eventId }: AnnouncementListProps) {
|
||
|
|
const [announcements, setAnnouncements] = useState<Announcement[]>([]);
|
||
|
|
const [isLoading, setIsLoading] = useState(true);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
loadAnnouncements();
|
||
|
|
}, [eventId]);
|
||
|
|
|
||
|
|
const loadAnnouncements = async () => {
|
||
|
|
try {
|
||
|
|
setIsLoading(true);
|
||
|
|
const data = await api.getEventAnnouncements(eventId);
|
||
|
|
setAnnouncements(data);
|
||
|
|
} catch (err) {
|
||
|
|
setError(err instanceof Error ? err.message : 'Failed to load announcements');
|
||
|
|
} finally {
|
||
|
|
setIsLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return <div className="text-center py-4">Loading announcements...</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return (
|
||
|
|
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded text-sm">
|
||
|
|
{error}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (announcements.length === 0) {
|
||
|
|
return (
|
||
|
|
<div className="text-center py-4 text-gray-500 text-sm">
|
||
|
|
No announcements yet.
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{announcements.map((announcement) => (
|
||
|
|
<div key={announcement.id} className="bg-white rounded-lg shadow-sm border p-4">
|
||
|
|
<div className="flex justify-between items-start mb-2">
|
||
|
|
<h3 className="font-semibold text-lg">{announcement.title}</h3>
|
||
|
|
<span className="text-xs text-gray-500">
|
||
|
|
{new Date(announcement.createdAt).toLocaleDateString()}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-700 whitespace-pre-wrap">{announcement.content}</p>
|
||
|
|
<p className="text-sm text-gray-500 mt-2">
|
||
|
|
Posted by {announcement.authorName}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|