styling

GenerateNU · Apr 18, 2024 · 2640852 · 2640852
1 parent acd82e8
commit 2640852
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 69 deletions.
diff --git a/frontend/components/PopularUser.tsx b/frontend/components/PopularUser.tsx
@@ -1,5 +1,4 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
 import React from 'react';
 import {Image, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
 import { Leader } from '../types/types';

diff --git a/frontend/components/ProfilePerformance.tsx b/frontend/components/ProfilePerformance.tsx
@@ -1,5 +1,5 @@
-import { View, Text, Pressable } from 'react-native'
-import React from 'react'
+import { View, Text, Pressable } from 'react-native';
+import React from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { ProfileNavigationProp } from '../types/navigationTypes';
 import { useSession } from '@clerk/clerk-expo';
@@ -10,15 +10,16 @@ interface ProfilePerformanceProps {
   user: User;
 }
 
-const ProfilePerformance = (
-  { portfolioValue }: ProfilePerformanceProps,
-  { user }: ProfilePerformanceProps,
-) => {
+const ProfilePerformance = ({
+  portfolioValue,
+  user,
+}: ProfilePerformanceProps) => {
   const { session } = useSession();
   const navigator = useNavigation<ProfileNavigationProp>();
   const handleCopyTrades = () => {
     navigator.navigate('CopyTrades', { user: user });
   };
+  console.log(user);
 
   return (
     <View className="flex flex-col justify-between space-y-1 py-3 px-6 border-b-[1px] border-b-gray-200">
@@ -28,15 +29,15 @@ const ProfilePerformance = (
           className={`text-2xl ${portfolioValue >= 0 ? 'text-[#02AD98]' : 'text-[#FF2B51]'}`}>
           {portfolioValue} %
         </Text>
-      {session?.user.username === user?.username ? null : (
-        <Pressable onPress={handleCopyTrades}>
-          <Text>Copy Trades</Text>
-        </Pressable>
-      )}
+        {session?.user.username !== user?.username ? (
+          <Pressable onPress={handleCopyTrades}>
+            <Text>Copy Trades</Text>
+          </Pressable>
+        ) : null}
       </View>
       <Text>YTD Performance</Text>
     </View>
   );
 };
 
-export default ProfilePerformance
+export default ProfilePerformance;
diff --git a/frontend/pages/Copy/CopyTradesPage.tsx b/frontend/pages/Copy/CopyTradesPage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
   View,
   Text,
@@ -9,15 +9,15 @@ import {
   Alert,
   Image,
 } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { useSession } from '@clerk/clerk-expo';
 import {
   ProfileNavigationProp,
   AuthNavigationProp,
 } from '../../types/navigationTypes';
-import { User } from '../../types/types';
-import { getUserById } from '../../services/users';
-import { copyTrades } from '../../services/copy';
+import { CopyRouteParams } from '../../types/types';
+// import { User } from '../../types/types';
+// import { copyTrades } from '../../services/copy';
 
 function CopyTradesPage() {
   const { session } = useSession();
@@ -28,20 +28,17 @@ function CopyTradesPage() {
   const [stopLossAmount, setStopLossAmount] = useState('500');
   const [tradeAuthorizationRequired, setTradeAuthorizationRequired] =
     useState(false);
-  const [user, setUser] = useState<User | null>(null);
+  const route = useRoute();
+  const user = (route.params as CopyRouteParams)?.user;
 
   const handleSubmit = async () => {
-    if (!user) {
-      Alert.alert('Error', "User doesn't exist");
-      return;
-    }
     if (!session?.user.id) {
       authNavigation.navigate('Login');
       return;
     }
 
     try {
-      await copyTrades(session?.user.id as string, user.username);
+      // await copyTrades(session?.user.id as string, user.username);
     } catch (error) {
       Alert.alert('Error', 'Failed to copy trades');
       return;
@@ -51,24 +48,13 @@ function CopyTradesPage() {
     navigation.navigate('Profile');
   };
 
-  useEffect(() => {
-    const fetchUser = async () => {
-      try {
-        const user = await getUserById('');
-        setUser(user);
-      } catch (error) {
-        console.error('Error fetching user:', error);
-      }
-    };
-
-    fetchUser();
-  }, []);
-
   return (
     <View style={styles.container}>
       <View style={styles.formWrapper}>
         <View style={styles.header}>
-          <Text style={styles.username}>@kevinkevindaliri</Text>
+          <Text style={styles.username}>
+            @{user?.username || 'kevinkevindaliri'}
+          </Text>
           <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
             <Text style={styles.closeButton}>×</Text>
           </TouchableOpacity>

diff --git a/frontend/pages/Profile.tsx b/frontend/pages/Profile.tsx
@@ -1,6 +1,6 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
 import React, { useEffect, useState } from 'react';
-import { FlatList, Pressable, ScrollView, View } from 'react-native';
+import { FlatList, Pressable, ScrollView, Text, View } from 'react-native';
 import { useSession } from '@clerk/clerk-expo';
 import ProfileBanner from '../components/ProfileBanner';
 import SubTabButton from '../components/SubTabButton';
@@ -64,49 +64,63 @@ const Profile = () => {
   }, []);
 
   return (
-    <ScrollView className='bg-white'>
-      <View className='flex flex-col space-y-2'>
-        <ProfileBanner user={user}/>
+    <ScrollView className="bg-white">
+      <View className="flex flex-col space-y-2">
+        <ProfileBanner user={user} />
 
-        <View className='flex flex-row'>
-          <SubTabButton title='Portfolio' selected={pageNumber == 0} onPress={OnPortfolioSelected} />
+        <View className="flex flex-row">
+          <SubTabButton
+            title="Portfolio"
+            selected={pageNumber == 0}
+            onPress={OnPortfolioSelected}
+          />
           {!isFollowerProfile && (
-            <SubTabButton title='Activity' selected={pageNumber == 1} onPress={OnActivitySelected} />
+            <SubTabButton
+              title="Activity"
+              selected={pageNumber == 1}
+              onPress={OnActivitySelected}
+            />
           )}
         </View>
 
         <ScrollView
-          horizontal={true} className='flex flex-row h-screen' pagingEnabled={true}
+          horizontal={true}
+          className="flex flex-row h-screen"
+          pagingEnabled={true}
           showsHorizontalScrollIndicator={true}
-          onMomentumScrollEnd={(event) => {
+          onMomentumScrollEnd={event => {
             const offset = event.nativeEvent.contentOffset.x;
             const page = Math.round(offset / 375);
             console.log(`Page number: ${page}`);
             setPageNumber(page);
-          }}
-        >
-            {pageNumber === 0 && (
-              <View className='flex flex-col w-screen'>
-                <ProfilePerformance portfolioValue={portfolio?.total_gain_pct || 0} user={user} />
-                <ProfilePositions positions={portfolio?.positions}/>
-              </View>
-            )}
-          <View className='flex flex-col w-screen'>
+          }}>
+          {pageNumber === 0 && (
+            <View className="flex flex-col w-screen">
+              <ProfilePerformance
+                portfolioValue={portfolio?.total_gain_pct || 0}
+                user={user}
+              />
+              <ProfilePositions positions={portfolio?.positions} />
+            </View>
+          )}
+          <View className="flex flex-col w-screen">
             {pageNumber == 1 && (
               <FlatList
                 data={ProfileActivityData}
-                keyExtractor={(item) => item.id.toString()}
+                keyExtractor={item => item.id.toString()}
                 renderItem={({ item }) => (
                   <ActivityItem
                     title={item.title}
                     description={item.description}
-                    icon={item.icon} />
-                )} />
+                    icon={item.icon}
+                  />
+                )}
+              />
             )}
           </View>
         </ScrollView>
-
       </View>
+      <Text>{user.username}</Text>
       <SignOut />
     </ScrollView>
   );

diff --git a/frontend/router/BottomNavBar.tsx b/frontend/router/BottomNavBar.tsx
@@ -73,13 +73,4 @@ const BottomNavBar = () => {
   );
 };
 
-
-// const ProfileStack = createStackNavigator();
-// const ProfileStackNavigator = () => (
-//   <ProfileStack.Navigator initialRouteName="Profile">
-//     <ProfileStack.Screen name="Profile" component={Profile} />
-//     <ProfileStack.Screen name="CopyTrades" component={CopyTradesPage} />
-//   </ProfileStack.Navigator>
-// );
-
 export default BottomNavBar;
diff --git a/frontend/types/types.d.ts b/frontend/types/types.d.ts
@@ -72,6 +72,10 @@ export interface ProfileRouteParams {
   user: User;
 }
 
+export interface CopyRouteParams {
+  user: User;
+}
+
 export interface FollowerRouteParams {
   users: User[],
   label: string