You can replace .then with await and put a resolved promise in a variable instead. there's a catch with useEffect which is they don't like async functions so you can wrap it. here's what that looks like (without comments), from home-page.js:
useEffect(() => {
if (user) {
(async () => {
const userFromDb = await getUserById(user.uid);
let username = userFromDb.username;
setName(username);
let dueDate = userFromDb.dueDate;
let weekToQuery = whichWeekToQueryFromBabySize(dueDate);
setWeekNum(weekToQuery);
const babySizeData = await getBabySizeByWeek(`Week ${weekToQuery}`);
setBabySizeObj(babySizeData);
let trimesterThisUserIsIn = whichTrimesterAreYouIn(dueDate);
router.push(`/home-page?trimester=${trimesterThisUserIsIn}`);
})();
}
}, [user]);
Also whilst we're here, I would recommend using a more specific dependency for this effect, i.e. user.uid. Since you want to limit how often it runs as a main page. That being said, there aren't currently many changes to user so it's not a huge deal.
You can replace
.thenwithawaitand put a resolved promise in a variable instead. there's a catch withuseEffectwhich is they don't likeasyncfunctions so you can wrap it. here's what that looks like (without comments), fromhome-page.js:Also whilst we're here, I would recommend using a more specific dependency for this effect, i.e.
user.uid. Since you want to limit how often it runs as a main page. That being said, there aren't currently many changes touserso it's not a huge deal.