From 5bbab20a6206fad8499a3059eda9950b7b4f8af1 Mon Sep 17 00:00:00 2001
From: leoRysing <leshaigor@gmail.com>
Date: Wed, 17 Apr 2024 19:30:01 -0400
Subject: [PATCH] Fixing leaderboard (#48)

* Update tsconfig.json

* leaderboard thing

* pushing changes

* finishing this up

* updating the color

* more linter

* final changes

* final linter stuff hopefully
---
 frontend/components/BottomNavBar.tsx          |  62 ----------
 frontend/components/PopularLeaderboard.tsx    |   8 +-
 frontend/components/PopularTrendingBoard.tsx  |   8 +-
 frontend/components/PopularUser.tsx           |  38 +++---
 frontend/components/TabHeader.tsx             | 110 +++++++++++++++---
 frontend/components/TrendingUser.tsx          |  49 +++++---
 frontend/package.json                         |   1 +
 frontend/pages/Leaderboard.tsx                |  68 ++++++-----
 .../reducers/onboarding/onboardingReducer.ts  |   2 +-
 frontend/router/BottomNavBar.tsx              |  20 ++--
 frontend/tsconfig.json                        |   4 -
 frontend/yarn.lock                            |   5 +
 12 files changed, 221 insertions(+), 154 deletions(-)
 delete mode 100644 frontend/components/BottomNavBar.tsx

diff --git a/frontend/components/BottomNavBar.tsx b/frontend/components/BottomNavBar.tsx
deleted file mode 100644
index d99f778e..00000000
--- a/frontend/components/BottomNavBar.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-
-import Profile from '../pages/Profile';
-import TestPage from '../pages/TestPage';
-import AuthPage from '../pages/AuthPage';
-import { Icon } from '@rneui/themed';
-import { RouteProp } from '@react-navigation/native';
-
-const Tab = createBottomTabNavigator<BottomTabParamList>();
-type TabRouteName =
-  | 'Explore'
-  | 'Leaderboard'
-  | 'Profile'
-
-const tabBarIconMapping: Record<TabRouteName, string> = {
-  "Explore": "feature-search",
-  "Leaderboard": "podium",
-  "Profile": "account-circle",
-}
-
-const screenOptionsIcon = (route: RouteProp<BottomTabParamList, keyof BottomTabParamList>, color: string) => {
-  const iconName = tabBarIconMapping[route.name]
-  return (
-    <Icon type='material-community' name={iconName} size={22} color={color} />
-  )
-}
-
-export type BottomTabParamList = {
-  Leaderboard: undefined
-  Explore: undefined
-  Profile: undefined
-}
-
-const BottomNavBar = () => {
-  /*
-  */
-  return (
-    <Tab.Navigator
-      screenOptions={({ route }) => ({
-        headerShown: false,
-        tabBarHideOnKeyboard: true,
-        tabBarIcon: ({ color }) => 
-          screenOptionsIcon(route, color)
-      })}
-    >
-      <Tab.Screen name="Explore" component={TestPage} options={{
-        headerShown: false,
-        
-      }} />
-      <Tab.Screen name="Leaderboard" component={AuthPage} options={{
-        headerShown: false,
-        title: "Leaderboard"
-      }} />
-      <Tab.Screen name="Profile" component={Profile} options={{
-        headerShown: false,
-      }} />
-    </Tab.Navigator>
-  )
-}
-
-export default BottomNavBar
diff --git a/frontend/components/PopularLeaderboard.tsx b/frontend/components/PopularLeaderboard.tsx
index 93371238..81e4019f 100644
--- a/frontend/components/PopularLeaderboard.tsx
+++ b/frontend/components/PopularLeaderboard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView } from 'react-native';
 import { Leader } from '../types/types';
 import PopularUser from './PopularUser';
 
@@ -16,13 +16,13 @@ const PopularLeaderboard: React.FC<PopularProps> = ({leaderboard}: PopularProps)
             {
                 leaderboard.map((leader, index) => (
                     <React.Fragment key={index}>
-                        <PopularUser leader={leader} />
-                        {index < leaderboard.length - 1 && <Separator />}
+                        <PopularUser leader={leader} index={index} />
+                        {/* {index < leaderboard.length - 1 && <Separator />} */}
                     </React.Fragment>
             ))}
         </ScrollView>
     )
 }
-const Separator = () => <View style={{ height: 15 }} />;
+//const Separator = () => <View style={{ height: 15 }} />;
 
 export default PopularLeaderboard;
\ No newline at end of file
diff --git a/frontend/components/PopularTrendingBoard.tsx b/frontend/components/PopularTrendingBoard.tsx
index dec1d470..fcf42fbf 100644
--- a/frontend/components/PopularTrendingBoard.tsx
+++ b/frontend/components/PopularTrendingBoard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView } from 'react-native';
 import { Trending } from '../types/types';
 import TrendingUser from './TrendingUser';
 
@@ -16,13 +16,13 @@ const PopularTrendingBoard: React.FC<TrendingProps> = ({trendingboard}: Trending
             {
                 trendingboard.map((trending, index) => (
                     <React.Fragment key={index}>
-                        <TrendingUser trending={trending} />
-                        {index < trendingboard.length - 1 && <Separator />}
+                        <TrendingUser trending={trending} index={index}/>
+                        {/* {index < trendingboard.length - 1 && <Separator />} */}
                     </React.Fragment>
             ))}
         </ScrollView>
     )
 }
-const Separator = () => <View style={{ height: 15 }} />;
+//const Separator = () => <View style={{ height: 15 }} />;
 
 export default PopularTrendingBoard;
\ No newline at end of file
diff --git a/frontend/components/PopularUser.tsx b/frontend/components/PopularUser.tsx
index 626f32ab..9491844c 100644
--- a/frontend/components/PopularUser.tsx
+++ b/frontend/components/PopularUser.tsx
@@ -3,15 +3,18 @@
 import React from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
 import { Leader } from '../types/types';
+import { Ionicons } from '@expo/vector-icons';
 
 type PopularUserProps = {
 leader: Leader;
+index: number
 }
 
-const PopularUser: React.FC<PopularUserProps> = ({ leader }: PopularUserProps) => {
+const PopularUser: React.FC<PopularUserProps> = ({ leader, index }: PopularUserProps) => {
     return (
         <View style={styles.container}>
             {/* Column for image */}
+            <Text style={styles.rank}>{index + 1}</Text>
             <View style={[styles.column, styles.imageColumn]}>
                 <View style={styles.imageContainer}>
                     <Image
@@ -26,18 +29,16 @@ const PopularUser: React.FC<PopularUserProps> = ({ leader }: PopularUserProps) =
                     <Text style={styles.nameText}>
                         {leader.leader_user.first_name} {leader.leader_user.last_name}
                     </Text>
-                    <Text style={styles.actionText}>
-                        Recent: Recent actions will display{"\n"} here
-                    </Text>
                 </View>
             </View>
 
 
             <View style={[styles.column, styles.followersColumn]}>
-                <Image
+                {/* <Image
                     source={require("../assets/followers_logo.png")}
                     style={styles.followersLogo}
-                />
+                /> */}
+                <Ionicons name="person-outline" size={18} color="#333333" />
                 <Text style={styles.followersText}>
                    {leader.follower_count}
                 </Text>
@@ -52,6 +53,9 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         alignItems: 'center',
         paddingHorizontal: 10,
+        borderBottomColor: "#adc4ba",
+        borderBottomWidth: 1,
+        paddingVertical: 15,
     },
     column: {
         flex: 1,
@@ -60,12 +64,14 @@ const styles = StyleSheet.create({
         flex: 0.17,
     },
     textColumn: {
-        flex: 0.65,
+        marginRight: 12,
+        justifyContent: "center"
     },
     followersColumn: {
         flex: 0.18,
         flexDirection: 'row', // Check
         justifyContent: 'flex-end', //check
+        alignItems: "center"
     },
     imageContainer: {
         width: 40,
@@ -78,7 +84,7 @@ const styles = StyleSheet.create({
         height: "100%",
     },
     textContainer: {
-        flex: 1,
+        marginLeft: 18
     },
     actionText: {
         fontSize: 8,
@@ -86,17 +92,21 @@ const styles = StyleSheet.create({
     },
     nameText: {
         fontWeight: 'bold',
-        fontSize: 12,
+        fontSize: 18,
         marginBottom: 1,
-        color: '#787878',
+        color: '#333333',
+    },
+    rank: {
+        fontSize: 18,
+        marginRight: 15
     },
     followersText: {
-        alignSelf: 'flex-end',
-        color: '#787878',
+        color: '#333333',
+        fontSize: 18
     },
     followersLogo: {
-        width: 20,
-        height: 20,
+        width: 40,
+        height: 40,
         marginRight: 5,
     }
 });
diff --git a/frontend/components/TabHeader.tsx b/frontend/components/TabHeader.tsx
index f4a9927a..0bb0bfeb 100644
--- a/frontend/components/TabHeader.tsx
+++ b/frontend/components/TabHeader.tsx
@@ -1,38 +1,103 @@
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import SelectDropdown from 'react-native-select-dropdown';
+import { AntDesign } from '@expo/vector-icons';
 
+
+type Item = {
+    title: string
+}
 type TabParams = {
     activeTab: string,
-    allTabs: string[],
+    allTabs: Item[],
     setTab: React.Dispatch<React.SetStateAction<string>>,
 }
 
 const TabHeader: React.FC<TabParams> = ({activeTab, allTabs, setTab}: TabParams) => {
+    console.log(allTabs, activeTab)
     return (
-        <View style={styles.container}>
-            {
+        <View style={styles.container} className='pt-7'>
+            
+            <SelectDropdown
+                data={allTabs}
+                dropdownStyle={styles.dropdown}
+                dropdownOverlayColor={"rgb(255, 255, 255, 0.4)"}
+                onSelect={(selectedItem: Item, index: number) => {
+                    setTab(selectedItem.title)
+                    console.log(index)
+                }}
+                defaultValue={{title: activeTab}}
+                renderButton={(selectedItem: Item, isOpened: boolean) => {
+                    return (
+                        <View style={isOpened ? styles.openButton : styles.button}>
+                            {
+                                selectedItem &&
+                                <Text style={styles.buttonText}>{selectedItem.title}</Text>
+
+                            }
+                            {
+                                isOpened ? 
+                                (
+                                    <AntDesign name="up" size={18} color="white" />
+                                ) : (
+                                    <AntDesign name="down" size={18} color="white" />
+                                )
+                            }
+                            
+                        </View>
+                    )
+                }}
+                renderItem={(item: Item, index: number, isSelected: boolean) => {
+                    return (
+                            <View key={index}>
+                                <Text style={isSelected? styles.buttonSelected : styles.sub_text}>{item.title}</Text>
+                            </View>
+                        
+                    )
+                }}
+            />
+            {/* {
                 allTabs.map((item) => {
                     return (
-                        <TouchableOpacity key={item} 
-                            style={item === activeTab ? styles.active : styles.inactive}
-                            onPress={() => setTab(item)}>
-                            <Text>{item}</Text>
+                        <TouchableOpacity key={item.title} 
+                            style={item.title === activeTab ? styles.active : styles.inactive}
+                            onPress={() => setTab(item.)}>
+                            <Text>{item.title}</Text>
                         </TouchableOpacity>
                     )
                 })
-            }
+            } */}
         </View>
     )
 }
 const styles = StyleSheet.create({
     container: {
-      display: "flex",  
-      justifyContent: 'space-between',
-      width: "100%",
-      flexDirection: "row",
-      gap: 12,
-      marginBottom: 12,
-      marginTop: 12,
+      width: 140,
+    },
+    button: {
+        backgroundColor: "#02AD98",
+        paddingHorizontal: 12,
+        paddingVertical: 12,
+        borderRadius: 20,
+        justifyContent: "space-between",
+        flexDirection: "row",
+    },
+    openButton: {
+        backgroundColor: "#02AD98",
+        paddingHorizontal: 12,
+        paddingVertical: 12,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        justifyContent: "space-between",
+        flexDirection: "row",
+    },
+    buttonText: {
+        color: "#FFFFFF",
+    },
+    buttonSelected: {
+        color: "#FFFFFF",
+        marginVertical: 5,
+        textAlign: "center"
     },
     active: {
         color: "#333333",  
@@ -43,6 +108,19 @@ const styles = StyleSheet.create({
         alignItems: "center",
         paddingBottom: 8,
     },
+    sub_text: {
+        color: "#D9D9D9",
+        marginVertical: 5,
+        textAlign: "center"
+    },
+    dropdown: {
+        padding: 12,
+        backgroundColor: "#02AD98",
+        flexDirection: "column",
+        gap: 20,
+        borderBottomLeftRadius: 20,
+        borderBottomRightRadius: 20,
+    },
     inactive: {
         color: "#777777",  
         fontSize: 24,
diff --git a/frontend/components/TrendingUser.tsx b/frontend/components/TrendingUser.tsx
index 22e3b526..611f2b55 100644
--- a/frontend/components/TrendingUser.tsx
+++ b/frontend/components/TrendingUser.tsx
@@ -2,17 +2,20 @@
 import React from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
 import { Trending } from '../types/types';
-//import { FontAwesome } from '@expo/vector-icons';
+import { AntDesign } from '@expo/vector-icons';
 
 type TrendingUserProps = {
 trending: Trending;
+index: number,
 }
 
-const TrendingUser: React.FC<TrendingUserProps> = ({ trending }: TrendingUserProps) => {
-    console.log(trending)
+const TrendingUser: React.FC<TrendingUserProps> = ({ trending, index }: TrendingUserProps) => {
+    console.log(trending);
+    
     return (
         <View style={styles.container}>
             {/* Column for image */}
+            <Text style={styles.rank}>{index + 1}</Text>
             <View style={[styles.column, styles.imageColumn]}>
                 <View style={styles.imageContainer}>
                     <Image
@@ -27,14 +30,20 @@ const TrendingUser: React.FC<TrendingUserProps> = ({ trending }: TrendingUserPro
                     <Text style={styles.nameText}>
                         {trending.trending_user_reference.first_name} {trending.trending_user_reference.last_name}
                     </Text>
-                    <Text style={styles.actionText}>
-                        Recent: Recent actions will display{"\n"} here
-                    </Text>
                 </View>
             </View>
 
 
             <View style={[styles.column, styles.followersColumn]}>
+                {
+                    trending.day_gain_pct > 0 ?
+                    (
+                        <AntDesign name="arrowup" size={18} color="#02AD98" />
+                    ) :
+                    (
+                        <AntDesign name="arrowdown" size={18} color="#FF2B51" />
+                    )
+                }
                 {/* {
                     trending.day_gain_pct > 0 ?
                     (
@@ -43,8 +52,8 @@ const TrendingUser: React.FC<TrendingUserProps> = ({ trending }: TrendingUserPro
                         <FontAwesome name="arrow-trend-down" size={20} color="black"/>
                     )
                 } */}
-                <Text style={styles.followersText}>
-                    {trending.day_gain_pct}%
+                <Text style={trending.day_gain_pct > 0 ? styles.followersText : styles.downFollText}>
+                    {Math.abs(trending.day_gain_pct)}%
                 </Text>
             </View>
         </View>
@@ -57,15 +66,23 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         alignItems: 'center',
         paddingHorizontal: 10,
+        borderBottomColor: "#adc4ba",
+        borderBottomWidth: 1,
+        paddingVertical: 15,
     },
     column: {
         flex: 1,
     },
+    rank: {
+        fontSize: 18,
+        marginRight: 15
+    },
     imageColumn: {
         flex: 0.17,
     },
     textColumn: {
-        flex: 0.65,
+        marginRight: 12,
+        justifyContent: "center"
     },
     followersColumn: {
         flex: 0.18,
@@ -83,7 +100,7 @@ const styles = StyleSheet.create({
         height: "100%",
     },
     textContainer: {
-        flex: 1,
+        marginLeft: 18
     },
     actionText: {
         fontSize: 8,
@@ -91,13 +108,19 @@ const styles = StyleSheet.create({
     },
     nameText: {
         fontWeight: 'bold',
-        fontSize: 12,
+        fontSize: 18,
         marginBottom: 1,
-        color: '#787878',
+        color: '#333333',
     },
     followersText: {
         alignSelf: 'flex-end',
-        color: '#787878',
+        color: '#02AD98',
+        fontSize: 18,
+    },
+    downFollText: {
+        alignSelf: 'flex-end',
+        color: '#FF2B51',
+        fontSize: 18,
     },
     followersLogo: {
         width: 20,
diff --git a/frontend/package.json b/frontend/package.json
index b2583a70..2f49bba6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,6 +49,7 @@
     "react-native-reanimated": "3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "3.29.0",
+    "react-native-select-dropdown": "^4.0.1",
     "react-native-svg": "^15.0.0",
     "react-native-vector-icons": "10.0.3",
     "react-native-webview": "13.6.4",
diff --git a/frontend/pages/Leaderboard.tsx b/frontend/pages/Leaderboard.tsx
index c2b5dd16..edc97a9e 100644
--- a/frontend/pages/Leaderboard.tsx
+++ b/frontend/pages/Leaderboard.tsx
@@ -8,43 +8,57 @@ import {Leader, Trending} from "../types/types";
 import {getPopularLeaderboard, getPopularTrending} from "../services/leaderboard";
 
 const Leaderboard: React.FC = () => {
+
+    const [tab, setTab] = useState("Popular Now");
+    const allTabs = [{title: "Popular Now"}, {title: "All time Bests"}];
+
     //Fetch Leaders
     const [leaderboard, setLeaderboard] = useState<Leader[]>([]);
+    
     const [trendingboard, setTrendingBoard] = useState<Trending[]>([]);
-    useEffect(() => {
-        const fetchLeaderboard = async () => {
-            try {
-                const leaders = await getPopularLeaderboard();
-                setLeaderboard(leaders);
-            } catch (error) {
-                console.error('Error fetching leaderboard:', error);
-            }
-        };
+    const fetchLeaderboard = async () => {
+        try {
+            const leaders = await getPopularLeaderboard();
+            setLeaderboard(leaders);
+        } catch (error) {
+            console.error('Error fetching leaderboard:', error);
+        }
+    };
+
+    const fetchTrendingBoard = async () => {
+        try {
+            const trending = await getPopularTrending();
+            setTrendingBoard(trending);
+        } catch (error) {
+            console.error('Error fetching trendingboard')
+        }
 
-        const fetchTrendingBoard = async () => {
-            try {
-                const trending = await getPopularTrending();
-                setTrendingBoard(trending);
-            } catch (error) {
-                console.error('Error fetching trendingboard')
-            }
+    };
 
-        };
+    useEffect(() => {
+        if (tab == "PopularNow") {
+            fetchLeaderboard();
+            fetchTrendingBoard()
+        }
+    }, [tab]);
 
+    useEffect(() => {
         fetchLeaderboard();
         fetchTrendingBoard();
     }, []);
 
-
-
-    //END ATTEMPT
-    const [tab, setTab] = useState("Popular Now");
-    const allTabs = ["Popular Now", "All time Bests"];
     return (
         <View style={styles.container}>
-            <Text className='pt-7 font-bold text-lg'>Leaderboard</Text>
+            <View className='flex-row justify-between w-full mb-2'>
+                <View>
+                    <Text className='pt-7 font-bold text-lg'>Leaderboard</Text>
+                    <Text className="text-sm">Check out the top 20 people</Text>
+                </View>
+                
+                <TabHeader activeTab={tab} allTabs={allTabs} setTab={setTab} />
+            </View>
+            
             <View style={styles.leaderboard} className='rounded-md tabBar'>
-                <TabHeader activeTab={tab} allTabs={allTabs} setTab={setTab} style={styles.tabBar} />
                 {
                     tab == 'Popular Now' ? 
                         (<PopularLeaderboard leaderboard={leaderboard}/>) :
@@ -61,13 +75,13 @@ const styles = StyleSheet.create({
       alignItems: 'flex-start',
       justifyContent: 'flex-start',
       padding: 20,
-      backgroundColor: '#f5f5f5',
+      paddingTop: "15%",
+      backgroundColor: '#FFFFFF',
     },
     leaderboard: {
         flex: 1,
+        width: "100%",
         justifyContent: 'flex-start',
-        borderColor: '#999999',
-        borderWidth: 2,
         marginTop: 12,
         padding: 0,
     },
diff --git a/frontend/reducers/onboarding/onboardingReducer.ts b/frontend/reducers/onboarding/onboardingReducer.ts
index d0150442..bb6dc5b7 100644
--- 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/router/BottomNavBar.tsx b/frontend/router/BottomNavBar.tsx
index d5358b5a..1a8f3f5e 100644
--- a/frontend/router/BottomNavBar.tsx
+++ b/frontend/router/BottomNavBar.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-//import AuthPage from '../pages/AuthPage';
 import { Icon } from '@rneui/themed';
 import { RouteProp } from '@react-navigation/native';
 import Profile from '../pages/Profile';
 import FeedPage from '../pages/FeedPage';
 import Leaderboard from '../pages/Leaderboard';
-// import AuthNavigator from './AuthNavigation';
-// import { useSession } from '@clerk/clerk-expo';
 
 const Tab = createBottomTabNavigator<BottomTabParamList>();
 type TabRouteName =
@@ -17,7 +14,7 @@ type TabRouteName =
 
 const tabBarIconMapping: Record<TabRouteName, string> = {
   Explore: 'feature-search',
-  Leaderboard: 'podium',
+  Leaderboard: 'podium-gold',
   Profile: 'account-circle',
 };
 
@@ -27,7 +24,7 @@ const screenOptionsIcon = (
 ) => {
   const iconName = tabBarIconMapping[route.name];
   return (
-    <Icon type="material-community" name={iconName} size={22} color={color} />
+    <Icon type="material-community" name={iconName} size={24} color={color} />
   );
 };
 
@@ -50,22 +47,27 @@ const BottomNavBar = () => {
         name="Explore"
         component={FeedPage}
         options={{
-          headerShown: false,
+          tabBarActiveTintColor: '#02AD98',
+          tabBarShowLabel: false,
+          tabBarInactiveTintColor: '#333333'
         }}
       />
       <Tab.Screen
         name="Leaderboard"
         component={Leaderboard}
         options={{
-          headerShown: false,
-          title: 'Leaderboard',
+          tabBarActiveTintColor: '#02AD98',
+          tabBarShowLabel: false,
+          tabBarInactiveTintColor: '#333333'
         }}
       />
       <Tab.Screen
         name="Profile"
         component={Profile}
         options={{
-          headerShown: false,
+          tabBarActiveTintColor: '#02AD98',
+          tabBarShowLabel: false,
+          tabBarInactiveTintColor: '#333333'
         }}
       />
     </Tab.Navigator>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index f7dc7bca..fcb462fd 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -5,8 +5,4 @@
         // "jsx": "react",
 
     },
-    "include": [
-        "frontend", // Assuming your source code is located in the "src" directory
-        "assets" // Add the "assets" directory to include
-    ]
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 6048683b..862bf07e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -8205,6 +8205,11 @@ react-native-screens@3.29.0:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
+react-native-select-dropdown@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-select-dropdown/-/react-native-select-dropdown-4.0.1.tgz#5789bdf60742f8ca881391e6f47a5b285ee407d8"
+  integrity sha512-t4se17kALFcPb9wMbxig5dS1BE3pWRC6HPuFlM0J2Y6yhB1GsLqboy6an6R9rML8pRuGIJIxL29cbwEvPQwKxQ==
+
 react-native-size-matters@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.4.2.tgz#4348bdd6fc47383f60326d58ad69870c998a5f9a"