basic event filtering

client/src/pages/EventsPage.tsx

@@ -11,16 +11,44 @@ import {
   Button,
 } from "@nextui-org/react";
 
-const EventsPage = () => {
-  const [events, setEvents] = useState<any[]>([]);
+interface Event {
+  id: number;
+  title: string;
+  category: string;
+  location: string;
+  time: string; // Assuming time is a string, adjust if necessary
+  description: string;
+  imageUrl: string;
+}
+
+const EventsPage: React.FC = () => {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
+  const [categories, setCategories] = useState<string[]>([]);
+  const [locations, setLocations] = useState<string[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string>("");
+  const [selectedLocation, setSelectedLocation] = useState<string>("");
+  const [selectedTime, setSelectedTime] = useState<string>("");
+
   const navigate = useNavigate();
 
   useEffect(() => {
     const fetchEvents = async () => {
       try {
-        const res = await instance.get(config.serverAddress + "/events");
-        console.log("Fetched events data:", res.data); // Log the fetched data
+        const res = await instance.get<Event[]>(`${config.serverAddress}/events`);
+        console.log("Fetched events data:", res.data);
         setEvents(res.data);
+        setFilteredEvents(res.data);
+
+        // Extract unique categories and locations from events
+        const uniqueCategories = Array.from(
+          new Set(res.data.map((event) => event.category).filter(Boolean))
+        );
+        const uniqueLocations = Array.from(
+          new Set(res.data.map((event) => event.location).filter(Boolean))
+        );
+        setCategories(uniqueCategories);
+        setLocations(uniqueLocations);
       } catch (error) {
         console.error("Failed to fetch events:", error);
       }
@@ -29,17 +57,71 @@ const EventsPage = () => {
     fetchEvents();
   }, []);
 
+  useEffect(() => {
+    // Filter events based on selected criteria
+    const filtered = events.filter((event) => {
+      const matchCategory = selectedCategory ? event.category === selectedCategory : true;
+      const matchLocation = selectedLocation ? event.location === selectedLocation : true;
+      const matchTime = selectedTime ? event.time === selectedTime : true;
+
+      return matchCategory && matchLocation && matchTime;
+    });
+
+    setFilteredEvents(filtered);
+  }, [selectedCategory, selectedLocation, selectedTime, events]);
+
   return (
     <div className="w-full h-full">
       <div className="p-8">
         <div className="mb-6">
           <h2 className="text-3xl font-semibold text-primary-600">Events</h2>
         </div>
+        {/* Filter Options */}
+        <div className="mb-6 flex gap-4">
+          <select
+            value={selectedCategory}
+            onChange={(e) => setSelectedCategory(e.target.value)}
+            className="bg-white border border-gray-300 rounded px-3 py-2"
+          >
+            <option value="">All Categories</option>
+            {categories.map((category, index) => (
+              <option key={index} value={category}>
+                {category}
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={selectedLocation}
+            onChange={(e) => setSelectedLocation(e.target.value)}
+            className="bg-white border border-gray-300 rounded px-3 py-2"
+          >
+            <option value="">All Locations</option>
+            {locations.map((location, index) => (
+              <option key={index} value={location}>
+                {location}
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={selectedTime}
+            onChange={(e) => setSelectedTime(e.target.value)}
+            className="bg-white border border-gray-300 rounded px-3 py-2"
+          >
+            <option value="">All Times</option>
+            <option value="morning">Morning</option>
+            <option value="afternoon">Afternoon</option>
+            <option value="evening">Evening</option>
+          </select>
+        </div>
+
+        {/* Event List */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {events.length === 0 ? (
+          {filteredEvents.length === 0 ? (
             <p className="text-gray-600">No events available.</p>
           ) : (
-            events.map((event) => (
+            filteredEvents.map((event) => (
               <Card
                 key={event.id}
                 className="bg-white rounded-lg overflow-hidden border"
@@ -54,7 +136,6 @@ const EventsPage = () => {
                     src={event.imageUrl}
                     width="100%"
                     height={180}
-                    data-disableanimation={true} // Use custom data attribute
                   />
                 </CardBody>
                 <CardFooter className="flex flex-col items-start p-4">