From 94ed83ba9446de239b2a9e81b0948f0b3b291e9e Mon Sep 17 00:00:00 2001
From: mai <thisismainguyen@gmail.com>
Date: Thu, 30 May 2024 22:04:53 +0700
Subject: [PATCH] refactor and reorganize code

---
 frontend/mobile/app/(app)/(tabs)/index.tsx    |   3 +-
 .../components/event-card/event-card-big.tsx  |  72 +++++
 .../event-card/event-card-calendar.tsx        | 129 ++++++++
 .../components/event-card/event-card-club.tsx |  98 ++++++
 .../event-card/event-card-small.tsx           |  60 ++++
 .../components/event-card/event-card.tsx      |  85 ++++++
 .../components/event-card}/event-tag.tsx      |   0
 .../app/(app)/components/event-card/index.ts  |   1 +
 frontend/mobile/components/event-card.tsx     | 286 ------------------
 9 files changed, 447 insertions(+), 287 deletions(-)
 create mode 100644 frontend/mobile/app/(app)/components/event-card/event-card-big.tsx
 create mode 100644 frontend/mobile/app/(app)/components/event-card/event-card-calendar.tsx
 create mode 100644 frontend/mobile/app/(app)/components/event-card/event-card-club.tsx
 create mode 100644 frontend/mobile/app/(app)/components/event-card/event-card-small.tsx
 create mode 100644 frontend/mobile/app/(app)/components/event-card/event-card.tsx
 rename frontend/mobile/{components => app/(app)/components/event-card}/event-tag.tsx (100%)
 create mode 100644 frontend/mobile/app/(app)/components/event-card/index.ts
 delete mode 100644 frontend/mobile/components/event-card.tsx

diff --git a/frontend/mobile/app/(app)/(tabs)/index.tsx b/frontend/mobile/app/(app)/(tabs)/index.tsx
index 0749e798..f4322311 100644
--- 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
new file mode 100644
index 00000000..459c6051
--- /dev/null
+++ 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
new file mode 100644
index 00000000..bb38b0e4
--- /dev/null
+++ 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
new file mode 100644
index 00000000..6e42ddec
--- /dev/null
+++ 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
new file mode 100644
index 00000000..26248513
--- /dev/null
+++ 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
+    }
+});
diff --git a/frontend/mobile/app/(app)/components/event-card/event-card.tsx b/frontend/mobile/app/(app)/components/event-card/event-card.tsx
new file mode 100644
index 00000000..4aed020c
--- /dev/null
+++ b/frontend/mobile/app/(app)/components/event-card/event-card.tsx
@@ -0,0 +1,85 @@
+import { Tag } from '@generatesac/lib';
+
+import { EventCardBig } from './event-card-big';
+import { EventCardCalendar } from './event-card-calendar';
+import { EventCardClub } from './event-card-club';
+import { EventCardSmall } from './event-card-small';
+
+interface EventCardProps {
+    event: string;
+    club: string;
+    startTime: Date;
+    endTime: Date;
+    tags?: Tag[];
+    image: string;
+    logo: string;
+    variant: 'big' | 'small' | 'club' | 'calendar';
+}
+
+export const EventCard = ({
+    event,
+    club,
+    startTime,
+    endTime,
+    image,
+    logo,
+    tags,
+    variant
+}: EventCardProps) => {
+    switch (variant) {
+        case 'big':
+            return (
+                <EventCardBig
+                    event={event}
+                    club={club}
+                    startTime={startTime}
+                    endTime={endTime}
+                    image={image}
+                />
+            );
+        case 'small':
+            return (
+                <EventCardSmall
+                    event={event}
+                    club={club}
+                    startTime={startTime}
+                    endTime={endTime}
+                    image={image}
+                />
+            );
+        case 'club':
+            return (
+                <EventCardClub
+                    event={event}
+                    club={club}
+                    startTime={startTime}
+                    endTime={endTime}
+                    image={image}
+                    logo={logo}
+                    tags={tags ? tags : []}
+                />
+            );
+        case 'calendar':
+            return (
+                <EventCardCalendar
+                    event={event}
+                    club={club}
+                    startTime={startTime}
+                    endTime={endTime}
+                    image={image}
+                    logo={logo}
+                    tags={tags ? tags : []}
+                />
+            );
+        default:
+            return (
+                <EventCardBig
+                    event={event}
+                    club={club}
+                    startTime={startTime}
+                    endTime={endTime}
+                    image={image}
+                />
+            );
+    }
+};
diff --git a/frontend/mobile/components/event-tag.tsx b/frontend/mobile/app/(app)/components/event-card/event-tag.tsx
similarity index 100%
rename from frontend/mobile/components/event-tag.tsx
rename to frontend/mobile/app/(app)/components/event-card/event-tag.tsx
diff --git a/frontend/mobile/app/(app)/components/event-card/index.ts b/frontend/mobile/app/(app)/components/event-card/index.ts
new file mode 100644
index 00000000..1c280811
--- /dev/null
+++ b/frontend/mobile/app/(app)/components/event-card/index.ts
@@ -0,0 +1 @@
+export { EventCard } from './event-card';
diff --git a/frontend/mobile/components/event-card.tsx b/frontend/mobile/components/event-card.tsx
deleted file mode 100644
index d20023c5..00000000
--- a/frontend/mobile/components/event-card.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-import { Dimensions } from 'react-native';
-import { StyleSheet } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-
-import { Tag } from '@generatesac/lib';
-import { Image } from '@rneui/base';
-import { Avatar } from '@rneui/base';
-
-import { Box, Text } from '@/app/(design-system)';
-import {
-    calculateDuration,
-    createOptions,
-    eventTime,
-    happeningNow
-} from '@/utils/time';
-
-import { EventTags } from './event-tag';
-
-interface EventCardProps {
-    event: string;
-    club: string;
-    startTime: Date;
-    endTime: Date;
-    tags?: Tag[];
-    image: string;
-    logo: string;
-    variant: 'big' | 'small' | 'club' | 'calendar';
-}
-
-export const EventCard = ({
-    event,
-    club,
-    startTime,
-    endTime,
-    image,
-    logo,
-    tags,
-    variant
-}: EventCardProps) => {
-    const isHappening = happeningNow(startTime, endTime);
-    const screenWidth = Dimensions.get('window').width;
-    const boxWidth = screenWidth * 0.4;
-
-    const bigVariant = () => (
-        <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 smallVariant = () => (
-        <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 clubVariant = () => (
-        <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 calendarVariant = () => (
-        <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 renderVariant = () => {
-        switch (variant) {
-            case 'big':
-                return bigVariant();
-            case 'small':
-                return smallVariant();
-            case 'club':
-                return clubVariant();
-            case 'calendar':
-                return calendarVariant();
-            default:
-                return bigVariant();
-        }
-    };
-
-    return renderVariant();
-};
-
-const styles = StyleSheet.create({
-    image: {
-        aspectRatio: 1,
-        width: '100%',
-        borderRadius: 15
-    },
-    clubImage: {
-        flex: 1.15,
-        borderRadius: 8,
-        aspectRatio: 1
-    },
-    calendarImage: {
-        flex: 1,
-        borderRadius: 12
-    }
-});