Display loading icon when the user logs in or signs up

This commit is contained in:
Clayton Wilson 2019-11-25 13:55:03 -05:00
parent 64cc9bd156
commit 3814377817
2 changed files with 33 additions and 26 deletions

View File

@ -8,6 +8,7 @@ import axios from 'axios';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CircularProgress from '@material-ui/core/CircularProgress';
import Typography from "@material-ui/core/Typography";
// component
@ -32,6 +33,7 @@ class Home extends Component {
}
render() {
const { UI:{ loading } } = this.props;
let authenticated = this.props.user.authenticated;
let postMarkup = this.state.posts ? (
@ -68,6 +70,8 @@ class Home extends Component {
{postMarkup}
</Grid>
</Grid>
: loading ?
<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
:
<div>
<div>
@ -97,11 +101,13 @@ class Home extends Component {
}
const mapStateToProps = (state) => ({
user: state.user
user: state.user,
UI: state.UI
})
Home.propTypes = {
user: PropTypes.object.isRequired
user: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired
}
export default connect(mapStateToProps)(Home);

View File

@ -9,6 +9,7 @@ export const getUserData = () => (dispatch) => {
type: SET_USER,
payload: res.data,
})
dispatch({ type: CLEAR_ERRORS })
})
.catch((err) => console.error(err));
}
@ -21,7 +22,7 @@ export const loginUser = (loginData, history) => (dispatch) => {
// Save the login token
setAuthorizationHeader(res.data.token);
dispatch(getUserData());
dispatch({ type: CLEAR_ERRORS })
// dispatch({ type: CLEAR_ERRORS })
// Redirects to home page
history.push('/home');
})
@ -43,7 +44,7 @@ export const signupUser = (newUserData, history) => (dispatch) => {
// Save the signup token
setAuthorizationHeader(res.data.token);
dispatch(getUserData());
dispatch({ type: CLEAR_ERRORS })
// dispatch({ type: CLEAR_ERRORS })
// Redirects to home page
history.push('/home');
})