Fixing leaderboard (#48)

* Update tsconfig.json * leaderboard thing * pushing changes * finishing this up * updating the color * more linter * final changes * final linter stuff hopefully
GenerateNU · Apr 17, 2024 · 5bbab20 · 5bbab20
1 parent 4b1952e
commit 5bbab20
Show file tree

Hide file tree

Showing 12 changed files with 221 additions and 154 deletions.
diff --git a/frontend/components/BottomNavBar.tsx b/frontend/components/BottomNavBar.tsx
diff --git 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;
diff --git 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;
diff --git 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,25 +84,29 @@ const styles = StyleSheet.create({
         height: "100%",
     },
     textContainer: {
-        flex: 1,
+        marginLeft: 18
     },
     actionText: {
         fontSize: 8,
         color: '#787878',
     },
     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
@@ -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,