Leaderboard navi changes - now navigates! (#52)

* working step 1 * getting navigation set up in leaderboard * linting yay * Update frontend/components/PopularUser.tsx Co-authored-by: Ania Misiorek <[email protected]> --------- Co-authored-by: Ania Misiorek <[email protected]>
GenerateNU · Apr 18, 2024 · 9f62fc3 · 9f62fc3
1 parent 586bd1d
commit 9f62fc3
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 25 deletions.
diff --git a/frontend/components/PopularUser.tsx b/frontend/components/PopularUser.tsx
@@ -1,18 +1,27 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import React from 'react';
-import {Image, StyleSheet, Text, View} from 'react-native';
+import {Image, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
 import { Leader } from '../types/types';
 import { Ionicons } from '@expo/vector-icons';
+import { useNavigation } from '@react-navigation/native';
+import { OutsideProfileNavProp } from '../types/navigationTypes';
 
 type PopularUserProps = {
 leader: Leader;
 index: number
 }
 
 const PopularUser: React.FC<PopularUserProps> = ({ leader, index }: PopularUserProps) => {
+    const navigation = useNavigation<OutsideProfileNavProp>();
+    const handlePress = () => {
+        navigation.navigate('Profile', 
+        {screen: "FollowerProfile", params: { user: leader.leader_user}
+        });
+    };
+
     return (
-        <View style={styles.container}>
+        <TouchableOpacity style={styles.container} onPress={handlePress}>
             {/* Column for image */}
             <Text style={styles.rank}>{index + 1}</Text>
             <View style={[styles.column, styles.imageColumn]}>
@@ -43,7 +52,7 @@ const PopularUser: React.FC<PopularUserProps> = ({ leader, index }: PopularUserP
                    {leader.follower_count}
                 </Text>
             </View>
-        </View>
+        </TouchableOpacity>
     );
 };
 

diff --git a/frontend/components/ProfileBanner.tsx b/frontend/components/ProfileBanner.tsx
@@ -92,6 +92,7 @@ const ProfileBanner = ({ user }: ProfileBannerProps) => {
 
       <ProfileBio
         fullName={`${user.first_name || session?.user.firstName} ${user.last_name || session?.user.lastName}`}
+        username={`${user.username || session?.user.username}`}
         description="profile description? Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent vel nisi sed diam ultricies viverra sit amet nec dolor...."
       />
     </View>

diff --git a/frontend/components/ProfileBio.tsx b/frontend/components/ProfileBio.tsx
@@ -1,18 +1,27 @@
-import { View, Text } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
 import React from 'react'
 
 interface ProfileBioProps {
   fullName: string
+  username: string
   description: string
 }
 
-const ProfileBio = ({ fullName, description }: ProfileBioProps) => {
+const ProfileBio = ({ fullName, username, description }: ProfileBioProps) => {
   return (
     <View className='flex flex-col space-y-1 w-96'>
       <Text className='text-base font-bold'>{fullName}</Text>
+      {username != "" && <Text style={styles.username}>@{username}</Text> }
       <Text>{description}</Text>
     </View>
   )
 }
 
+const styles = StyleSheet.create({
+  username: {
+    color: "#02AD98",
+    marginBottom: 10,
+  }
+})
+
 export default ProfileBio
diff --git a/frontend/reducers/onboarding/onboardingReducer.ts b/frontend/reducers/onboarding/onboardingReducer.ts
@@ -13,7 +13,7 @@ const onboardingSlice = createSlice({
     financialGoalsShortTerm: [],
     financialGoalsLongTerm: [],
     financialLiteracy: [],
-    isOnboarding: 'onboarding', // 'onboarding', 'normal', 'makingPost'
+    isOnboarding: 'normal', // 'onboarding', 'normal', 'makingPost'
   },
   reducers: {
     updateFirstName(state, action) {

diff --git a/frontend/types/navigationTypes.ts b/frontend/types/navigationTypes.ts
@@ -16,20 +16,27 @@ export type RootStackParamList = {
   Confirmation: undefined;
   LongTermGoals: undefined;
   ShortTermGoals: undefined;
-  Profile: undefined;
+  Profile: undefined | { screen: "FollowerProfile"; params: { user: User } };
   ProfilePage: undefined;
   FollowerProfile: { user: User }
   Followers: { label: string, users: User[] };
+};
 
-  // AuthPage: undefined;
-  // TutorialPage: undefined;
-  // MainApp: undefined;
+export type ProfileOtherStack = {
+  Profile: undefined | { screen: "FollowerProfile"; params: { user: User } };
 };
 
+export type OutsideProfileNavProp = StackNavigationProp<ProfileOtherStack>;
+
 export type AuthNavigationProp = StackNavigationProp<
   RootStackParamList
 >;
 
+export type ProfileParamList = {
+  FollowerProfile: { user: User }
+  Followers: { label: string, users: User[] };
+}
+
 export type LevelPageNavigationProp = StackNavigationProp<
   RootStackParamList,
   'LevelPage'

diff --git a/frontend/types/types.d.ts b/frontend/types/types.d.ts
@@ -1,13 +1,9 @@
 export interface User {
-    id: string;
-    first_name: string;
-    last_name: string;
-    username: string;
-    pass_word: string;
-    email: string;
-    risk_tolerance: string;
-    years_of_experience: number;
-    image_url: string;
+  id: string,
+  first_name: string;
+  last_name: string;
+  username: string;
+  image_url: string;
 }
 
 export type FinancialGoal = {
@@ -79,12 +75,6 @@ export interface ProfileRouteParams {
 export interface FollowerRouteParams {
   users: User[],
   label: string
-}export interface User {
-  id: string,
-  first_name: string;
-  last_name: string;
-  username: string;
-  image_url: string;
 }
 
 export type FinancialGoal = {