javascript - Obtener URL dinámica después de iniciar sesión con Google Identity Services en Typescript

Lo que necesito hacer es poder iniciar sesión con GIS, y luego obtener una URL que termine con el {user.email} que acabamos de obtener al decodificar el JWT.

Aquí está mi código:

   interface userI {
        name: string | null;
        iat?: number;
        iss?: string;
        picture?: string;
        email?: string;
    }

    interface bookingI {
        id: number;
        bureau: string;
        aile: string;
        office: string;
        office_id: string;
        cote: string;
        time: Date;
        etage: string;
        direction: string;
        espace: string;
    }


    const [ user, setUser] = useState<userI>({name: null});
    
    function handleCallbackResponse(response: any) {
        console.log("Encoded JWT ID token: " + response.credential);
        var userObject = jwt_decode(response.credential);
        console.log(userObject);
        localStorage.setItem('user', JSON.stringify(userObject))
        setUser(userObject as userI);
        document.getElementById("signInDiv")!.hidden = true;
    }

    useEffect(() => {
            /* global google */
                //@ts-ignore
            google.accounts.id.initialize({
                client_id: "myId",
                callback: handleCallbackResponse
            });
            
                //@ts-ignore
            google.accounts.id.renderButton(
                document.getElementById("signInDiv"),
                { theme: "outline", size: "large", shape: "pill"}
            );
            },[]);


        


    const [booking, setBooking] = useState<bookingI>();
            const apiUrl = "apiUrl"
            
    useEffect(() => {
            
            const api = async () => {
                
            const data = await fetch(`${apiUrl}/${user.email}`, {
                  method: "GET"
            });
            const jsonData = await data.json();       
                console.log("jsonData : ")
                console.log(jsonData)

                setBooking(jsonData.data);

            };

            api();
        
            },[]);

Lo que he podido hacer hasta ahora: Iniciar sesión con GIS, decodificar JWT y mostrar {user.email} en la respuesta, obtener mi API NO de manera dinámica ("url/myemail").

Lo que no logré hacer: Poder obtener (`url/${user.email}`) en el momento en que el inicio de sesión con GIS fue exitoso (y no antes), permanecer conectado incluso después de actualizar (quizás sea el problema que necesito solucionar).

Bastante nuevo en Typescript, gracias por tu paciencia y consideración.

Respuesta #1

Resuelto :

const userEmail = user.email
const fullUrl = `${apiUrl}/${userEmail}`
            
useEffect(() => {
  const api = async () => {
  //console.log(fullUrl)
  const data = await fetch(`${fullUrl}`, {
    method: "GET"
  });
  
  const jsonData = await data.json();       
    //console.log("jsonData : ")
    //console.log(jsonData)
    console.log("Extractable data : ")
    console.log(jsonData.data)
            
    setBooking(jsonData.data);

  };
  if (userEmail !== undefined){
    api();
  }
},[fullUrl, userEmail]);

Todavía necesito mantenerme conectado incluso después de actualizar, pero mi problema principal está resuelto