api integration for joined user

src/screens/home/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import {
   StyleSheet,
   Text,
@@ -13,27 +13,77 @@ import UserProfileStatus from "./UserProfileStatus";
 import colors from "../../components/colors";
 import GroupsTabs from "./GroupsTabs";
 import { useSelector } from "react-redux";
-import { useNavigation } from "@react-navigation/native";
+import { useFocusEffect, useNavigation, useRoute } from "@react-navigation/native";
 import UserHome from "./user-home/UserHome";
+import { PROFILE_URL } from "../../utils/ApiUrls";
+import *as Keychain from "react-native-keychain"
 // Enable animation for Android
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
+
+type UserProfile = {
+  id: string;
+  userId: number;
+  firstName: string | null;
+  lastName: string | null;
+  imageBlob: string | null;
+  role?: string;
+}
 const Home = () => {
   const user = useSelector((state: any) => state.user);
   const navigation = useNavigation();
-  console.log("redux user data in Home:", user);
+  const route = useRoute();
+
+  console.log("route asf : ", route?.params)
+  const [apiUser, setApiUser] = useState<UserProfile | null | any>(null)
+
+  const fetchUserProfile = async () => {
+    try {
+      const credentials = await Keychain.getGenericPassword();
+      if (!credentials) {
+        return;
+      }
+      const token = credentials.password;
+      const response = await fetch(
+        PROFILE_URL,
+        {
+          method: "GET",
+          headers: {
+            Accept: "*/*",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      const result = await response.json();
+      console.log("👤 Profile Response:", result);
+      if (result.status === "success") {
+        setApiUser(result.data);
+
+      }
+    } catch (error) {
+      console.error("❌ Error fetching profile:", error);
+    }
+  };
+
+  useEffect(() => {
+    if (route.params) {
+      fetchUserProfile(); 
+    }
+  }, [route.params]);
+
   return (
     <AppView barStyle="dark-content" style={styles.container}>
       {/* Header */}
       <View style={styles.header}>
-        <Text style={styles.greeting}>Hello, {user.firstName} {user.lastName}👋</Text>
+        <Text style={styles.greeting}>Hello, {user.firstName || apiUser?.firstName} {user.lastName || apiUser?.lastName}👋</Text>
         <TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
-         
+
           <Image
             source={
               user.imageBlob
-              && { uri: user.imageBlob ? `data:image/jpeg;base64,${user.imageBlob}` : user.profilePicture }
+              && { uri: user.imageBlob || apiUser?.imageBlob ? `data:image/jpeg;base64,${user.imageBlob || apiUser?.imageBlob}` : user.profilePicture || apiUser?.imageBlob }
             }
             style={{ width: 40, height: 40, borderRadius: 20, borderColor: colors.primary, borderWidth: 2 }}
           />
@@ -41,8 +91,8 @@ const Home = () => {
       </View>
       {/* Status */}
       <UserProfileStatus />
-      {user?.role === "USER" ? <UserHome /> :
-      <GroupsTabs />}
+      {user?.role === "USER" || apiUser?.role === "USER" ? <UserHome /> :
+        <GroupsTabs />}
     </AppView>
   );
 };

src/screens/home/RequestList.tsx

@@ -13,6 +13,7 @@ import {
 import { Ionicons } from '@react-native-vector-icons/ionicons';
 import colors from '../../components/colors';
 import DeclineModal from './DeclineModal';
+import * as keychain from 'react-native-keychain'
 
 // Define TypeScript interfaces
 interface GroupRequest {
@@ -40,11 +41,18 @@ const RequestList: React.FC = () => {
     const [error, setError] = useState<string | null>(null);
     const [searchQuery, setSearchQuery] = useState<string>('');
     const [processingRequest, setProcessingRequest] = useState<string | null>(null);
-    const [showDeclineModal, setShowDeclineModal] = useState<{modal: boolean, requestId: string | null}>({modal: false, requestId: null});
+    const [showDeclineModal, setShowDeclineModal] = useState<{ modal: boolean, requestId: string | null }>({ modal: false, requestId: null });
     const [selectedRequestId, setSelectedRequestId] = useState<string | null>(null);
 
     // Fetch data from API
     const fetchRequests = async (): Promise<void> => {
+
+        const credentials = await keychain.getGenericPassword();
+        if (!credentials) {
+            Alert.alert("Error", "You are not logged in");
+            return;
+        }
+        const token = credentials.password;
         try {
             setRefreshing(true);
             setError(null);
@@ -55,7 +63,7 @@ const RequestList: React.FC = () => {
                     method: "GET",
                     headers: {
                         accept: "*/*",
-                        Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDkxMjEzLCJleHAiOjE3NTgxNzc2MTN9.T3BvU7nl8fnjwwVobIWRmSFFxQzOjtyIct1Ba0i9lIU"
+                        Authorization: `Bearer ${token}`
                     }
                 }
             );
@@ -156,7 +164,7 @@ const RequestList: React.FC = () => {
     };
 
     const handleDeclineConfirm = async (requestedId: string | null, reason: string) => {
-        setShowDeclineModal({modal: false, requestId: null});
+        setShowDeclineModal({ modal: false, requestId: null });
         try {
             setProcessingRequest(requestedId);
 
@@ -197,7 +205,7 @@ const RequestList: React.FC = () => {
         }// call your API
     };
 
-   
+
 
     const onRefresh = (): void => {
         fetchRequests();
@@ -332,7 +340,7 @@ const RequestList: React.FC = () => {
                             <View style={styles.actions}>
                                 <TouchableOpacity
                                     style={[styles.button, styles.declineButton]}
-                                    onPress={() => setShowDeclineModal({modal:true, requestId: request.requestId})}
+                                    onPress={() => setShowDeclineModal({ modal: true, requestId: request.requestId })}
                                     disabled={processingRequest === request.requestId}
                                 >
                                     {processingRequest === request.requestId ? (
@@ -361,7 +369,7 @@ const RequestList: React.FC = () => {
             {showDeclineModal.modal && (
                 <DeclineModal
                     visible={showDeclineModal.modal}
-                    onClose={() => setShowDeclineModal({modal: false, requestId: null})}
+                    onClose={() => setShowDeclineModal({ modal: false, requestId: null })}
                     onSubmit={(reason) => handleDeclineConfirm(showDeclineModal.requestId, reason)}
                 />
             )}

src/screens/home/UserProfileStatus.tsx

@@ -10,7 +10,7 @@ import {
 } from "react-native";
 import * as Keychain from "react-native-keychain";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
-import { BASE_URL, PUT_USER_STATUS } from "../../utils/ApiUrls";
+import {  PUT_USER_STATUS } from "../../utils/ApiUrls";
 import colors from "../../components/colors";
 
 export type ApiResponse = {

src/screens/home/user-home/GroupDetails.tsx

@@ -11,6 +11,7 @@ import { useRoute } from "@react-navigation/native";
 import AppView from "../../../components/AppView";
 import colors from "../../../components/colors";
 import Ionicons from "@react-native-vector-icons/ionicons";
+import Header from "../../../components/common/Header";
 
 const GroupDetails = () => {
     const route = useRoute();
@@ -88,7 +89,8 @@ const GroupDetails = () => {
     return (
         <AppView>
             {/* Group Title */}
-            <Text style={styles.groupName}>{group.name}</Text>
+            <Header title={group.name}/>
+            {/* <Text style={styles.groupName}>{group.name}</Text> */}
             <Text style={styles.description}>{group.description}</Text>
 
             {/* Progress Bar */}

src/screens/home/user-home/UserHome.tsx

@@ -1,65 +1,108 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
     StyleSheet,
     Text,
     View,
     FlatList,
     TouchableOpacity,
+    Alert,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import type { RootStackParamList } from "../../../navigation/AppNavigator"; // adjust path
+import type { RootStackParamList } from "../../../navigation/AppNavigator";
 import colors from "../../../components/colors";
-import Ionicons from "@react-native-vector-icons/ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import { GET_JOINED_GROUP_URL } from "../../../utils/ApiUrls";
+import * as Keychain from "react-native-keychain";
 
-type NavigationProp = NativeStackNavigationProp<RootStackParamList, "GroupDetails">;
+type NavigationProp = NativeStackNavigationProp<
+    RootStackParamList,
+    "GroupDetails"
+>;
 
 type Group = {
     id: string;
-    name: string;
-    members: number;
-    collected: number;
-    goal: number;
+    groupName: string;
+    description: string;
+    currentParticipants: number;
+    maxParticipants: number;
+    contributionAmount: number;
+    status: string;
 };
 
-const groups: Group[] = [
-    { id: "1", name: "Wedding Fund", members: 25, collected: 12000, goal: 20000 },
-    { id: "2", name: "Birthday Gift", members: 10, collected: 4500, goal: 6000 },
-    { id: "3", name: "Community Event", members: 50, collected: 22000, goal: 30000 },
-];
-
 const UserHome = () => {
     const navigation = useNavigation<NavigationProp>();
+    const [groups, setGroups] = useState<Group[]>([]);
+    const [loading, setLoading] = useState<boolean>(false)
 
     const totalGroups = groups.length;
-    const totalCollected = groups.reduce((sum, g) => sum + g.collected, 0);
+    const totalContribution = groups.reduce(
+        (sum, g) => sum + g.contributionAmount,
+        0
+    );
+
+    const handleGroup = async () => {
+        try {
+            setLoading(true)
+            const credentials = await Keychain.getGenericPassword();
+            if (!credentials) {
+                Alert.alert("Error", "You are not logged in");
+                return;
+            }
+            const token = credentials.password;
+
+            const response = await fetch(GET_JOINED_GROUP_URL, {
+                method: "GET",
+                headers: {
+                    Accept: "*/*",
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+
+            const result = await response.json();
+            if (result.status === "success") {
+                console.log("GET_JOINED_GROUP_URL res : ", result);
+                setGroups(result.data); // save API data
+                setLoading(false)
+            } else {
+                Alert.alert("Error", "Failed to fetch groups");
+            }
+        } catch (error) {
+            console.error("❌ Error fetching groups:", error);
+            Alert.alert("Error", "Could not connect to server");
+        }finally{
+            setLoading(false)
+        }
+    };
+
+    useEffect(() => {
+        handleGroup();
+    }, []);
 
     const renderItem = ({ item }: { item: Group }) => {
-        const progress = Math.min(item.collected / item.goal, 1) * 100;
-
         return (
             <TouchableOpacity
                 style={styles.card}
                 onPress={() => navigation.navigate("GroupDetails", { groupId: item.id })}
             >
-                <Text style={styles.groupName}>{item.name}</Text>
+                <Text style={styles.groupName}>{item.groupName}</Text>
+                <Text style={styles.description}>{item.description}</Text>
+
                 <View style={styles.statsRow}>
                     <Ionicons
                         name="person-circle-outline"
                         size={20}
                         color={colors.primary}
                     />
-                    <Text style={styles.detail}> {item.members} members</Text>
-                </View>
-
-                {/* Progress Bar */}
-                <View style={styles.progressBar}>
-                    <View style={[styles.progressFill, { width: `${progress}%` }]} />
+                    <Text style={styles.detail}>
+                        {item.currentParticipants}/{item.maxParticipants} members
+                    </Text>
                 </View>
 
                 <Text style={styles.amount}>
-                    ₹{item.collected} / ₹{item.goal}
+                    Contribution: ₹{item.contributionAmount}
                 </Text>
+                <Text style={styles.status}>Status: {item.status}</Text>
             </TouchableOpacity>
         );
     };
@@ -67,14 +110,14 @@ const UserHome = () => {
     return (
         <View>
             {/* Stats */}
-            <View style={[styles.statsRow, { marginVertical: 24, }]}>
+            <View style={[styles.statsRow, { marginVertical: 24 }]}>
                 <View style={styles.statBox}>
                     <Text style={styles.statValue}>{totalGroups}</Text>
                     <Text style={styles.statLabel}>Groups Joined</Text>
                 </View>
                 <View style={styles.statBox}>
-                    <Text style={styles.statValue}>₹{totalCollected}</Text>
-                    <Text style={styles.statLabel}>Total Contributed</Text>
+                    <Text style={styles.statValue}>₹{totalContribution}</Text>
+                    <Text style={styles.statLabel}>Total Contribution</Text>
                 </View>
             </View>
 
@@ -93,16 +136,13 @@ const UserHome = () => {
 export default UserHome;
 
 const styles = StyleSheet.create({
-
-
     statsRow: {
         flexDirection: "row",
-        gap: 10
+        gap: 10,
     },
     statBox: {
         flex: 1,
         backgroundColor: "#fff",
-        // marginHorizontal: 6,
         padding: 16,
         borderRadius: 12,
         alignItems: "center",
@@ -143,26 +183,27 @@ const styles = StyleSheet.create({
         fontSize: 16,
         fontWeight: "600",
         color: colors.Home,
-        marginBottom: 6,
+        marginBottom: 4,
+    },
+    description: {
+        fontSize: 13,
+        color: "#475569",
+        marginBottom: 8,
     },
     detail: {
         fontSize: 13,
         color: "#475569",
         marginBottom: 8,
     },
-    progressBar: {
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: "#e2e8f0",
-        marginBottom: 6,
-        overflow: "hidden",
-    },
-    progressFill: {
-        backgroundColor: colors.primary,
-        height: "100%",
-    },
     amount: {
         fontSize: 13,
         color: "#64748b",
+        marginTop: 4,
+    },
+    status: {
+        fontSize: 12,
+        fontWeight: "500",
+        color: colors.primary,
+        marginTop: 2,
     },
 });