rersistesiion integraytion api impolement
This commit is contained in:
Jaanu423
@@ -0,0 +1,364 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
TextInput,
|
||||
ActivityIndicator,
|
||||
} 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 "../../common/Custom";
|
||||
|
||||
// ✅ Reusable Custom Input
|
||||
|
||||
|
||||
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 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(
|
||||
"https://exotic-humpback-mistakenly.ngrok-free.app/api/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(
|
||||
"https://exotic-humpback-mistakenly.ngrok-free.app/api/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;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", {
|
||||
uri: user.filePath,
|
||||
type: "image/jpeg",
|
||||
name: "profile.jpg",
|
||||
} as any);
|
||||
|
||||
const response = await fetch(
|
||||
"https://exotic-humpback-mistakenly.ngrok-free.app/api/user/update/userImg",
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: formData,
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile image updated successfully");
|
||||
fetchUserProfile();
|
||||
} else {
|
||||
Alert.alert("Error", "Failed to update profile image");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error updating profile image:", error);
|
||||
Alert.alert("Error", "Could not update profile image");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile();
|
||||
}, []);
|
||||
|
||||
const getProfileImage = () => {
|
||||
if (user?.filePath) return user.filePath;
|
||||
if (user?.imageBlob) return `data:image/jpeg;base64,${user.imageBlob}`;
|
||||
return "https://randomuser.me/api/portraits/men/1.jpg";
|
||||
};
|
||||
|
||||
if (fetching || !user) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#007AFF" />
|
||||
<Text style={styles.loadingText}>Loading profile...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>User Profile</Text>
|
||||
<TouchableOpacity onPress={fetchUserProfile}>
|
||||
<Ionicons name="refresh" size={24} color="#007AFF" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.container}>
|
||||
<View style={styles.profileCard}>
|
||||
<View style={styles.profileHeader}>
|
||||
<Image source={{ uri: getProfileImage() }} style={styles.avatar} />
|
||||
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
|
||||
<Ionicons name="camera" size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<CustomButton title="Update Image" onPress={handleUpdateImage} />
|
||||
|
||||
{!editing ? (
|
||||
<>
|
||||
<Text style={styles.detail}>👤 {user.firstName} {user.lastName}</Text>
|
||||
<Text style={styles.detail}>📧 {user.email}</Text>
|
||||
<Text style={styles.detail}>📱 {user.mobile}</Text>
|
||||
<Text style={styles.detail}>🔑 {user.username}</Text>
|
||||
<Text style={styles.detail}>🏠 {user.address}</Text>
|
||||
<Text style={styles.detail}>⚧ {user.gender}</Text>
|
||||
<Text style={styles.detail}>🛡 Role: {user.role}</Text>
|
||||
|
||||
<CustomButton title="Edit Profile" onPress={() => setEditing(true)} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CustomInput
|
||||
label="First Name"
|
||||
placeholder="Enter first name"
|
||||
value={user.firstName ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, firstName: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Last Name"
|
||||
placeholder="Enter last name"
|
||||
value={user.lastName ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, lastName: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Email"
|
||||
placeholder="Enter email"
|
||||
value={user.email ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, email: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Username"
|
||||
placeholder="Enter username"
|
||||
value={user.username ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, username: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Address"
|
||||
placeholder="Enter address"
|
||||
value={user.address ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, address: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Gender"
|
||||
placeholder="Enter gender"
|
||||
value={user.gender ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, gender: text })}
|
||||
/>
|
||||
|
||||
<CustomButton title="Save Changes" onPress={updateProfile} />
|
||||
<CustomButton
|
||||
title="Cancel"
|
||||
type="danger"
|
||||
onPress={() => setEditing(false)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: "#f5f7fb" },
|
||||
loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||||
loadingText: { marginTop: 10, fontSize: 16, color: "#007AFF" },
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
padding: 16,
|
||||
paddingTop: 40,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
borderBottomWidth: 1,
|
||||
borderColor: "#eee",
|
||||
},
|
||||
headerTitle: { fontSize: 20, fontWeight: "600", color: "#333" },
|
||||
profileCard: {
|
||||
borderRadius: 16,
|
||||
margin: 16,
|
||||
backgroundColor: "#fff",
|
||||
padding: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
elevation: 4,
|
||||
},
|
||||
profileHeader: { alignItems: "center", marginBottom: 16 },
|
||||
avatar: { width: 100, height: 100, borderRadius: 50, marginBottom: 8 },
|
||||
cameraIcon: {
|
||||
position: "absolute",
|
||||
right: 110,
|
||||
bottom: 10,
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 15,
|
||||
width: 32,
|
||||
height: 32,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
detail: {
|
||||
fontSize: 16,
|
||||
marginBottom: 10,
|
||||
color: "#444",
|
||||
paddingLeft: 4,
|
||||
},
|
||||
inputContainer: { marginBottom: 12 },
|
||||
inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 },
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 10,
|
||||
padding: 12,
|
||||
backgroundColor: "#fdfdfd",
|
||||
color: "#000",
|
||||
fontSize: 15,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#007AFF",
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
marginVertical: 6,
|
||||
shadowColor: "#007AFF",
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
buttonSecondary: {
|
||||
backgroundColor: "#e5e5ea",
|
||||
},
|
||||
buttonDanger: {
|
||||
backgroundColor: "#ff3b30",
|
||||
},
|
||||
buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
|
||||
buttonTextSecondary: { color: "#333" },
|
||||
buttonTextDanger: { color: "#fff" },
|
||||
});
|
||||
|
||||
export default Profile;
|
||||
Reference in New Issue
Block a user