ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2025-12-16 02:08:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #93 from ClaytonWWilson/fix-login-loading

Browse Source 
Display loading icon when the user logs in or signs up
This commit is contained in:
Clayton Wilson 2019-12-03 13:50:55 -05:00 committed by GitHub
commit b4f4dec9ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
twistter-frontend/src/pages/Home.js
View File

@ -5,6 +5,7 @@ import { connect } from "react-redux";
import axios from "axios"; import axios from "axios";
// Material UI and React Router // Material UI and React Router
import CircularProgress from '@material-ui/core/CircularProgress';
import Grid from "@material-ui/core/Grid"; import Grid from "@material-ui/core/Grid";
import Card from "@material-ui/core/Card"; import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@material-ui/core/CardContent";
@ -49,6 +50,7 @@ class Home extends Component {
} }
render() { render() {
const { UI:{ loading } } = this.props;
let authenticated = this.props.user.authenticated; let authenticated = this.props.user.authenticated;
let {classes} = this.props; let {classes} = this.props;
let username = this.props.user.credentials.handle; let username = this.props.user.credentials.handle;
@ -91,37 +93,34 @@ class Home extends Component {
<Grid item sm={4} xs={8}> <Grid item sm={4} xs={8}>
{postMarkup} {postMarkup}
</Grid> </Grid>
</Grid> </Grid>
) : ( ) : loading ?
<div> (<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>)
<div> :
<img src={logo} className="app-logo" alt="logo" /> (
<br /> <div>
<br /> <div>
<b>Welcome to Twistter!</b> <img src={logo} className="app-logo" alt="logo" />
<br /> <br/><br/>
<br /> <b>Welcome to Twistter!</b>
<b>See the most interesting topics people are following right now.</b> <br/><br/>
</div> <b>See the most interesting topics people are following right now.</b>
</div>
<br /> <br/><br/><br/><br/>
<br />
<br />
<br />
<div> <div>
<b>Join today or sign in if you already have an account.</b> <b>Join today or sign in if you already have an account.</b>
<br /> <br/><br/>
<br /> <form action="./signup">
<form action="./signup"> <button className="authButtons signup">Sign up</button>
<button className="authButtons signup">Sign up</button> </form>
</form> <br/>
<br /> <form action="./login">
<form action="./login"> <button className="authButtons login">Sign in</button>
<button className="authButtons login">Sign in</button> </form>
</form> </div>
</div> </div>
</div>
); );
} }
} }
@ -337,12 +336,14 @@ class Like extends Component {
} }
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
user: state.user user: state.user,
UI: state.UI
}); });
Home.propTypes = { Home.propTypes = {
user: PropTypes.object.isRequired, user: PropTypes.object.isRequired,
clases: PropTypes.object.isRequired clases: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired
} }
Like.propTypes = { Like.propTypes = {

5
twistter-frontend/src/redux/actions/userActions.js
View File

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