chore: Updated Mock Data to Include Club Logos (#1029)

Co-authored-by: Alder Whiteford <[email protected]>

backend/entities/events/previews/transactions.go

@@ -71,7 +71,7 @@ func processEventStubs(db *gorm.DB, events []EventStub) ([]EventPreview, error)
 	}
 
 	var hosts []models.Club
-	if err := db.Where("id IN ?", eventIDs).Find(&hosts).Error; err != nil {
+	if err := db.Joins("JOIN events ON events.host = clubs.id").Where("events.id IN ?", eventIDs).Find(&hosts).Error; err != nil {
 		return nil, err
 	}
 

frontend/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@generatesac/lib",
-  "version": "0.0.164",
+  "version": "0.0.169",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

frontend/lib/src/api/eventApi.ts

@@ -27,7 +27,6 @@ export const eventApi = baseApi.injectEndpoints({
           ? result.map((event) => ({ type: "Event", id: event.id }))
           : ["Event"],
       transformResponse: (response) => {
-        console.log('here!!!!')
         return z.array(eventSchema).parse(response);
       },
     }),

frontend/lib/src/types/club.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 
 import { rootModelSchema } from "./root";
+import { recruitmentSchema } from "./recruitment";
 
 // Schemas:
 export const createClubRequestBodySchema = z.object({
@@ -35,11 +36,10 @@ const clubSchemaIntermediate = z.object({
   preview: z.string().max(255),
   description: z.string(),
   num_members: z.number(),
-  is_recruiting: z.boolean(),
-  application_link: z.string().max(255),
   logo: z.string().max(255).optional(),
   weekly_time_committment: z.number().optional(),
   one_word_to_describe_us: z.string().max(20).optional(),
+  recruitment: recruitmentSchema.optional(),
 });
 
 export const clubSchema = clubSchemaIntermediate.merge(rootModelSchema);

frontend/lib/src/types/event.ts

@@ -59,7 +59,7 @@ const eventPreviewSchemaIntermediate = z.object({
   start_time: z.string(),
   end_time: z.string(),
 
-  tags: tagSchema.array(),
+  tags: tagSchema.array().optional().nullable(),
   host_name: z.string().max(255),
   host_logo: z.string().max(255).optional(),
 });
@@ -76,3 +76,4 @@ export type UpdateEventRequestBody = z.infer<
 >;
 export type Event = z.infer<typeof eventSchema>;
 export type EventPreview = z.infer<typeof eventPreviewSchema>;
+export type EventType = z.infer<typeof eventTypeEnum>;

frontend/mobile/package.json

@@ -25,7 +25,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@fortawesome/react-native-fontawesome": "^0.3.2",
-        "@generatesac/lib": "0.0.164",
+        "@generatesac/lib": "0.0.169",
         "@gorhom/bottom-sheet": "^4.6.3",
         "@hookform/resolvers": "^3.4.2",
         "@react-native-async-storage/async-storage": "^1.23.1",

frontend/mobile/src/app/(app)/(tabs)/calendar.tsx

@@ -58,7 +58,6 @@ const CalendarPage = () => {
                         setError(false);
                     }
 
-                    console.log(data);
                     return parseData(startTime, endTime, data);
                 }
             );

frontend/mobile/src/app/(app)/(tabs)/index.tsx

@@ -22,7 +22,7 @@ const HomePage = () => {
                     variant="small"
                     event={item.name}
                     club={item.host}
-                    clubId="1"
+                    eventId="1"
                     startTime={item.start_time}
                     endTime={item.end_time}
                     image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLF3ord7lnV_5Je-pC2AUgUiesHNPcZlpI7A&s"

frontend/mobile/src/app/(app)/event/[id].tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Dimensions } from 'react-native';
 import Animated, {
     interpolate,
@@ -9,6 +9,8 @@ import Animated, {
 
 import { Stack, useLocalSearchParams } from 'expo-router';
 
+import { EventType, clubApi } from '@generatesac/lib';
+import { eventApi } from '@generatesac/lib';
 import BottomSheet from '@gorhom/bottom-sheet';
 
 import { Arrow, Box, KebabMenu } from '@/src/app/(design-system)';
@@ -18,13 +20,12 @@ import { description, events, tags } from '@/src/consts/event-page';
 
 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 { UpcomingEvent } from './components/upcoming-events';
-
-type EventType = 'in-person' | 'virtual' | 'hybrid';
+import EventPageSkeleton from './components/skeleton';
 
 const MockEvent = {
     eventImage:
@@ -46,7 +47,7 @@ const MockEvent = {
 };
 
 const EventPage = () => {
-    useLocalSearchParams<{ id: string }>();
+    const { id } = useLocalSearchParams<{ id: string }>();
     const { width } = Dimensions.get('window');
     const IMG_HEIGHT = width;
     const shareEvent = useRef<BottomSheet>(null);
@@ -55,6 +56,19 @@ const EventPage = () => {
     const scrollRef = useAnimatedRef<Animated.ScrollView>();
     const scrollOffset = useScrollViewOffset(scrollRef);
 
+    const [retriggerFetch, setRetriggerFetch] = useState(false);
+
+    const [
+        getEvent,
+        { isLoading: eventLoading, error: eventError, data: event }
+    ] = eventApi.useLazyEventQuery();
+    const [getClub, { isLoading: clubLoading, error: clubError, data: club }] =
+        clubApi.useLazyClubQuery();
+    const [
+        getEventTags,
+        { isLoading: tagsLoading, error: tagsError, data: tags }
+    ] = eventApi.useLazyEventTagsQuery();
+
     const imageAnimatedStyle = useAnimatedStyle(() => {
         return {
             transform: [
@@ -90,8 +104,24 @@ const EventPage = () => {
         };
     });
 
+    useEffect(() => {
+        // Fetch events
+        getEvent(id as string).then(({ data: eventData }) => {
+            if (eventData) {
+                // Fetch club
+                getClub(eventData.host as string);
+                // Fetch tags:
+                getEventTags(eventData.id);
+            }
+        });
+    }, [retriggerFetch, id, getClub, getEvent, getEventTags]);
+
+    const apiLoading = eventLoading || clubLoading || tagsLoading;
+    const apiError = eventError || clubError || tagsError;
+    const allData = event && tags && club;
+
     return (
-        <Box backgroundColor="white">
+        <Box backgroundColor="white" height={'100%'}>
             <Stack.Screen
                 options={{
                     headerTitle: '',
@@ -102,82 +132,115 @@ const EventPage = () => {
                     },
                     headerLeft: () => (
                         <Animated.View style={headerAnimatedStyle}>
-                            <Arrow color="white" />
-                        </Animated.View>
-                    ),
-                    headerRight: () => (
-                        <Animated.View style={headerAnimatedStyle}>
-                            <KebabMenu
-                                onPress={() =>
-                                    shareEvent.current?.snapToIndex(0)
+                            <Arrow
+                                color={
+                                    eventError || clubError ? 'black' : 'white'
                                 }
-                                color="white"
                             />
                         </Animated.View>
-                    )
+                    ),
+                    headerRight:
+                        !eventError || clubError
+                            ? () => (
+                                  <Animated.View style={headerAnimatedStyle}>
+                                      <KebabMenu
+                                          onPress={() =>
+                                              shareEvent.current?.snapToIndex(0)
+                                          }
+                                          color="white"
+                                      />
+                                  </Animated.View>
+                              )
+                            : () => <></>
                 }}
             />
             <Animated.ScrollView
                 showsVerticalScrollIndicator={false}
                 scrollEventThrottle={16}
                 ref={scrollRef}
             >
-                <Box>
-                    <Animated.Image
-                        source={{
-                            uri: MockEvent.eventImage
-                        }}
-                        style={[
-                            imageAnimatedStyle,
-                            { width: '100%', aspectRatio: 1 }
-                        ]}
-                    />
-                </Box>
-                <Box backgroundColor="white">
-                    <Box margin="xl" gap="xxl">
-                        <Box gap="l">
-                            <Overview
-                                clubId={MockEvent.clubId}
-                                logo={MockEvent.logo}
-                                eventName={MockEvent.eventName}
-                                color={MockEvent.color}
-                                club={MockEvent.club}
-                                startTime={MockEvent.startTime}
-                                endTime={MockEvent.endTime}
-                                location={MockEvent.location}
-                                type={MockEvent.eventType}
-                            />
-                            <Button
-                                variant="standardButton"
-                                color={MockEvent.color}
-                                onPress={() => register.current?.snapToIndex(0)}
-                            >
-                                Register
-                            </Button>
-                        </Box>
-                        <AboutEvent
-                            color={MockEvent.color}
-                            zoomLink={MockEvent.zoomLink}
-                            description={MockEvent.description}
-                            tags={MockEvent.tags}
-                            onPress={() => bottomSheet.current?.snapToIndex(0)}
-                        />
-                        <Location location={MockEvent.location} />
-                    </Box>
-                    <UpcomingEvent events={MockEvent.events} />
-                </Box>
+                {apiLoading ? (
+                    <EventPageSkeleton />
+                ) : apiError ? (
+                    <EventPageError refetch={setRetriggerFetch} />
+                ) : (
+                    allData && (
+                        <>
+                            <Box>
+                                <Animated.Image
+                                    source={{
+                                        uri: MockEvent.eventImage
+                                    }}
+                                    style={[
+                                        imageAnimatedStyle,
+                                        { width: '100%', aspectRatio: 1 }
+                                    ]}
+                                />
+                            </Box>
+                            <Box backgroundColor="white">
+                                <Box margin="xl" gap="xxl">
+                                    <Box gap="l">
+                                        <Overview
+                                            clubId={event.host}
+                                            logo={club.logo ?? ''}
+                                            eventName={event.name}
+                                            color={MockEvent.color}
+                                            club={club?.name}
+                                            startTime={
+                                                new Date(event.start_time)
+                                            }
+                                            endTime={new Date(event.end_time)}
+                                            location={
+                                                event.location ||
+                                                'ISEC, Room 204'
+                                            }
+                                            type={event.event_type}
+                                        />
+                                        <Button
+                                            variant="standardButton"
+                                            color={MockEvent.color}
+                                            onPress={() =>
+                                                register.current?.snapToIndex(0)
+                                            }
+                                        >
+                                            Register
+                                        </Button>
+                                    </Box>
+                                    <AboutEvent
+                                        color={MockEvent.color}
+                                        zoomLink={event.link}
+                                        description={event.description}
+                                        tags={tags}
+                                        onPress={() =>
+                                            bottomSheet.current?.snapToIndex(0)
+                                        }
+                                    />
+                                    <Location
+                                        location={
+                                            event.location || 'ISEC, Room 204'
+                                        }
+                                    />
+                                </Box>
+                                {/* <UpcomingEvent events={MockEvent.events} /> */}
+                            </Box>
+                        </>
+                    )
+                )}
             </Animated.ScrollView>
             <ShareEventBottomSheet ref={shareEvent} link={MockEvent.link} />
             <RegisterBottomSheet
-                startTime={MockEvent.startTime}
-                endTime={MockEvent.endTime}
-                eventDetail={MockEvent.description}
-                eventName={MockEvent.eventName}
-                location={MockEvent.location}
-                eventType={MockEvent.eventType}
+                startTime={new Date(event?.start_time as string)}
+                endTime={new Date(event?.end_time as string)}
+                eventDetail={event?.description as string}
+                eventName={event?.name as string}
+                location={event?.location as string}
+                eventType={event?.event_type as EventType}
                 ref={register}
             />
-            <Description description={description} ref={bottomSheet} />
+            <Description
+                description={event?.description as string}
+                ref={bottomSheet}
+            />
         </Box>
     );
 };

frontend/mobile/src/app/(app)/event/components/error.tsx

@@ -0,0 +1,33 @@
+import { SafeAreaView } from 'react-native';
+
+import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
+
+import { Box, Button, Spacing, Text } from '@/src/app/(design-system)';
+
+type EventPageErrorProps = {
+    refetch: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const EventPageError = ({ refetch }: EventPageErrorProps) => {
+    return (
+        <SafeAreaView style={{ margin: Spacing.m, gap: 20 }}>
+            <Box width="75%" marginTop="m" gap="m">
+                <Text variant="header-1">Oops, something went wrong!</Text>
+            </Box>
+            <Box>
+                <Button
+                    variant="iconButton"
+                    icon={faArrowsRotate}
+                    color="black"
+                    iconPosition="left"
+                    size="full"
+                    onPress={() => refetch((prev) => !prev)}
+                >
+                    Refresh
+                </Button>
+            </Box>
+        </SafeAreaView>
+    );
+};
+
+export default EventPageError;

frontend/mobile/src/app/(app)/event/components/overview.tsx

@@ -4,6 +4,7 @@ import {
     faLocationDot
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { EventType } from '@generatesac/lib';
 import { Avatar } from '@rneui/base';
 
 import { Box, Colors, SACColors, Text } from '@/src/app/(design-system)';
@@ -18,7 +19,7 @@ interface OverviewProps {
     startTime: Date;
     endTime: Date;
     location: string;
-    type: 'in-person' | 'virtual' | 'hybrid';
+    type: EventType;
     color: SACColors;
 }