idanoo/GoScrobble
1
0
Fork 0
mirror of https://github.com/idanoo/GoScrobble synced 2025-07-01 13:42:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove redux

Browse source
This commit is contained in:
Daniel Mason 2021-03-31 13:16:42 +13:00
parent 0c56281bcd
commit ebd88b3bb0
Signed by: idanoo
GPG key ID: 387387CDBC02F132
30 changed files with 263 additions and 696 deletions
Download patch file Download diff file Expand all files Collapse all files

139
web/src/Pages/Login.js
View file

@ -1,102 +1,57 @@
import React from 'react';
import React, { useContext } from 'react';
import '../App.css';
import './Login.css';
import { Button } from 'reactstrap';
import { Formik, Form, Field } from 'formik';
import ScaleLoader from 'react-spinners/ScaleLoader';
import { connect } from 'react-redux';
import { login } from '../Actions/auth';
import eventBus from "../Actions/eventBus";
import { LOGIN_SUCCESS } from '../Actions/types';
import AuthContext from '../Contexts/AuthContext';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {username: '', password: '', loading: false};
}
const Login = () => {
let boolTrue = true;
let { Login, loading } = useContext(AuthContext);
componentDidMount() {
const { history, isLoggedIn } = this.props;
if (isLoggedIn) {
history.push("/dashboard")
}
}
handleLogin(values) {
this.setState({loading: true});
const { dispatch, history } = this.props;
dispatch(login(values.username, values.password))
.then(() => {
this.setState({
loading: false,
isLoggedIn: true
});
eventBus.dispatch(LOGIN_SUCCESS, { isLoggedIn: true });
history.push("/dashboard");
})
.catch(() => {
this.setState({
loading: false
});
});
}
render() {
let trueBool = true;
return (
<div className="pageWrapper">
<h1>
Login
</h1>
<div className="loginBody">
<Formik
initialValues={{ username: '', password: '' }}
onSubmit={async values => this.handleLogin(values)}
>
<Form>
<label>
Email / Username<br/>
<Field
name="username"
type="text"
required={trueBool}
className="loginFields"
/>
</label>
<br/>
<label>
Password<br/>
<Field
name="password"
type="password"
required={trueBool}
className="loginFields"
/>
</label>
<br/><br/>
<Button
color="primary"
type="submit"
className="loginButton"
disabled={this.state.loading}
>{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Login"}</Button>
</Form>
</Formik>
</div>
return (
<div className="pageWrapper">
<h1>
Login
</h1>
<div className="loginBody">
<Formik
initialValues={{ username: '', password: '' }}
onSubmit={values => Login(values)}
>
<Form>
<label>
Email / Username<br/>
<Field
name="username"
type="text"
required={boolTrue}
className="loginFields"
/>
</label>
<br/>
<label>
Password<br/>
<Field
name="password"
type="password"
required={boolTrue}
className="loginFields"
/>
</label>
<br/><br/>
<Button
color="primary"
type="submit"
className="loginButton"
disabled={loading}
>{loading ? <ScaleLoader color="#FFF" size={35} /> : "Login"}</Button>
</Form>
</Formik>
</div>
);
}
</div>
);
}
function mapStateToProps(state) {
const { isLoggedIn } = state.auth;
return {
isLoggedIn
};
}
export default connect(mapStateToProps)(Login);
export default Login;