Create custom events list

Author: Nathan-Bransby-NMT

src/components/Community.tsx

@@ -1,15 +1,29 @@
 import React, { useState, useEffect } from 'react';
 import CustomCalendar from './Calendar';
 import UpcomingEvents from './UpcomingEvents';
+import EventList from './EventList';
 import { fetchEvents } from '../utils/events';
+import { EventData, useCsvParser } from '../hooks/CsvParser';
 
 const Community: React.FC = () => {
-  const [events, setEvents] = useState([]);
+  const [events, setEvents] = useState<EventData[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const loadEvents = async () => {
-      const eventsData = await fetchEvents();
-      setEvents(eventsData);
+      try {
+        const { events: csvEvents, loading, error } = useCsvParser('/events.csv')
+        if (error) {
+          setError(error);
+        } else {
+          setEvents(csvEvents);
+        }
+        setIsLoading(loading);
+      } catch (err) {
+        setError('Failed to fetch events');
+        setIsLoading(false);
+      }
     };
 
     loadEvents();
@@ -22,7 +36,7 @@ const Community: React.FC = () => {
         Welcome to the community page! Here you can find information about our community events, forums, and how to get involved.
       </p>
       <CustomCalendar events={events} />
-      <UpcomingEvents events={events} />
+      <EventList csvFileName="/events.csv" />
     </div>
   );
 };

src/components/EventCard.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { EventData } from '../hooks/CsvParser';
+
+interface EventCardProps extends EventData {}
+
+const EventCard: React.FC<EventCardProps> = ({ 
+    date, 
+    title, 
+    description, 
+    additionalInfo, 
+    beginnerFriendly, 
+    link 
+}) => {
+    // Handle both string and Date objects
+    const eventDate = new Date(date);
+    const month = eventDate.toLocaleString('default', { month: 'long' });
+    const day = eventDate.getDate();
+    const year = eventDate.getFullYear();
+
+    return (
+        <article className='flex bg-white rounded-lg shadow-md overflow-hidden w-full mb-4'>
+            {/* Date Section */}
+            <header className='bg-blue-500 text-white p-4 flex flex-col items-center justify-center min-w-[100px]'>
+                <time dateTime={eventDate.toISOString()}>
+                    <div className='text-xl font-bold text-white'>{month}</div>
+                    <div className='text-6xl font-bold leading-none text-white'>{day}</div>
+                    <div className='text-xl text-white'>{year}</div>
+                </time> 
+            </header>
+            
+            {/* Content Section */}
+            <div className='flex-1 p-4 relative'>
+                <div className='flex justify-between items-center mb-2'>
+                    <h3 className='text-xl font-semibold'>{title}</h3>
+                    {beginnerFriendly && (
+                        <span className='bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm border border-green-300'>
+                            Beginner Friendly
+                        </span>
+                    )}
+                </div>
+
+                <div className='bg-gray-100 rounded-lg p-4 mb-2'>
+                    <p className='text-gray-700'>{description}</p>
+                    {additionalInfo && (
+                        <p className='text-gray-600 mt-2'>{additionalInfo}</p>
+                    )}
+                </div>
+
+                <div className='flex justify-end'>
+                    <a 
+                        href={link}
+                        className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg'
+                        aria-label={`Attend ${title} event`}
+                    >
+                        Attend Event
+                    </a>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export default EventCard;

src/components/EventList.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import EventCard from './EventCard';
+import { useCsvParser } from '../hooks/CsvParser';
+
+
+interface EventListProps {
+    csvFileName: string;
+}
+
+const EventList: React.FC<EventListProps> = ({ csvFileName }) => {
+    const { events, loading, error } = useCsvParser(csvFileName);
+
+    if (loading) {
+        return (
+            <div className='max-w-3xl mx-auto p-4 text-center'>
+                <div className='animate-pulse text-xl'>Loading events...</div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className='max-w-3xl mx-auto p-4 text-center'>
+                <div className='text-xl text-red-500'>Error: {error}</div>
+            </div>
+        );
+    }
+
+    if (events.length === 0) {
+        return (
+            <div className='max-w-3xl mx-auto p-4 text-center'>
+                <div className='text-xl'>No events found</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className='max-w-3xl mx-auto p-4'>
+            <div className='max-h-[600px] overflow-y-auto'>
+                {events.map((event) => (
+                    <EventCard 
+                        key={event.id}
+                        id={event.id}
+                        date={event.date}
+                        title={event.title}
+                        description={event.description}
+                        additionalInfo={event.additionalInfo}
+                        beginnerFriendly={event.beginnerFriendly}
+                        link={event.link}
+                    />
+                ))}
+            </div>
+        </div>  
+    );
+};
+
+export default EventList;

src/hooks/CsvParser.ts

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import Papa, { ParseResult, ParseError } from 'papaparse';
+
+export interface EventData {
+    id: string | number;
+    date: string;
+    title: string;
+    description: string;
+    additionalInfo?: string;
+    beginnerFriendly?: boolean;
+    link: string;
+}
+
+export const useCsvParser = (csvFileName: string) => {
+    const [events, setEvents] = useState<EventData[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchCsvData = async () => {
+            try {
+                setLoading(true);
+                const response = await fetch(csvFileName);
+                const text = await response.text();
+
+                Papa.parse<EventData>(text, {
+                    header: true,
+                    dynamicTyping: true,
+                    skipEmptyLines: true,
+                    transformHeader: header => 
+                        header.toLowerCase().replace(/\s+/g, '_'),
+                    complete: (results: ParseResult<EventData>) => {
+                        setEvents(results.data as EventData[]);
+                        setLoading(false);
+                    },
+                    error: (error: Error) => {
+                        setError(error.message);
+                        setLoading(false);
+                    } 
+                });
+            } catch (err) {
+                setError('Failed to fetch or parse CSV file');
+                setLoading(false);
+            }
+        };
+
+    fetchCsvData();
+    }, [csvFileName]);
+
+    return { events, loading, error };
+};