Estoy realizando una llamada a la API para registrar un usuario. Cuando el usuario ya existe la API me devuelve un código 409, así que lo manejo con un condicional el el primer then.
Lo que quiero es mostrar un alert cuando el usuario ya existe y, en caso contrario, cuando el usuario no existe que me lo cree y luego navegue a la página registered, donde le mostraré al usuario el teamID generado con uuidv4.
He logrado que cuando el usuario existe me muestre el alert y lanza un error que no me deja navegar.
El problema es que no me permite crear nuevos usuarios y siempre me devuelve el alert de que el usuario ya existe, lo cual es incorrecto porque al probar ese mismo nombre de usuario con Postman y el usuario NO existe en la API.
Este es mi código:
const onSubmit = () => {
const teamID = !values.teamID ? uuidv4() : values.teamID;
fetch(`${REACT_APP_API_URL}/auth/register`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
user: {
userName: values.userName,
password: values.password,
email: values.email,
teamID: teamID,
role: values.role,
continent: values.continent,
region: values.region,
},
}),
})
.then((response) => {
if(!response.ok) {
Swal.fire({
icon: "error",
title: "El usuario ya existe!",
text: "Por favor intente nuevamente con otro nombre de usuario."
});
throw new Error("El usuario ya existe");
}
return response.json();
})
.then((data) => {
navigate("/registered/" + data?.result?.user?.teamID);
})
.catch((error) => {
console.log(error);
});
}
Otra posilibidad que probé fue no arrojar el error en el primer then, sino retornar algo vacío (el return solo). Luego en el segundo then pongo un condicional, pero el resultado es el mismo, no me crea los usuarios nuevos y siempre me muestra el alert:
----
})
.then((response) => {
if(!response.ok) {
Swal.fire({
icon: "error",
title: "El usuario ya existe!",
text: "Por favor intente nuevamente con otro nombre de usuario."
});
return;
}
return response.json();
})
.then((data) => {
if(!data) {
console.log("El usuario ya existe");
} else {
navigate("/registered/" + data?.result?.user?.teamID);
}
});
}
También probé sólo con el condicional en el segundo then. En este caso, cuando el usuario ya existe muestra el alert, pero también navega hacia el registered, lo cual tampoco es lo que estoy buscando: lo que yo quiero es que cuando el usuario ya existe sólo muestre el alert y no navegue:
-----
})
.then((response) => {
if(!response.ok) {
Swal.fire({
icon: "error",
title: "El usuario ya existe!",
text: "Por favor intente nuevamente con otro nombre de usuario."
});
}
return response.json();
})
.then((data) => {
if(!data) {
console.log("El usuario ya existe");
} else {
navigate("/registered/" + data?.result?.user?.teamID);
}
});
}
Por favor, necesito ayuda con esto, hace varios días que estoy intentando y no puedo lograr que mi código funcione bien.
Lo que necesito es simple: cuando el usuario ya existe que me muestre el alert y no navegue ; y cuando el usuario no existe, que lo cree y luego navegue al registered para poder mostrarle el teamID.