feat: profile pages (#1023)

Co-authored-by: Alder Whiteford <alderwhiteford@Alders-MacBook-Pro-2.local>
GenerateNU · Jun 15, 2024 · 91a5dfb · 91a5dfb
1 parent f7c6e7c
commit 91a5dfb
Show file tree

Hide file tree

Showing 49 changed files with 2,433 additions and 1,393 deletions.
diff --git a/frontend/dashboard/yarn.lock b/frontend/dashboard/yarn.lock
diff --git a/frontend/lib/package.json b/frontend/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@generatesac/lib",
-  "version": "0.0.169",
+  "version": "0.0.170",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/frontend/lib/src/types/category.ts b/frontend/lib/src/types/category.ts
@@ -1,7 +1,6 @@
 import { z } from "zod";
 
 import { rootModelSchema } from "./root";
-import { tagSchema } from "./tag";
 
 // Schemas:
 export const createCategoryRequestBodySchema = z.object({
@@ -10,7 +9,6 @@ export const createCategoryRequestBodySchema = z.object({
 
 export const categorySchemaIntermediate = z.object({
   name: z.string(),
-  tags: z.array(tagSchema),
 });
 
 export const categorySchema = categorySchemaIntermediate.merge(rootModelSchema);

diff --git a/frontend/mobile/package.json b/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.169",
+        "@generatesac/lib": "0.0.170",
         "@gorhom/bottom-sheet": "^4.6.3",
         "@hookform/resolvers": "^3.4.2",
         "@react-native-async-storage/async-storage": "^1.23.1",
@@ -37,6 +37,8 @@
         "@shopify/restyle": "^2.4.4",
         "@stream-io/flat-list-mvcp": "^0.10.3",
         "@svgr/core": "^8.1.0",
+        "@tanstack/react-query": "^5.44.0",
+        "axios": "^1.7.2",
         "expo": "~51.0.2",
         "expo-dev-client": "~4.0.14",
         "expo-font": "~12.0.5",

diff --git a/frontend/mobile/src/app/(app)/(tabs)/_layout.tsx b/frontend/mobile/src/app/(app)/(tabs)/_layout.tsx
@@ -74,7 +74,8 @@ const Layout = () => {
                 name="profile"
                 options={{
                     title: 'Profile',
-                    headerShown: false,
+                    headerShown: true,
+                    headerTransparent: true,
                     tabBarLabel: ({ focused }) =>
                         TabBarLabel({ focused, title: 'Profile' }),
                     tabBarIcon: ({ focused }) =>

diff --git a/frontend/mobile/src/app/(app)/(tabs)/profile.tsx b/frontend/mobile/src/app/(app)/(tabs)/profile.tsx
@@ -1,31 +1,110 @@
-import { StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { router } from 'expo-router';
+
+import {
+    IconDefinition,
+    faHeart,
+    faSignOutAlt,
+    faUser
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { Avatar } from '@rneui/base';
 
 import { GlobalLayout } from '@/src/app/(design-system)/components/GlobalLayout/GlobalLayout';
 
+import { Box, Colors, SACColors, Spacing, Text } from '../../(design-system)';
+
+type ProfileItemProps = {
+    icon: IconDefinition;
+    text: string;
+    textColor?: SACColors;
+    onPress?: () => void;
+};
+
+const ProfileItem = ({ icon, text, textColor, onPress }: ProfileItemProps) => (
+    <TouchableOpacity onPress={onPress}>
+        <Box
+            gap="l"
+            paddingVertical="s"
+            flexDirection="row"
+            alignItems="center"
+        >
+            <FontAwesomeIcon
+                size={24}
+                color={textColor ? Colors.darkRed : Colors.gray}
+                icon={icon}
+            />
+            <Text color={textColor}>{text}</Text>
+        </Box>
+    </TouchableOpacity>
+);
+
 const ProfilePage = () => {
     return (
         <GlobalLayout>
-            <View style={styles.container}>
-                <Text style={styles.title}>Profile</Text>
-            </View>
+            <SafeAreaView style={styles.container}>
+                <Box
+                    paddingTop="xxl"
+                    flexDirection="row"
+                    gap="m"
+                    alignItems="center"
+                >
+                    <Avatar
+                        source={{
+                            uri: 'https://media1.popsugar-assets.com/files/thumbor/S6_lryTon-0orhMkLrw6m1yIFww=/1500x1500/filters:format_auto():quality(85):extract_cover()/2017/02/28/003/n/1922441/ace7eba458b602264e7940.39836479_edit_img_image_43244124_1488304081.jpg'
+                        }}
+                        size={60}
+                        rounded
+                    />
+                    <Box flexDirection="column" gap="xxs">
+                        <Text variant="subheader-2">Quokka</Text>
+                        <Text>quokka@northeastern.edu</Text>
+                    </Box>
+                </Box>
+                <Box width="100%">
+                    <ProfileItem
+                        onPress={() => router.push('/user/detail/')}
+                        icon={faUser}
+                        text="Edit Profile"
+                    />
+                    <ProfileItem
+                        icon={faHeart}
+                        onPress={() => router.push('/user/interest/')}
+                        text="Edit Interests"
+                    />
+                    <Box
+                        width="100%"
+                        height={1}
+                        backgroundColor="gray"
+                        marginVertical="s"
+                    />
+                    <ProfileItem
+                        icon={faSignOutAlt}
+                        text="Logout"
+                        textColor="darkRed"
+                    />
+                </Box>
+            </SafeAreaView>
         </GlobalLayout>
     );
 };
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center'
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        marginVertical: Spacing.m,
+        gap: Spacing.l
     },
     title: {
         fontSize: 20,
-        fontWeight: 'bold'
-    },
-    separator: {
-        marginVertical: 30,
-        height: 1,
-        width: '80%'
+        fontWeight: 'bold',
+        marginBottom: 20
     }
 });
 

diff --git a/frontend/mobile/src/app/(app)/_layout.tsx b/frontend/mobile/src/app/(app)/_layout.tsx
@@ -17,6 +17,14 @@ const Layout = () => {
                     }
                 }}
             />
+            <Stack.Screen
+                name="user"
+                options={{
+                    headerTitle: 'Profile',
+                    headerTransparent: true,
+                    headerShown: false
+                }}
+            />
         </Stack>
     );
 };

diff --git a/frontend/mobile/src/app/(app)/event/[id].tsx b/frontend/mobile/src/app/(app)/event/[id].tsx
@@ -181,10 +181,8 @@ const EventPage = () => {
                                             eventName={event.name}
                                             color={MockEvent.color}
                                             club={club?.name}
-                                            startTime={
-                                                new Date(event.start_time)
-                                            }
-                                            endTime={new Date(event.end_time)}
+                                            startTime={event.start_time}
+                                            endTime={event.end_time}
                                             location={
                                                 event.location ||
                                                 'ISEC, Room 204'
@@ -224,8 +222,8 @@ const EventPage = () => {
             </Animated.ScrollView>
             <ShareEventBottomSheet ref={shareEvent} link={MockEvent.link} />
             <RegisterBottomSheet
-                startTime={new Date(event?.start_time as string)}
-                endTime={new Date(event?.end_time as string)}
+                startTime={event?.start_time as string}
+                endTime={event?.end_time as string}
                 eventDetail={event?.description as string}
                 eventName={event?.name as string}
                 location={event?.location as string}

diff --git a/frontend/mobile/src/app/(app)/event/components/overview.tsx b/frontend/mobile/src/app/(app)/event/components/overview.tsx
@@ -16,8 +16,8 @@ interface OverviewProps {
     eventName: string;
     club: string;
     clubId: string;
-    startTime: Date;
-    endTime: Date;
+    startTime: string;
+    endTime: string;
     location: string;
     type: EventType;
     color: SACColors;

diff --git a/frontend/mobile/src/app/(app)/event/components/register.tsx b/frontend/mobile/src/app/(app)/event/components/register.tsx
@@ -22,8 +22,8 @@ const SaveEventText = `By saving this event, you are automatically signed up for
 
 interface RegisterSheetProps {
     eventType: EventType;
-    startTime: Date;
-    endTime: Date;
+    startTime: string;
+    endTime: string;
     location: string;
     eventName: string;
     eventDetail: string;
@@ -55,6 +55,8 @@ const RegisterBottomSheet = forwardRef<Ref, RegisterSheetProps>(
             endTime: endTime
         };
 
+        console.log(createGoogleCalendarLink(CALENDAR_INFO));
+
         return (
             <BottomSheet
                 ref={ref}

diff --git a/frontend/mobile/src/app/(app)/event/components/upcoming-events.tsx b/frontend/mobile/src/app/(app)/event/components/upcoming-events.tsx
@@ -17,6 +17,7 @@ export const UpcomingEvent: React.FC<UpcomingEventsProps> = ({ events }) => {
         return (
             <Pressable onPress={() => router.push(`/event/${item.id}`)}>
                 <EventCard
+                    clubId={'1'}
                     variant="small"
                     event={item.name}
                     club={item.host}

diff --git a/frontend/mobile/src/app/(app)/user/_layout.tsx b/frontend/mobile/src/app/(app)/user/_layout.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Stack } from 'expo-router';
+
+const Layout = () => {
+    return (
+        <Stack>
+            <Stack.Screen name="interest" options={{ headerShown: false }} />
+            <Stack.Screen
+                name="detail"
+                options={{
+                    headerShown: false
+                }}
+            />
+        </Stack>
+    );
+};
+
+export default Layout;
diff --git a/frontend/mobile/src/app/(app)/user/components/save.tsx b/frontend/mobile/src/app/(app)/user/components/save.tsx
@@ -0,0 +1,16 @@
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import { Text } from '@/src/app/(design-system)';
+
+interface SaveProps {
+    onPress: () => void;
+    isValid: boolean;
+}
+
+export const Save: React.FC<SaveProps> = ({ onPress, isValid }) => {
+    return (
+        <TouchableOpacity disabled={!isValid} onPress={onPress}>
+            <Text color={isValid ? 'black' : 'darkGray'}>Save</Text>
+        </TouchableOpacity>
+    );
+};