manage theme

src/screens/GroupScreen.tsx

@@ -11,6 +11,7 @@ import {
   Image,
   ScrollView,
   Alert,
+  RefreshControl,
 } from "react-native";
 import { FAB } from "react-native-paper";
 import { Ionicons } from "@react-native-vector-icons/ionicons";
@@ -20,7 +21,7 @@ import { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../navigation/AppNavigator";
 import AppView from "../components/AppView";
 import { apiCall } from "../utils/ApiHelper";
-import { BASE_URL, JOIN_GROUP_URL } from "../utils/ApiUrls";
+import { BASE_URL, JOIN_GROUP_URL, PUT_USER_STATUS } from "../utils/ApiUrls";
 import colors from "../components/colors";
 import { ApiResponse } from "./home/UserProfileStatus";
 import * as Keychain from "react-native-keychain";
@@ -92,6 +93,7 @@ export default function GroupScreen() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [role, setRole] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState<boolean>(false)
 
   const fetchGroups = async () => {
     if (loading) return;
@@ -140,56 +142,64 @@ export default function GroupScreen() {
       Alert.alert("Error", "An unexpected error occurred.");
     }
   };
-    const userStatus = async () => {
-        try {
-            const credentials = await Keychain.getGenericPassword();
-            if (!credentials) {
-                Alert.alert("Error", "You are not logged in");
-                return;
-            }
-            const token = credentials.password;
+  const userStatus = async () => {
+    try {
+      const credentials = await Keychain.getGenericPassword();
+      if (!credentials) {
+        Alert.alert("Error", "You are not logged in");
+        return;
+      }
+      const token = credentials.password;
 
-            setLoading(true);
-            setError(null);
-            const response = await fetch(`${BASE_URL}user/profile/status`, {
-                method: "GET",
-                headers: {
-                    Accept: "*/*",
-                    Authorization: `Bearer ${token}`,
-                },
-            });
+      setLoading(true);
+      setError(null);
+      const response = await fetch(PUT_USER_STATUS, {
+        method: "GET",
+        headers: {
+          Accept: "*/*",
+          Authorization: `Bearer ${token}`,
+        },
+      });
 
-            const json: ApiResponse = await response.json();
+      const json: ApiResponse = await response.json();
 
-            console.log("👤 Profile Status Response:", json);
-            if (json.status === "success") {
-               setRole(json.data.role);
+      console.log("👤 Profile Status Response:", json);
+      if (json.status === "success") {
+        setRole(json.data.role);
+
+        if (json.data.profileStatus === false) {
 
-                if (json.data.profileStatus === false) {
-                
-                }
-            } else {
-                setError(json.message || "Failed to fetch status");
-            }
-        } catch (err) {
-            setError("Something went wrong. Please try again.");
-        } finally {
-            setLoading(false);
         }
-    };
+      } else {
+        setError(json.message || "Failed to fetch status");
+      }
+    } catch (err) {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      userStatus();
+    }, [])
+  );
 
-      useFocusEffect(
-          useCallback(() => {
-              userStatus();
-          }, [])
-      );
-  
 
   const handleViewGroup = (group: Group) => {
     // navigation.navigate('GroupDetails', { group });
     Alert.alert("View Group", `Viewing details for ${group.groupName}`);
   };
 
+  const onRefresh = () => {
+    setRefreshing(true)
+    fetchGroups()
+    setTimeout(() => {
+      setRefreshing(false)
+    }, 20000);
+  }
+
   const renderContent = () => {
     let data: Group[];
     switch (activeTab) {
@@ -226,6 +236,10 @@ export default function GroupScreen() {
         )}
         columnWrapperStyle={isGridView ? { justifyContent: 'space-between' } : null}
         contentContainerStyle={{ paddingBottom: 150 }}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        ListFooterComponent={<ActivityIndicator size={'large'} color={colors.Group}/>}
       />
     );
   };
@@ -265,7 +279,7 @@ export default function GroupScreen() {
               <TouchableOpacity key={tab} style={[styles.segmentButton, activeTab === tab && styles.segmentButtonActive]} onPress={() => setActiveTab(tab)}>
                 <Text style={[styles.segmentText, activeTab === tab && styles.segmentTextActive]}>{tab}</Text>
               </TouchableOpacity>
-            ))) }
+            )))}
           </View>
           <TouchableOpacity onPress={() => setIsGridView(!isGridView)} style={styles.layoutToggleButton}>
             <Ionicons name={isGridView ? "list" : "grid"} size={22} color="#555" />
@@ -289,7 +303,7 @@ const styles = StyleSheet.create({
   searchContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderRadius: 12, paddingHorizontal: 10, elevation: 2, marginVertical: 20 },
   searchIcon: { marginRight: 8 },
   searchInput: { flex: 1, height: 45, fontSize: 16, color: '#333' },
-  sectionTitle: { fontSize: 20, fontWeight: 'bold', color: '#333', marginBottom: 12, paddingHorizontal: 16 },
+  sectionTitle: { fontSize: 20, fontWeight: 'bold', color: colors.Group, marginBottom: 12, paddingHorizontal: 16 },
   featuredList: { paddingLeft: 16, marginBottom: 20 },
   featuredCard: { width: width * 0.45, marginRight: 15, backgroundColor: '#fff', borderRadius: 12, elevation: 3, overflow: 'hidden' },
   featuredImage: { width: '100%', height: 100 },