Hola a todos,
uso React (primer proyecto y, por lo tanto, no estoy tan familiarizado con esto). Una vez que el inicio de sesión sea correcto, quiero mostrar calender.js. El problema es que no logro abrir calender.js.
En el método doLogin() en la clase LoginForm.js se verifica si la respuesta del servidor es -1, si es != -1, entonces el inicio de sesión fue exitoso y Calendar.js debe abrirse (lo que en realidad está previsto en el método showCalendar()).
He intentado varias formas, pero ninguna ha funcionado. ¿Tienen alguna sugerencia de solución?
Ya probé "Redirect" y "userhistory()" (es posible que también haya cometido un error allí, porque siempre recibí un error con los hooks en userHistory que no pude resolver).
import React, { Component } from "react";
import { observer } from "mobx-react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import UserStore from "./stores/UserStore";
import Home from "./Home";
import UserList from "./UserList";
import Calendar from "./Calendar";
class App extends React.Component {
componentDidUpdate() {
if (UserStore.id != -1 && UserStore.id != 0) {
console.log(UserStore.id);
console.log("Calendar");
}
}
render() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/calendar">Calendar</Link>
</li>
<li>
<Link to="/userlist">Userlist</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/calendar">
<Calendar />
</Route>
<Route path="/userlist">
<UserList />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
}
export default App;
ReactDOM.render(<App />, document.querySelector("#app"));
He incluido los enlaces como prueba, a través de ellos puedo abrir Calendar.js sin ningún problema. Sin embargo, quiero que suceda automáticamente cuando el inicio de sesión sea correcto (el método doLogin() en LoginForm verifica la respuesta del servidor).
import React, { Component } from "react";
import ReactDOM from "react-dom";
import UserStore from "./stores/UserStore";
import LoginForm from "./components/LoginForm";
import RegisterForm from "./components/RegisterForm";
class Home extends React.Component {
render() {
return (
<div className="home">
<LoginForm />
<RegisterForm />
</div>
);
}
}
export default Home;
import React, { Component } from "react";
import ReactDOM from "react-dom";
import UserStore from "./stores/UserStore";
import LoginForm from "./components/LoginForm";
import RegisterForm from "./components/RegisterForm";
class Home extends React.Component {
render() {
return (
<div className="home">
<LoginForm />
<RegisterForm />
</div>
);
}
}
export default Home;
import axios from "axios";
import React from "react";
import InputField from "./InputField";
import SubmitButton from "./SubmitButton";
import UserStore from "../stores/UserStore";
import Header from "./Header";
import Calendar from "../Calendar";
import { Link, Redirect } from "react-router-dom";
import { result } from "lodash";
import { Route, Router, useHistory } from "react-router";
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
buttonDisabled: false,
};
}
setInputValue(property, value) {
value = value.trim();
if (value.length > 25) {
return;
}
this.setState({
[property]: value,
});
}
resetForm() {
this.setState({
email: "",
password: "",
buttonDisabled: false,
});
}
showCalendar() {
console.log("showCalendar");
}
doLogin() {
if (!this.state.email) {
console.log("'E-Mail' no debe estar vacío");
return;
}
if (!this.state.password) {
console.log("'Contrasena' no debe estar vacía");
return;
}
this.setState({
buttonDisabled: true,
});
axios
.post(
"http://localhost:8080/api/login",
{
userEmail: this.state.email,
userPassword: this.state.password,
},
{
withCredentials: true, //se pone una Cookie
}
)
.then((response) => {
if (response.data != -1) {
console.log("Inicio de sesión exitoso", response);
UserStore.isLoggedIn = true;
UserStore.id = response.data; //current user id será asignado
UserStore.email = this.state.email;
this.showCalendar();
console.log("current_user_id: " + UserStore.id);
this.resetForm();
} else {
console.log("Error de inicio de sesión", response);
this.resetForm();
}
})
.catch((error) => {
console.log("Error de API-Call", error);
this.resetForm();
});
}
render() {
return (
<div className="loginForm">
<Header name="Login" />
<InputField
type="email"
placeholder="Email"
value={this.state.email ? this.state.email : ""}
onChange={(value) => this.setInputValue("email", value)}
/>
<InputField
type="password"
placeholder="Password"
value={this.state.password ? this.state.password : ""}
onChange={(value) => this.setInputValue("password", value)}
/>
<SubmitButton
text="Login"
disabled={this.state.buttonDisabled}
onClick={() => this.doLogin()}
/>
</div>
);
}
}
export default LoginForm;
La respuesta del servidor se verifica en el método doLogin(). Si la respuesta es !=-1, el inicio de sesión fue exitoso y quiero abrir el archivo calendar.js, lo que debería suceder en el método showCalendar.
import { extendObservable } from "mobx";
/**
* Guardar los datos del usuario actualmente conectado
*/
class UserStore {
constructor() {
extendObservable(this, {
isLoggedIn: false,
email: "",
userName: "",
id: 0,
});
}
}
export default new UserStore();
Saludos cordiales y gracias de antemano por la ayuda.
Mostrar Mensajes
