actually caching things this time

calblueprint · Nov 27, 2024 · 7f96d0c · 7f96d0c
1 parent e91b653
commit 7f96d0c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 73 deletions.
diff --git a/api/supabase/queries/events.ts b/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('*')

diff --git a/api/supabase/queries/facilities.ts b/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('*')

diff --git a/app/events/[event_id]/page.tsx b/app/events/[event_id]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import Link from 'next/link';
 import { UUID } from 'crypto';
 import {
@@ -40,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 cachedEvent(params.event_id);
-      setEvent(fetchedEvent);
-      const fetchedFacility: Facilities = await cachedFacility(
-        fetchedEvent.facility_id,
-      );
-      setFacility(fetchedFacility);
-      const fetchedFacilityContact: FacilityContacts =
-        await cachedFacilityContact(fetchedEvent.facility_id);
-      setFacilityContact(fetchedFacilityContact);
-
-      if (fetchedEvent.needs_host) {
-        const host: Volunteers = await cachedHost(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 cachedPerformer(
-        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(

diff --git a/app/events/page.tsx b/app/events/page.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import Link from 'next/link';
-import { cachedEvents, cachedFacility } from '@/app/events/eventscache';
+import { cachedEvents } from '@/app/events/eventscache';
 import MenuBar from '@/components/MenuBar/MenuBar';
 import MyEventCard from '@/components/MyEventCard/MyEventCard';
-import { Event, Facilities } from '@/types/schema';
+import { Event } from '@/types/schema';
 import * as styles from './styles';
 
 type GroupedEvents = {
@@ -14,34 +14,12 @@ type GroupedEvents = {
 
 export default function EventPage() {
   const [events, setEvents] = useState<Event[]>([]);
-  const [facilities, setFacilities] = useState<{ [id: string]: Facilities }>(
-    {},
-  );
 
-  useEffect(() => {
-    // Fetch events
+  useMemo(() => {
     cachedEvents('11d219d9-bf05-4a06-a23e-89fd566c7a04').then(
-      async eventsData => {
-        const events = eventsData ?? [];
-        setEvents(events);
-
-        // Fetch facility data for each event
-        const facilityIds = [
-          ...new Set(events.map(event => event.facility_id)),
-        ];
-        const facilityPromises = facilityIds.map(id => cachedFacility(id));
-        const facilitiesData = await Promise.all(facilityPromises);
-
-        // Map facilities by their ID for easier access
-        const facilitiesMap = facilityIds.reduce(
-          (acc, id, index) => {
-            acc[id] = facilitiesData[index];
-            return acc;
-          },
-          {} as { [id: string]: Facilities },
-        );
-
-        setFacilities(facilitiesMap);
+      //placeholder user id
+      eventsData => {
+        setEvents(eventsData ?? []);
       },
     );
   }, []);
@@ -100,11 +78,7 @@ export default function EventPage() {
                   href={`/events/${event.event_id}`}
                   style={{ textDecoration: 'none' }}
                 >
-                  <MyEventCard
-                    key={event.event_id}
-                    eventData={event}
-                    facilityData={facilities[event.facility_id]}
-                  />
+                  <MyEventCard key={event.event_id} {...event} />
                 </Link>
               ))}
             </div>

diff --git a/components/MyEventCard/MyEventCard.tsx b/components/MyEventCard/MyEventCard.tsx
@@ -1,20 +1,21 @@
-import React from 'react';
+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';
 import { Event, Facilities } from '@/types/schema';
 import formatTime from '@/utils/formatTime';
 import * as styles from './styles';
 
-interface MyEventCardProps {
-  eventData: Event;
-  facilityData?: Facilities;
-}
+export default function MyEventCard(eventData: Event) {
+  const [facility, setFacility] = useState<Facilities>();
+
+  useMemo(() => {
+    cachedFacility(eventData.facility_id).then(facilityData => {
+      setFacility(facilityData);
+    });
+  }, [eventData.facility_id]);
 
-export default function MyEventCard({
-  eventData,
-  facilityData,
-}: MyEventCardProps) {
   const formattedTime = formatTime(
     new Date(eventData.start_date_time),
     new Date(eventData.end_date_time),
@@ -42,8 +43,8 @@ export default function MyEventCard({
             $align="left"
           >
             <styles.LPImage src={LocPin} alt="Location Pin" />
-            {facilityData
-              ? `${facilityData.street_address_1}, ${facilityData.city}`
+            {facility
+              ? `${facility.street_address_1}, ${facility.city}`
               : 'Fetching location...'}
           </styles.LocationText>
         </div>