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>
   );
 };