feat: event page & onboarding flow (#974)

GenerateNU · Jun 9, 2024 · 191d92d · 191d92d
1 parent 79e1013
commit 191d92d
Show file tree

Hide file tree

Showing 53 changed files with 5,543 additions and 1,808 deletions.
diff --git a/frontend/mobile/app/(app)/(tabs)/index.tsx b/frontend/mobile/app/(app)/(tabs)/index.tsx
@@ -1,100 +1,33 @@
-import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
 
-import { Tag } from '@generatesac/lib';
+import { router } from 'expo-router';
 
-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);
+import { Box, Text } from '@/app/(design-system)';
+import { EventCard } from '@/app/(design-system)/components/EventCard';
 
 const HomePage = () => {
+    const item = {
+        name: 'Your Event Name',
+        host: 'Your Club Name',
+        start_time: new Date(),
+        end_time: new Date()
+    };
+
     return (
-        <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>
+        <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}
+                    startTime={item.start_time}
+                    endTime={item.end_time}
+                    image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLF3ord7lnV_5Je-pC2AUgUiesHNPcZlpI7A&s"
+                />
+            </Pressable>
+        </Box>
     );
 };
 
@@ -104,14 +37,9 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center'
     },
-    title: {
-        fontSize: 20,
-        fontWeight: 'bold'
-    },
-    separator: {
-        marginVertical: 30,
-        height: 1,
-        width: '80%'
+    contentContainer: {
+        flex: 1,
+        alignItems: 'center'
     }
 });
 

diff --git a/frontend/mobile/app/(app)/_layout.tsx b/frontend/mobile/app/(app)/_layout.tsx
@@ -5,10 +5,16 @@ import { Stack } from 'expo-router';
 const Layout = () => {
     return (
         <Stack>
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
             <Stack.Screen
-                name="(tabs)"
+                name="event"
                 options={{
-                    headerShown: false
+                    headerTitle: '',
+                    headerTransparent: true,
+                    headerShown: false,
+                    headerTitleStyle: {
+                        color: 'white'
+                    }
                 }}
             />
         </Stack>