Merge pull request #943 from bounswe/MOBILE-921

Profile Page Fixes for PostCard and CommentCard pages
bounswe · Dec 16, 2024 · 8d27944 · 8d27944
2 parents cba34d4 + c6b94df
commit 8d27944
Show file tree

Hide file tree

Showing 7 changed files with 714 additions and 55 deletions.
diff --git a/mobile/bulingo/app/(tabs)/profile/bookmarkedPostsAndComments.tsx b/mobile/bulingo/app/(tabs)/profile/bookmarkedPostsAndComments.tsx
@@ -1,13 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import {Text, StyleSheet, FlatList, View, TouchableWithoutFeedback, ActivityIndicator } from 'react-native';
 import TokenManager from '@/app/TokenManager';
+import CommentCard from '@/app/components/commentcard';
+import PostCard from '@/app/components/postcard';
+import { router } from 'expo-router';
+import { likePost, bookmarkPost, unlikePost, unbookmarkPost, likeComment, unlikeComment } from '../../api/forum'; // Import the functions from forum.tsx
 
 export default function Followers() {
   const [isLoading, setIsLoading] = useState(true);
-  const [bookmarkedPostsAndComments, setBoormarkedPostAndComments] = useState<any[]>([])
+  const [bookmarkedComments, setBookmarkedComments] = useState<any[]>([])
+  const [bookmarkedPosts, setBookmarkedPosts] = useState<any[]>([])
 
   useEffect(() => {
-    const fetchFollowers = async () => {
+    const fetchBookmarkedPostAndComments = async () => {
       const username = TokenManager.getUsername();
       if(username === undefined){
         console.error('username is undefined!');
@@ -27,7 +32,24 @@ export default function Followers() {
 
         if (response.ok){
           const result = await response.json();
-          setBoormarkedPostAndComments(result);
+          setBookmarkedPosts(result);
+          try {
+            const response2 = await TokenManager.authenticatedFetch("comments/bookmarked/", {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify(params),
+            });
+
+            if (response.ok){
+              const result2 = await response2.json();
+              setBookmarkedComments(result2)
+            }
+          }
+          catch (error){
+            console.error(error)
+          }
         } else {
           console.log(response.status)
         };
@@ -36,7 +58,7 @@ export default function Followers() {
       }
       setIsLoading(false);
     };
-    fetchFollowers();
+    fetchBookmarkedPostAndComments();
   }, []);
 
   if(isLoading){
@@ -49,16 +71,139 @@ export default function Followers() {
     );
   };
 
+  const handlePostPress = (id: number) => {
+    router.navigate({pathname: '/(tabs)/forums/forumPostPage', params: {
+       "id": id,
+      }});
+  };
+
+  const handleLikePress = async (postId: number): Promise<void> => { 
+    bookmarkedPosts.map(async item => {
+      if (item.id === postId) {
+        if(item.is_liked){
+          try {
+            const response = await unlikePost(postId);
+            if (response) {
+              setBookmarkedPosts(bookmarkedPosts.map(item => {
+                return (item.comments && item.id === postId) ? {...item, is_liked: response.is_liked, like_count: response.like_count} : item
+              }))
+            }
+          } catch (error) {
+            console.error('Failed to unlike post:', error);
+          }
+        }
+        else{
+          try {
+            const response = await likePost(postId);
+            if (response) {
+              setBookmarkedPosts(bookmarkedPosts.map(item => {
+                return (item.comments && item.id === postId) ? {...item, is_liked: response.is_liked, like_count: response.like_count} : item
+              }))
+            }
+          } catch (error) {
+            console.error('Failed to like post:', error);
+          }
+        }
+
+      }
+    })
+
+
+
+  };
+
+  const handleBookmarkPress = async (postId: number): Promise<void> => {
+    bookmarkedPosts.map(async item => {
+      if (item.id === postId) {
+        if(item.is_bookmarked){
+          try {
+            const response = await unbookmarkPost(postId);
+            if (response) {
+              setBookmarkedPosts(bookmarkedPosts.map(item => {
+                return (item.comments && item.id === postId) ? {...item, is_bookmarked: response.is_bookmarked} : item
+              }))
+            }
+          } catch (error) {
+            console.error('Failed to unbookmark post:', error);
+          }
+        }
+        else{
+          try {
+            const response = await bookmarkPost(postId);
+            if (response) {
+              setBookmarkedPosts(bookmarkedPosts.map(item => {
+                return (item.comments && item.id === postId) ? {...item, is_bookmarked: response.is_bookmarked} : item
+              }))
+            }
+          } catch (error) {
+            console.error('Failed to bookmark post:', error);
+          }
+        }
+      }
+    })
+
+  };
+
+  const handleLikeComment = async (commentId: number) => {
+    bookmarkedComments.map(async item => {
+      if (!item.comments && item.id === commentId) {
+        if (item.is_liked) {
+          try {
+            const response = await unlikeComment(commentId);
+            if (response) {
+              setBookmarkedComments(bookmarkedComments.map(item => { 
+                return (!item.comments && item.id === commentId) ? {...item, is_liked: !item.is_liked, like_count: response.like_count} : item;
+              }))
+            }
+          } catch (error) {
+            console.error('Failed to unlike comment:', error);
+          }
+        } else {
+          try {
+            const response = await likeComment(commentId);
+            if (response) {
+              setBookmarkedComments(bookmarkedComments.map(item => { 
+                return (!item.comments && item.id === commentId) ? {...item, is_liked: !item.is_liked, like_count: response.like_count} : item;
+              }))
+            }
+          } catch (error) {
+            console.error('Failed to like comment:', error);
+          }
+        }
+      }
+    });
+  };
+
   return (
     <FlatList
-      data={bookmarkedPostsAndComments}
-      keyExtractor={(item) => item.name}  // Placeholder, change with post/comment card
+      data={bookmarkedComments.concat(bookmarkedPosts)}
+      keyExtractor={item => `${item.id}${item.comments ? 'yes' : 'no'}`}
       renderItem={({item}) => {  // Placeholder, replace with post/comment card
-        return (
-          <View style={{height: 100, borderWidth: 3, borderColor: 'black', borderRadius: 15, justifyContent: 'center', alignItems: 'center', marginHorizontal: 15, marginVertical: 5,}}>
-            <Text>Placeholder Item: {item.name}</Text>
-          </View>
-        );
+        if(item.comments){
+          // /// Post
+          return (
+            <PostCard title={item.title} id={item.id} author={TokenManager.getUsername() || ''} likes={item.like_count} 
+              liked={item.is_liked} tags={item.tags} feedOrPost='feed' isBookmarked={item.is_bookmarked} 
+              onUpvote={() => handleLikePress(item.id)}
+              onBookmark={() => handleBookmarkPress(item.id)}
+              onPress={() => handlePostPress(item.id)}
+            />
+          );
+        }
+        else{
+          // Comment
+          return (
+            <CommentCard
+            id={item.id}
+            username={item.author}
+            onUpvote={handleLikeComment}
+            comment={item.body}
+            isBookmarked={item.is_bookmarked}
+            liked={item.is_liked}
+            likes={item.like_count}
+          />
+          );
+        }
       }}
       ListHeaderComponent={
         <View style={styles.headerContainer}>

diff --git a/mobile/bulingo/app/(tabs)/profile/bookmarkedQuizzes.tsx b/mobile/bulingo/app/(tabs)/profile/bookmarkedQuizzes.tsx
@@ -7,7 +7,7 @@ import TokenManager from '@/app/TokenManager';
 
 export default function Followers() {
   const [isLoading, setIsLoading] = useState(true);
-  const [bookmarkedQuizzes, setBoormarkedQuizzes] = useState<QuizInfo[]>([])
+  const [bookmarkedQuizzes, setBookmarkedQuizzes] = useState<QuizInfo[]>([])
 
   useEffect(() => {
     const fetchFollowers = async () => {
@@ -22,6 +22,8 @@ export default function Followers() {
 
         if (response.ok){
           const result = await response.json()
+          console.log(result)
+          setBookmarkedQuizzes(result);
         } else {
           console.log(response.status)
         };
@@ -49,7 +51,7 @@ export default function Followers() {
       renderItem={({item}) => {  // Placeholder, replace with quiz card
         return (
           <QuizCard id={item.id} author={item.author.username} title={item.title} level={item.level} 
-              description={item.description} liked={item.is_liked} likes={item.like_count}/>
+              description={item.description} liked={item.is_liked} likes={item.like_count} bookmarked={item.is_bookmarked}/>
         );
       }}
       ListHeaderComponent={