feat: event & club preview components

frontend/lib/package.json

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

frontend/lib/src/types/index.ts

@@ -10,3 +10,4 @@ export * from "./event";
 export * from "./file";
 export * from "./pointOfContact";
 export * from "./verification";
+export * from "./recruitment";

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.170",
+        "@generatesac/lib": "0.0.171",
         "@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)/_layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { Tabs } from 'expo-router';
 
@@ -6,10 +6,13 @@
 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 { Text } from '@/src/app/(design-system)';
+import { EventPreview, 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;
@@ -34,55 +37,75 @@
 );
 
 const Layout = () => {
+    const dispatch = useAppDispatch();
+    const eventPreviewRef = useRef<BottomSheet>(null);
+    const clubPreviewRef = useRef<BottomSheet>(null);
+
+    const { shouldPreview: eventShouldPreview, id: eventId } = useAppSelector((state) => state.event);
+
+    useEffect(() => {
+        dispatch(setEventShouldPreview(false));
+    }, [])
+
+    useEffect(() => {
+        if (eventShouldPreview) {
+            eventPreviewRef.current?.snapToIndex(0);
+        }
+    }, [eventShouldPreview]);
+
+
     return (
-        <Tabs
-            screenOptions={{
-                tabBarShowLabel: false,
-                tabBarStyle: {
-                    borderTopWidth: 1,
-                    borderTopColor: 'gray',
-                    height: 85
-                }
-            }}
-            sceneContainerStyle={{
-                backgroundColor: 'white'
-            }}
-        >
-            <Tabs.Screen
-                name="index"
-                options={{
-                    title: 'Home',
-                    headerShown: false,
-                    tabBarLabel: ({ focused }) =>
-                        TabBarLabel({ focused, title: 'Home' }),
-                    tabBarIcon: ({ focused }) =>
-                        TabBarIcon({ focused, icon: faHouse })
-                }}
-            />
-            <Tabs.Screen
-                name="calendar"
-                options={{
-                    title: 'Calendar',
-                    headerShown: false,
-                    tabBarLabel: ({ focused }) =>
-                        TabBarLabel({ focused, title: 'Calendar' }),
-                    tabBarIcon: ({ focused }) =>
-                        TabBarIcon({ focused, icon: faCalendarDays })
+        <>
+            <Tabs
+                screenOptions={{
+                    tabBarShowLabel: false,
+                    tabBarStyle: {
+                        borderTopWidth: 1,
+                        borderTopColor: 'gray',
+                        height: 85
+                    }
                 }}
-            />
-            <Tabs.Screen
-                name="profile"
-                options={{
-                    title: 'Profile',
-                    headerShown: true,
-                    headerTransparent: true,
-                    tabBarLabel: ({ focused }) =>
-                        TabBarLabel({ focused, title: 'Profile' }),
-                    tabBarIcon: ({ focused }) =>
-                        TabBarIcon({ focused, icon: faUser })
+                sceneContainerStyle={{
+                    backgroundColor: 'white'
                 }}
-            />
-        </Tabs>
+            >
+                <Tabs.Screen
+                    name="index"
+                    options={{
+                        title: 'Home',
+                        headerShown: false,
+                        tabBarLabel: ({ focused }) =>
+                            TabBarLabel({ focused, title: 'Home' }),
+                        tabBarIcon: ({ focused }) =>
+                            TabBarIcon({ focused, icon: faHouse })
+                    }}
+                />
+                <Tabs.Screen
+                    name="calendar"
+                    options={{
+                        title: 'Calendar',
+                        headerShown: false,
+                        tabBarLabel: ({ focused }) =>
+                            TabBarLabel({ focused, title: 'Calendar' }),
+                        tabBarIcon: ({ focused }) =>
+                            TabBarIcon({ focused, icon: faCalendarDays })
+                    }}
+                />
+                <Tabs.Screen
+                    name="profile"
+                    options={{
+                        title: 'Profile',
+                        headerShown: true,
+                        headerTransparent: true,
+                        tabBarLabel: ({ focused }) =>
+                            TabBarLabel({ focused, title: 'Profile' }),
+                        tabBarIcon: ({ focused }) =>
+                            TabBarIcon({ focused, icon: faUser })
+                    }}
+                />
+            </Tabs>
+            <EventPreview eventId={eventId} ref={eventPreviewRef} />
+        </>
     );
 };
 

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

@@ -1,35 +1,11 @@
 import React from 'react';
-import { Pressable, StyleSheet } from 'react-native';
-
-import { router } from 'expo-router';
-
-import { Box, Text } from '@/src/app/(design-system)';
-import { EventCard } from '@/src/app/(design-system)/components/EventCard';
+import { StyleSheet } from 'react-native';
 
 const HomePage = () => {
-    const item = {
-        name: 'Your Event Name',
-        host: 'Your Club Name',
-        start_time: new Date(),
-        end_time: new Date()
-    };
 
     return (
-        <Box style={styles.container}>
-            <Text variant="body-1">Home</Text>
-            <Pressable onPress={() => router.push(`/event/1`)}>
-                <EventCard
-                    variant="small"
-                    event={item.name}
-                    club={item.host}
-                    eventId="1"
-                    startTime={item.start_time}
-                    endTime={item.end_time}
-                    image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLF3ord7lnV_5Je-pC2AUgUiesHNPcZlpI7A&s"
-                />
-            </Pressable>
-        </Box>
-    );
+        <></>
+    )
 };
 
 const styles = StyleSheet.create({

frontend/mobile/src/app/(app)/_layout.tsx

@@ -17,6 +17,17 @@ const Layout = () => {
                     }
                 }}
             />
+            <Stack.Screen
+                name="club"
+                options={{
+                    headerTitle: '',
+                    headerTransparent: true,
+                    headerShown: false,
+                    headerTitleStyle: {
+                        color: 'white'
+                    }
+                }}
+            />
             <Stack.Screen
                 name="user"
                 options={{

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

@@ -0,0 +1,167 @@
+import { Dimensions, Linking } from 'react-native';
+import Animated, {
+    interpolate,
+    useAnimatedRef,
+    useAnimatedStyle,
+    useScrollViewOffset
+} from 'react-native-reanimated';
+
+import { Arrow, Box, PageTags, RecruitmentInfo, Tag, 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 { Description } from '../event/components/description';
+import { useRef } from 'react';
+import BottomSheet from '@gorhom/bottom-sheet';
+import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
+
+const color: SACColors = 'darkRed';
+
+const ClubPage = () => {
+    const { id } = useLocalSearchParams<{ id: string }>();
+    const { width } = Dimensions.get('window');
+    const IMG_HEIGHT = width;
+
+    const scrollRef = useAnimatedRef<Animated.ScrollView>();
+    const scrollOffset = useScrollViewOffset(scrollRef);
+
+    const bottomSheet = useRef<BottomSheet>(null);
+
+    const club = useAppSelector((state) => state.club);
+    const { setRetriggerFetch, apiLoading, apiError } = useClub(id as string);
+
+    const headerAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [
+                {
+                    translateY: interpolate(
+                        scrollOffset.value,
+                        [-IMG_HEIGHT, 0, IMG_HEIGHT],
+                        [0, 0, -IMG_HEIGHT * 0.75]
+                    )
+                }
+            ]
+        };
+    });
+
+    return (
+        <Box height='100%' backgroundColor='white'>
+            <Stack.Screen
+                options={{
+                    headerTitle: '',
+                    headerTransparent: true,
+                    headerShown: true,
+                    headerTitleStyle: {
+                        color: 'white'
+                    },
+                    headerLeft: () => (
+                        <Animated.View style={headerAnimatedStyle}>
+                            <Arrow color={apiError ? 'black' : 'white'} />
+                        </Animated.View>
+                    ),
+                }}
+            />
+            <Animated.ScrollView
+                showsVerticalScrollIndicator={false}
+                showsHorizontalScrollIndicator={false}
+                scrollEventThrottle={16}
+                ref={scrollRef}
+            >                
+                <AnimatedImageHeader
+                    uri="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLF3ord7lnV_5Je-pC2AUgUiesHNPcZlpI7A&s"
+                    scrollOffset={scrollOffset}
+                    imageHeight={IMG_HEIGHT}
+                    aspectRatio={2.5}
+                />
+                <Box backgroundColor="white">
+                    <Box
+                        flexDirection="row"
+                        justifyContent="space-between"
+                        marginTop="negativeXl"
+                        alignItems="center"
+                        paddingVertical='s'
+                        paddingHorizontal='l'
+                    >
+                        <ClubIcon imageUrl={club.logo as string} />
+                        <Box width={116}>
+                            <Button color={color} size='sm' variant="standardButton">
+                                Follow
+                            </Button>
+                        </Box>
+                    </Box>
+                    <Box marginHorizontal='l' marginVertical='m' gap='m'>
+                        <Text variant="header-1">{club.name}</Text>
+                        <PageTags tags={club.tags} color={color} />
+                        <AboutSection 
+                            description={club.description}
+                            onPress={() => bottomSheet.current?.snapToIndex(0)}
+                            type='club'
+                        />
+                        {club.recruitment?.is_recruiting &&
+                            <Button
+                                variant="iconButton"
+                                icon={faExternalLink}
+                                color={color}
+                                iconPosition="right"
+                                size="sm"
+                                justifyContent="space-between"
+                                flexDirection="row"
+                                onPress={() => Linking.openURL('')}
+                            >
+                                <Box paddingBottom="xxxs" paddingTop="xxs" gap='xxs'>
+                                    <Text color="white" variant="body-1">
+                                        Application Form
+                                    </Text>
+                                    <Text color="white" variant="caption-1">
+                                        Google Form
+                                    </Text>
+                                </Box>
+                            </Button>
+                        }
+                        <Box>
+                            <Text variant="subheader-1">Recruiting</Text>
+                            <RecruitmentInfo
+                                recruitingType={'application'}
+                                isRecruiting={false}
+                                recruitmentCycle={'fallSpring'}
+                                color={color}
+                            />
+                        </Box>
+
+                        <Text variant="subheader-1">Upcoming Events</Text>
+                        {/* <EventCard
+                            event={events[0].name}
+                            variant="big"
+                            tags={tags}
+                            club={club.name}
+                            startTime={events[0].start_time}
+                            endTime={events[0].end_time}
+                            logo="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT800M6T7YVq_f6W49g_UNL29US7gC63nTitg&s"
+                            image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfT6p6kCen0-GphSDogJRd2KoYjg0-QQWuAw9e5JBIBEVTc3Hxho_UwRsZ0IrEi6Ap5oo&usqp=CAU"
+                        /> */}
+                        <Box height={1} backgroundColor="gray" marginVertical="m" />
+                        {/* <EventCardList events={events} /> */}
+
+                        <Text variant="subheader-1">Leadership</Text>
+                        {/* <PointOfContactList
+                            contacts={pointOfContacts}
+                            color={color}
+                        /> */}
+                    </Box>
+                </Box>
+            </Animated.ScrollView>
+            <Description
+                description={club.description as string}
+                ref={bottomSheet}
+                type='club'
+            />
+        </Box>
+    );
+};
+
+export default ClubPage;