refactor and reorganize code

GenerateNU · May 30, 2024 · 94ed83b · 94ed83b
1 parent d8af1be
commit 94ed83b
Show file tree

Hide file tree

Showing 9 changed files with 447 additions and 287 deletions.
diff --git a/frontend/mobile/app/(app)/(tabs)/index.tsx b/frontend/mobile/app/(app)/(tabs)/index.tsx
@@ -3,7 +3,8 @@ import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
 import { Tag } from '@generatesac/lib';
 
 import { Box } from '@/app/(design-system)';
-import { EventCard } from '@/components/event-card';
+
+import { EventCard } from '../components/event-card';
 
 const tags: Tag[] = [
     {

diff --git a/frontend/mobile/app/(app)/components/event-card/event-card-big.tsx b/frontend/mobile/app/(app)/components/event-card/event-card-big.tsx
@@ -0,0 +1,72 @@
+// EventCardBig.tsx
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import { Image } from '@rneui/base';
+
+import { Box, Text } from '@/app/(design-system)';
+import { calculateDuration, createOptions, eventTime } from '@/utils/time';
+
+interface EventCardBigProps {
+    event: string;
+    club: string;
+    startTime: Date;
+    endTime: Date;
+    image: string;
+}
+
+export const EventCardBig: React.FC<EventCardBigProps> = ({
+    event,
+    club,
+    startTime,
+    endTime,
+    image
+}) => {
+    return (
+        <Box margin="xl">
+            <TouchableOpacity>
+                <Box gap="xs">
+                    <Image
+                        containerStyle={styles.image}
+                        source={{ uri: image }}
+                    />
+                    <Box
+                        flexDirection="row"
+                        justifyContent="space-between"
+                        width="100%"
+                    >
+                        <Text variant="subheader-2">{event}</Text>
+                        <Text />
+                        <Text>{calculateDuration(startTime, endTime)}</Text>
+                    </Box>
+                    <Text color="darkGray">{club}</Text>
+                    <Box flexDirection="row" gap="xs">
+                        <Text color="darkGray">
+                            {eventTime(
+                                startTime,
+                                endTime,
+                                createOptions('dayOfWeek', 'monthAndDate')
+                            )}
+                        </Text>
+                        <Text fontWeight="400" color="black">
+                            {eventTime(
+                                startTime,
+                                endTime,
+                                createOptions('start')
+                            )}
+                        </Text>
+                    </Box>
+                </Box>
+            </TouchableOpacity>
+        </Box>
+    );
+};
+
+const styles = StyleSheet.create({
+    image: {
+        aspectRatio: 1,
+        width: '100%',
+        borderRadius: 15
+    }
+});
diff --git a/frontend/mobile/app/(app)/components/event-card/event-card-calendar.tsx b/frontend/mobile/app/(app)/components/event-card/event-card-calendar.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import { Tag } from '@generatesac/lib';
+import { Avatar, Image } from '@rneui/base';
+
+import { Box, Text } from '@/app/(design-system)';
+import { createOptions, eventTime, happeningNow } from '@/utils/time';
+
+import { EventTags } from './event-tag';
+
+interface EventCardCalendarProps {
+    event: string;
+    club: string;
+    startTime: Date;
+    endTime: Date;
+    image: string;
+    logo: string;
+    tags?: Tag[];
+}
+
+export const EventCardCalendar: React.FC<EventCardCalendarProps> = ({
+    event,
+    club,
+    startTime,
+    endTime,
+    image,
+    logo,
+    tags
+}) => {
+    const isHappening = happeningNow(startTime, endTime);
+
+    return (
+        <Box margin="xl">
+            <TouchableOpacity>
+                {isHappening && (
+                    <Box
+                        zIndex={1}
+                        marginRight="xl"
+                        top={16}
+                        flexDirection="row"
+                        flex={1}
+                        justifyContent="flex-end"
+                    >
+                        <Box
+                            width={60}
+                            height={30}
+                            flexDirection="column"
+                            justifyContent="center"
+                            alignItems="center"
+                            borderRadius={4}
+                            backgroundColor="darkRed"
+                            shadowColor="black"
+                            shadowOffset={{ width: 0, height: 1 }}
+                            shadowOpacity={0.3}
+                            shadowRadius={2}
+                        >
+                            <Text color="white" variant="body-1">
+                                NOW
+                            </Text>
+                        </Box>
+                    </Box>
+                )}
+                <Box
+                    shadowColor="black"
+                    shadowOffset={{ width: 0, height: 1 }}
+                    shadowOpacity={0.1}
+                    shadowRadius={2}
+                >
+                    <Box width="100%" borderRadius={12} />
+                    <Box
+                        width="100%"
+                        borderRadius={12}
+                        padding="m"
+                        backgroundColor="white"
+                        flexDirection="row"
+                        justifyContent="space-between"
+                        gap="s"
+                    >
+                        <Image
+                            containerStyle={styles.calendarImage}
+                            source={{ uri: image }}
+                        />
+                        <Box flex={2.5} flexDirection="column" gap="xxs">
+                            <Text variant="body-1">{event}</Text>
+                            <Box
+                                flexDirection="row"
+                                alignItems="center"
+                                gap="xxs"
+                                flexWrap="wrap"
+                            >
+                                <Text
+                                    variant="caption-1"
+                                    color="darkGray"
+                                >{`${eventTime(
+                                    startTime,
+                                    endTime,
+                                    createOptions('start', 'end')
+                                )} •`}</Text>
+                                <Box
+                                    flexDirection="row"
+                                    alignItems="center"
+                                    gap="xxs"
+                                >
+                                    <Avatar
+                                        size={15}
+                                        rounded
+                                        source={{ uri: logo }}
+                                    />
+                                    <Text color="darkGray" variant="caption-1">
+                                        {club}
+                                    </Text>
+                                </Box>
+                            </Box>
+                            {tags && <EventTags tags={tags} variant="plus" />}
+                        </Box>
+                    </Box>
+                </Box>
+            </TouchableOpacity>
+        </Box>
+    );
+};
+
+const styles = StyleSheet.create({
+    calendarImage: {
+        flex: 1,
+        borderRadius: 12
+    }
+});
diff --git a/frontend/mobile/app/(app)/components/event-card/event-card-club.tsx b/frontend/mobile/app/(app)/components/event-card/event-card-club.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import { Tag } from '@generatesac/lib';
+import { Avatar, Image } from '@rneui/base';
+
+import { Box, Text } from '@/app/(design-system)';
+import { createOptions, eventTime } from '@/utils/time';
+
+import { EventTags } from './event-tag';
+
+interface EventCardClubProps {
+    event: string;
+    club: string;
+    startTime: Date;
+    endTime: Date;
+    image: string;
+    logo: string;
+    tags?: Tag[];
+}
+
+export const EventCardClub: React.FC<EventCardClubProps> = ({
+    event,
+    club,
+    startTime,
+    endTime,
+    image,
+    logo,
+    tags
+}) => {
+    return (
+        <Box margin="xl">
+            <TouchableOpacity>
+                <Box
+                    shadowColor="black"
+                    shadowOffset={{ width: 0, height: 1 }}
+                    shadowOpacity={0.1}
+                    shadowRadius={2}
+                >
+                    <Box
+                        width="100%"
+                        borderRadius={8}
+                        padding="m"
+                        backgroundColor="white"
+                        flexDirection="row"
+                        justifyContent="space-between"
+                        gap="s"
+                    >
+                        <Image
+                            containerStyle={styles.clubImage}
+                            source={{ uri: image }}
+                        />
+                        <Box flex={3} flexDirection="column" gap="xxs">
+                            <Text color="darkGray" variant="caption-1">
+                                {eventTime(
+                                    startTime,
+                                    endTime,
+                                    createOptions(
+                                        'monthAndDate',
+                                        'year',
+                                        'start',
+                                        'end'
+                                    )
+                                )}
+                            </Text>
+                            <Text variant="body-1">{event}</Text>
+                            <Box
+                                flexDirection="row"
+                                alignItems="center"
+                                gap="xxs"
+                            >
+                                <Text color="darkGray" variant="caption-1">
+                                    Hosted by {club}
+                                </Text>
+                                <Avatar
+                                    size={15}
+                                    rounded
+                                    source={{ uri: logo }}
+                                />
+                            </Box>
+                            {tags && (
+                                <EventTags tags={tags} variant="limited" />
+                            )}
+                        </Box>
+                    </Box>
+                </Box>
+            </TouchableOpacity>
+        </Box>
+    );
+};
+
+const styles = StyleSheet.create({
+    clubImage: {
+        flex: 1.15,
+        borderRadius: 8,
+        aspectRatio: 1
+    }
+});
diff --git a/frontend/mobile/app/(app)/components/event-card/event-card-small.tsx b/frontend/mobile/app/(app)/components/event-card/event-card-small.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import { Image } from '@rneui/base';
+
+import { Box, Text } from '@/app/(design-system)';
+import { createOptions, eventTime } from '@/utils/time';
+
+interface EventCardSmallProps {
+    event: string;
+    club: string;
+    startTime: Date;
+    endTime: Date;
+    image: string;
+}
+
+export const EventCardSmall: React.FC<EventCardSmallProps> = ({
+    event,
+    club,
+    startTime,
+    endTime,
+    image
+}) => {
+    const screenWidth = Dimensions.get('window').width;
+    const boxWidth = screenWidth * 0.4;
+
+    return (
+        <Box width={boxWidth}>
+            <TouchableOpacity>
+                <Box flexDirection="column" gap="xs">
+                    <Image
+                        containerStyle={styles.image}
+                        source={{ uri: image }}
+                    />
+                    <Text fontWeight="500">{event}</Text>
+                    <Text variant="caption-1" color="darkGray">
+                        {eventTime(
+                            startTime,
+                            endTime,
+                            createOptions('dayOfWeek', 'monthAndDate')
+                        )}
+                    </Text>
+                    <Text variant="caption-1" color="darkGray">
+                        {club}
+                    </Text>
+                </Box>
+            </TouchableOpacity>
+        </Box>
+    );
+};
+
+const styles = StyleSheet.create({
+    image: {
+        aspectRatio: 1,
+        width: '100%',
+        borderRadius: 15
+    }
+});