Add circular progress to other user page

This commit is contained in:
Clayton Wilson 2019-12-05 13:22:29 -05:00
parent 57087a5ea3
commit 739b1cc92a

View File

@ -22,6 +22,7 @@ import AddCircle from "@material-ui/icons/AddCircle";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import VerifiedIcon from "@material-ui/icons/CheckSharp"; import VerifiedIcon from "@material-ui/icons/CheckSharp";
import DoneIcon from "@material-ui/icons/Done"; import DoneIcon from "@material-ui/icons/Done";
import CircularProgress from "@material-ui/core/CircularProgress";
// component // component
import "../App.css"; import "../App.css";
@ -77,7 +78,8 @@ class user extends Component {
user: null, user: null,
following: null, following: null,
posts: null, posts: null,
myTopics: null myTopics: null,
loading: false
}; };
} }
@ -114,7 +116,8 @@ class user extends Component {
}; };
componentDidMount() { componentDidMount() {
axios this.setState({loading: true});
let otherUserPromise = axios
.post("/getUserDetails", { .post("/getUserDetails", {
handle: this.state.profile handle: this.state.profile
}) })
@ -126,7 +129,7 @@ class user extends Component {
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
axios let userPromise = axios
.get("/user") .get("/user")
.then(res => { .then(res => {
this.setState({ this.setState({
@ -138,7 +141,7 @@ class user extends Component {
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
axios let posts = axios
.post("/getOtherUsersPosts", { .post("/getOtherUsersPosts", {
handle: this.state.profile handle: this.state.profile
}) })
@ -149,6 +152,14 @@ class user extends Component {
}); });
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
Promise.all([otherUserPromise, userPromise, posts])
.then(() => {
this.setState({loading: false});
})
.catch((error) => {
console.log(error);
})
} }
render() { render() {
@ -254,6 +265,7 @@ class user extends Component {
); );
return ( return (
this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
<Grid container spacing={24}> <Grid container spacing={24}>
<Grid item sm={4} xs={8}> <Grid item sm={4} xs={8}>
{imageMarkup} {imageMarkup}