Merge branch 'main' into 804-update-clubs-model

GenerateNU · Jun 5, 2024 · de68bb2 · de68bb2
2 parents d36c779 + 8465922
commit de68bb2
Show file tree

Hide file tree

Showing 37 changed files with 2,233 additions and 185 deletions.
diff --git a/frontend/mobile/.eslintrc.js b/frontend/mobile/.eslintrc.js
@@ -5,7 +5,7 @@ module.exports = {
     rules: {
         'prettier/prettier': 'error',
         'react/react-in-jsx-scope': 'off',
-        'react-native/no-inline-styles': 'off',
+        'react-native/no-inline-styles': 'off'
     },
     env: {
         'jest/globals': true

diff --git a/frontend/mobile/app.json b/frontend/mobile/app.json
@@ -18,7 +18,8 @@
                 "usesNonExemptEncryption": false
             },
             "supportsTablet": true,
-            "bundleIdentifier": "com.generatesac.studentactivitycalendar"
+            "bundleIdentifier": "com.generatesac.studentactivitycalendar",
+            "backgroundColor": "#ffffff"
         },
         "android": {
             "adaptiveIcon": {

diff --git a/frontend/mobile/app/(app)/(tabs)/_layout.tsx b/frontend/mobile/app/(app)/(tabs)/_layout.tsx
@@ -6,10 +6,10 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 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 { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 
 import { Text } from '@/app/(design-system)';
-import { Box, Colors } from '@/app/(design-system)';
+import { Box } from '@/app/(design-system)';
+import { Icon } from '@/app/(design-system)/components/Icon/Icon';
 
 interface TabBarLabelProps {
     focused: boolean;
@@ -29,25 +29,24 @@ interface TabBarIconProps {
 
 const TabBarIcon: React.FC<TabBarIconProps> = ({ focused, icon }) => (
     <Box paddingTop="m">
-        <FontAwesomeIcon
-            size={20}
-            color={focused ? 'black' : `${Colors.gray}`}
-            icon={icon}
-        />
+        <Icon size="md" color={focused ? 'black' : `gray`} icon={icon} />
     </Box>
 );
 
 const Layout = () => {
     return (
         <Tabs
             screenOptions={{
-                tabBarShowLabel: true,
+                tabBarShowLabel: false,
                 tabBarStyle: {
                     borderTopWidth: 1,
-                    borderTopColor: '#00000066',
+                    borderTopColor: 'gray',
                     height: 85
                 }
             }}
+            sceneContainerStyle={{
+                backgroundColor: 'white'
+            }}
         >
             <Tabs.Screen
                 name="index"

diff --git a/frontend/mobile/app/(app)/(tabs)/calendar.tsx b/frontend/mobile/app/(app)/(tabs)/calendar.tsx
@@ -1,10 +1,15 @@
-import { Box, Tag } from '@/app/(design-system)';
+import { SafeAreaView } from 'react-native';
+
+import Calendar from '@/app/(design-system)/components/Calendar/Calendar';
+
+// We pull events in a date range from the backend (1 month)
+// Show two weeks before today and two weeks after today
 
 const CalendarPage = () => {
     return (
-        <Box flex={1} alignItems="center" justifyContent="center" padding="m">
-            <Tag variant="darkRed">Calendar</Tag>
-        </Box>
+        <SafeAreaView style={{ flex: 1 }}>
+            <Calendar />
+        </SafeAreaView>
     );
 };
 

diff --git a/frontend/mobile/app/(app)/(tabs)/index.tsx b/frontend/mobile/app/(app)/(tabs)/index.tsx
@@ -1,20 +1,100 @@
-import { StyleSheet, View } from 'react-native';
+import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
 
-import { Text } from '@/app/(design-system)';
-import { RecruitmentInfo } from '@/app/(design-system)/components/ClubRecruitment/RecruitmentInfo/ClubRecruitmentInfo';
+import { Tag } from '@generatesac/lib';
+
+import { EventCard } from '@/app/(design-system)/components/EventCard/EventCard';
+import { GlobalLayout } from '@/app/(design-system)/components/GlobalLayout/GlobalLayout';
+
+const tags: Tag[] = [
+    {
+        id: '1',
+        created_at: new Date(),
+        updated_at: new Date(),
+        name: 'Software',
+        category_id: '1'
+    },
+    {
+        id: '2',
+        created_at: new Date(),
+        updated_at: new Date(),
+        name: 'Free Food',
+        category_id: '2'
+    },
+    {
+        id: '3',
+        created_at: new Date(),
+        updated_at: new Date(),
+        name: 'Panel Discussion',
+        category_id: '3'
+    },
+    {
+        id: '4',
+        created_at: new Date(),
+        updated_at: new Date(),
+        name: 'Seminar',
+        category_id: '4'
+    },
+    {
+        id: '5',
+        created_at: new Date(),
+        updated_at: new Date(),
+        name: 'Hackathon',
+        category_id: '5'
+    }
+];
+
+const date = new Date();
+date.setHours(date.getHours() + 1);
 
 const HomePage = () => {
     return (
-        <View style={styles.container}>
-            <Text style={styles.title}>Hello</Text>
-            <RecruitmentInfo
-                recruitmentText="Fill out our application"
-                recruitingType="unrestricted"
-                isRecruiting={true}
-                recruitmentCycle="always"
-                color="aqua"
-            />
-        </View>
+        <GlobalLayout>
+            <SafeAreaView style={styles.container}>
+                <Text style={styles.title}>Home</Text>
+                <ScrollView showsVerticalScrollIndicator={false}>
+                    <EventCard
+                        event="Spring Showcase"
+                        variant="small"
+                        tags={tags}
+                        club="Generate Product Development Studio"
+                        startTime={new Date()}
+                        endTime={new Date()}
+                        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"
+                    />
+                    <EventCard
+                        event="Spring Showcase"
+                        variant="big"
+                        tags={tags}
+                        club="Generate Product Development Studio"
+                        startTime={new Date()}
+                        endTime={new Date()}
+                        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"
+                    />
+                    <EventCard
+                        event="Spring Showcase"
+                        variant="club"
+                        tags={tags}
+                        club="Generate"
+                        startTime={new Date()}
+                        endTime={new Date()}
+                        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"
+                    />
+                    <EventCard
+                        event="Spring Showcase"
+                        variant="calendar"
+                        tags={tags}
+                        club="Generate"
+                        startTime={new Date()}
+                        endTime={date}
+                        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"
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </GlobalLayout>
     );
 };
 

diff --git a/frontend/mobile/app/(app)/(tabs)/profile.tsx b/frontend/mobile/app/(app)/(tabs)/profile.tsx
@@ -1,10 +1,14 @@
 import { StyleSheet, Text, View } from 'react-native';
 
+import { GlobalLayout } from '@/app/(design-system)/components/GlobalLayout/GlobalLayout';
+
 const ProfilePage = () => {
     return (
-        <View style={styles.container}>
-            <Text style={styles.title}>Profile</Text>
-        </View>
+        <GlobalLayout>
+            <View style={styles.container}>
+                <Text style={styles.title}>Profile</Text>
+            </View>
+        </GlobalLayout>
     );
 };
 

diff --git a/frontend/mobile/app/(app)/_layout.tsx b/frontend/mobile/app/(app)/_layout.tsx
@@ -5,7 +5,12 @@ import { Stack } from 'expo-router';
 const Layout = () => {
     return (
         <Stack>
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen
+                name="(tabs)"
+                options={{
+                    headerShown: false
+                }}
+            />
         </Stack>
     );
 };

diff --git a/frontend/mobile/app/(design-system)/components/Button/Button.tsx b/frontend/mobile/app/(design-system)/components/Button/Button.tsx
@@ -20,6 +20,7 @@ interface BaseButtonProps {
     disabled?: boolean;
     children?: React.ReactNode;
     color?: SACColors;
+    outline?: boolean;
 }
 
 interface StandardButtonProps {
@@ -49,15 +50,16 @@ const StandardButton: React.FC<
     disabled = false,
     color = defaultColor,
     size = 'full',
+    outline = false,
     ...rest
 }) => {
+    const localStyles = computeButtonStyles({ disabled, color, size, outline });
+
     return (
         <BaseButton
-            backgroundColor={disabled ? 'gray' : color}
-            disabled={disabled}
+            disabled={disabled || !onPress}
             onPress={disabled ? undefined : onPress}
-            {...styles.standardButton}
-            {...buttonSizeStyles[size]}
+            {...localStyles}
             {...rest}
         >
             <Text color={textColorVariants[color]}>{children}</Text>
@@ -77,18 +79,18 @@ const IconButton: React.FC<
     iconPosition = 'left',
     justify = 'center',
     size = 'full',
+    outline = false,
     ...rest
 }) => {
     const buttonIcon = <Icon size={size} icon={icon} color={iconColor} />;
+    const localStyles = computeButtonStyles({ disabled, color, size, outline });
 
     return (
         <BaseButton
-            backgroundColor={disabled ? 'gray' : color}
             justifyContent={justify}
-            disabled={disabled}
+            disabled={disabled || !onPress}
             onPress={disabled ? undefined : onPress}
-            {...styles.iconButton}
-            {...buttonSizeStyles[size]}
+            {...localStyles}
             {...rest}
         >
             {iconPosition === 'left' && buttonIcon}
@@ -108,34 +110,56 @@ export const Button: React.FC<ButtonProps> = (props) => {
     return null;
 };
 
+const computeButtonStyles = (props: Partial<ButtonProps>) => {
+    let buttonStyles = {
+        ...styles.base,
+        ...buttonSizeStyles[props.size ?? 'full'],
+        backgroundColor: props.disabled ? 'gray' : props.color
+    };
+    if (props.outline) {
+        buttonStyles = { ...buttonStyles, ...styles.buttonOutline };
+    }
+    if (props.variant === 'iconButton') {
+        buttonStyles = { ...buttonStyles, ...styles.iconButton };
+    }
+
+    return buttonStyles;
+};
+
 const styles = createStyles({
-    standardButton: {
+    base: {
         alignItems: 'center',
         justifyContent: 'center',
         paddingHorizontal: 'l',
         paddingVertical: 'm',
-        borderRadius: 'base'
+        borderRadius: 'md'
     },
     iconButton: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 'l',
-        paddingVertical: 'm',
-        borderRadius: 'base',
         flexDirection: 'row',
         gap: 's'
+    },
+    buttonOutline: {
+        borderColor: 'darkGray',
+        borderWidth: 0.3
     }
 });
 
 const buttonSizeStyles = createStyles({
-    small: {
+    xs: {
+        paddingHorizontal: 's',
+        paddingVertical: 'xxs'
+    },
+    sm: {
         minWidth: 80,
         paddingVertical: 'xs',
         paddingHorizontal: 'm'
     },
-    medium: {
+    md: {
         minWidth: 115
     },
+    lg: {
+        minWidth: 150
+    },
     full: {
         minWidth: '100%'
     }