From 7c80adcae94d93a12df42e7e19d142b95611d1be Mon Sep 17 00:00:00 2001 From: Alder Whiteford Date: Mon, 17 Jun 2024 13:05:48 -0400 Subject: [PATCH] Lots o updates --- backend/entities/clubs/events/transactions.go | 2 +- .../mobile/src/app/(app)/(tabs)/_layout.tsx | 25 +- .../mobile/src/app/(app)/(tabs)/index.tsx | 18 +- frontend/mobile/src/app/(app)/club/[id].tsx | 225 +++++++++++------- .../app/(app)/club/components/skeleton.tsx | 46 ++++ frontend/mobile/src/app/(app)/event/[id].tsx | 108 ++++----- .../src/app/(app)/event/components/about.tsx | 10 +- .../(app)/event/components/description.tsx | 2 +- .../app/(app)/event/components/location.tsx | 27 +-- .../app/(app)/event/components/overview.tsx | 40 ++-- .../components/AboutSection/AboutSection.tsx | 15 +- .../AnimatedImageHeader.tsx | 17 +- .../components/Calendar/Calendar.tsx | 2 +- .../components/Calendar/Day.tsx | 4 +- .../RecruitmentInfo/ClubRecruitmentInfo.tsx | 2 +- .../components/EventCard/EventCardList.tsx | 12 +- .../EventCard/Variants/EventCardBig.tsx | 4 +- .../EventCard/Variants/EventCardCalendar.tsx | 13 +- .../EventCard/Variants/EventCardSmall.tsx | 2 +- .../components/PageError/PageError.tsx} | 4 +- .../components/Preview/Club.tsx | 108 --------- .../components/Preview/Club/ClubPreview.tsx | 125 ++++++++++ .../Preview/Club/ClubPreviewSkeleton.tsx | 38 +++ .../components/Preview/Event.tsx | 103 -------- .../components/Preview/Event/EventPreview.tsx | 125 ++++++++++ .../Preview/Event/EventPreviewSkeleton.tsx | 38 +++ .../components/Preview/PreviewError.tsx | 14 ++ .../mobile/src/app/(design-system)/index.ts | 4 +- frontend/mobile/src/app/_layout.tsx | 25 +- frontend/mobile/src/hooks/useClub.ts | 93 +++++--- frontend/mobile/src/hooks/useEvent.ts | 91 ++++--- frontend/mobile/src/hooks/usePreview.ts | 56 +++++ frontend/mobile/src/store/slices/clubSlice.ts | 20 +- .../mobile/src/store/slices/eventSlice.ts | 6 +- frontend/mobile/src/store/store.ts | 4 +- 35 files changed, 870 insertions(+), 558 deletions(-) create mode 100644 frontend/mobile/src/app/(app)/club/components/skeleton.tsx rename frontend/mobile/src/app/{(app)/event/components/error.tsx => (design-system)/components/PageError/PageError.tsx} (90%) delete mode 100644 frontend/mobile/src/app/(design-system)/components/Preview/Club.tsx create mode 100644 frontend/mobile/src/app/(design-system)/components/Preview/Club/ClubPreview.tsx create mode 100644 frontend/mobile/src/app/(design-system)/components/Preview/Club/ClubPreviewSkeleton.tsx delete mode 100644 frontend/mobile/src/app/(design-system)/components/Preview/Event.tsx create mode 100644 frontend/mobile/src/app/(design-system)/components/Preview/Event/EventPreview.tsx create mode 100644 frontend/mobile/src/app/(design-system)/components/Preview/Event/EventPreviewSkeleton.tsx create mode 100644 frontend/mobile/src/app/(design-system)/components/Preview/PreviewError.tsx create mode 100644 frontend/mobile/src/hooks/usePreview.ts diff --git a/backend/entities/clubs/events/transactions.go b/backend/entities/clubs/events/transactions.go index 9d4ddf98..dcdd159f 100644 --- a/backend/entities/clubs/events/transactions.go +++ b/backend/entities/clubs/events/transactions.go @@ -14,7 +14,7 @@ func GetClubEvents(db *gorm.DB, clubID uuid.UUID, pageInfo fiberpaginate.PageInf db = cache.SetUseCache(db, true) var events []models.Event - if err := db.Where("club_id = ?", clubID).Scopes(utilities.IntoScope(pageInfo, db)).Find(&events).Error; err != nil { + if err := db.Where("host = ?", clubID).Scopes(utilities.IntoScope(pageInfo, db)).Find(&events).Error; err != nil { return nil, err } diff --git a/frontend/mobile/src/app/(app)/(tabs)/_layout.tsx b/frontend/mobile/src/app/(app)/(tabs)/_layout.tsx index b570c04f..7733fc27 100644 --- a/frontend/mobile/src/app/(app)/(tabs)/_layout.tsx +++ b/frontend/mobile/src/app/(app)/(tabs)/_layout.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React from 'react'; import { Tabs } from 'expo-router'; @@ -7,12 +7,9 @@ import { faCalendarDays } from '@fortawesome/free-solid-svg-icons/faCalendarDays import { faHouse } from '@fortawesome/free-solid-svg-icons/faHouse'; import { faUser } from '@fortawesome/free-solid-svg-icons/faUser'; -import { EventPreview, Text } from '@/src/app/(design-system)'; +import { Text } from '@/src/app/(design-system)'; import { Box } from '@/src/app/(design-system)'; import { Icon } from '@/src/app/(design-system)/components/Icon/Icon'; -import { useAppDispatch, useAppSelector } from '@/src/store/store'; -import BottomSheet from '@gorhom/bottom-sheet'; -import { setEventShouldPreview } from '@/src/store/slices/eventSlice'; interface TabBarLabelProps { focused: boolean; @@ -37,23 +34,6 @@ const TabBarIcon: React.FC = ({ focused, icon }) => ( ); const Layout = () => { - const dispatch = useAppDispatch(); - const eventPreviewRef = useRef(null); - const clubPreviewRef = useRef(null); - - const { shouldPreview: eventShouldPreview, id: eventId } = useAppSelector((state) => state.event); - - useEffect(() => { - dispatch(setEventShouldPreview(false)); - }, []) - - useEffect(() => { - if (eventShouldPreview) { - eventPreviewRef.current?.snapToIndex(0); - } - }, [eventShouldPreview]); - - return ( <> { }} /> - ); }; diff --git a/frontend/mobile/src/app/(app)/(tabs)/index.tsx b/frontend/mobile/src/app/(app)/(tabs)/index.tsx index 80ca2f84..7c612d70 100644 --- a/frontend/mobile/src/app/(app)/(tabs)/index.tsx +++ b/frontend/mobile/src/app/(app)/(tabs)/index.tsx @@ -1,23 +1,7 @@ import React from 'react'; -import { StyleSheet } from 'react-native'; const HomePage = () => { - - return ( - <> - ) + return <>; }; -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center' - }, - contentContainer: { - flex: 1, - alignItems: 'center' - } -}); - export default HomePage; diff --git a/frontend/mobile/src/app/(app)/club/[id].tsx b/frontend/mobile/src/app/(app)/club/[id].tsx index e0e674fa..5491ffa7 100644 --- a/frontend/mobile/src/app/(app)/club/[id].tsx +++ b/frontend/mobile/src/app/(app)/club/[id].tsx @@ -1,3 +1,4 @@ +import { useRef } from 'react'; import { Dimensions, Linking } from 'react-native'; import Animated, { interpolate, @@ -6,19 +7,31 @@ import Animated, { useScrollViewOffset } from 'react-native-reanimated'; -import { Arrow, Box, PageTags, RecruitmentInfo, Tag, Text } from '@/src/app/(design-system)'; +import { Stack, useLocalSearchParams } from 'expo-router'; + +import { faExternalLink } from '@fortawesome/free-solid-svg-icons'; +import BottomSheet from '@gorhom/bottom-sheet'; + +import { + Arrow, + Box, + PageTags, + RecruitmentInfo, + Text +} from '@/src/app/(design-system)'; import { SACColors } from '@/src/app/(design-system)'; import { Button } from '@/src/app/(design-system)/components/Button/Button'; -import AnimatedImageHeader from '../../(design-system)/components/AnimatedImageHeader/AnimatedImageHeader'; -import { ClubIcon } from '../../(design-system)/components/ClubIcon/ClubIcon'; import useClub from '@/src/hooks/useClub'; -import { Stack, useLocalSearchParams } from 'expo-router'; import { useAppSelector } from '@/src/store/store'; + import { AboutSection } from '../../(design-system)/components/AboutSection/AboutSection'; +import AnimatedImageHeader from '../../(design-system)/components/AnimatedImageHeader/AnimatedImageHeader'; +import { ClubIcon } from '../../(design-system)/components/ClubIcon/ClubIcon'; +import { EventCard } from '../../(design-system)/components/EventCard'; +import { EventCardList } from '../../(design-system)/components/EventCard/EventCardList'; +import PageError from '../../(design-system)/components/PageError/PageError'; import { Description } from '../event/components/description'; -import { useRef } from 'react'; -import BottomSheet from '@gorhom/bottom-sheet'; -import { faExternalLink } from '@fortawesome/free-solid-svg-icons'; +import ClubPageSkeleton from './components/skeleton'; const color: SACColors = 'darkRed'; @@ -50,7 +63,7 @@ const ClubPage = () => { }); return ( - + { - ), + ) }} /> { showsHorizontalScrollIndicator={false} scrollEventThrottle={16} ref={scrollRef} - > - - - - - - - - - - {club.name} - - bottomSheet.current?.snapToIndex(0)} - type='club' + > + {apiLoading ? ( + + ) : apiError ? ( + + ) : ( + <> + - {club.recruitment?.is_recruiting && - + + + - - - Application Form + {club.name} + + + bottomSheet.current?.snapToIndex(0) + } + type="club" + /> + {club.recruitment?.is_recruiting && ( + + )} + + + Recruiting - - Google Form + + + + + Upcoming Events + {club.events.length > 0 ? ( + <> + + + + ) : ( + <> + )} - - } - - Recruiting - + - - Upcoming Events - {/* */} - - {/* */} - - Leadership - {/* */} - - + + )} ); diff --git a/frontend/mobile/src/app/(app)/club/components/skeleton.tsx b/frontend/mobile/src/app/(app)/club/components/skeleton.tsx new file mode 100644 index 00000000..0e1cf3c9 --- /dev/null +++ b/frontend/mobile/src/app/(app)/club/components/skeleton.tsx @@ -0,0 +1,46 @@ +import { Skeleton } from '@rneui/base'; + +import { Box, Colors } from '@/src/app/(design-system)'; + +const ClubPageSkeleton = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default ClubPageSkeleton; diff --git a/frontend/mobile/src/app/(app)/event/[id].tsx b/frontend/mobile/src/app/(app)/event/[id].tsx index aed2b5e0..e867f04f 100644 --- a/frontend/mobile/src/app/(app)/event/[id].tsx +++ b/frontend/mobile/src/app/(app)/event/[id].tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useRef } from 'react'; import { Dimensions } from 'react-native'; import Animated, { interpolate, @@ -16,18 +16,18 @@ import { Arrow, Box, KebabMenu } from '@/src/app/(design-system)'; 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 AnimatedImageHeader from '../../(design-system)/components/AnimatedImageHeader/AnimatedImageHeader'; +import PageError from '../../(design-system)/components/PageError/PageError'; import { AboutEvent } from './components/about'; import { Description } from './components/description'; -import EventPageError from './components/error'; import { Location } from './components/location'; import { Overview } from './components/overview'; import { RegisterBottomSheet } from './components/register'; import { ShareEventBottomSheet } from './components/share-event'; import EventPageSkeleton from './components/skeleton'; -import { useAppSelector } from '@/src/store/store'; -import useEvent from '@/src/hooks/useEvent'; -import AnimatedImageHeader from '../../(design-system)/components/AnimatedImageHeader/AnimatedImageHeader'; const MockEvent = { eventImage: @@ -59,7 +59,9 @@ const EventPage = () => { const scrollOffset = useScrollViewOffset(scrollRef); const event = useAppSelector((state) => state.event); - const { name: clubName, logo: clubLogo } = useAppSelector((state) => state.club); + const { name: clubName, logo: clubLogo } = useAppSelector( + (state) => state.club + ); const { setRetriggerFetch, apiLoading, apiError } = useEvent(id as string); @@ -114,62 +116,54 @@ const EventPage = () => { {apiLoading ? ( ) : apiError ? ( - + ) : ( - <> - - - - - - - - + + + + + - bottomSheet.current?.snapToIndex(0) - } + club={clubName} + startTime={event.start_time} + endTime={event.end_time} + location={event.location || 'ISEC'} + type={event.event_type} /> - + register.current?.snapToIndex(0) } - /> + > + Register + - {/* */} + + bottomSheet.current?.snapToIndex(0) + } + /> + - - ) - } + {/* */} + + + )} { ); diff --git a/frontend/mobile/src/app/(app)/event/components/about.tsx b/frontend/mobile/src/app/(app)/event/components/about.tsx index ca967f79..442237dd 100644 --- a/frontend/mobile/src/app/(app)/event/components/about.tsx +++ b/frontend/mobile/src/app/(app)/event/components/about.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Linking, TouchableOpacity } from 'react-native'; +import { Linking } from 'react-native'; import { faVideo } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; @@ -12,10 +12,10 @@ import { Text, textColorVariants } from '@/src/app/(design-system)'; +import { AboutSection } from '@/src/app/(design-system)/components/AboutSection/AboutSection'; import { Button } from '@/src/app/(design-system)/components/Button/Button'; import { PageTags } from '../../../(design-system)/components/Tag/Tags'; -import { AboutSection } from '@/src/app/(design-system)/components/AboutSection/AboutSection'; interface AboutEventProps { tags: Tag[]; @@ -40,10 +40,10 @@ export const AboutEvent = ({ return ( - diff --git a/frontend/mobile/src/app/(app)/event/components/description.tsx b/frontend/mobile/src/app/(app)/event/components/description.tsx index 464435bb..fb6d0b3d 100644 --- a/frontend/mobile/src/app/(app)/event/components/description.tsx +++ b/frontend/mobile/src/app/(app)/event/components/description.tsx @@ -47,7 +47,7 @@ export const Description = forwardRef( variant="subheader-2" fontWeight="500" > - About {type === 'club' ? 'Us': 'Event'} + About {type === 'club' ? 'Us' : 'Event'} {description} diff --git a/frontend/mobile/src/app/(app)/event/components/location.tsx b/frontend/mobile/src/app/(app)/event/components/location.tsx index ef5d829c..77959965 100644 --- a/frontend/mobile/src/app/(app)/event/components/location.tsx +++ b/frontend/mobile/src/app/(app)/event/components/location.tsx @@ -1,37 +1,18 @@ +import { Linking, Platform } from 'react-native'; import MapView, { Marker } from 'react-native-maps'; -import { createOpenLink } from 'react-native-open-maps'; import { Text } from '@/src/app/(design-system)'; import { Box } from '@/src/app/(design-system)'; -// import Geocoder from 'react-native-geocoding'; -// import { useEffect, useState } from 'react'; - interface LocationProps { location: string; } +const scheme = Platform.select({ ios: 'maps://0,0?q=', android: 'geo:0,0?q=' }); + export const Location: React.FC = ({ location }) => { const coordinates = { latitude: 42.3393326, longitude: -71.0869942 }; - const openMap = createOpenLink({ ...coordinates }); - // Geocoder.init(process.env.GOOGLE_MAPS_API_KEY | ''); - // const [coordinates, setCoordinates] = useState<{ latitude: number; longitude: number }>({ - // latitude: 0, - // longitude: 0 - // }); - // const openMap = createOpenLink({ ...coordinates }); - // useEffect(() => { - // async function fetchCoordinates() { - // try { - // const response = await Geocoder.from(location); - // const { lat, lng } = response.results[0].geometry.location; - // setCoordinates({ latitude: lat, longitude: lng }); - // } catch (error) { - // console.error('Error fetching coordinates:', error); - // } - // } - // fetchCoordinates(); - // }, [location]); + const openMap = () => Linking.openURL(`${scheme}${location}`); return ( diff --git a/frontend/mobile/src/app/(app)/event/components/overview.tsx b/frontend/mobile/src/app/(app)/event/components/overview.tsx index c2993570..b26a8d40 100644 --- a/frontend/mobile/src/app/(app)/event/components/overview.tsx +++ b/frontend/mobile/src/app/(app)/event/components/overview.tsx @@ -1,3 +1,5 @@ +import { TouchableOpacity } from 'react-native-gesture-handler'; + import { faCalendarDays, faGlobe, @@ -8,6 +10,8 @@ import { EventType } from '@generatesac/lib'; import { Avatar } from '@rneui/base'; import { Box, Colors, SACColors, Text } from '@/src/app/(design-system)'; +import { setClubId, setClubShouldPreview } from '@/src/store/slices/clubSlice'; +import { useAppDispatch } from '@/src/store/store'; import { firstLetterUppercase } from '@/src/utils/string'; import { createOptions, eventTime } from '@/src/utils/time'; @@ -25,7 +29,7 @@ interface OverviewProps { export const Overview: React.FC = ({ logo, - // clubId, + clubId, eventName, color, club, @@ -34,24 +38,30 @@ export const Overview: React.FC = ({ location, type }) => { + const dispatch = useAppDispatch(); + return ( - + {eventName} - { + dispatch(setClubId(clubId)); + dispatch(setClubShouldPreview(true)); + }} > - Hosted by {club} - - + + Hosted by {club} + + + diff --git a/frontend/mobile/src/app/(design-system)/components/AboutSection/AboutSection.tsx b/frontend/mobile/src/app/(design-system)/components/AboutSection/AboutSection.tsx index a9237be9..a8b4969d 100644 --- a/frontend/mobile/src/app/(design-system)/components/AboutSection/AboutSection.tsx +++ b/frontend/mobile/src/app/(design-system)/components/AboutSection/AboutSection.tsx @@ -1,6 +1,7 @@ -import { TouchableOpacity } from "react-native-gesture-handler"; -import { Box } from "../Box/Box"; -import { Text } from "../Text/Text"; +import { TouchableOpacity } from 'react-native-gesture-handler'; + +import { Box } from '../Box/Box'; +import { Text } from '../Text/Text'; type AboutSectionProps = { type: 'club' | 'event'; @@ -15,9 +16,9 @@ export const AboutSection = ({ }: AboutSectionProps) => { return ( - - About {type === 'club' ? 'Us' : 'Event'} - + + About {type === 'club' ? 'Us' : 'Event'} + @@ -30,4 +31,4 @@ export const AboutSection = ({ ); -} +}; diff --git a/frontend/mobile/src/app/(design-system)/components/AnimatedImageHeader/AnimatedImageHeader.tsx b/frontend/mobile/src/app/(design-system)/components/AnimatedImageHeader/AnimatedImageHeader.tsx index 609a1472..e1288753 100644 --- a/frontend/mobile/src/app/(design-system)/components/AnimatedImageHeader/AnimatedImageHeader.tsx +++ b/frontend/mobile/src/app/(design-system)/components/AnimatedImageHeader/AnimatedImageHeader.tsx @@ -1,5 +1,9 @@ import React from 'react'; -import Animated, { SharedValue, interpolate, useAnimatedStyle } from 'react-native-reanimated'; +import Animated, { + SharedValue, + interpolate, + useAnimatedStyle +} from 'react-native-reanimated'; import { Box } from '../Box/Box'; @@ -23,7 +27,11 @@ const AnimatedImageHeader: React.FC = ({ translateY: interpolate( scrollOffset.value, [-imageHeight, 0, imageHeight], - [-imageHeight / (2 * aspectRatio), 0, imageHeight * 0.75] + [ + -imageHeight / (2 * aspectRatio), + 0, + imageHeight * 0.75 + ] ) }, { @@ -41,7 +49,10 @@ const AnimatedImageHeader: React.FC = ({ ); diff --git a/frontend/mobile/src/app/(design-system)/components/Calendar/Calendar.tsx b/frontend/mobile/src/app/(design-system)/components/Calendar/Calendar.tsx index f9dd16ee..5b4a9ab7 100644 --- a/frontend/mobile/src/app/(design-system)/components/Calendar/Calendar.tsx +++ b/frontend/mobile/src/app/(design-system)/components/Calendar/Calendar.tsx @@ -60,7 +60,7 @@ export default function Calendar({ refetchEvents, error, datePress, - setDatePress, + setDatePress }: InfiniteScrollCarouselProps) { // Ensure that the load batch size is at least 3: if (loadBatchSize < 3) { diff --git a/frontend/mobile/src/app/(design-system)/components/Calendar/Day.tsx b/frontend/mobile/src/app/(design-system)/components/Calendar/Day.tsx index dc7c7952..7629007a 100644 --- a/frontend/mobile/src/app/(design-system)/components/Calendar/Day.tsx +++ b/frontend/mobile/src/app/(design-system)/components/Calendar/Day.tsx @@ -13,9 +13,7 @@ type DayProps = { function formatSectionHeader(date: string) { let addedZero = false; - const { date: dayOfMonth, dayOfWeek } = formatTime( - date + 'T00:00:00' - ); + const { date: dayOfMonth, dayOfWeek } = formatTime(date + 'T00:00:00'); if (dayOfMonth.length < 2) { addedZero = true; } diff --git a/frontend/mobile/src/app/(design-system)/components/ClubRecruitment/RecruitmentInfo/ClubRecruitmentInfo.tsx b/frontend/mobile/src/app/(design-system)/components/ClubRecruitment/RecruitmentInfo/ClubRecruitmentInfo.tsx index 5604377f..bfe2313f 100644 --- a/frontend/mobile/src/app/(design-system)/components/ClubRecruitment/RecruitmentInfo/ClubRecruitmentInfo.tsx +++ b/frontend/mobile/src/app/(design-system)/components/ClubRecruitment/RecruitmentInfo/ClubRecruitmentInfo.tsx @@ -3,12 +3,12 @@ import React from 'react'; import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar'; import { faComments } from '@fortawesome/free-solid-svg-icons/faComments'; import { faPenToSquare } from '@fortawesome/free-solid-svg-icons/faPenToSquare'; +import { RecruitmentCycle, RecruitmentType } from '@generatesac/lib'; import { SACColors } from '../../../shared/colors'; import { createStyles } from '../../../theme'; import { Box } from '../../Box/Box'; import { RecruitmentItem } from '../RecruitmentItem/ClubRecruitmentItem'; -import { RecruitmentCycle, RecruitmentType } from '@generatesac/lib'; interface RecruitmentInfoProps { color: SACColors; diff --git a/frontend/mobile/src/app/(design-system)/components/EventCard/EventCardList.tsx b/frontend/mobile/src/app/(design-system)/components/EventCard/EventCardList.tsx index 5938ffaa..2c64bc4e 100644 --- a/frontend/mobile/src/app/(design-system)/components/EventCard/EventCardList.tsx +++ b/frontend/mobile/src/app/(design-system)/components/EventCard/EventCardList.tsx @@ -8,19 +8,23 @@ import { EventCard } from './EventCard'; interface EventCardListProps { events: Event[]; + club?: string; } -export const EventCardList: React.FC = ({ events }) => { +export const EventCardList: React.FC = ({ + events, + club +}) => { const renderEventCard = ({ item }: { item: Event }) => { return ( router.push(`/event/${item.id}`)}> diff --git a/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardBig.tsx b/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardBig.tsx index c5bedf98..1edd303d 100644 --- a/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardBig.tsx +++ b/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardBig.tsx @@ -7,7 +7,7 @@ import { router } from 'expo-router'; import { Image } from '@rneui/base'; import { Box, Text } from '@/src/app/(design-system)'; -import { calculateDuration, createOptions, eventTime } from '@/src/utils/time'; +import { createOptions, eventTime } from '@/src/utils/time'; interface EventCardBigProps { event: string; @@ -46,8 +46,6 @@ export const EventCardBig: React.FC = ({ width="100%" > {event} - - {calculateDuration(startTime, endTime)} {club} diff --git a/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardCalendar.tsx b/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardCalendar.tsx index 90a5a7c1..32047c78 100644 --- a/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardCalendar.tsx +++ b/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardCalendar.tsx @@ -1,18 +1,19 @@ import React from 'react'; import { TouchableOpacity } from 'react-native'; -import { router } from 'expo-router'; - import { Tag } from '@generatesac/lib'; import { Avatar, Image } from '@rneui/base'; import { Box, Text, createStyles } from '@/src/app/(design-system)'; +import { + setEventId, + setEventShouldPreview +} from '@/src/store/slices/eventSlice'; +import { useAppDispatch } from '@/src/store/store'; import { createOptions, eventTime, happeningNow } from '@/src/utils/time'; import { EventTags } from '../EventCardTags/EventCardTags'; import { sharedStyles } from '../shared/styles'; -import { useAppDispatch } from '@/src/store/store'; -import { setEventId, setEventShouldPreview } from '@/src/store/slices/eventSlice'; interface EventCardCalendarProps { event: string; @@ -42,9 +43,9 @@ export const EventCardCalendar: React.FC = ({ return ( { + onPress={() => { dispatch(setEventId(eventId)); - dispatch(setEventShouldPreview(true)) + dispatch(setEventShouldPreview(true)); }} > {isHappening && ( diff --git a/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardSmall.tsx b/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardSmall.tsx index 392cef2f..740e7110 100644 --- a/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardSmall.tsx +++ b/frontend/mobile/src/app/(design-system)/components/EventCard/Variants/EventCardSmall.tsx @@ -27,7 +27,7 @@ export const EventCardSmall: React.FC = ({ image }) => { const screenWidth = Dimensions.get('window').width; - const boxWidth = screenWidth * 0.4; + const boxWidth = screenWidth * 0.41; return ( diff --git a/frontend/mobile/src/app/(app)/event/components/error.tsx b/frontend/mobile/src/app/(design-system)/components/PageError/PageError.tsx similarity index 90% rename from frontend/mobile/src/app/(app)/event/components/error.tsx rename to frontend/mobile/src/app/(design-system)/components/PageError/PageError.tsx index 9fb570dc..5fcb1ef2 100644 --- a/frontend/mobile/src/app/(app)/event/components/error.tsx +++ b/frontend/mobile/src/app/(design-system)/components/PageError/PageError.tsx @@ -8,7 +8,7 @@ type EventPageErrorProps = { refetch: React.Dispatch>; }; -const EventPageError = ({ refetch }: EventPageErrorProps) => { +const PageError = ({ refetch }: EventPageErrorProps) => { return ( @@ -30,4 +30,4 @@ const EventPageError = ({ refetch }: EventPageErrorProps) => { ); }; -export default EventPageError; +export default PageError; diff --git a/frontend/mobile/src/app/(design-system)/components/Preview/Club.tsx b/frontend/mobile/src/app/(design-system)/components/Preview/Club.tsx deleted file mode 100644 index 554fef89..00000000 --- a/frontend/mobile/src/app/(design-system)/components/Preview/Club.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { forwardRef, useCallback, useState } from 'react'; -import { router } from 'expo-router'; - -import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet'; -import { Avatar } from '@rneui/base'; - -import { SACColors, textColorVariants } from '../../shared/colors'; -import { Box } from '../Box/Box'; -import { Button } from '../Button/Button'; -import { Text } from '../Text/Text'; - -interface ClubPreviewProps { - clubId: string; -} - -const mockClub = { - name: 'Sandbox', - preview: `Sandbox is Northeastern's student-led software consultancy building software for Northeastern clients. We work closely with clients across Northeastern to help them best leverage computation.`, - application_title: 'Apply to be a Member', - application_link: 'https://google.com', - color: 'darkBlue' as SACColors, - is_recruiting: true, - logo: 'https://avatars.githubusercontent.com/u/45272992?s=200&v=4' -}; - -type Ref = BottomSheet; -const LOGO_HEIGHT = 77; - -export const ClubPreview = forwardRef( - ({ clubId }, ref) => { - const renderBackdrop = useCallback( - (props: any) => ( - - ), - [] - ); - - const ClubLogo = () => { - return () => ( - - - - ); - }; - - const NoLogo = () => { - return () => <>; - }; - - const [logo, setLogo] = useState(NoLogo); - - return ( - { - toIndex === 0 ? setLogo(ClubLogo) : setLogo(NoLogo); - }} - backgroundStyle={{ backgroundColor: 'white' }} - backdropComponent={renderBackdrop} - > - - - - {mockClub.name} - - - Who are we? - {mockClub.preview} - - - - - ); - } -); diff --git a/frontend/mobile/src/app/(design-system)/components/Preview/Club/ClubPreview.tsx b/frontend/mobile/src/app/(design-system)/components/Preview/Club/ClubPreview.tsx new file mode 100644 index 00000000..b9cfc6a5 --- /dev/null +++ b/frontend/mobile/src/app/(design-system)/components/Preview/Club/ClubPreview.tsx @@ -0,0 +1,125 @@ +import React, { forwardRef, useCallback, useState } from 'react'; + +import { router } from 'expo-router'; + +import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet'; +import { SerializedError } from '@reduxjs/toolkit'; +import { FetchBaseQueryError } from '@reduxjs/toolkit/query'; +import { Avatar } from '@rneui/base'; + +import { setClubShouldPreview } from '@/src/store/slices/clubSlice'; +import { useAppDispatch, useAppSelector } from '@/src/store/store'; + +import { Box } from '../../Box/Box'; +import { Button } from '../../Button/Button'; +import { Text } from '../../Text/Text'; +import PreviewError from '../PreviewError'; +import ClubPreviewSkeleton from './ClubPreviewSkeleton'; + +interface ClubPreviewProps { + clubId: string; + isLoading: boolean; + error: FetchBaseQueryError | SerializedError | undefined; +} + +type Ref = BottomSheet; +const LOGO_HEIGHT = 77; + +export const ClubPreview = forwardRef( + ({ clubId, isLoading, error }, ref) => { + const club = useAppSelector((state) => state.club); + const dispatch = useAppDispatch(); + + const renderBackdrop = useCallback( + (props: any) => ( + + ), + [] + ); + + const ClubLogo = () => { + return () => ( + + + + ); + }; + + const NoLogo = () => { + return () => <>; + }; + + const [logo, setLogo] = useState(NoLogo); + + return ( + { + toIndex === 0 && !error + ? setLogo(ClubLogo) + : setLogo(NoLogo); + }} + backgroundStyle={{ backgroundColor: 'white' }} + backdropComponent={renderBackdrop} + onClose={() => dispatch(setClubShouldPreview(false))} + > + + + {isLoading || club.id === '' ? ( + + ) : error ? ( + + ) : ( + <> + + {club.name} + + + Who are we? + {`${club.preview}...`} + + + + )} + + + ); + } +); diff --git a/frontend/mobile/src/app/(design-system)/components/Preview/Club/ClubPreviewSkeleton.tsx b/frontend/mobile/src/app/(design-system)/components/Preview/Club/ClubPreviewSkeleton.tsx new file mode 100644 index 00000000..d406be08 --- /dev/null +++ b/frontend/mobile/src/app/(design-system)/components/Preview/Club/ClubPreviewSkeleton.tsx @@ -0,0 +1,38 @@ +import { Skeleton } from '@rneui/base'; + +import { Colors } from '../../../shared/colors'; +import { Box } from '../../Box/Box'; + +const ClubPreviewSkeleton = () => { + return ( + + + + + + + + + + + + + + + ); +}; + +export default ClubPreviewSkeleton; diff --git a/frontend/mobile/src/app/(design-system)/components/Preview/Event.tsx b/frontend/mobile/src/app/(design-system)/components/Preview/Event.tsx deleted file mode 100644 index fe4e58c7..00000000 --- a/frontend/mobile/src/app/(design-system)/components/Preview/Event.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React, { forwardRef, useCallback, useEffect } from 'react'; -import { TouchableOpacity } from 'react-native-gesture-handler'; - -import { router } from 'expo-router'; - -import { Avatar } from '@rneui/base'; - -import { Box } from '../Box/Box'; -import { Button } from '../Button/Button'; -import { Text } from '../Text/Text'; -import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet'; -import { useAppDispatch, useAppSelector } from '@/src/store/store'; -import { setEventShouldPreview } from '@/src/store/slices/eventSlice'; -import useEvent from '@/src/hooks/useEvent'; - -interface EventPreviewProps { - eventId: string; -} - -type Ref = BottomSheet; - -export const EventPreview = forwardRef( - ({ eventId }, ref) => { - const { apiLoading, apiError } = useEvent(eventId); - const event = useAppSelector((state) => state.event) - const { name: clubName, logo: clubLogo } = useAppSelector((state) => state.club); - - const dispatch = useAppDispatch(); - - const renderBackdrop = useCallback( - (props: any) => ( - - ), - [] - ); - - return ( - dispatch(setEventShouldPreview(false))} - > - {apiLoading ? ( - Hello - ) : apiError ? ( - Error - ) : ( - - - {`${event.name.slice(0, 32)}${event.name.length > 32 ? '...' : ''}`} - - - - router.push(`/club/${event.host}`) - } - > - - - - {`${clubName.slice(0, 36).trim()}${clubName.length > 37 ? '...' : ''}`} - - - - - - About Event - {`${event.description.slice(0, 220).trim()}${event.description.length > 220 ? '...' : ''}`} - - - - )} - - ); - } -); diff --git a/frontend/mobile/src/app/(design-system)/components/Preview/Event/EventPreview.tsx b/frontend/mobile/src/app/(design-system)/components/Preview/Event/EventPreview.tsx new file mode 100644 index 00000000..648efba7 --- /dev/null +++ b/frontend/mobile/src/app/(design-system)/components/Preview/Event/EventPreview.tsx @@ -0,0 +1,125 @@ +import React, { forwardRef, useCallback } from 'react'; +import { TouchableOpacity } from 'react-native-gesture-handler'; + +import { router } from 'expo-router'; + +import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet'; +import { SerializedError } from '@reduxjs/toolkit'; +import { FetchBaseQueryError } from '@reduxjs/toolkit/query'; +import { Avatar } from '@rneui/base'; + +import { setEventShouldPreview } from '@/src/store/slices/eventSlice'; +import { useAppDispatch, useAppSelector } from '@/src/store/store'; + +import { Box } from '../../Box/Box'; +import { Button } from '../../Button/Button'; +import { Text } from '../../Text/Text'; +import PreviewError from '../PreviewError'; +import EventPreviewSkeleton from './EventPreviewSkeleton'; + +interface EventPreviewProps { + eventId: string; + isLoading: boolean; + error: FetchBaseQueryError | SerializedError | undefined; +} + +type Ref = BottomSheet; + +export const EventPreview = forwardRef( + ({ eventId, isLoading, error }, ref) => { + const event = useAppSelector((state) => state.event); + const { name: clubName, logo: clubLogo } = useAppSelector( + (state) => state.club + ); + + const dispatch = useAppDispatch(); + + const renderBackdrop = useCallback( + (props: any) => ( + + ), + [] + ); + + return ( + dispatch(setEventShouldPreview(false))} + > + + {isLoading || event.id === '' ? ( + + ) : error ? ( + + ) : ( + <> + + {`${event.name.slice(0, 32)}${event.name.length > 32 ? '...' : ''}`} + + + { + dispatch(setEventShouldPreview(false)); + router.push(`/club/${event.host}`); + }} + > + + + Hosted by {clubName} + + + + + + + About Event + {`${event.description.slice(0, 220).trim()}${event.description.length > 220 ? '...' : ''}`} + + + + )} + + + ); + } +); diff --git a/frontend/mobile/src/app/(design-system)/components/Preview/Event/EventPreviewSkeleton.tsx b/frontend/mobile/src/app/(design-system)/components/Preview/Event/EventPreviewSkeleton.tsx new file mode 100644 index 00000000..e9a36519 --- /dev/null +++ b/frontend/mobile/src/app/(design-system)/components/Preview/Event/EventPreviewSkeleton.tsx @@ -0,0 +1,38 @@ +import { Skeleton } from '@rneui/base'; + +import { Colors } from '../../../shared/colors'; +import { Box } from '../../Box/Box'; + +const EventPreviewSkeleton = () => { + return ( + + + + + + + + + + + + + + + ); +}; + +export default EventPreviewSkeleton; diff --git a/frontend/mobile/src/app/(design-system)/components/Preview/PreviewError.tsx b/frontend/mobile/src/app/(design-system)/components/Preview/PreviewError.tsx new file mode 100644 index 00000000..635442ec --- /dev/null +++ b/frontend/mobile/src/app/(design-system)/components/Preview/PreviewError.tsx @@ -0,0 +1,14 @@ +import { Box } from '../Box/Box'; +import { Text } from '../Text/Text'; + +const PreviewError = () => { + return ( + + + Something went wrong, please try again later. + + + ); +}; + +export default PreviewError; diff --git a/frontend/mobile/src/app/(design-system)/index.ts b/frontend/mobile/src/app/(design-system)/index.ts index 308f6f15..ed1baac5 100644 --- a/frontend/mobile/src/app/(design-system)/index.ts +++ b/frontend/mobile/src/app/(design-system)/index.ts @@ -12,6 +12,6 @@ export * from './components/Dropdown/SelectOne'; export * from './components/Dropdown/Multiselect'; export * from './components/PointOfContactCard/PointOfContactCard'; export * from './components/Tag/Tag'; -export * from './components/Preview/Event'; -export * from './components/Preview/Club'; +export * from './components/Preview/Event/EventPreview'; +export * from './components/Preview/Club/ClubPreview'; export * from './components/Tag/Tags'; diff --git a/frontend/mobile/src/app/_layout.tsx b/frontend/mobile/src/app/_layout.tsx index abcba393..f35b22cc 100644 --- a/frontend/mobile/src/app/_layout.tsx +++ b/frontend/mobile/src/app/_layout.tsx @@ -10,9 +10,10 @@ import { StatusBar } from 'expo-status-bar'; import FontAwesome from '@expo/vector-icons/FontAwesome'; import { ThemeProvider } from '@shopify/restyle'; +import usePreview from '../hooks/usePreview'; import StoreProvider from '../store/StoreProvider'; import { useAppSelector } from '../store/store'; -import { theme } from './(design-system)'; +import { ClubPreview, EventPreview, theme } from './(design-system)'; export { ErrorBoundary } from 'expo-router'; @@ -20,6 +21,16 @@ SplashScreen.preventAutoHideAsync(); const InitalLayout = () => { const { accessToken } = useAppSelector((state) => state.user); + const { + eventPreviewRef, + eventId, + eventApiError, + eventApiLoading, + clubPreviewRef, + clubId, + clubApiError, + clubApiLoading + } = usePreview(); useEffect(() => { if (!accessToken) { @@ -36,6 +47,18 @@ const InitalLayout = () => { + + ); }; diff --git a/frontend/mobile/src/hooks/useClub.ts b/frontend/mobile/src/hooks/useClub.ts index cb4347a9..3f172606 100644 --- a/frontend/mobile/src/hooks/useClub.ts +++ b/frontend/mobile/src/hooks/useClub.ts @@ -1,50 +1,75 @@ -import { clubApi, eventApi } from "@generatesac/lib"; -import { useEffect, useState } from "react"; -import { useAppDispatch } from "../store/store"; -import { setClub, setClubEvents, setClubTags } from "../store/slices/clubSlice"; +import { useEffect, useState } from 'react'; -const useClub = (clubId: string) => { +import { clubApi } from '@generatesac/lib'; + +import { setClub, setClubEvents, setClubTags } from '../store/slices/clubSlice'; +import { useAppDispatch, useAppSelector } from '../store/store'; + +const useClub = (id: string) => { const [retriggerFetch, setRetriggerFetch] = useState(false); - const [getClub, { isLoading: clubLoading, error: clubError }] = clubApi.useLazyClubQuery(); - const [getClubTags, { isLoading: tagsLoading, error: tagsError }] = clubApi.useLazyClubTagsQuery(); - const [getEvents, { isLoading: eventsLoading, error: eventsError }] = clubApi.useLazyClubEventsQuery(); + const [getClub, { isLoading: clubLoading, error: clubError }] = + clubApi.useLazyClubQuery(); + const [getClubTags, { isLoading: tagsLoading, error: tagsError }] = + clubApi.useLazyClubTagsQuery(); + const [getEvents, { isLoading: eventsLoading, error: eventsError }] = + clubApi.useLazyClubEventsQuery(); const dispatch = useAppDispatch(); + const { shouldPreview, id: clubId } = useAppSelector((state) => state.club); + + const apiLoading = clubLoading || tagsLoading || eventsLoading; + const apiError = clubError || tagsError || eventsError; useEffect(() => { - if (clubId !== "") { - getClub(clubId) - .then(({ data: clubData }) => { + if ((id !== '' && (id !== clubId || shouldPreview)) || apiError) { + getClub(id).then(({ data: clubData }) => { if (clubData) { dispatch(setClub(clubData)); } - }); - - getClubTags(clubId) - .then(({ data: tagData }) => { - if (tagData) { - dispatch(setClubTags(tagData)); - } - }) - - getEvents({ queryParams: { page: 1, limit: 5 }, id: clubId }) - .then(({ data: eventData }) => { - if (eventData) { - dispatch(setClubEvents(eventData)); - } - }); - } - }, [retriggerFetch, clubId, getClub, getClubTags]); + }); - const apiLoading = clubLoading || tagsLoading || eventsLoading; - const apiError = clubError || tagsError || eventsError; + getClubTags(id).then(({ data: tagData }) => { + if (tagData) { + dispatch(setClubTags(tagData)); + } + }); + + getEvents({ id }).then(({ data: eventData }) => { + if (eventData) { + const sortedEvents = [...eventData]; + sortedEvents.sort((a, b) => { + return ( + new Date(a.start_time).getTime() - + new Date(b.start_time).getTime() + ); + }); + const events = sortedEvents.filter( + (event) => + new Date(event.end_time).getTime() > + new Date().getTime() + ); + dispatch(setClubEvents(events)); + } + }); + } + }, [ + retriggerFetch, + id, + getClub, + getClubTags, + getEvents, + dispatch, + clubId, + apiError, + shouldPreview + ]); return { setRetriggerFetch, apiLoading, - apiError, - } -} + apiError + }; +}; -export default useClub; \ No newline at end of file +export default useClub; diff --git a/frontend/mobile/src/hooks/useEvent.ts b/frontend/mobile/src/hooks/useEvent.ts index 30e6af61..6cb2778a 100644 --- a/frontend/mobile/src/hooks/useEvent.ts +++ b/frontend/mobile/src/hooks/useEvent.ts @@ -1,53 +1,70 @@ -import { useEffect, useState } from "react"; -import { useAppDispatch } from "../store/store"; -import { clubApi, eventApi } from "@generatesac/lib"; -import { setEvent, setEventTags } from "../store/slices/eventSlice"; -import { setClub } from "../store/slices/clubSlice"; +import { useEffect, useState } from 'react'; + +import { clubApi, eventApi } from '@generatesac/lib'; + +import { setClub } from '../store/slices/clubSlice'; +import { setEvent, setEventTags } from '../store/slices/eventSlice'; +import { useAppDispatch, useAppSelector } from '../store/store'; const useEvent = (id: string) => { 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 [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 apiLoading = eventLoading || clubLoading || tagsLoading; + const apiError = eventError || clubError || tagsError; useEffect(() => { - if (id !== "") { + if ((id !== '' && (id !== eventId || shouldPreview)) || apiError) { + console.log('fetching data!'); // Fetch events - getEvent(id) - .then(({ data: eventData }) => { - dispatch(setEvent(eventData)); - if (eventData) { - // Fetch club - getClub(eventData.host as string) - .then(({ data: clubData }) => { - if (clubData) { - dispatch(setClub(clubData)); - } - }) - } - }); - - getEventTags(id) - .then(({ data: tagData }) => { - if (tagData) { - dispatch(setEventTags(tagData)); - } - }) + getEvent(id).then(({ data: eventData }) => { + dispatch(setEvent(eventData)); + if (eventData) { + // Fetch club + getClub(eventData.host as string).then( + ({ data: clubData }) => { + if (clubData) { + dispatch(setClub(clubData)); + } + } + ); + } + }); + getEventTags(id).then(({ data: tagData }) => { + if (tagData) { + dispatch(setEventTags(tagData)); + } + }); } - }, [retriggerFetch, id, getClub, getEvent, getEventTags]); - - const apiLoading = eventLoading || clubLoading || tagsLoading; - const apiError = eventError || clubError || tagsError; + }, [ + retriggerFetch, + id, + getClub, + getEvent, + getEventTags, + dispatch, + eventId, + shouldPreview, + apiError + ]); return { setRetriggerFetch, apiLoading, - apiError, - } + apiError + }; }; -export default useEvent; \ No newline at end of file +export default useEvent; diff --git a/frontend/mobile/src/hooks/usePreview.ts b/frontend/mobile/src/hooks/usePreview.ts new file mode 100644 index 00000000..8cba55d5 --- /dev/null +++ b/frontend/mobile/src/hooks/usePreview.ts @@ -0,0 +1,56 @@ +import { useEffect, useRef } from 'react'; + +import BottomSheet from '@gorhom/bottom-sheet'; + +import { setClubShouldPreview } from '../store/slices/clubSlice'; +import { setEventShouldPreview } from '../store/slices/eventSlice'; +import { useAppDispatch, useAppSelector } from '../store/store'; +import useClub from './useClub'; +import useEvent from './useEvent'; + +const usePreview = () => { + const dispatch = useAppDispatch(); + const eventPreviewRef = useRef(null); + const clubPreviewRef = useRef(null); + const { shouldPreview: eventShouldPreview, id: eventId } = useAppSelector( + (state) => state.event + ); + const { shouldPreview: clubShouldPreview, id: clubId } = useAppSelector( + (state) => state.club + ); + const { apiLoading: eventApiLoading, apiError: eventApiError } = + useEvent(eventId); + const { apiLoading: clubApiLoading, apiError: clubApiError } = + useClub(clubId); + + useEffect(() => { + dispatch(setEventShouldPreview(false)); + dispatch(setClubShouldPreview(false)); + }, [dispatch]); + + useEffect(() => { + if (eventShouldPreview) { + eventPreviewRef.current?.snapToIndex(0); + } else { + eventPreviewRef.current?.close(); + } + if (clubShouldPreview) { + clubPreviewRef.current?.snapToIndex(0); + } else { + clubPreviewRef.current?.close(); + } + }, [eventShouldPreview, clubShouldPreview]); + + return { + eventPreviewRef, + clubPreviewRef, + eventId, + clubId, + eventApiLoading, + eventApiError, + clubApiLoading, + clubApiError + }; +}; + +export default usePreview; diff --git a/frontend/mobile/src/store/slices/clubSlice.ts b/frontend/mobile/src/store/slices/clubSlice.ts index 168edb38..3f44c9d1 100644 --- a/frontend/mobile/src/store/slices/clubSlice.ts +++ b/frontend/mobile/src/store/slices/clubSlice.ts @@ -19,7 +19,7 @@ const initialState: Club & ClubState = { weekly_time_committment: 0, one_word_to_describe_us: '', tags: [], - events: [], + events: [] }; export const clubSlice = createSlice({ @@ -38,8 +38,10 @@ export const clubSlice = createSlice({ state.preview = action.payload.preview; state.num_members = action.payload.num_members; state.logo = action.payload.logo; - state.weekly_time_committment = action.payload.weekly_time_committment; - state.one_word_to_describe_us = action.payload.one_word_to_describe_us; + state.weekly_time_committment = + action.payload.weekly_time_committment; + state.one_word_to_describe_us = + action.payload.one_word_to_describe_us; state.recruitment = action.payload.recruitment; }, setClubTags: (state, action) => { @@ -55,12 +57,12 @@ export const clubSlice = createSlice({ } }); -export const { - setClubId, - setClub, - setClubTags, +export const { + setClubId, + setClub, + setClubTags, setClubEvents, - resetClub, - setClubShouldPreview + resetClub, + setClubShouldPreview } = clubSlice.actions; export default clubSlice.reducer; diff --git a/frontend/mobile/src/store/slices/eventSlice.ts b/frontend/mobile/src/store/slices/eventSlice.ts index 42e852d2..cf43da36 100644 --- a/frontend/mobile/src/store/slices/eventSlice.ts +++ b/frontend/mobile/src/store/slices/eventSlice.ts @@ -22,7 +22,7 @@ const initialState: Event & EventClubState = { is_public: false, preview: '', host: '', - tags: [], + tags: [] }; export const eventSlice = createSlice({ @@ -59,11 +59,11 @@ export const eventSlice = createSlice({ } }); -export const { +export const { setEvent, resetEvent, setEventShouldPreview, setEventTags, - setEventId, + setEventId } = eventSlice.actions; export default eventSlice.reducer; diff --git a/frontend/mobile/src/store/store.ts b/frontend/mobile/src/store/store.ts index 2e855c40..21e502ed 100644 --- a/frontend/mobile/src/store/store.ts +++ b/frontend/mobile/src/store/store.ts @@ -16,9 +16,9 @@ import persistReducer from 'redux-persist/es/persistReducer'; import autoMergeLevel2 from 'redux-persist/es/stateReconciler/autoMergeLevel2'; import { thunk } from 'redux-thunk'; -import userReducer from '@/src/store/slices/userSlice'; -import eventReducer from '@/src/store/slices/eventSlice'; import clubReducer from '@/src/store/slices/clubSlice'; +import eventReducer from '@/src/store/slices/eventSlice'; +import userReducer from '@/src/store/slices/userSlice'; const rootReducer = combineReducers({ user: userReducer,