Merge pull request #457 from bounswe/3design_mobile

3design mobile
bounswe · Dec 16, 2024 · de0e189 · de0e189
2 parents 940eefb + 70c19f7
commit de0e189
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 53 deletions.
diff --git a/3Design/mobile/app/navigation/StackNavigator.js b/3Design/mobile/app/navigation/StackNavigator.js
@@ -5,6 +5,7 @@ import RegisterScreen from '../screens/RegisterScreen';
 import TabNavigator from './TabNavigator';
 import PostScreen from "../screens/PostScreen";
 import LeaderboardScreen from '../screens/LeaderboardScreen';
+import ProfilePage from '../screens/ProfileScreen'; // Import ProfilePage
 
 const Stack = createNativeStackNavigator();
 
@@ -42,6 +43,12 @@ export default function StackNavigator() {
         component={LeaderboardScreen}
         options={{ title: 'Leaderboard' }}
       />
+      {/* Add the ProfilePage route */}
+      <Stack.Screen
+        name="ProfilePage"
+        component={ProfilePage}
+        options={{ title: 'User Profile' }}
+      />
     </Stack.Navigator>
   );
 }
diff --git a/3Design/mobile/app/screens/LeaderboardScreen.js b/3Design/mobile/app/screens/LeaderboardScreen.js
@@ -7,11 +7,12 @@ import {
   ActivityIndicator,
   Platform,
   StatusBar,
+  Image,
+  TouchableOpacity
 } from 'react-native';
 import axios from 'axios';
 import { Colors } from '../constants/Colors';
 import { AuthContext } from "../context/AuthContext";
-import { Categories } from "../constants/Categories";
 
 export default function LeaderboardScreen({ route, navigation }) {
   const { category } = route.params;
@@ -41,12 +42,46 @@ export default function LeaderboardScreen({ route, navigation }) {
     }
   }, [category]);
 
+  const handleViewPost = (item) => {
+    const postUrl = `${process.env.EXPO_PUBLIC_VITE_API_URL}/api/v1/posts/${item.postId}`;
+    axios
+      .get(postUrl, {
+        headers: { Authorization: `Bearer ${user.accessToken}` },
+      })
+      .then((response) => {
+        const postData = response.data;
+        navigation.navigate('Post', {
+          postId: item.postId,
+          username: item.user.nickName,
+          userId: item.user.id,
+          title: postData.title,
+          content: postData.text,
+          model: postData.fileUrl,
+        });
+      })
+      .catch((error) => console.error(error));
+  };
+
   const renderItem = ({ item, index }) => (
     <View style={styles.row}>
       <Text style={styles.cell}>{index + 1}</Text>
-      <Text style={styles.cell}>{item.user.nickName}</Text>
+      <TouchableOpacity
+        style={styles.userCell}
+        onPress={() => navigation.navigate('ProfilePage', { userId: item.user.id })}
+      >
+        <Image
+          source={{ uri: item.user.profilePictureUrl }}
+          style={styles.profileImage}
+        />
+        <Text style={styles.userName}>{item.user.nickName}</Text>
+      </TouchableOpacity>
       <Text style={styles.cell}>{item.score}</Text>
-      <Text style={styles.cell}>{item.postId}</Text>
+      <TouchableOpacity
+        style={styles.viewPostButton}
+        onPress={() => handleViewPost(item)}
+      >
+        <Text style={styles.viewPostButtonText}>View Post</Text>
+      </TouchableOpacity>
     </View>
   );
 
@@ -127,6 +162,22 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontSize: 16,
   },
+  userCell: {
+    flex: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  profileImage: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    marginRight: 8,
+  },
+  userName: {
+    fontSize: 16,
+    textAlign: 'center',
+  },
   loaderContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -141,4 +192,16 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: '500',
   },
+  viewPostButton: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  viewPostButtonText: {
+    color: Colors.dark,
+    fontSize: 16,
+    fontWeight: '600',
+    textDecorationLine: 'underline',
+  },
 });