Requeste api implelented

src/screens/home/GroupList.tsx

@@ -2,42 +2,38 @@ import React, { useState, useEffect } from "react";
 import {
   View,
   Text,
-  TextInput,
   StyleSheet,
+  TouchableOpacity,
+  TextInput,
   FlatList,
   ActivityIndicator,
-  TouchableOpacity,
   LayoutAnimation,
   UIManager,
   Platform,
+  Alert,
 } from "react-native";
-import Ionicons from "react-native-vector-icons/Ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
 import colors from "../../components/colors";
+import * as keychain from "react-native-keychain";
+import { BASE_URL } from "../../utils/ApiUrls";
 
-// ✅ Enable LayoutAnimation for Android
+// 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";
 
-// ✅ Each group card with expandable details
 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.groupHeader}>
-        <View style={styles.avatar}>
+      <View style={styles.groupLeft}>
+        <View style={styles.groupAvatar}>
           <Text style={styles.avatarText}>{initial}</Text>
         </View>
         <View style={{ flex: 1 }}>
@@ -57,11 +53,11 @@ const GroupCard = ({ item }: { item: any }) => {
       </View>
 
       {expanded && (
-        <View style={styles.groupDetails}>
+        <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)}
+              {Array.isArray(value) ? value.join("-") : String(value)}
             </Text>
           ))}
         </View>
@@ -70,7 +66,7 @@ const GroupCard = ({ item }: { item: any }) => {
   );
 };
 
-// ✅ Group list with search
+// ✅ Group List with Search
 const GroupList = () => {
   const [groups, setGroups] = useState<any[]>([]);
   const [filteredGroups, setFilteredGroups] = useState<any[]>([]);
@@ -79,10 +75,17 @@ const GroupList = () => {
 
   useEffect(() => {
     const fetchGroups = async () => {
+      const credentials = await keychain.getGenericPassword();
+      if (!credentials) {
+        Alert.alert("Error", "You are not logged in");
+        return;
+      }
+      const token = credentials.password;
       try {
-        const res = await fetch(API_URL, {
-          headers: { Accept: "*/*", Authorization: TOKEN },
+        const res = await fetch(`${BASE_URL}fund/getAll/my/groups`, {
+          headers: { Accept: "*/*", Authorization: `Bearer ${token}` },
         });
+        console.log("my groups response", res);
         const data = await res.json();
         setGroups(data.data || []);
         setFilteredGroups(data.data || []);
@@ -107,19 +110,10 @@ const GroupList = () => {
     }
   }, [search, groups]);
 
-  if (loading) {
-    return (
-      <ActivityIndicator
-        size="large"
-        color={colors.primary}
-        style={{ marginTop: 20 }}
-      />
-    );
-  }
+  if (loading) return <ActivityIndicator size="large" color={colors.Home} />;
 
   return (
-    <View style={{ flex: 1 }}>
-      {/* Search bar */}
+    <>
       <View style={styles.searchContainer}>
         <Ionicons name="search" size={20} color={colors.textLight} />
         <TextInput
@@ -131,7 +125,6 @@ const GroupList = () => {
         />
       </View>
 
-      {/* Group list */}
       <FlatList
         data={filteredGroups}
         keyExtractor={(item) => item.id}
@@ -139,22 +132,21 @@ const GroupList = () => {
         ListEmptyComponent={
           <Text style={styles.emptyText}>No groups found</Text>
         }
-        contentContainerStyle={{ paddingBottom: 20 }}
       />
-    </View>
+    </>
   );
 };
 
 export default GroupList;
-
 const styles = StyleSheet.create({
+
   searchContainer: {
     flexDirection: "row",
     alignItems: "center",
     backgroundColor: colors.white,
     borderRadius: 12,
     paddingHorizontal: 12,
-    margin: 10,
+    marginVertical: 10,
     height: 45,
     shadowColor: "#000",
     shadowOpacity: 0.05,
@@ -167,40 +159,34 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
     padding: 14,
     borderRadius: 14,
-    marginHorizontal: 10,
     marginBottom: 12,
     shadowColor: "#000",
     shadowOpacity: 0.05,
     shadowRadius: 4,
     elevation: 2,
   },
-  groupHeader: { flexDirection: "row", alignItems: "center" },
-  avatar: {
+  groupLeft: { flexDirection: "row", alignItems: "center" },
+  groupAvatar: {
     width: 50,
     height: 50,
     borderRadius: 25,
-    backgroundColor: colors.primary + "33",
+    backgroundColor: colors.pastelPink,
     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 },
-
-  groupDetails: {
+  groupMeta: { fontSize: 12, color: colors.Home, marginTop: 2 },
+  detailsBox: {
     marginTop: 10,
     padding: 10,
     borderRadius: 8,
     backgroundColor: "#f9f9f9",
   },
   detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
-
-  emptyText: {
-    textAlign: "center",
-    color: colors.textLight,
-    marginTop: 20,
-    fontSize: 14,
-  },
-});
+  emptyText: { textAlign: "center", color: colors.textLight, marginTop: 20 },
+  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
+  sectionTitle: { fontSize: 18, fontWeight: "600", color: colors.textDark },
+});