I have encountered a problem with my code while working on the user edit profile page in my react native app. The issue I am facing is related to displaying the previously inputted firebase details from the collection in the text input fields when the user visits the page. My current code successfully achieves this functionality, but I am unable to make further modifications as any additional character entered disappears. I suspect that the issue lies within the getuserinfo function, but I'm unsure about an alternative implementation. If I remove the user info async function and integrate it into the handle press, then I can edit the details only after pressing save twice.
My goal is to find a way to display the details without requiring the user to press save beforehand.
Thank you!
export default function SignUp({ navigation }) {
let currentUserUID = firebase.auth().currentUser.uid;
const [fullname, setFullName] = useState('');
const [bio, setBio] = useState('');
const [studentCode, setCode] = useState('');
const [location, setLocation] = useState('');
const [dayofbirth, setDOB] = useState('');
const [link, setLink] = useState('');
const [image, setImage] = useState(null); // for profile pic
async function getUserInfo(){
const currentUser = firebase.auth().currentUser;
let doc = await firebase
.firestore()
.collection('userProfile')
.doc(currentUserUID)
.get();
let dataObj = doc.data();
setFullName(dataObj.firstName);
setCode(dataObj.code);
setBio(dataObj.bio);
setLocation(dataObj.location);
setDOB(dataObj.dayofbirth);
setLink(dataObj.link);
setImage(dataObj.image);
}
getUserInfo(); // calls this function
useEffect(() => { // works for just for IOS
(async () => {
if (Platform.OS !== 'web') {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
})();
}, []);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result);
if (!result.cancelled) {
setImage(result.uri);
}
};
const emptyState = () => {
setFullName('');
setCode('');
setBio('')
};
const handlePress = async () => {
const doc = await firebase
.firestore()
.collection('userProfile')
.doc(currentUserUID)
.get();
const currentUser = firebase.auth().currentUser;
let dataObj = doc.data();
setFullName(dataObj.firstName);
setCode(dataObj.code);
setLocation(dataObj.location);
setBio(dataObj.bio);
setDOB(dataObj.dayofbirth);
setLink(dataObj.link);
setImage(dataObj.image);
if (!fullname && !bio && !studentCode) {
setFullName(doc.data().firstName);
setBio(doc.data().bio);
setCode(doc.data().code);
setImage(doc.data().image);
} else if (!fullname && !bio) {
setBio(doc.data().bio);
setFullName(doc.data().firstName);
} else if(!studentCode && !bio){
setCode(doc.data().code);
setBio(doc.data().bio);
} else if (!studentCode) {
setCode(doc.data().code)
} else if(!fullname){
setFullName(doc.data().firstName);
} else if(!image){
setImage(doc.data().image);
}
else if(!dayofbirth) {
setDOB(doc.data().dayofbirth)
}
else if(!bio){
setBio(doc.data().bio);
} else {
registration(
bio,
fullname,
studentCode,
location,
dayofbirth,
link,
image
);
navigation.navigate('Loading');
emptyState();
}
function useAsync(asyncFn, onSuccess) {
useEffect(() => {
let isMounted = true;
asyncFn().then(data => {
if (isMounted) onSuccess(data);
});
return () => { isMounted = false };
}, [asyncFn, onSuccess]);
}
};