Add circular progress to user page

This commit is contained in:
Clayton Wilson 2019-12-05 13:08:59 -05:00
parent 1aff5ba99b
commit 57087a5ea3
2 changed files with 16 additions and 4 deletions

View File

@ -56,7 +56,7 @@ exports.getallPostsforUser = (req, res) => {
.catch(function(err) { .catch(function(err) {
return res return res
.status(500) .status(500)
.json("Failed to retrieve user's posts from database.", err); .json({message: "Failed to retrieve user's posts from database.", error: err});
}); });
}; };

View File

@ -13,6 +13,7 @@ import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid"; import Grid from "@material-ui/core/Grid";
import CircularProgress from "@material-ui/core/CircularProgress";
import Chip from "@material-ui/core/Chip"; import Chip from "@material-ui/core/Chip";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
@ -76,7 +77,8 @@ class user extends Component {
profile: null, profile: null,
imageUrl: null, imageUrl: null,
topics: null, topics: null,
newTopic: "" newTopic: "",
loading: false
}; };
} }
@ -127,7 +129,8 @@ class user extends Component {
} }
componentDidMount() { componentDidMount() {
axios this.setState({loading: true})
let userPromise = axios
.get("/user") .get("/user")
.then(res => { .then(res => {
this.setState({ this.setState({
@ -141,7 +144,7 @@ class user extends Component {
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
axios let postsPromise = axios
.get("/getallPostsforUser") .get("/getallPostsforUser")
.then(res => { .then(res => {
// console.log(res.data); // console.log(res.data);
@ -150,6 +153,14 @@ class user extends Component {
}); });
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
Promise.all([userPromise, postsPromise])
.then(() => {
this.setState({loading: false});
})
.catch((error) => {
console.log(error)
})
} }
formatDate(dateString) { formatDate(dateString) {
@ -259,6 +270,7 @@ class user extends Component {
) : null; ) : null;
return ( return (
this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
<div> <div>
{/* <Paper className={classes.paper}> */} {/* <Paper className={classes.paper}> */}
<Grid container direction="column"> <Grid container direction="column">