fetch current and up next

apps/app/src/pages/Home/events.ts

@@ -70,8 +70,8 @@ export const events: EventWithSpeakerDto[] = [
     id: 1,
     name: 'Mastering React',
     description: 'An advanced dive into React concepts.',
-    startsAt: '2025-01-19T08:00:00Z',
-    endsAt: '2025-01-19T23:00:00Z',
+    startsAt: '2025-01-25T08:00:00Z',
+    endsAt: '2025-01-25T23:00:00Z',
     maxParticipants: 100,
     requirements: 'Basic React knowledge',
     footageLink: undefined,

apps/app/src/pages/Home/eventsHelper.ts

@@ -46,6 +46,8 @@ export function getNextEvents(events: EventWithSpeakerDto[]) {
   const panels = filterAndSortEventByType(events, 'panel');
   const campfireTalks = filterAndSortEventByType(events, 'campfireTalk');
 
+  console.log(lectures);
+
   const nextLectures = lectures.filter((event) => {
     const startsAt = new Date(event.startsAt);
     const now = new Date();

apps/app/src/pages/Home/sections/EventsSection/EventsSection.tsx

@@ -6,22 +6,37 @@ import { EventWithSpeakerDto } from '@ddays-app/types';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { getLiveEvents, getNextEvents } from '../../eventsHelper';
 import c from './EventsSection.module.scss';
-import { events } from '../../events';
 import clsx from 'clsx';
 
 enum Tabs {
   U_Tijeku,
   Nadolazece,
 }
 
+async function fetchEvents(): Promise<EventWithSpeakerDto[] | undefined> {
+  try {
+    const response = await fetch('/api/event/with-speaker');
+    if (!response.ok) {
+      throw new Error('Failed to fetch events with speakers');
+    }
+    const data = await response.json();
+    console.log(data);
+    return data as EventWithSpeakerDto[];
+  } catch (error) {
+    console.error('Error fetching events with speakers:', error);
+  }
+}
+
 const EventsSection = () => {
   const [lecturesTab, setLecturesTab] = useState<string | number>(
     Tabs.U_Tijeku,
   );
 
   const [snappedCardIndex, setSnappedCardIndex] = useState(0);
-  const [displayedEvents, setDisplayedEvents] =
-    useState<EventWithSpeakerDto[]>(events);
+  const [displayedEvents, setDisplayedEvents] = useState<EventWithSpeakerDto[]>(
+    [],
+  );
+  const [events, setEvents] = useState<EventWithSpeakerDto[]>([]);
 
   const handleTabChange = (tab: string) => {
     setLecturesTab(tab);
@@ -34,8 +49,8 @@ const EventsSection = () => {
     }
   };
 
-  const liveEvents = useMemo(() => getLiveEvents(events), []);
-  const nextEvents = useMemo(() => getNextEvents(events), []);
+  const liveEvents = useMemo(() => getLiveEvents(events), [events]);
+  const nextEvents = useMemo(() => getNextEvents(events), [events]);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const currentEventRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -74,7 +89,7 @@ const EventsSection = () => {
     items.forEach((item) => observer.observe(item));
 
     return () => observer.disconnect();
-  }, [container, liveEvents, nextEvents, displayedEvents]);
+  }, [container, liveEvents, nextEvents, displayedEvents, events]);
 
   const handleDotClick = (index: number) => {
     setSnappedCardIndex(index);
@@ -99,6 +114,15 @@ const EventsSection = () => {
     }
   };
 
+  useEffect(() => {
+    const loadEventsWithSpeakers = async () => {
+      const fetchedCompanies = await fetchEvents();
+      if (fetchedCompanies) setEvents(fetchedCompanies);
+    };
+
+    loadEventsWithSpeakers();
+  }, []);
+
   return (
     <section className={c.lectures}>
       <TabGroup setter={handleTabChange}>