♻️ Fetching of events is now done in a servers component

packages/app/app/explore/components/FeaturedEvents.tsx

@@ -1,4 +1,3 @@
-'use client'
 import Link from 'next/link'
 import {
   Card,
@@ -8,8 +7,6 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 
-import { useState, useEffect } from 'react'
-
 interface Event {
   _id: string
   name: string
@@ -30,69 +27,15 @@ interface Organization {
   slug: string
 }
 
-const FeaturedEvents = () => {
-  const [events, setEvents] = useState<Event[]>([])
-  const [organizations, setOrganizations] = useState<{
-    [key: string]: Organization
-  }>({})
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [eventsResponse, orgsResponse] = await Promise.all([
-          fetch('https://api.streameth.org/events'),
-          fetch('https://api.streameth.org/organizations'),
-        ])
-
-        if (!eventsResponse.ok || !orgsResponse.ok) {
-          throw new Error('Failed to fetch data')
-        }
-
-        const eventsData = await eventsResponse.json()
-        const orgsData = await orgsResponse.json()
-
-        const sortedEvents = eventsData.data
-          .sort(
-            (a: Event, b: Event) =>
-              new Date(b.start).getTime() -
-              new Date(a.start).getTime()
-          )
-          .slice(0, 4)
-
-        const orgsMap = orgsData.data.reduce(
-          (
-            acc: { [key: string]: Organization },
-            org: Organization
-          ) => {
-            acc[org._id] = org
-            return acc
-          },
-          {}
-        )
-
-        setEvents(sortedEvents)
-        setOrganizations(orgsMap)
-      } catch (err) {
-        setError('Error fetching data')
-        console.error(err)
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    fetchData()
-  }, [])
-
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-
-  if (error) {
-    return <div>Error: {error}</div>
-  }
+interface FeaturedEventsProps {
+  events: Event[]
+  organizations: { [key: string]: Organization }
+}
 
+const FeaturedEvents: React.FC<FeaturedEventsProps> = ({
+  events,
+  organizations,
+}) => {
   return (
     <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
       {events.map((event, index) => {

packages/app/app/explore/page.tsx

@@ -1,12 +1,13 @@
 import { HomePageProps } from '@/lib/types'
 import ArchiveVideos from '../[organization]/videos/components/ArchiveVideos'
+import { getFeaturedEventsData } from '../../components/misc/FeaturedEventsData'
 import FeaturedEvents from './components/FeaturedEvents'
 import ExploreTabs from './components/ExploreTabs'
-
 import HomePageNavbar from '@/components/Layout/HomePageNavbar'
 import { Suspense } from 'react'
 
-const Home = ({ searchParams }: HomePageProps) => {
+const Home = async ({ searchParams }: HomePageProps) => {
+  const { events, organizations } = await getFeaturedEventsData()
   const pages = [
     {
       name: 'Home',
@@ -27,7 +28,10 @@ const Home = ({ searchParams }: HomePageProps) => {
           <h2 className="mb-8 text-3xl font-bold text-foreground">
             Featured Events
           </h2>
-          <FeaturedEvents />
+          <FeaturedEvents
+            events={events}
+            organizations={organizations}
+          />
         </section>
         <section>
           <h2 className="mb-8 text-3xl font-bold text-foreground">

packages/app/components/misc/FeaturedEventsData.tsx

@@ -0,0 +1,65 @@
+import { cache } from 'react'
+
+interface Event {
+  _id: string
+  name: string
+  description: string
+  start: string
+  end: string
+  logo: string
+  eventCover: string
+  location: string
+  slug: string
+  website: string
+  organizationId: string
+}
+
+interface Organization {
+  _id: string
+  name: string
+  slug: string
+}
+
+const fetchEvents = cache(async () => {
+  const response = await fetch('https://api.streameth.org/events', {
+    next: { revalidate: 3600 },
+  })
+  if (!response.ok) {
+    throw new Error('Failed to fetch events')
+  }
+  const data = await response.json()
+  console.log(data)
+  return data.data
+    .sort(
+      (a: Event, b: Event) =>
+        new Date(b.start).getTime() - new Date(a.start).getTime()
+    )
+    .slice(0, 4)
+})
+
+const fetchOrganizations = cache(async () => {
+  const response = await fetch(
+    'https://api.streameth.org/organizations',
+    { next: { revalidate: 3600 } }
+  )
+  if (!response.ok) {
+    throw new Error('Failed to fetch organizations')
+  }
+  const data = await response.json()
+  return data.data.reduce(
+    (acc: { [key: string]: Organization }, org: Organization) => {
+      acc[org._id] = org
+      return acc
+    },
+    {}
+  )
+})
+
+export async function getFeaturedEventsData() {
+  const [events, organizations] = await Promise.all([
+    fetchEvents(),
+    fetchOrganizations(),
+  ])
+
+  return { events, organizations }
+}