Merge pull request #386 from COS301-SE-2024/dev/issues

Dev/issues
COS301-SE-2024 · Sep 27, 2024 · 5d0c1cb · 5d0c1cb
2 parents 4185a50 + 0e604ea
commit 5d0c1cb
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 108 deletions.
diff --git a/frontend/src/Components/LikesTab.js b/frontend/src/Components/LikesTab.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { View, Text, StyleSheet, ScrollView, RefreshControl } from "react-native";
 import { useTheme } from "../styles/ThemeContext";
 import { getUserLikedPosts, getLikesOfPost, getLikesOfReview } from "../Services/LikesApiService";
 import { getCountCommentsOfPost, getCountCommentsOfReview, removePost, removeReview } from "../Services/PostsApiServices";
@@ -8,7 +8,7 @@ import Post from "./Post";
 import Review from "./Review";
 
 
-export default function LikesTab({ userInfo, userProfile, handleCommentPress, refreshing }) {
+export default function LikesTab({ userInfo, userProfile, handleCommentPress, refreshing, onRefresh }) {
     const [likedPosts, setLikedPosts] = useState([]);
     const [loading, setLoading] = useState(false);
     const { theme } = useTheme();
@@ -88,10 +88,11 @@ export default function LikesTab({ userInfo, userProfile, handleCommentPress, re
 
     useEffect(() => {
         fetchLikedPosts();
-    }, []);
+    }, [refreshing]);  
 
     const handleRefresh = () => {
         if (refreshing) {
+            console.log("refreshing");
             fetchLikedPosts();
         }
     };

diff --git a/frontend/src/Components/PostsTab.js b/frontend/src/Components/PostsTab.js
@@ -89,7 +89,9 @@ export default function PostsTab({ userInfo, userProfile, handleCommentPress, re
 
     useEffect(() => {
         fetchPostsAndReviews();
-    }, []);
+    }, [refreshing]);  
+
+
 
     if (refreshing) {
         console.log("refreshing");

diff --git a/frontend/src/Components/Review.js b/frontend/src/Components/Review.js
@@ -220,7 +220,7 @@ export default function Review({
           <Text style={styles.reviewButtonText}>Review</Text>
         </TouchableOpacity>
         <Pressable onPress={toggleModal} style={{ marginLeft: 10 }}>
-          <Icon name="more-vert" size={20} />
+          <Icon name="more-vert" size={20} color={theme.iconColor} />
         </Pressable>
       </View>
 
@@ -232,7 +232,7 @@ export default function Review({
           <Text style={styles.star}>
             <Icon name="star" size={22} color={"gold"} />
           </Text>
-          <Text>{rating}</Text>
+          <Text style={{ color: theme.textColor }}>{rating}</Text>
         </View>
       </View>
 
@@ -244,7 +244,7 @@ export default function Review({
           <Icon
             name={hasLiked ? 'favorite' : 'favorite-border'}
             size={20}
-            color={hasLiked ? 'red' : 'black'}
+            color={hasLiked ? 'red' : theme.iconColor}
             style={{ marginRight: 5 }}
           />
           <Text style={styles.statsNumber}>{likeCount}</Text>
@@ -254,7 +254,7 @@ export default function Review({
             onPress={() => {
               handleCommentPress(reviewId, true);
             }}>
-            <CommIcon name="comment-outline" size={20} style={styles.icon} />
+            <CommIcon name="comment-outline" size={20} style={styles.icon} color={theme.iconColor} />
           </Pressable>
           <Text style={styles.statsNumber}>{comments}</Text>
         </View>

diff --git a/frontend/src/Components/Watchlist.js b/frontend/src/Components/Watchlist.js
@@ -1,20 +1,20 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Modal, Image, Alert } from "react-native";
+import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Modal, Image, Alert, RefreshControl } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useNavigation } from '@react-navigation/native';
 import { getUserWatchlists } from "../Services/UsersApiService";
 import { deleteWatchlist } from "../Services/ListApiService"; // Import the deleteWatchlist function
 import { useTheme } from "../styles/ThemeContext";
 
-const WatchlistTab = ({ userInfo }) => {
+const WatchlistTab = ({ userInfo , refreshing, onRefresh}) => {
 
     const [modalVisible, setModalVisible] = useState(false);
     const [selectedWatchlist, setSelectedWatchlist] = useState(null);
     const [watchlists, setWatchlists] = useState([]);
     const navigation = useNavigation();
     const {theme} = useTheme();
         // Fetch user watchlists
-    useEffect(() => {
+
         const fetchUserWatchlists = async () => {
             try {
                 const userId = userInfo.userId;
@@ -32,8 +32,18 @@ const WatchlistTab = ({ userInfo }) => {
             }
         };
 
+
+        useEffect(() => {
+            fetchUserWatchlists();
+        }, [refreshing]);  
+
+
+
+    if (refreshing) {
+        console.log("refreshing");
         fetchUserWatchlists();
-    }, []);
+    }
+
 
     const openOptionsMenu = (watchlist) => {
         setSelectedWatchlist(watchlist);

diff --git a/frontend/src/Screens/ExplorePage.js b/frontend/src/Screens/ExplorePage.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { StyleSheet, Text, View, ScrollView, FlatList, TextInput } from 'react-native';
+import { StyleSheet, Text, View, ScrollView, FlatList, TextInput , RefreshControl} from 'react-native';
 import { useNavigation, useFocusEffect } from "@react-navigation/native";
 import { Ionicons } from '@expo/vector-icons';
 import { TouchableOpacity } from "react-native";
@@ -22,6 +22,7 @@ import Post from "../Components/Post";  // To render posts
 import Review from "../Components/Review";  // To render reviews
 import moment from "moment";
 import { useTheme } from '../styles/ThemeContext';
+import { colors, themeStyles } from "../styles/theme";
 import SearchBar from '../Components/SearchBar';
 
 
@@ -41,10 +42,10 @@ export default function ExplorePage({ route }) {
     const [recentRooms, setRecentRooms] = useState([]);
     const [searchResults, setSearchResults] = useState([]);
     const [sortedContent, setSortedContent] = useState([]);
+    const [refreshing, setRefreshing] = useState(false);
 
     const keywords = ["art", "city", "neon", "space", "movie", "night", "stars", "sky", "sunset", "sunrise"];
 
-    useEffect(() => {
         const fetchContent = async () => {
             try {
                 const friendsContent = await getFriendsOfFriendsContent(userInfo);
@@ -88,9 +89,10 @@ export default function ExplorePage({ route }) {
                 console.error('Error fetching content:', error);
             }
         };
-
-        fetchContent();
-    }, [userInfo]);
+
+        useEffect(() => {
+            fetchContent();
+        }, [userInfo]);
 
     useFocusEffect(
         useCallback(() => {
@@ -135,14 +137,19 @@ export default function ExplorePage({ route }) {
             console.error("Failed to fetch friends content:", error);
         }
     }, [userInfo]);
+
+    useEffect(() => {
+        if (userInfo) {
+            fetchFriendsContent();
+        }
+    }, [userInfo, fetchFriendsContent]);
+
+    const onRefresh = useCallback(async () => {
+        setRefreshing(true);
+        await Promise.all([fetchContent(), fetchFriendsContent()]);
+        setRefreshing(false);
+    }, []);
 
-    useFocusEffect(
-        useCallback(() => {
-            if (userInfo) {
-                fetchFriendsContent();
-            }
-        }, [userInfo, fetchFriendsContent])
-    );
 
     const handleOpenHub = () => {
         navigation.navigate("HubScreen", { userInfo });
@@ -307,7 +314,10 @@ export default function ExplorePage({ route }) {
     });    
     return (
         <View style={{ flex: 1, backgroundColor: useTheme.backgroundColor }}>
-            <ScrollView>
+            <ScrollView style={{ backgroundColor: theme.backgroundColor }}
+             refreshControl={
+                <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.primary} />
+            }>
             <SearchBar onChangeText={handleSearch} />
 
             {searchResults.length > 0 ? (