From 7f96d0cd50b39009930401189580a9f834e41944 Mon Sep 17 00:00:00 2001 From: aidenm1 Date: Wed, 27 Nov 2024 15:50:12 -0800 Subject: [PATCH] actually caching things this time --- api/supabase/queries/events.ts | 3 ++ api/supabase/queries/facilities.ts | 2 + app/events/[event_id]/page.tsx | 55 +++++++++++++------------- app/events/page.tsx | 42 ++++---------------- components/MyEventCard/MyEventCard.tsx | 23 +++++------ 5 files changed, 52 insertions(+), 73 deletions(-) diff --git a/api/supabase/queries/events.ts b/api/supabase/queries/events.ts index a3f9ab9..db961d6 100644 --- 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 index 813f044..6b8f56c 100644 --- 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 index 3c01fb0..4574533 100644 --- 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(); const [performer, setPerformer] = useState(); - 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

; + return

Loading...

; } const time = formatTime( diff --git a/app/events/page.tsx b/app/events/page.tsx index ea61424..4efbad0 100644 --- 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([]); - 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' }} > - + ))} diff --git a/components/MyEventCard/MyEventCard.tsx b/components/MyEventCard/MyEventCard.tsx index 3576845..44e61d7 100644 --- a/components/MyEventCard/MyEventCard.tsx +++ b/components/MyEventCard/MyEventCard.tsx @@ -1,4 +1,5 @@ -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'; @@ -6,15 +7,15 @@ 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(); + + 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" > - {facilityData - ? `${facilityData.street_address_1}, ${facilityData.city}` + {facility + ? `${facility.street_address_1}, ${facility.city}` : 'Fetching location...'}