737 lines
21 KiB
TypeScript
737 lines
21 KiB
TypeScript
import React, { useState, useEffect, useCallback } from "react";
|
|
import {
|
|
StyleSheet,
|
|
View,
|
|
Text,
|
|
ScrollView,
|
|
Image,
|
|
TouchableOpacity,
|
|
Alert,
|
|
ActivityIndicator,
|
|
StatusBar,
|
|
TextInput,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
} from "react-native";
|
|
import * as Keychain from "react-native-keychain";
|
|
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
|
import { launchImageLibrary } from "react-native-image-picker";
|
|
import { CustomButton, CustomInput } from "../../components/common/Custom";
|
|
import colors from "../../components/colors";
|
|
import SwitchNavigator from "./SwitchNavigator";
|
|
import { useFocusEffect, useNavigation } from "@react-navigation/native";
|
|
import { ApiResponse } from "../home/UserProfileStatus";
|
|
import { BASE_URL } from "../../utils/ApiUrls";
|
|
import AppView from "../../components/AppView";
|
|
import { useSelector } from "react-redux";
|
|
|
|
|
|
|
|
type UserProfile = {
|
|
id: string;
|
|
userId: number;
|
|
firstName: string | null;
|
|
lastName: string | null;
|
|
mobile: string | null;
|
|
gender: string | null;
|
|
email: string | null;
|
|
username: string | null;
|
|
address: string | null;
|
|
bankName: string | null;
|
|
branchCode: string | null;
|
|
filePath: string | null;
|
|
bankAccountNumber: string | null;
|
|
imageBlob: string | null;
|
|
organizerStatus?: string;
|
|
role?: string;
|
|
};
|
|
|
|
const Profile = () => {
|
|
const navigation = useNavigation<any>();
|
|
const user1 = useSelector((state: any) => state.user);
|
|
const [user, setUser] = useState<UserProfile | null>(null);
|
|
const [fetching, setFetching] = useState(true);
|
|
const [editing, setEditing] = useState(false);
|
|
const [imageUpdating, setImageUpdating] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [statusData, setStatusData] = useState<null | { profileStatus: boolean; organizerStatus: string; role: string }>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const fetchUserProfile = async () => {
|
|
try {
|
|
const credentials = await Keychain.getGenericPassword();
|
|
if (!credentials) {
|
|
Alert.alert("Error", "You are not logged in");
|
|
return;
|
|
}
|
|
const token = credentials.password;
|
|
|
|
setFetching(true);
|
|
const response = await fetch(
|
|
`${BASE_URL}user/profile/view`,
|
|
{
|
|
method: "GET",
|
|
headers: {
|
|
Accept: "*/*",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
|
|
const result = await response.json();
|
|
console.log("👤 Profile Response:", result);
|
|
if (result.status === "success") {
|
|
setUser(result.data);
|
|
} else {
|
|
Alert.alert("Error", "Failed to fetch user profile");
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ Error fetching profile:", error);
|
|
Alert.alert("Error", "Could not connect to server");
|
|
} finally {
|
|
setFetching(false);
|
|
}
|
|
};
|
|
|
|
const updateProfile = async () => {
|
|
try {
|
|
const credentials = await Keychain.getGenericPassword();
|
|
if (!credentials) {
|
|
Alert.alert("Error", "You are not logged in");
|
|
return;
|
|
}
|
|
const token = credentials.password;
|
|
|
|
const response = await fetch(
|
|
`${BASE_URL}user/profile/update`,
|
|
{
|
|
method: "PUT",
|
|
headers: {
|
|
Accept: "*/*",
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({
|
|
address: user?.address || null,
|
|
email: user?.email || null,
|
|
firstName: user?.firstName || null,
|
|
gender: user?.gender || null,
|
|
lastName: user?.lastName || null,
|
|
username: user?.username || null,
|
|
}),
|
|
}
|
|
);
|
|
|
|
const result = await response.json();
|
|
if (result.status === "success") {
|
|
Alert.alert("Success", "Profile updated successfully");
|
|
setEditing(false);
|
|
fetchUserProfile(); // reload updated data
|
|
} else {
|
|
Alert.alert("Error", "Failed to update profile");
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ Error updating profile:", error);
|
|
Alert.alert("Error", "Could not update profile");
|
|
}
|
|
};
|
|
|
|
const pickImage = () => {
|
|
launchImageLibrary({ mediaType: "photo", quality: 0.5 }, (response) => {
|
|
if (response.didCancel) return;
|
|
if (response.errorCode) {
|
|
Alert.alert("Error", response.errorMessage || "Something went wrong");
|
|
} else if (response.assets && response.assets.length > 0) {
|
|
const selectedImage = response.assets[0];
|
|
setUser((prev) =>
|
|
prev ? { ...prev, filePath: selectedImage.uri ?? null } : prev
|
|
);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleUpdateImage = async () => {
|
|
try {
|
|
const credentials = await Keychain.getGenericPassword();
|
|
if (!credentials) {
|
|
Alert.alert("Error", "You are not logged in");
|
|
return;
|
|
}
|
|
const token = credentials.password;
|
|
|
|
if (!user?.filePath) {
|
|
Alert.alert("Error", "Please select an image first");
|
|
return;
|
|
}
|
|
|
|
setImageUpdating(true);
|
|
|
|
const formData = new FormData();
|
|
formData.append("file", {
|
|
uri: user.filePath,
|
|
type: "image/jpeg",
|
|
name: "profile.jpg",
|
|
} as any);
|
|
|
|
const response = await fetch(
|
|
`${BASE_URL}user/update/userImg`,
|
|
{
|
|
method: "PUT",
|
|
headers: {
|
|
Accept: "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: formData,
|
|
}
|
|
);
|
|
|
|
const result = await response.json();
|
|
if (result.status === "success") {
|
|
Alert.alert("Success", "Profile image updated successfully");
|
|
|
|
// If API returns updated image, set it
|
|
if (result.data?.imageBlob) {
|
|
setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
|
|
} else {
|
|
// Otherwise, keep the local filePath until next fetch
|
|
setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
|
|
}
|
|
|
|
// Refresh profile from API as well
|
|
fetchUserProfile();
|
|
} else {
|
|
Alert.alert("Error", result.message || "Failed to update profile image");
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ Error updating profile image:", error);
|
|
Alert.alert("Error", "Could not update profile image");
|
|
} finally {
|
|
setImageUpdating(false);
|
|
}
|
|
};
|
|
|
|
const userStatus = async () => {
|
|
try {
|
|
const credentials = await Keychain.getGenericPassword();
|
|
if (!credentials) {
|
|
Alert.alert("Error", "You are not logged in");
|
|
return;
|
|
}
|
|
const token = credentials.password;
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
const response = await fetch(`${BASE_URL}user/profile/status`, {
|
|
method: "GET",
|
|
headers: {
|
|
Accept: "*/*",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
const json: ApiResponse = await response.json();
|
|
|
|
console.log("👤 Profile Status Response:", json);
|
|
if (json.status === "success") {
|
|
setStatusData(json.data);
|
|
console.log("statusData response :", json);
|
|
|
|
} else {
|
|
setError(json.message || "Failed to fetch status");
|
|
}
|
|
} catch (err) {
|
|
setError("Something went wrong. Please try again.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const logout = async (navigation: any) => {
|
|
try {
|
|
const credentials = await Keychain.getGenericPassword();
|
|
|
|
if (!credentials) {
|
|
Alert.alert("Info", "No user is currently logged in");
|
|
return;
|
|
}
|
|
|
|
// Clear stored credentials
|
|
await Keychain.resetGenericPassword();
|
|
Alert.alert("Success", "You have been logged out");
|
|
navigation.replace("Login");
|
|
} catch (error) {
|
|
console.error("Logout error:", error);
|
|
Alert.alert("Error", "Failed to log out. Please try again.");
|
|
}
|
|
};
|
|
|
|
const confirmLogout = (navigation: any) => {
|
|
Alert.alert(
|
|
"Logout",
|
|
"Are you sure you want to log out?",
|
|
[
|
|
{ text: "Cancel", style: "cancel" },
|
|
{ text: "Yes, Logout", style: "destructive", onPress: () => logout(navigation) },
|
|
]
|
|
);
|
|
};
|
|
|
|
console.log("statusData?.role :", statusData?.role);
|
|
console.log("statusData?.organizerStatus :", statusData?.organizerStatus);
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
userStatus();
|
|
}, [])
|
|
);
|
|
|
|
useEffect(() => {
|
|
userStatus();
|
|
fetchUserProfile();
|
|
}, []);
|
|
|
|
console.log("user image :", user?.filePath);
|
|
const getProfileImage = () => {
|
|
if (user?.imageBlob) {
|
|
return `data:image/jpeg;base64,${user.imageBlob}`;
|
|
}
|
|
if (user?.filePath) {
|
|
return user.filePath;
|
|
}
|
|
return "https://randomuser.me/api/portraits/men/1.jpg";
|
|
};
|
|
|
|
|
|
if (fetching || !user) {
|
|
return (
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color={colors.pastelBlue} />
|
|
<Text style={styles.loadingText}>Loading profile...</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AppView>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerTitle}>User Profile</Text>
|
|
<TouchableOpacity onPress={() => confirmLogout(navigation)} style={styles.refreshButton}>
|
|
<Ionicons name="refresh" size={24} color={'#000'} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<KeyboardAvoidingView
|
|
// style={{ flex: 1 }}
|
|
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
|
>
|
|
<ScrollView
|
|
contentContainerStyle={{ flexGrow: 1 }}
|
|
keyboardShouldPersistTaps="handled"
|
|
>
|
|
|
|
{/* Profile Card */}
|
|
<View style={styles.profileCard}>
|
|
{/* Profile Image Section */}
|
|
{
|
|
statusData?.role === "USER" && statusData?.organizerStatus !== "NOT_APPLIED" ? (
|
|
<Text
|
|
style={{
|
|
color: "#64748b",
|
|
marginBottom: 16,
|
|
textAlign: "center",
|
|
fontSize: 18,
|
|
}}
|
|
>
|
|
Your Role: {statusData.role} | Organizer Status: {statusData.organizerStatus}
|
|
</Text>
|
|
) : (
|
|
statusData?.role !== "ORGANIZER" && (
|
|
<SwitchNavigator
|
|
role={statusData?.role || ""}
|
|
status={statusData?.organizerStatus || ""}
|
|
/>
|
|
)
|
|
)
|
|
}
|
|
|
|
<View style={styles.profileImageSection}>
|
|
<View style={styles.avatarContainer}>
|
|
<Image
|
|
source={{ uri: getProfileImage() }}
|
|
style={styles.avatar}
|
|
onError={() => console.log("Error loading image")}
|
|
/>
|
|
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
|
|
<Ionicons name="camera" size={18} color="#000" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<CustomButton
|
|
title={imageUpdating ? "Updating..." : "Update Image"}
|
|
onPress={handleUpdateImage}
|
|
icon={imageUpdating ? undefined : "cloud-upload"}
|
|
style={styles.updateImageButton}
|
|
buttonBackground={colors.pastelBlue}
|
|
|
|
/>
|
|
</View>
|
|
|
|
{!editing ? (
|
|
<>
|
|
{/* Profile Details */}
|
|
<View style={styles.detailsSection}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
<View>
|
|
<Text style={styles.sectionTitle}>Personal Information</Text>
|
|
<Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
|
|
{/* <View style={{ marginBottom: 16 }}>
|
|
|
|
|
|
</View> */}
|
|
</View>
|
|
<View>
|
|
<CustomButton
|
|
title="Edit Profile"
|
|
onPress={() => setEditing(true)}
|
|
icon="create"
|
|
style={styles.editButton}
|
|
buttonBackground={colors.pastelBlue}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View style={styles.detailRow}>
|
|
<Ionicons name="person" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
|
<View>
|
|
<Text style={styles.detailLabel}>Name</Text>
|
|
<Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.detailRow}>
|
|
<Ionicons name="mail" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
|
<View>
|
|
<Text style={styles.detailLabel}>Email</Text>
|
|
<Text style={styles.detailText}>{user.email || "Not provided"}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.detailRow}>
|
|
<Ionicons name="call" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
|
<View>
|
|
<Text style={styles.detailLabel}>Mobile</Text>
|
|
<Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.detailRow}>
|
|
<Ionicons name="at-circle" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
|
<View>
|
|
<Text style={styles.detailLabel}>Username</Text>
|
|
<Text style={styles.detailText}>{user.username}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.detailRow}>
|
|
<Ionicons name="location" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
|
<View>
|
|
<Text style={styles.detailLabel}>Address</Text>
|
|
<Text style={styles.detailText}>{user.address || "Not provided"}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.detailRow}>
|
|
<Ionicons name="male-female" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
|
<View>
|
|
<Text style={styles.detailLabel}>Gender</Text>
|
|
<Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.detailRow}>
|
|
<Ionicons name="key" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
|
<View>
|
|
<Text style={styles.detailLabel}>Role</Text>
|
|
<Text style={styles.detailText}>{user.role || "User"}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
|
|
|
|
|
|
</View>
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* Edit Form */}
|
|
<View style={styles.editSection}>
|
|
<Text style={styles.sectionTitle}>Edit Profile</Text>
|
|
|
|
<CustomInput
|
|
label="First Name"
|
|
placeholder="Enter first name"
|
|
value={user.firstName ?? ""}
|
|
onChangeText={(text) => setUser({ ...user, firstName: text })}
|
|
icon="person"
|
|
/>
|
|
|
|
<CustomInput
|
|
label="Last Name"
|
|
placeholder="Enter last name"
|
|
value={user.lastName ?? ""}
|
|
onChangeText={(text) => setUser({ ...user, lastName: text })}
|
|
icon="person"
|
|
/>
|
|
|
|
<CustomInput
|
|
label="Email"
|
|
placeholder="Enter email"
|
|
value={user.email ?? ""}
|
|
onChangeText={(text) => setUser({ ...user, email: text })}
|
|
icon="mail"
|
|
keyboardType="email-address"
|
|
/>
|
|
|
|
<CustomInput
|
|
label="Username"
|
|
placeholder="Enter username"
|
|
value={user.username ?? ""}
|
|
onChangeText={(text) => setUser({ ...user, username: text })}
|
|
icon="at"
|
|
/>
|
|
<CustomInput
|
|
label="Address"
|
|
placeholder="Enter address"
|
|
value={user.address ?? ""}
|
|
onChangeText={(text) => setUser({ ...user, address: text })}
|
|
icon="location"
|
|
multiline
|
|
/>
|
|
<CustomInput
|
|
label="Gender"
|
|
placeholder="Enter gender"
|
|
value={user.gender ?? ""}
|
|
onChangeText={(text) => setUser({ ...user, gender: text })}
|
|
icon="male-female"
|
|
/>
|
|
|
|
<View style={styles.editButtons}>
|
|
<CustomButton
|
|
title="Save Changes"
|
|
onPress={updateProfile}
|
|
icon="save"
|
|
style={styles.saveButton}
|
|
buttonBackground={colors.pastelBlue}
|
|
/>
|
|
<CustomButton
|
|
title="Cancel"
|
|
onPress={() => setEditing(false)}
|
|
icon="close"
|
|
style={styles.cancelButton}
|
|
buttonBackground=""
|
|
/>
|
|
</View>
|
|
|
|
</View>
|
|
</>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
</AppView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
// backgroundColor: colors.pastelBlue,
|
|
paddingBottom: '30%',
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: "#f8fafc"
|
|
},
|
|
loadingText: {
|
|
marginTop: 10,
|
|
fontSize: 16,
|
|
color: "#64748b"
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: 16,
|
|
borderBottomLeftRadius: 20,
|
|
borderBottomRightRadius: 20,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 22,
|
|
fontWeight: "700",
|
|
color: "#000"
|
|
},
|
|
refreshButton: {
|
|
padding: 4,
|
|
},
|
|
|
|
profileCard: {
|
|
borderRadius: 20,
|
|
margin: 16,
|
|
// backgroundColor: "#fff",
|
|
// padding: 20,
|
|
// shadowColor: "#000",
|
|
// shadowOpacity: 0.1,
|
|
// shadowRadius: 10,
|
|
// shadowOffset: { width: 0, height: 4 },
|
|
// elevation: 5,
|
|
},
|
|
profileImageSection: {
|
|
alignItems: "center",
|
|
marginBottom: 24,
|
|
paddingBottom: 20,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "#f1f5f9",
|
|
},
|
|
avatarContainer: {
|
|
position: "relative",
|
|
marginBottom: 16,
|
|
},
|
|
avatar: {
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: 60,
|
|
borderWidth: 4,
|
|
borderColor: "#e2e8f0",
|
|
},
|
|
cameraIcon: {
|
|
position: "absolute",
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: colors.pastelBlue,
|
|
borderRadius: 20,
|
|
width: 40,
|
|
height: 40,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderWidth: 3,
|
|
borderColor: "#fff",
|
|
elevation: 2,
|
|
},
|
|
updateImageButton: {
|
|
width: "80%",
|
|
paddingHorizontal: 10,
|
|
borderRadius: 25,
|
|
},
|
|
detailsSection: {
|
|
marginBottom: "40%",
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
color: "#1e293b",
|
|
// marginBottom: 16,
|
|
paddingBottom: 8,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "#f1f5f9",
|
|
},
|
|
detailRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 16,
|
|
paddingHorizontal: 8,
|
|
},
|
|
detailIcon: {
|
|
marginRight: 12,
|
|
},
|
|
detailLabel: {
|
|
fontSize: 12,
|
|
color: "#64748b",
|
|
marginBottom: 2,
|
|
},
|
|
detailText: {
|
|
fontSize: 16,
|
|
color: "#334155",
|
|
fontWeight: "500",
|
|
},
|
|
editButton: {
|
|
paddingHorizontal: 8,
|
|
},
|
|
editSection: {
|
|
marginBottom: '40%',
|
|
flex: 1,
|
|
},
|
|
editButtons: {
|
|
gap: 12,
|
|
},
|
|
saveButton: {
|
|
marginTop: 8,
|
|
},
|
|
cancelButton: {
|
|
marginTop: 4,
|
|
borderWidth: 1,
|
|
borderColor: "#cbd5e1",
|
|
},
|
|
inputContainer: {
|
|
marginBottom: 16,
|
|
},
|
|
inputLabel: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
color: "#374151",
|
|
marginBottom: 6,
|
|
},
|
|
inputWrapper: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
position: "relative",
|
|
},
|
|
inputIcon: {
|
|
position: "absolute",
|
|
left: 12,
|
|
zIndex: 1,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: "#d1d5db",
|
|
borderRadius: 12,
|
|
padding: 12,
|
|
backgroundColor: "#fff",
|
|
color: "#1f2937",
|
|
fontSize: 16,
|
|
flex: 1,
|
|
},
|
|
inputWithIcon: {
|
|
paddingLeft: 40,
|
|
},
|
|
buttonSecondary: {
|
|
backgroundColor: "#f1f5f9",
|
|
},
|
|
buttonDanger: {
|
|
backgroundColor: "#ef4444",
|
|
},
|
|
buttonOutline: {
|
|
backgroundColor: "transparent",
|
|
borderWidth: 1,
|
|
borderColor: "#6366f1",
|
|
},
|
|
buttonText: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
buttonTextSecondary: {
|
|
color: "#334155",
|
|
},
|
|
buttonTextDanger: {
|
|
color: "#fff",
|
|
},
|
|
buttonTextOutline: {
|
|
color: "#6366f1",
|
|
},
|
|
buttonIcon: {
|
|
marginRight: 8,
|
|
},
|
|
});
|
|
|
|
export default Profile; |