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 b22c80b..4574533 100644 --- a/app/events/[event_id]/page.tsx +++ b/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(); const [performer, setPerformer] = useState(); - 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

; + return

Loading...

; } const time = formatTime( diff --git a/app/events/eventscache.tsx b/app/events/eventscache.tsx new file mode 100644 index 0000000..ecfe184 --- /dev/null +++ b/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); diff --git a/app/events/page.tsx b/app/events/page.tsx index ce5c6f9..4efbad0 100644 --- a/app/events/page.tsx +++ b/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([]); + const [events, setEvents] = useState([]); - 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) => { diff --git a/app/events/styles.ts b/app/events/styles.ts index 914c0d3..462fec4 100644 --- a/app/events/styles.ts +++ 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; diff --git a/components/MyEventCard/MyEventCard.tsx b/components/MyEventCard/MyEventCard.tsx index 42090c9..44e61d7 100644 --- a/components/MyEventCard/MyEventCard.tsx +++ b/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(); - useEffect(() => { - fetchFacilityById(eventData.facility_id).then(facilityData => { + useMemo(() => { + cachedFacility(eventData.facility_id).then(facilityData => { setFacility(facilityData); }); }, [eventData.facility_id]);