From 10897483ddfaa5ef62d4e5fcfcfdd5aa0153a719 Mon Sep 17 00:00:00 2001 From: Alder Whiteford Date: Tue, 18 Jun 2024 20:04:06 -0400 Subject: [PATCH] New stuff yktv --- frontend/mobile/src/app/app/club/[id].tsx | 13 ++++-- frontend/mobile/src/app/app/event/[id].tsx | 13 ++++-- frontend/mobile/src/hooks/useClub.ts | 27 +++++-------- frontend/mobile/src/hooks/useEvent.ts | 46 ++++++---------------- frontend/mobile/src/hooks/usePreview.ts | 6 +-- 5 files changed, 45 insertions(+), 60 deletions(-) diff --git a/frontend/mobile/src/app/app/club/[id].tsx b/frontend/mobile/src/app/app/club/[id].tsx index 2ce0b378..3a6b5f38 100644 --- a/frontend/mobile/src/app/app/club/[id].tsx +++ b/frontend/mobile/src/app/app/club/[id].tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import { useEffect, useRef } from 'react'; import { Dimensions, Linking } from 'react-native'; import Animated, { interpolate, @@ -22,7 +22,8 @@ import { import { SACColors } from '@/src/app/design-system'; import { Button } from '@/src/app/design-system/components/Button/Button'; import useClub from '@/src/hooks/useClub'; -import { useAppSelector } from '@/src/store/store'; +import { setClubId } from '@/src/store/slices/clubSlice'; +import { useAppDispatch, useAppSelector } from '@/src/store/store'; import { AboutSection } from '../../design-system/components/AboutSection/AboutSection'; import AnimatedImageHeader from '../../design-system/components/AnimatedImageHeader/AnimatedImageHeader'; @@ -46,7 +47,13 @@ const ClubPage = () => { const bottomSheet = useRef(null); const club = useAppSelector((state) => state.club); - const { setRetriggerFetch, apiLoading, apiError } = useClub(id as string); + const dispatch = useAppDispatch(); + const { setRetriggerFetch, apiLoading, apiError } = useClub(); + + useEffect(() => { + dispatch(setClubId(id)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const headerAnimatedStyle = useAnimatedStyle(() => { return { diff --git a/frontend/mobile/src/app/app/event/[id].tsx b/frontend/mobile/src/app/app/event/[id].tsx index 1ada9792..51be4eff 100644 --- a/frontend/mobile/src/app/app/event/[id].tsx +++ b/frontend/mobile/src/app/app/event/[id].tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import { useEffect, useRef } from 'react'; import { Dimensions } from 'react-native'; import Animated, { interpolate, @@ -17,7 +17,8 @@ import { SACColors } from '@/src/app/design-system'; import { Button } from '@/src/app/design-system/components/Button/Button'; import { description, events, tags } from '@/src/consts/event-page'; import useEvent from '@/src/hooks/useEvent'; -import { useAppSelector } from '@/src/store/store'; +import { setEventId } from '@/src/store/slices/eventSlice'; +import { useAppDispatch, useAppSelector } from '@/src/store/store'; import AnimatedImageHeader from '../../design-system/components/AnimatedImageHeader/AnimatedImageHeader'; import PageError from '../../design-system/components/PageError/PageError'; @@ -58,12 +59,18 @@ const EventPage = () => { const scrollRef = useAnimatedRef(); const scrollOffset = useScrollViewOffset(scrollRef); + const dispatch = useAppDispatch(); const event = useAppSelector((state) => state.event); const { name: clubName, logo: clubLogo } = useAppSelector( (state) => state.club ); - const { setRetriggerFetch, apiLoading, apiError } = useEvent(id as string); + const { setRetriggerFetch, apiLoading, apiError } = useEvent(); + + useEffect(() => { + dispatch(setEventId(id)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const headerAnimatedStyle = useAnimatedStyle(() => { return { diff --git a/frontend/mobile/src/hooks/useClub.ts b/frontend/mobile/src/hooks/useClub.ts index 3f172606..4ec7fbfd 100644 --- a/frontend/mobile/src/hooks/useClub.ts +++ b/frontend/mobile/src/hooks/useClub.ts @@ -5,7 +5,7 @@ import { clubApi } from '@generatesac/lib'; import { setClub, setClubEvents, setClubTags } from '../store/slices/clubSlice'; import { useAppDispatch, useAppSelector } from '../store/store'; -const useClub = (id: string) => { +const useClub = () => { const [retriggerFetch, setRetriggerFetch] = useState(false); const [getClub, { isLoading: clubLoading, error: clubError }] = @@ -16,26 +16,27 @@ const useClub = (id: string) => { clubApi.useLazyClubEventsQuery(); const dispatch = useAppDispatch(); - const { shouldPreview, id: clubId } = useAppSelector((state) => state.club); + const { id: clubId } = useAppSelector((state) => state.club); const apiLoading = clubLoading || tagsLoading || eventsLoading; const apiError = clubError || tagsError || eventsError; useEffect(() => { - if ((id !== '' && (id !== clubId || shouldPreview)) || apiError) { - getClub(id).then(({ data: clubData }) => { + if (clubId !== '') { + getClub(clubId).then(({ data: clubData }) => { if (clubData) { + console.log(clubData); dispatch(setClub(clubData)); } }); - getClubTags(id).then(({ data: tagData }) => { + getClubTags(clubId).then(({ data: tagData }) => { if (tagData) { dispatch(setClubTags(tagData)); } }); - getEvents({ id }).then(({ data: eventData }) => { + getEvents({ id: clubId }).then(({ data: eventData }) => { if (eventData) { const sortedEvents = [...eventData]; sortedEvents.sort((a, b) => { @@ -49,21 +50,13 @@ const useClub = (id: string) => { new Date(event.end_time).getTime() > new Date().getTime() ); + console.log('events', events); dispatch(setClubEvents(events)); } }); } - }, [ - retriggerFetch, - id, - getClub, - getClubTags, - getEvents, - dispatch, - clubId, - apiError, - shouldPreview - ]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [retriggerFetch, clubId]); return { setRetriggerFetch, diff --git a/frontend/mobile/src/hooks/useEvent.ts b/frontend/mobile/src/hooks/useEvent.ts index 5c233ff7..1354c9fc 100644 --- a/frontend/mobile/src/hooks/useEvent.ts +++ b/frontend/mobile/src/hooks/useEvent.ts @@ -1,63 +1,43 @@ import { useEffect, useState } from 'react'; -import { clubApi, eventApi } from '@generatesac/lib'; +import { eventApi } from '@generatesac/lib'; -import { setClub } from '../store/slices/clubSlice'; +import { setClubId } from '../store/slices/clubSlice'; import { setEvent, setEventTags } from '../store/slices/eventSlice'; import { useAppDispatch, useAppSelector } from '../store/store'; -const useEvent = (id: string) => { +const useEvent = () => { const [retriggerFetch, setRetriggerFetch] = useState(false); const [getEvent, { isLoading: eventLoading, error: eventError }] = eventApi.useLazyEventQuery(); - const [getClub, { isLoading: clubLoading, error: clubError }] = - clubApi.useLazyClubQuery(); const [getEventTags, { isLoading: tagsLoading, error: tagsError }] = eventApi.useLazyEventTagsQuery(); const dispatch = useAppDispatch(); - const { shouldPreview, id: eventId } = useAppSelector( - (state) => state.event - ); + const { id: eventId } = useAppSelector((state) => state.event); - const apiLoading = eventLoading || clubLoading || tagsLoading; - const apiError = eventError || clubError || tagsError; + const apiLoading = eventLoading || tagsLoading; + const apiError = eventError || tagsError; useEffect(() => { - if ((id !== '' && (id !== eventId || shouldPreview)) || apiError) { + if (eventId !== '') { // Fetch events - getEvent(id).then(({ data: eventData }) => { - dispatch(setEvent(eventData)); + getEvent(eventId).then(({ data: eventData }) => { if (eventData) { - // Fetch club - getClub(eventData.host as string).then( - ({ data: clubData }) => { - if (clubData) { - dispatch(setClub(clubData)); - } - } - ); + dispatch(setEvent(eventData)); + dispatch(setClubId(eventData?.host)); } }); - getEventTags(id).then(({ data: tagData }) => { + getEventTags(eventId).then(({ data: tagData }) => { if (tagData) { dispatch(setEventTags(tagData)); } }); } - }, [ - retriggerFetch, - id, - getClub, - getEvent, - getEventTags, - dispatch, - eventId, - shouldPreview, - apiError - ]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [retriggerFetch, eventId]); return { setRetriggerFetch, diff --git a/frontend/mobile/src/hooks/usePreview.ts b/frontend/mobile/src/hooks/usePreview.ts index 8cba55d5..83f3561a 100644 --- a/frontend/mobile/src/hooks/usePreview.ts +++ b/frontend/mobile/src/hooks/usePreview.ts @@ -18,10 +18,8 @@ const usePreview = () => { const { shouldPreview: clubShouldPreview, id: clubId } = useAppSelector( (state) => state.club ); - const { apiLoading: eventApiLoading, apiError: eventApiError } = - useEvent(eventId); - const { apiLoading: clubApiLoading, apiError: clubApiError } = - useClub(clubId); + const { apiLoading: eventApiLoading, apiError: eventApiError } = useEvent(); + const { apiLoading: clubApiLoading, apiError: clubApiError } = useClub(); useEffect(() => { dispatch(setEventShouldPreview(false));