I have been stuck on this for a long time now. I need to get a bit of data from a document in Firestore. All I need to know is if the field exists so I am just querying for it to not be null. The query works, however, this result determines what page is displayed and my code isn't waiting for the promise to resolve before moving on, I have tried to put it in async functions and use .then but nothing has worked. I am still fairly new to react, and this is my first time using async code in react.
Database request:
async function IsUserSetup(uid){
const docRef = getUserDocumentRef(uid);
await getDoc(docRef)
.then((doc) => {
console.log("2. " + doc.data().userName + "running is setup check");
if (doc.data().accountType != null) {
console.log("3. DB Controller says: User is already setup!");
accountStatus = true;
}else {
console.log("3. DB Controller says: User is not setup yet!");
accountStatus = false;
}
})
return accountStatus;}
main.js
var userAccountState;
async function fetchAccountStatus(){
await IsUserSetup(auth.currentUser.uid)
.then((result) => {
return result;
})
.catch((error) => {
console.log(error);
return null;
});
}
const Mainpage = () => {
console.log("1. Main.js says: " + auth.currentUser.uid);
useEffect(() => {
fetchAccountStatus()
.then(result => userAccountState = result)
.catch(error => console.log(error));
}, []);
console.log("2. Main.js says: ");
console.log(userAccountState);
if (userAccountState == false) {
console.log("5. New version: User NOT setup")
createNewUser();
}if (userAccountState == true) {
console.log("5. New version: User already setup")
}else {
console.log("5. Account state unknown")
}
console.log("6. User account state: " + userAccountState);
return (
userAccountState ? <Dashboard/> : <SetAccountDetails/>
);
}
export default Mainpage;