managment screen upadte

src/screens/management/ManagementScreen.tsx

@@ -0,0 +1,230 @@
+// src/screens/ManagementScreen.tsx
+
+import React, { useState, useCallback, FC } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  ActivityIndicator,
+  Alert,
+  ListRenderItemInfo,
+} from "react-native";
+import { useNavigation, useFocusEffect } from "@react-navigation/native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { RootStackParamList } from "../../navigation/AppNavigator";
+import { APPROVE_REQUEST_URL, BASE_URL, DECLINE_REQUEST_URL, MY_GROUPS_URL, REQUESTS_URL } from "../../utils/ApiUrls";
+import colors from "../../components/colors";
+import AppView from "../../components/AppView";
+import { apiCall } from "../../utils/ApiHelper";
+
+import { MyGroup, JoinedGroup, JoinRequest, ApiResponse } from '../../types';
+import { MyGroupCard } from "../../components/MyGroupCard";
+import { JoinedGroupCard } from "../../components/JoinedGroupCard";
+import { RequestCard } from "../../components/RequestCard";
+
+type GroupManagementNavProp = StackNavigationProp<RootStackParamList>;
+type ActiveTab = "My Groups" | "Joined Groups" | "Requests";
+
+const ManagementScreen: FC = () => {
+  const [activeTab, setActiveTab] = useState<ActiveTab>("My Groups");
+  const navigation = useNavigation<GroupManagementNavProp>();
+  const [myGroups, setMyGroups] = useState<MyGroup[]>([]);
+  const [joinedGroups, setJoinedGroups] = useState<JoinedGroup[]>([]);
+  const [requests, setRequests] = useState<JoinRequest[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const userRole = "ORGANIZER";
+
+  const fetchData = useCallback(async () => {
+    if (loading) return;
+    setLoading(true);
+    setError(null);
+    try {
+      if (userRole === "ORGANIZER") {
+        // Fetch all data concurrently
+        const [myGroupsRes,joinedGroupsRes,requestsRes] = await Promise.all([
+          apiCall(MY_GROUPS_URL, "GET") as Promise<ApiResponse<MyGroup[]>>,
+          apiCall(DECLINE_REQUEST_URL, "GET") as Promise<ApiResponse<JoinedGroup[]>>, // Assuming this is also needed
+          apiCall(REQUESTS_URL, "GET") as Promise<ApiResponse<JoinRequest[]>>,
+        ]);
+        setMyGroups(myGroupsRes.data || []);
+        setJoinedGroups(joinedGroupsRes.data || []);
+        setRequests(requestsRes.data || []);
+      } else {
+        // Fetch only joined groups for non-organizers
+        // const joinedGroupsRes = await apiCall(JOINED_GROUPS_URL, "GET") as Promise<ApiResponse<JoinedGroup[]>>;
+        // setJoinedGroups(joinedGroupsRes.data || []);
+      }
+    } catch (e) {
+      console.error("Fetch Data Error:", e);
+      setError("Failed to fetch data. Please pull to refresh.");
+    } finally {
+      setLoading(false);
+    }
+  }, [userRole, loading]);
+
+  useFocusEffect(useCallback(() => { fetchData(); }, []));
+
+  const handleAction = async (url: string, body: object, successMessage: string, failureMessage: string, action: string) => {
+    // ... (logic remains the same)
+    console.log(url)
+       try {
+      setLoading(true); // Optionally show a loading state during the action
+      // Make the POST request with an empty body
+      const res = await apiCall(url, "PUT", {}) as ApiResponse<null> | null;
+
+      if (res && res.statusCode === 200) {
+        // Use the success message from the API response
+        Alert.alert("Success", res.message || `Request ${action}d successfully.`);
+        fetchData(); // Refresh the list of requests
+      } else {
+        throw new Error(res?.message || failureMessage);
+      }
+    } catch (err: any) {
+      Alert.alert("Error", err.message || "An unexpected error occurred.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleApprove = (req: JoinRequest) => handleAction(APPROVE_REQUEST_URL+req.requestId+"/approve", { requestId: req.requestId }, `${req.userName} has been added.`, "Failed to approve request.","Approve");
+  const handleDecline = (req: JoinRequest) => handleAction(DECLINE_REQUEST_URL+req.requestId+"/reject?reason=/"+" ", { requestId: req.requestId }, `Request from ${req.userName} has been declined.`, "Failed to decline request.","Decline");
+  const handleManageGroup = (group: MyGroup) => Alert.alert("Manage Group", `Navigating to manage ${group.groupName}`);
+
+  const renderContent = () => {
+    if (error) {
+      return <Text style={styles.emptyText}>{error}</Text>;
+    }
+    
+    switch (activeTab) {
+      case "My Groups":
+        if (loading) {
+          return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
+        }
+        return (
+          <FlatList
+            data={myGroups}
+            renderItem={({ item }: ListRenderItemInfo<MyGroup>) => <MyGroupCard item={item} onManage={handleManageGroup} />}
+            keyExtractor={(item) => item.id}
+            ListEmptyComponent={<Text style={styles.emptyText}>You haven't created any groups yet.</Text>}
+            onRefresh={fetchData}
+            refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
+            contentContainerStyle={{ paddingBottom: 100 }}
+          />
+        );
+      case "Joined Groups":
+        if (loading && joinedGroups.length === 0) {
+          return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
+        }
+        return (
+          <FlatList
+            data={joinedGroups}
+            renderItem={({ item }: ListRenderItemInfo<JoinedGroup>) => <JoinedGroupCard item={item} />}
+            keyExtractor={(item) => item.id}
+            ListEmptyComponent={<Text style={styles.emptyText}>You haven't joined any groups yet.</Text>}
+            onRefresh={fetchData}
+            refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
+            contentContainerStyle={{ paddingBottom: 100 }}
+          />
+        );
+      case "Requests":
+        if (loading && requests.length === 0) {
+          return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
+        }
+        return (
+          <FlatList
+            data={requests}
+            renderItem={({ item }: ListRenderItemInfo<JoinRequest>) => <RequestCard item={item} onApprove={handleApprove} onDecline={handleDecline} />}
+            keyExtractor={(item) => item.requestId}
+            ListEmptyComponent={<Text style={styles.emptyText}>No pending join requests.</Text>}
+            onRefresh={fetchData}
+            refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
+            contentContainerStyle={{ paddingBottom: 100 }}
+          />
+        );
+      default: return null;
+    }
+  };
+  
+  const tabs: ActiveTab[] = userRole === 'ORGANIZER' ? ["My Groups", "Joined Groups", "Requests"] : ["Joined Groups"];
+  
+  return (
+    <AppView style={styles.container} paddingHorizontal={0}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Group Management</Text>
+      </View>
+      <View style={styles.segmentedControl}>
+        {tabs.map((tab) => (
+          <TouchableOpacity key={tab} style={[styles.segmentButton, activeTab === tab && styles.segmentActive]} onPress={() => setActiveTab(tab)}>
+            <Text style={[styles.segmentText, activeTab === tab && styles.segmentTextActive]}>{tab}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.contentArea}>
+        {renderContent()}
+      </View>
+    </AppView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f6fa' 
+  },
+  header: {
+    paddingHorizontal: 20,
+    paddingBottom: 15,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#1d2129',
+  },
+  segmentedControl: {
+    flexDirection: 'row',
+    backgroundColor: '#e9ecef',
+    borderRadius: 10,
+    marginHorizontal: 20,
+    marginBottom: 20,
+    padding: 3,
+  },
+  segmentButton: {
+    flex: 1,
+    paddingVertical: 12,
+    alignItems: 'center',
+    borderRadius: 8,
+  },
+  segmentActive: {
+    backgroundColor: colors.pastelOrange, // Example color
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 5,
+  },
+  segmentText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#6c757d',
+  },
+  segmentTextActive: {
+    color: colors.textDark, // Example color
+  },
+  contentArea: {
+    flex: 1,
+    paddingHorizontal: 20,
+  },
+  loader: {
+    marginTop: 50,
+  },
+  emptyText: {
+    textAlign: 'center',
+    marginTop: 60,
+    fontSize: 16,
+    color: '#6c757d',
+  },
+});
+
+export default ManagementScreen;