estoy haciendo una aplicación con Typescript, Ionic, React y Firebase por puro aburrimiento. Lo que quiero lograr es que una página de React no renderize hasta que una variable tenga un valor, el problema es el siguiente. Hay un archivo en la Raíz de la carpeta src llamado "fireConfig.ts" que contiene todas las funciones de login, register, etc. Una de las funciones que contiene el archivo es "getUsername()" la cual retorna un string con el nombre de un usuario guardado en Firebase Firestore, lo que pasa es que React llama a la función y retorna "undefined" porque la variable donde se almacena el string no obtuvo ningún valor, pero al rato imprime en consola el valor que necesito, ¿Como puedo hacer que la función espere al valor para que retorne y como hago que React se actualice al recibir el valor?
Aca les dejo el codigo:
// ./fireConfig.ts
firebase.auth().onAuthStateChanged((user) => {
if (user) {
setupUI(user);
} else {
toast("Something gone wrong", 2000, "danger");
}
});
const setupUI = (user: any) => {
let users = db.collection('users').doc(user.uid)
users.get().then(doc => {
if (!doc.exists){
toast("Something gone wrongg", 2000, "danger");
} else {
sessionName = doc.data()
sessionName = sessionName.name;
}
})
}
export async function getUsername() {
console.log(sessionName)
return `${sessionName}`
}
// ./pages/Page.tsx
import React, { useState, useEffect } from "react";
import { getUsername } from "../firebaseConfig";
export const Page: React.FC = () => {
const [username, setUsername] = useState('');
useEffect(() => {
try{
getUsername().then(username => setUsername(username))
} catch (e) {
console.error(e)
}
}, [])
return(
<h3>Welcome {username}</h3>
)
}
Desde ya agradezco todo tipo de ayuda que me puedan dar!