diff --git a/frontend/src/components/ui/ForumDashboard.tsx b/frontend/src/components/ui/ForumDashboard.tsx index fb41421..2a1b30d 100644 --- a/frontend/src/components/ui/ForumDashboard.tsx +++ b/frontend/src/components/ui/ForumDashboard.tsx @@ -5,6 +5,7 @@ import Link from 'next/link'; import Loading from '@/components/Loading'; import { StaffMember, Event, ForumEvent } from '@/types'; import { FormattedReviewText, formatReviewText } from '@/utils/textFormatting'; +import { useMemo } from 'react'; const ForumDashboard = () => { const { loading } = useAuth(); @@ -17,6 +18,7 @@ const ForumDashboard = () => { const [isEngagePopupOpen, setIsEngagePopupOpen] = useState(false); const [isEngageLoading, setIsEngageLoading] = useState(false); const [engageEvents, setEngageEvents] = useState([]); + const [searchTerm, setSearchTerm] = useState(''); // Form state const [title, setTitle] = useState(''); @@ -135,6 +137,18 @@ const ForumDashboard = () => { } }, [isEngagePopupOpen]); + // Filter Engage events based on search term + const filteredEngageEvents = useMemo(() => { + const term = searchTerm.toLowerCase(); + return engageEvents.filter( + (event) => + event.name.toLowerCase().includes(term) || + (event.location && + event.location.toLowerCase().includes(term)) || + (event.host && event.host.toLowerCase().includes(term)) + ); + }, [searchTerm, engageEvents]); + const resetForm = () => { setTitle(''); setDescription(''); @@ -401,22 +415,37 @@ const ForumDashboard = () => { Import from Engage - {/* List of Events */} +
+ + setSearchTerm(e.target.value) + } + /> +
+ + {/* List of events */}
{isEngageLoading ? (
- ) : engageEvents.length > 0 ? ( + ) : filteredEngageEvents.length > 0 ? (
    - {engageEvents.map( + {filteredEngageEvents.map( (event: Event, index) => (
  • { setLocation( event.location ); + setEventDate( toDatetimeLocal( new Date( @@ -492,9 +522,14 @@ const ForumDashboard = () => { ).toISOString() ) ); + setIsEngagePopupOpen( false ); + + setSearchTerm( + '' + ); }} className="bg-blue-500 text-white px-3 py-1.5 rounded hover:bg-blue-600 text-sm" > @@ -517,7 +552,10 @@ const ForumDashboard = () => { {/* Footer */}