724 lines
20 KiB
TypeScript
724 lines
20 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
StyleSheet,
|
|
View,
|
|
Text,
|
|
ScrollView,
|
|
Image,
|
|
TouchableOpacity,
|
|
Alert,
|
|
ActivityIndicator,
|
|
StatusBar,
|
|
TextInput,
|
|
} 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 { IconProps } from "react-native-elements";
|
|
import { base_URL } from "../../utils/ApiUrls";
|
|
|
|
|
|
type CustomButtonProps = {
|
|
title: string;
|
|
onPress: () => void;
|
|
type?: "primary" | "secondary" | "danger" | "outline";
|
|
icon?: React.ComponentProps<typeof Ionicons>['name'];
|
|
style?: any;
|
|
};
|
|
|
|
const CustomButton = ({
|
|
title,
|
|
onPress,
|
|
type = "primary",
|
|
icon,
|
|
style
|
|
}: CustomButtonProps) => {
|
|
const getButtonStyle = () => {
|
|
switch (type) {
|
|
case "secondary":
|
|
return [styles.button, styles.buttonSecondary];
|
|
case "danger":
|
|
return [styles.button, styles.buttonDanger];
|
|
case "outline":
|
|
return [styles.button, styles.buttonOutline];
|
|
default:
|
|
return styles.button;
|
|
}
|
|
};
|
|
|
|
const getTextStyle = () => {
|
|
switch (type) {
|
|
case "secondary":
|
|
return [styles.buttonText, styles.buttonTextSecondary];
|
|
case "danger":
|
|
return [styles.buttonText, styles.buttonTextDanger];
|
|
case "outline":
|
|
return [styles.buttonText, styles.buttonTextOutline];
|
|
default:
|
|
return styles.buttonText;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[getButtonStyle(), style]}
|
|
onPress={onPress}
|
|
activeOpacity={0.8}
|
|
>
|
|
{icon && (
|
|
<Ionicons
|
|
name={icon}
|
|
size={18}
|
|
color={
|
|
Array.isArray(getTextStyle())
|
|
? getTextStyle().find((s: any) => s && typeof s === "object" && "color" in s)?.color || "#fff"
|
|
: (getTextStyle() as any).color || "#fff"
|
|
}
|
|
style={styles.buttonIcon}
|
|
/>
|
|
)}
|
|
<Text style={getTextStyle()}>{title}</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
// Custom Input Component
|
|
type CustomInputProps = {
|
|
label?: string;
|
|
placeholder?: string;
|
|
value?: string;
|
|
onChangeText?: (text: string) => void;
|
|
icon?: React.ComponentProps<typeof Ionicons>['name'];
|
|
[key: string]: any;
|
|
};
|
|
|
|
const CustomInput = ({
|
|
label,
|
|
placeholder,
|
|
value,
|
|
onChangeText,
|
|
icon,
|
|
...props
|
|
}: CustomInputProps) => {
|
|
return (
|
|
<View style={styles.inputContainer}>
|
|
{label && <Text style={styles.inputLabel}>{label}</Text>}
|
|
<View style={styles.inputWrapper}>
|
|
{icon && <Ionicons name={icon} size={20} color="#666" style={styles.inputIcon} />}
|
|
<TextInput
|
|
style={[styles.input, icon && styles.inputWithIcon]}
|
|
placeholder={placeholder}
|
|
placeholderTextColor="#999"
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
{...props}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
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 [user, setUser] = useState<UserProfile | null>(null);
|
|
const [fetching, setFetching] = useState(true);
|
|
const [editing, setEditing] = useState(false);
|
|
const [imageUpdating, setImageUpdating] = useState(false);
|
|
|
|
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();
|
|
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);
|
|
}
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
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="#6366f1" />
|
|
<Text style={styles.loadingText}>Loading profile...</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<StatusBar backgroundColor="#6366f1" barStyle="light-content" />
|
|
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerTitle}>User Profile</Text>
|
|
<TouchableOpacity onPress={fetchUserProfile} style={styles.refreshButton}>
|
|
<Ionicons name="refresh" size={24} color="#fff" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<ScrollView style={styles.scrollContainer}>
|
|
{/* Profile Card */}
|
|
<View style={styles.profileCard}>
|
|
{/* Profile Image Section */}
|
|
<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="white" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<CustomButton
|
|
title={imageUpdating ? "Updating..." : "Update Image"}
|
|
onPress={handleUpdateImage}
|
|
icon={imageUpdating ? undefined : "cloud-upload"}
|
|
style={styles.updateImageButton}
|
|
// disabled={imageUpdating}
|
|
/>
|
|
</View>
|
|
|
|
{!editing ? (
|
|
<>
|
|
{/* Profile Details */}
|
|
<View style={styles.detailsSection}>
|
|
<Text style={styles.sectionTitle}>Personal Information</Text>
|
|
<View style={{ marginBottom: 16 }}>
|
|
|
|
<Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
|
|
</View>
|
|
|
|
<View style={styles.detailRow}>
|
|
<Ionicons name="person" size={20} color="#6366f1" 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="#6366f1" 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="#6366f1" 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="#6366f1" 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="#6366f1" 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="#6366f1" 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="#6366f1" style={styles.detailIcon} />
|
|
<View>
|
|
<Text style={styles.detailLabel}>Role</Text>
|
|
<Text style={styles.detailText}>{user.role || "User"}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<CustomButton
|
|
title="Edit Profile"
|
|
onPress={() => setEditing(true)}
|
|
icon="create"
|
|
style={styles.editButton}
|
|
/>
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* 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>
|
|
|
|
<View style={styles.editButtons}>
|
|
<CustomButton
|
|
title="Save Changes"
|
|
onPress={updateProfile}
|
|
icon="save"
|
|
style={styles.saveButton}
|
|
/>
|
|
<CustomButton
|
|
title="Cancel"
|
|
type="outline"
|
|
onPress={() => setEditing(false)}
|
|
icon="close"
|
|
style={styles.cancelButton}
|
|
/>
|
|
</View>
|
|
</>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#f8fafc"
|
|
},
|
|
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,
|
|
paddingTop: 50,
|
|
backgroundColor: "#6366f1",
|
|
borderBottomLeftRadius: 20,
|
|
borderBottomRightRadius: 20,
|
|
elevation: 4,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 4,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 22,
|
|
fontWeight: "700",
|
|
color: "#fff"
|
|
},
|
|
refreshButton: {
|
|
padding: 4,
|
|
},
|
|
scrollContainer: {
|
|
flex: 1,
|
|
},
|
|
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: "#6366f1",
|
|
borderRadius: 20,
|
|
width: 40,
|
|
height: 40,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderWidth: 3,
|
|
borderColor: "#fff",
|
|
elevation: 2,
|
|
},
|
|
updateImageButton: {
|
|
width: "80%",
|
|
},
|
|
detailsSection: {
|
|
marginBottom: 24,
|
|
},
|
|
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: {
|
|
marginTop: 8,
|
|
},
|
|
editSection: {
|
|
marginBottom: 20,
|
|
},
|
|
editButtons: {
|
|
gap: 12,
|
|
},
|
|
saveButton: {
|
|
marginTop: 8,
|
|
},
|
|
cancelButton: {
|
|
marginTop: 4,
|
|
},
|
|
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,
|
|
},
|
|
button: {
|
|
backgroundColor: "#6366f1",
|
|
paddingVertical: 14,
|
|
borderRadius: 12,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexDirection: "row",
|
|
shadowColor: "#6366f1",
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 6,
|
|
shadowOffset: { width: 0, height: 3 },
|
|
elevation: 4,
|
|
},
|
|
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; |