Requeste api implelented

src/screens/home/GroupsTabs.tsx

@@ -4,132 +4,11 @@ import {
   Text,
   StyleSheet,
   TouchableOpacity,
-  TextInput,
-  FlatList,
-  ActivityIndicator,
-  LayoutAnimation,
-  UIManager,
-  Platform,
 } from "react-native";
-import { Ionicons } from "@react-native-vector-icons/ionicons";
 import colors from "../../components/colors";
-import AppView from "../../components/AppView";
+import GroupList from "./GroupList";
+import RequestList from "./RequestList";
 
-// Enable LayoutAnimation for Android
-if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const API_URL = "https://api.godemo.in/FundCollect/api/fund/getAll/my/groups";
-const TOKEN =
-  "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDAyOTkxLCJleHAiOjE3NTgwODkzOTF9.mMRPsULcvdfdCrJJBDjnT2okE3dJsTn42JBqi_vP0Xk";
-
-const GroupCard = ({ item }: { item: any }) => {
-  const [expanded, setExpanded] = useState(false);
-  const toggleExpand = () => {
-    LayoutAnimation.easeInEaseOut();
-    setExpanded(!expanded);
-  };
-  const initial = item.groupName ? item.groupName.charAt(0).toUpperCase() : "?";
-  return (
-    <View style={styles.groupCard}>
-      <View style={styles.groupLeft}>
-        <View style={styles.groupAvatar}>
-          <Text style={styles.avatarText}>{initial}</Text>
-        </View>
-        <View style={{ flex: 1 }}>
-          <Text style={styles.groupName}>{item.groupName}</Text>
-          <Text style={styles.groupDescription}>{item.description}</Text>
-          <Text style={styles.groupMeta}>
-            {item.visibility} • {item.cycleType}
-          </Text>
-        </View>
-        <TouchableOpacity onPress={toggleExpand}>
-          <Ionicons
-            name={expanded ? "chevron-up-outline" : "chevron-forward-outline"}
-            size={22}
-            color={colors.textLight}
-          />
-        </TouchableOpacity>
-      </View>
-
-      {expanded && (
-        <View style={styles.detailsBox}>
-          {Object.entries(item).map(([key, value]) => (
-            <Text key={key} style={styles.detailText}>
-              <Text style={{ fontWeight: "600" }}>{key}:</Text>{" "}
-              {Array.isArray(value) ? value.join("-") : String(value)}
-            </Text>
-          ))}
-        </View>
-      )}
-    </View>
-  );
-};
-
-// ✅ Group List with Search
-const GroupList = () => {
-  const [groups, setGroups] = useState<any[]>([]);
-  const [filteredGroups, setFilteredGroups] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState("");
-
-  useEffect(() => {
-    const fetchGroups = async () => {
-      try {
-        const res = await fetch(API_URL, {
-          headers: { Accept: "*/*", Authorization: TOKEN },
-        });
-        const data = await res.json();
-        setGroups(data.data || []);
-        setFilteredGroups(data.data || []);
-      } catch (e) {
-        console.error("API error", e);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchGroups();
-  }, []);
-
-  useEffect(() => {
-    if (search.trim() === "") {
-      setFilteredGroups(groups);
-    } else {
-      setFilteredGroups(
-        groups.filter((g) =>
-          g.groupName.toLowerCase().includes(search.toLowerCase())
-        )
-      );
-    }
-  }, [search, groups]);
-
-  if (loading) return <ActivityIndicator size="large" color={colors.primary} />;
-
-  return (
-    <>
-      <View style={styles.searchContainer}>
-        <Ionicons name="search" size={20} color={colors.textLight} />
-        <TextInput
-          placeholder="Search groups..."
-          placeholderTextColor={colors.textLight}
-          style={styles.searchInput}
-          value={search}
-          onChangeText={setSearch}
-        />
-      </View>
-
-      <FlatList
-        data={filteredGroups}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => <GroupCard item={item} />}
-        ListEmptyComponent={
-          <Text style={styles.emptyText}>No groups found</Text>
-        }
-      />
-    </>
-  );
-};
 
 // ✅ Tab Layout
 const GroupsTabs = () => {
@@ -139,71 +18,61 @@ const GroupsTabs = () => {
     switch (activeTab) {
       case "MyGroups":
         return <GroupList />;
-      case "Create":
-        return (
-          <View style={styles.centered}>
-            <Text style={styles.sectionTitle}>Create Group Screen</Text>
-          </View>
-        );
-      case "History":
-        return (
-          <View style={styles.centered}>
-            <Text style={styles.sectionTitle}>History Screen</Text>
-          </View>
-        );
+      case "Requests":
+        return <RequestList />;
       default:
         return null;
     }
   };
 
   return (
-    <AppView barStyle="dark-content">
-      <View style={styles.container}>
-        {/* Tabs */}
-        <View style={styles.tabs}>
-          {["MyGroups", "Create", "History"].map((tab) => (
-            <TouchableOpacity
-              key={tab}
-              style={[
-                styles.tabButton,
-                activeTab === tab && styles.activeTabButton,
-              ]}
-              onPress={() => setActiveTab(tab)}
-            >
-              <Text
-                style={[
-                  styles.tabText,
-                  activeTab === tab && styles.activeTabText,
-                ]}
-              >
-                {tab === "MyGroups" ? "My Groups" : tab}
-              </Text>
-            </TouchableOpacity>
-          ))}
-        </View>
+    <>
 
-        {/* Content */}
-        {renderContent()}
+      {/* Tabs */}
+      <View style={styles.tabs}>
+        {["MyGroups", "Requests"].map((tab) => (
+          <TouchableOpacity
+            key={tab}
+            style={[
+              styles.tabButton,
+              activeTab === tab && styles.activeTabButton,
+            ]}
+            onPress={() => setActiveTab(tab)}
+          >
+            <Text
+              style={[
+                styles.tabText,
+                activeTab === tab && styles.activeTabText,
+              ]}
+            >
+              {tab === "MyGroups" ? "My Groups" : tab}
+            </Text>
+          </TouchableOpacity>
+        ))}
       </View>
-    </AppView>
+
+      {/* Content */}
+      {renderContent()}
+
+    </>
   );
 };
 
 export default GroupsTabs;
 
 const styles = StyleSheet.create({
-  container: { },
+
   tabs: {
     flexDirection: "row",
     justifyContent: "space-around",
-    // marginVertical: 10,
+    marginVertical: 10,
     borderBottomWidth: 1,
     borderBottomColor: "#ddd",
   },
   tabButton: { paddingVertical: 10, flex: 1, alignItems: "center" },
   tabText: { fontSize: 16, color: colors.textLight },
-  activeTabButton: { borderBottomWidth: 2, borderBottomColor: colors.primary },
-  activeTabText: { color: colors.primary, fontWeight: "600" },
+  activeTabButton: { borderBottomWidth: 2, borderBottomColor: colors.Home },
+  activeTabText: { color: colors.Home, fontWeight: "600" },
 
   searchContainer: {
     flexDirection: "row",
@@ -235,15 +104,15 @@ const styles = StyleSheet.create({
     width: 50,
     height: 50,
     borderRadius: 25,
-    backgroundColor: colors.primary + "33",
+    backgroundColor: colors.Home + "33",
     justifyContent: "center",
     alignItems: "center",
     marginRight: 12,
   },
-  avatarText: { fontSize: 18, fontWeight: "700", color: colors.primary },
+  avatarText: { fontSize: 18, fontWeight: "700", color: colors.Home },
   groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
   groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
-  groupMeta: { fontSize: 12, color: colors.primary, marginTop: 2 },
+  groupMeta: { fontSize: 12, color: colors.Home, marginTop: 2 },
   detailsBox: {
     marginTop: 10,
     padding: 10,