Fix: Cache event data queried from database

api/supabase/queries/events.ts

@@ -12,6 +12,7 @@ export async function fetchAllEvents() {
 }
 
 export async function fetchAcceptedEventsByVolunteer(user_id: UUID) {
+  console.log('fetching events');
   const { data, error } = await supabase
     .from('event_signups')
     .select('*')
@@ -55,6 +56,7 @@ export async function fetchAllActiveEvents() {
 }
 
 export async function fetchEventById(event_id: string) {
+  console.log('fetching event by id');
   const { data, error } = await supabase
     .from('events')
     .select('*')
@@ -68,6 +70,7 @@ export async function fetchEventById(event_id: string) {
 }
 
 export async function fetchEventHostByID(event_id: UUID) {
+  console.log('fetching event host');
   const { data, error } = await supabase
     .from('event_signups')
     .select('*')

api/supabase/queries/facilities.ts

@@ -3,6 +3,7 @@ import supabase from '../createClient';
 
 // fetches an event by its event_id
 export async function fetchFacilityById(facility_id: string) {
+  console.log('fetching facility by id');
   const { data, error } = await supabase
     .from('facilities')
     .select('*')
@@ -16,6 +17,7 @@ export async function fetchFacilityById(facility_id: string) {
 }
 
 export async function fetchFacilityContactByID(facility_id: UUID) {
+  console.log('fetching facility contact');
   const { data, error } = await supabase
     .from('facility_contacts')
     .select('*')

app/events/[event_id]/page.tsx

@@ -1,17 +1,15 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import Link from 'next/link';
 import { UUID } from 'crypto';
 import {
-  fetchEventById,
-  fetchEventHostByID,
-} from '@/api/supabase/queries/events';
-import {
-  fetchFacilityById,
-  fetchFacilityContactByID,
-} from '@/api/supabase/queries/facilities';
-import { fetchPerformer } from '@/api/supabase/queries/volunteers';
+  cachedEvent,
+  cachedFacility,
+  cachedFacilityContact,
+  cachedHost,
+  cachedPerformer,
+} from '@/app/events/eventscache';
 import LocPin from '@/public/images/black_loc_pin.svg';
 import BPLogo from '@/public/images/bp-logo.png';
 import Calendar from '@/public/images/calendar_icon.svg';
@@ -42,38 +40,37 @@ export default function EventDisplay({
   const [host_phone_number, setHostPhoneNumber] = useState<string>();
   const [performer, setPerformer] = useState<Volunteers>();
 
-  useEffect(() => {
-    const getEvent = async () => {
-      const fetchedEvent: Event = await fetchEventById(params.event_id);
-      setEvent(fetchedEvent);
-      const fetchedFacility: Facilities = await fetchFacilityById(
-        fetchedEvent.facility_id,
-      );
-      setFacility(fetchedFacility);
-      const fetchedFacilityContact: FacilityContacts =
-        await fetchFacilityContactByID(fetchedEvent.facility_id);
-      setFacilityContact(fetchedFacilityContact);
-
-      if (fetchedEvent.needs_host) {
-        const host: Volunteers = await fetchEventHostByID(params.event_id);
-        setHostName(`${host.first_name} ${host.last_name}`);
-        setHostPhoneNumber(host.phone_number);
+  useMemo(() => {
+    cachedEvent(params.event_id).then(eventData => {
+      setEvent(eventData);
+    });
+    cachedPerformer(params.event_id).then(performerData => {
+      setPerformer(performerData);
+    });
+    if (event) {
+      cachedFacility(event.facility_id).then(facilityData => {
+        setFacility(facilityData);
+      });
+      cachedFacilityContact(event.facility_id).then(facilityContact => {
+        setFacilityContact(facilityContact);
+      });
+    }
+    if (event && facility) {
+      if (event.needs_host) {
+        cachedHost(params.event_id).then(host => {
+          setHostName(`${host.first_name} ${host.last_name}`);
+          setHostPhoneNumber(host.phone_number);
+        });
       } else {
-        setHostName(fetchedFacility.host_name);
-        setHostPhoneNumber(fetchedFacility.host_contact);
+        setHostName(facility.host_name);
+        setHostPhoneNumber(facility.host_contact);
       }
-
-      const fetchedPerformer: Volunteers = await fetchPerformer(
-        params.event_id,
-      );
-      setPerformer(fetchedPerformer);
-    };
-    getEvent();
-  }, [params.event_id]);
+    }
+  }, [params.event_id, event, facility]);
 
   // Render once the event is fetched
   if (!event || !facility || !facility_contact || !performer) {
-    return <p></p>;
+    return <p>Loading...</p>;
   }
 
   const time = formatTime(

app/events/eventscache.tsx

@@ -0,0 +1,22 @@
+// cache.ts
+'use client';
+
+import { cache } from 'react';
+import {
+  fetchAcceptedEventsByVolunteer,
+  fetchEventById,
+  fetchEventHostByID,
+} from '@/api/supabase/queries/events';
+import {
+  fetchFacilityById,
+  fetchFacilityContactByID,
+} from '@/api/supabase/queries/facilities';
+import { fetchPerformer } from '@/api/supabase/queries/volunteers';
+
+// Create cached versions of the fetching functions
+export const cachedEvents = cache(fetchAcceptedEventsByVolunteer);
+export const cachedEvent = cache(fetchEventById);
+export const cachedFacility = cache(fetchFacilityById);
+export const cachedFacilityContact = cache(fetchFacilityContactByID);
+export const cachedHost = cache(fetchEventHostByID);
+export const cachedPerformer = cache(fetchPerformer);

app/events/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import Link from 'next/link';
-import { fetchAcceptedEventsByVolunteer } from '@/api/supabase/queries/events';
+import { cachedEvents } from '@/app/events/eventscache';
 import MenuBar from '@/components/MenuBar/MenuBar';
 import MyEventCard from '@/components/MyEventCard/MyEventCard';
 import { Event } from '@/types/schema';
@@ -13,13 +13,13 @@ type GroupedEvents = {
 };
 
 export default function EventPage() {
-  const [data, setData] = useState<Event[]>([]);
+  const [events, setEvents] = useState<Event[]>([]);
 
-  useEffect(() => {
-    fetchAcceptedEventsByVolunteer('11d219d9-bf05-4a06-a23e-89fd566c7a04').then(
+  useMemo(() => {
+    cachedEvents('11d219d9-bf05-4a06-a23e-89fd566c7a04').then(
       //placeholder user id
       eventsData => {
-        setData(eventsData ?? []);
+        setEvents(eventsData ?? []);
       },
     );
   }, []);
@@ -40,7 +40,7 @@ export default function EventPage() {
     }, {} as GroupedEvents);
   };
 
-  const eventsByMonth = groupEventsByMonth(data);
+  const eventsByMonth = groupEventsByMonth(events);
 
   // Sort the events by month
   const sortedEntries = Object.entries(eventsByMonth).sort((a, b) => {

app/events/styles.ts

@@ -19,8 +19,6 @@ export const Page = styled.main`
 `;
 
 export const AllEventsHolder = styled.main`
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;

components/MyEventCard/MyEventCard.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { fetchFacilityById } from '@/api/supabase/queries/facilities';
+import React, { useMemo, useState } from 'react';
+import { cachedFacility } from '@/app/events/eventscache';
 import BPLogo from '@/public/images/bp-logo.png';
 import LocPin from '@/public/images/gray_loc_pin.svg';
 import COLORS from '@/styles/colors';
@@ -10,8 +10,8 @@ import * as styles from './styles';
 export default function MyEventCard(eventData: Event) {
   const [facility, setFacility] = useState<Facilities>();
 
-  useEffect(() => {
-    fetchFacilityById(eventData.facility_id).then(facilityData => {
+  useMemo(() => {
+    cachedFacility(eventData.facility_id).then(facilityData => {
       setFacility(facilityData);
     });
   }, [eventData.facility_id]);