Merge branch 'feature_profile' of https://git.zeptic.in/abintoppo_lincpay/CircleCollect into feature_pending
This commit is contained in:
Jaanu423
+119
-83
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
@@ -8,88 +8,70 @@ import {
|
||||
Platform,
|
||||
Image,
|
||||
Alert,
|
||||
FlatList,
|
||||
ListRenderItem, // Import ListRenderItem for better typing
|
||||
} from "react-native";
|
||||
import AppView from "../../components/AppView";
|
||||
import UserProfileStatus from "./UserProfileStatus";
|
||||
import colors from "../../components/colors";
|
||||
import GroupsTabs from "./GroupsTabs";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RouteProp, useFocusEffect, useNavigation, useRoute } from "@react-navigation/native";
|
||||
import UserHome from "./user-home/UserHome";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { PROFILE_URL } from "../../utils/ApiUrls";
|
||||
import *as Keychain from "react-native-keychain"
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { setUserData } from "../../redux/userSlice";
|
||||
// Enable animation for Android
|
||||
import { TabNavigationProp } from "../../navigation/BottomTabs";
|
||||
|
||||
// Enable layout animation for Android
|
||||
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(true);
|
||||
}
|
||||
|
||||
type RootStackParamList = {
|
||||
Home: { refreshProfile: boolean; role: string };
|
||||
};
|
||||
|
||||
type UserProfile = {
|
||||
// --- TYPE DEFINITIONS ---
|
||||
interface ActionItem {
|
||||
id: string;
|
||||
userId: number;
|
||||
firstName: string | null;
|
||||
lastName: string | null;
|
||||
imageBlob: string | null;
|
||||
role?: string;
|
||||
title: string;
|
||||
action: string;
|
||||
tab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
|
||||
imageUri: string;
|
||||
}
|
||||
const Home = () => {
|
||||
const user = useSelector((state: any) => state.user);
|
||||
const navigation = useNavigation();
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const [apiUser, setApiUser] = useState<UserProfile | null | any>(null)
|
||||
// Data for the grid items
|
||||
const organizerActions: ActionItem[] = [
|
||||
{ id: "1", title: "My Groups", action: "NAVIGATE_MANAGEMENT", tab: "My Groups", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "2", title: "Joined Groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "3", title: "Requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", imageUri: "https://via.placeholder.com/60" },
|
||||
|
||||
];
|
||||
|
||||
const userActions: ActionItem[] = [
|
||||
{ id: "1", title: "Joined Groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "2", title: "Your Requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "3", title: "Action 3", action: "ACTION_3", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "4", title: "Action 4", action: "ACTION_4", imageUri: "https://via.placeholder.com/60" },
|
||||
];
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const user = useSelector((state: any) => state.user);
|
||||
const navigation = useNavigation<TabNavigationProp>();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// --- FIXED: Conditional logic moved inside the component ---
|
||||
const actions = user.role === 'ORGANIZER' ? organizerActions : userActions;
|
||||
|
||||
const fetchUserProfile = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
return;
|
||||
}
|
||||
if (!credentials) return;
|
||||
const token = credentials.password;
|
||||
|
||||
console.log("token : ", token)
|
||||
const response = await fetch(
|
||||
PROFILE_URL,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
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);
|
||||
dispatch(
|
||||
setUserData({
|
||||
id: result.data.id,
|
||||
userId: result.data.userId,
|
||||
username: result.data.username,
|
||||
firstName: result.data.firstName,
|
||||
lastName: result.data.lastName,
|
||||
gender: result.data.gender,
|
||||
mobile: result.data.mobile,
|
||||
email: result.data.email,
|
||||
address: result.data.address,
|
||||
bankAccountNumber: result.data.bankAccountNumber,
|
||||
bankName: result.data.bankName,
|
||||
branchCode: result.data.branchCode,
|
||||
profilePicture: result.data.filePath,
|
||||
filePath: result.data.filePath,
|
||||
imageBlob: result.data.imageBlob,
|
||||
role: result.data.role,
|
||||
organizerId: result.data.organizerId,
|
||||
organizerStatus: result.data.organizerStatus,
|
||||
profileStatus: true,
|
||||
})
|
||||
);
|
||||
// No need for apiUser state, just dispatch to Redux
|
||||
dispatch(setUserData({ ...result.data, profileStatus: true }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error fetching profile:", error);
|
||||
@@ -100,26 +82,45 @@ const Home = () => {
|
||||
fetchUserProfile();
|
||||
}, []);
|
||||
|
||||
// --- REFACTORED: Simplified action handler ---
|
||||
const handleActionPress = (item: ActionItem) => {
|
||||
if (item.action === "NAVIGATE_MANAGEMENT" && item.tab) {
|
||||
navigation.navigate('Management', { actionTab: item.tab });
|
||||
} else if (item.action === "ACTION_3") {
|
||||
Alert.alert("Action 3 pressed");
|
||||
} else if (item.action === "ACTION_4") {
|
||||
Alert.alert("Action 4 pressed");
|
||||
} else {
|
||||
Alert.alert("Unknown action", item.title);
|
||||
}
|
||||
};
|
||||
|
||||
// Render function for each grid item
|
||||
const renderGridItem: ListRenderItem<ActionItem> = ({ item }) => (
|
||||
<TouchableOpacity
|
||||
style={styles.gridButton}
|
||||
onPress={() => handleActionPress(item)}
|
||||
>
|
||||
{/* FIXED: 'imageUri' was missing from your data objects */}
|
||||
<Image source={{ uri: item.imageUri }} style={styles.gridIcon} />
|
||||
<Text style={styles.gridLabel}>{item.title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<AppView barStyle="dark-content" style={styles.container}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<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 || 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 }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Home</Text>
|
||||
</View>
|
||||
{/* Status */}
|
||||
<UserProfileStatus />
|
||||
{/* <UserHome /> */}
|
||||
{user?.role === "USER" || apiUser?.role === "USER" ? <UserHome /> :
|
||||
<GroupsTabs />}
|
||||
|
||||
<FlatList
|
||||
data={actions}
|
||||
renderItem={renderGridItem}
|
||||
keyExtractor={(item) => item.id}
|
||||
numColumns={2}
|
||||
columnWrapperStyle={styles.row}
|
||||
contentContainerStyle={{ paddingHorizontal: 8 }}
|
||||
/>
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
@@ -128,13 +129,48 @@ export default Home;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingBottom: '25%',
|
||||
flex: 1,
|
||||
backgroundColor: '#F4F6F8'
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom: 12,
|
||||
paddingVertical: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
greeting: { fontSize: 22, fontWeight: "600", color: colors.Home },
|
||||
});
|
||||
headerTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: "600",
|
||||
color: colors.Home,
|
||||
},
|
||||
row: {
|
||||
flex: 1,
|
||||
justifyContent: "space-around",
|
||||
},
|
||||
gridButton: {
|
||||
flex: 1,
|
||||
margin: 8,
|
||||
backgroundColor: "#FFFFFF",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
elevation: 4,
|
||||
},
|
||||
gridIcon: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
marginBottom: 12,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#E0E0E0',
|
||||
},
|
||||
gridLabel: {
|
||||
fontSize: 16,
|
||||
fontWeight: "500",
|
||||
color: colors.Home,
|
||||
textAlign: "center",
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user