can sort posts chronologically in userline and formatted topics listing for each post

Send microblog loading

functions/handlers/post.js

@@ -46,8 +46,10 @@ exports.getallPostsforUser = (req, res) => {
       myPosts.forEach(function(doc) {
         posts.push(doc.data());
       });
+      posts.sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
       return res.status(200).json(posts);
     })
+    
     .then(function() {
       return res
         .status(200)
@@ -56,7 +58,7 @@ exports.getallPostsforUser = (req, res) => {
     .catch(function(err) {
       return res
         .status(500)
-        .json("Failed to retrieve user's posts from database.", err);
+        .json({message: "Failed to retrieve user's posts from database.", error: err});
     });
 };
 

twistter-frontend/src/Writing_Microblogs.js

@@ -8,6 +8,7 @@ import TextField from '@material-ui/core/TextField';
 // import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import withStyles from "@material-ui/styles/withStyles";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 const styles = {
   container: {
@@ -21,6 +22,13 @@ const styles = {
   },
   textField: {
     marginBottom: 15
+  },
+  progress: {
+    position: "absolute"
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
   }
 }
 
@@ -31,7 +39,8 @@ class Writing_Microblogs extends Component {
       value: "",
       title: "",
       topics: "",
-      characterCount: 250
+      characterCount: 250,
+      loading: false
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -56,11 +65,15 @@ class Writing_Microblogs extends Component {
       microBlogTitle: this.state.title,
       microBlogTopics: this.state.topics.split(", ")
     };
+
+    this.setState({
+      loading: true
+    })
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
 
-    axios
+    let postPromise = axios
       .post("/putPost", postData, headers) // TODO: add topics
       .then(res => {
         // alert("Post was shared successfully!");
@@ -71,8 +84,9 @@ class Writing_Microblogs extends Component {
         console.error(err);
       });
     console.log(postData.microBlogTopics);
+    let topicPromises = [];
     postData.microBlogTopics.forEach(topic => {
-      axios
+      topicPromises.push(axios
         .post("/putTopic", {
           following: topic
         })
@@ -81,10 +95,24 @@ class Writing_Microblogs extends Component {
         })
         .catch(err => {
           console.error(err);
-        });
+        })
+      )
     });
     event.preventDefault();
-    this.setState({ value: "", title: "", characterCount: 250, topics: "" });
+    topicPromises.push(postPromise);
+    Promise.all(topicPromises)
+      .then(() => {
+        this.setState({ 
+          value: "", 
+          title: "", 
+          characterCount: 250, 
+          topics: "",
+          loading: false
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+      })
   }
 
   handleChangeforPost(event) {
@@ -149,12 +177,14 @@ class Writing_Microblogs extends Component {
             autoComplete='off'
           />
           <Button
+            className={classes.button}
             onClick={this.handleSubmit}
-            // disabled={loading}
+            disabled={this.state.loading}
             variant="outlined"
             color="primary"
             >
               Share Post
+            {this.state.loading && <CircularProgress size={30} className={classes.progress} />}
           </Button>
         </form>
       </div>

twistter-frontend/src/pages/Home.js

@@ -6,41 +6,53 @@ import axios from "axios";
 
 // Material UI and React Router
 
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from "@material-ui/core/CircularProgress";
-import Button from '@material-ui/core/Button';
+import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import TextField from '@material-ui/core/TextField';
+import TextField from "@material-ui/core/TextField";
 
 import Typography from "@material-ui/core/Typography";
-import withStyles from '@material-ui/styles/withStyles';
+import withStyles from "@material-ui/styles/withStyles";
 
 // component
-import '../App.css';
+import "../App.css";
-import logo from '../images/twistter-logo.png';
+import logo from "../images/twistter-logo.png";
-import noImage from '../images/no-img.png';
+import noImage from "../images/no-img.png";
-import Writing_Microblogs from '../Writing_Microblogs';
+import Writing_Microblogs from "../Writing_Microblogs";
-import ReactModal from 'react-modal';
+import ReactModal from "react-modal";
 
 // Redux
-import { likePost, unlikePost, getLikes } from '../redux/actions/userActions';
+import { likePost, unlikePost, getLikes } from "../redux/actions/userActions";
-
 
 const styles = {
   card: {
     marginBottom: 5
   }
-}
+};
 
 class Home extends Component {
   state = {
-    likes: []
+    likes: [],
+    loading: false,
+    following: null,
+    topics: null
   };
 
-
   componentDidMount() {
-    axios
+    this.setState({loading: true});
+    let userPromise = axios
+      .get("/user")
+      .then(res => {
+        this.setState({
+          following: res.data.credentials.following,
+          topics: res.data.credentials.followedTopics
+        });
+      })
+      .catch(err => console.log(err));
+
+    let postPromise = axios
       .get("/getallPosts")
       .then(res => {
         // console.log(res.data);
@@ -50,34 +62,45 @@ class Home extends Component {
       })
       .catch(err => console.log(err));
 
+      Promise.all([userPromise, postPromise])
+        .then(() => {
+          this.setState({
+            loading: false
+          })
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+
     this.props.getLikes();
   }
 
   componentWillReceiveProps(nextProps) {
     this.setState({
       likes: nextProps.user.likes
-    })
+    });
   }
 
-  handleClickLikeButton = (event) => {
+  handleClickLikeButton = event => {
     // Need the ternary if statement because the user can click on the text or body of the
     // Button and they are two different html elements
-    let postId = event.target.dataset.key ? event.target.dataset.key : event.target.parentNode.dataset.key;
+    let postId = event.target.dataset.key
-    console.log(postId)
+      ? event.target.dataset.key
+      : event.target.parentNode.dataset.key;
+    console.log(postId);
 
     let doc = document.getElementById(postId);
     // console.log(postId);
     if (this.state.likes.includes(postId)) {
-      this.props.unlikePost(postId, this.state.likes)
+      this.props.unlikePost(postId, this.state.likes);
       doc.dataset.likes--;
     } else {
-      this.props.likePost(postId, this.state.likes)
+      this.props.likePost(postId, this.state.likes);
       doc.dataset.likes++;
     }
 
     doc.innerHTML = "Likes " + doc.dataset.likes;
-
+  };
-  }
 
   formatDate(dateString) {
     let newDate = new Date(Date.parse(dateString));
@@ -85,53 +108,80 @@ class Home extends Component {
   }
 
   render() {
-
+    const {
-    const { UI:{ loading } } = this.props;
+      UI: { loading }
+    } = this.props;
     let authenticated = this.props.user.authenticated;
-    let {classes} = this.props;
+    let { classes } = this.props;
     let username = this.props.user.credentials.handle;
+    console.log(this.state.following);
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post =>
-        <Card className={classes.card} key={post.postId}>
+        this.state.following ? (
-          <CardContent>
+          this.state.following.includes(post.userHandle) ? (
-            <Typography>
+            <Card className={classes.card} key={post.postId}>
-              {/* {
+              <CardContent>
+                <Typography>
+                  {/* {
                 this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
                                       (<img src={noImage} height="50" width="50"/>)
               } */}
-              {
+                  {post.profileImage ? (
-                post.profileImage ? (<img src={post.profileImage} height="50" width="50" />) : 
+                    <img src={post.profileImage} height="50" width="50" />
-                                    (<img src={noImage} height="50" width="50"/>)
+                  ) : (
-              }
+                    <img src={noImage} height="50" width="50" />
-            </Typography>
+                  )}
-            <Typography variant="h5"><b>{post.userHandle}</b></Typography>
+                </Typography>
-            <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
+                <Typography variant="h5">
-            <br />
+                  <b>{post.userHandle}</b>
-            <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
+                </Typography>
-            <Typography variant="body2">{post.quoteBody}</Typography>
+                <Typography variant="body2" color={"textSecondary"}>
-            <br />
+                  {this.formatDate(post.createdAt)}
-            <Typography variant="body2">{post.body}</Typography>
+                </Typography>
-            <br />
+                <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>        
+                <Typography variant="body1">
-            <br />
+                  <b>{post.microBlogTitle}</b>
-            <Typography id={post.postId} data-likes={post.likeCount} variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
+                </Typography>
-            {/* <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like> */}
+                <Typography variant="body2">{post.quoteBody}</Typography>
-            <Button
+                <br />
-              onClick={this.handleClickLikeButton}
+                <Typography variant="body2">{post.body}</Typography>
-              data-key={post.postId}
+                <br />
-              disabled={loading}
+                <Typography variant="body2">
-              variant="outlined"
+                  <b>Topics:</b> {post.microBlogTopics}
-              color="primary"
+                </Typography>
-            >{
+                <br />
-              this.state.likes && this.state.likes.includes(post.postId) ? 'Unlike' : 'Like'
+                <Typography
-              }</Button>
+                  id={post.postId}
-            <Quote microblog = {post.postId}></Quote> 
+                  data-likes={post.likeCount}
+                  variant="body2"
+                  color={"textSecondary"}
+                >
+                  Likes {post.likeCount}
+                </Typography>
+                {/* <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like> */}
+                <Button
+                  onClick={this.handleClickLikeButton}
+                  data-key={post.postId}
+                  disabled={loading}
+                  variant="outlined"
+                  color="primary"
+                >
+                  {this.state.likes && this.state.likes.includes(post.postId)
+                    ? "Unlike"
+                    : "Like"}
+                </Button>
+                <Quote microblog={post.postId}></Quote>
 
-            {/* <button>Quote</button> */}
+                {/* <button>Quote</button> */}
-
+              </CardContent>
-          </CardContent>
+            </Card>
-        </Card>
+          ) : (
+            <p></p>
+          )
+        ) : (
+          <p>Loading</p>
+        )
       )
     ) : (
       <p>Loading post...</p>
@@ -139,6 +189,7 @@ class Home extends Component {
 
     return (
       authenticated ? (
+        this.state.loading ? (<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>) :
       <Grid container>
         <Grid item sm={4} xs={8}>
           <Writing_Microblogs />
@@ -160,21 +211,26 @@ class Home extends Component {
                 <b>See the most interesting topics people are following right now.</b> 
               </div>
 
-              <br/><br/><br/><br/>
+              <br />
+              <br />
+              <br />
+              <br />
 
               <div>
                 <b>Join today or sign in if you already have an account.</b>
-                <br/><br/>
+                <br />
+                <br />
                 <form action="./signup">
                   <button className="authButtons signup">Sign up</button>
                 </form>
-                <br/>
+                <br />
                 <form action="./login">
                   <button className="authButtons login">Sign in</button>
                 </form>
               </div>
             </div>
-    ));
+          )
+    );
   }
 }
 
@@ -185,31 +241,29 @@ class Quote extends Component {
       characterCount: 250,
       showModal: false,
       value: ""
-    }
+    };
 
-  this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
+    this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
-  this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleOpenModal = this.handleOpenModal.bind(this);
-  this.handleCloseModal = this.handleCloseModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
-  this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleSubmitWithoutPost(event) {
     const post = {
-      
+      userImage: "bing-url"
-      userImage: "bing-url",
+    };
-    }
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
-    axios.post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
+    axios
-    .then((res) => {
+      .post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
-      
+      .then(res => {
-      console.log(res.data);
+        console.log(res.data);
-    })
+      })
-    .catch(err => {
+      .catch(err => {
-    
+        console.error(err);
-      console.error(err);
+      });
-    });
     event.preventDefault();
   }
 
@@ -234,20 +288,19 @@ class Quote extends Component {
   handleSubmit(event) {
     const quotedPost = {
       quoteBody: this.state.value,
-      userImage: "bing-url",
+      userImage: "bing-url"
     };
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
-    axios.post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
+    axios
-    .then((res) => {
+      .post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
-      
+      .then(res => {
-      console.log(res.data);
+        console.log(res.data);
-    })
+      })
-    .catch(err => {
+      .catch(err => {
-    
+        console.error(err);
-      console.error(err);
+      });
-    });
     event.preventDefault();
     this.setState({ showModal: false, characterCount: 250, value: "" });
   }
@@ -255,14 +308,29 @@ class Quote extends Component {
   render() {
     return (
       <div>
-        <Button variant="outlined" color="primary" onClick={this.handleOpenModal}>Quote with Post</Button>
+        <Button
+          variant="outlined"
+          color="primary"
+          onClick={this.handleOpenModal}
+        >
+          Quote with Post
+        </Button>
         <ReactModal
-           isOpen={this.state.showModal}
+          isOpen={this.state.showModal}
-           style={{content: {height: "50%", width: "25%", marginTop: "auto", marginLeft: "auto", marginRight: "auto", marginBottom : "auto"}}}
+          style={{
+            content: {
+              height: "50%",
+              width: "25%",
+              marginTop: "auto",
+              marginLeft: "auto",
+              marginRight: "auto",
+              marginBottom: "auto"
+            }
+          }}
         >
           <div style={{ width: "200px", marginLeft: "50px" }}>
-          <form style={{ width: "350px"}}>
+            <form style={{ width: "350px" }}>
-            {/* <textarea
+              {/* <textarea
               value={this.state.value}
               required
               maxLength="250"
@@ -275,101 +343,109 @@ class Quote extends Component {
               cols={40}
               rows={20}
             /> */}
-            <TextField
+              <TextField
-              style={{width: 300}}
+                style={{ width: 300 }}
-              value={this.state.value}
+                value={this.state.value}
-              label="Write Quoted Post here..."
+                label="Write Quoted Post here..."
-              required
+                required
-              multiline
+                multiline
-              color="primary"
+                color="primary"
-              rows="14"
+                rows="14"
-              variant="outlined"
+                variant="outlined"
-              inputProps={{
+                inputProps={{
-                maxLength: 250
+                  maxLength: 250
-              }}
+                }}
-              onChange={e => {
+                onChange={e => {
-                this.handleChangeforPost(e);
+                  this.handleChangeforPost(e);
-                this.handleChangeforCharacterCount(e);
+                  this.handleChangeforCharacterCount(e);
-              }}
+                }}
-              autoComplete='off'
+                autoComplete="off"
-            ></TextField>
+              ></TextField>
-            
-            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-              <p2>Characters Left: {this.state.characterCount}</p2>
-            </div>
-              <Button variant="outlined" color="primary" onClick={this.handleSubmit}>Share Quoted Post</Button>
-        
-          <Button variant="outlined" color="primary" onClick={this.handleCloseModal}>Cancel</Button>
-
-          </form>
-        </div>
 
+              <div style={{ fontSize: "14px", marginRight: "-100px" }}>
+                <p2>Characters Left: {this.state.characterCount}</p2>
+              </div>
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={this.handleSubmit}
+              >
+                Share Quoted Post
+              </Button>
 
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={this.handleCloseModal}
+              >
+                Cancel
+              </Button>
+            </form>
+          </div>
         </ReactModal>
-        <Button variant="outlined" color="primary" onClick={this.handleSubmitWithoutPost}>Quote without Post</Button>
+        <Button
-
+          variant="outlined"
+          color="primary"
+          onClick={this.handleSubmitWithoutPost}
+        >
+          Quote without Post
+        </Button>
       </div>
-    )
+    );
   }
 }
 
 class Like extends Component {
-
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
-         num : this.props.count,
+      num: this.props.count
-
+    };
-    }
 
     this.handleClick = this.handleClick.bind(this);
   }
 
   componentDidMount() {
     this.setState({
-      like: localStorage.getItem(this.props.microBlog + this.props.name) === "false"
+      like:
-
+        localStorage.getItem(this.props.microBlog + this.props.name) === "false"
-    })
+    });
-
   }
 
-
+  handleClick() {
-  
-  handleClick(){
-
     this.setState({
       like: !this.state.like
     });
-    localStorage.setItem(this.props.microBlog + this.props.name, this.state.like.toString())
+    localStorage.setItem(
-
+      this.props.microBlog + this.props.name,
-    if(this.state.like == false)
+      this.state.like.toString()
-          {
+    );
-            this.setState(() => {
-              return {num: this.state.num + 1}
-           });
-            axios.get(`/like/${this.props.microBlog}`)
-            .then((res) => {
-                console.log(res.data);
-            })
-            .catch((err) => {
-              console.log(err);
-            })
-          }
-          else
-          {
-            this.setState(() => {
-              return {num: this.state.num - 1}
-           });
-          axios.get(`/unlike/${this.props.microBlog}`)
-                .then((res) => {
-                    console.log(res.data);
-                })
-                .catch((err) => {
-                  console.log(err);
-                })
-            }
-            
 
+    if (this.state.like == false) {
+      this.setState(() => {
+        return { num: this.state.num + 1 };
+      });
+      axios
+        .get(`/like/${this.props.microBlog}`)
+        .then(res => {
+          console.log(res.data);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    } else {
+      this.setState(() => {
+        return { num: this.state.num - 1 };
+      });
+      axios
+        .get(`/unlike/${this.props.microBlog}`)
+        .then(res => {
+          console.log(res.data);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    }
   }
 
   /* componentDidMount() {
@@ -391,32 +467,29 @@ class Like extends Component {
     }
   }  */
 
-    render() {
+  render() {
-      
+    const label = this.state.like ? "Unlike" : "Like";
-      const label = this.state.like ? 'Unlike' : 'Like'
+    return (
-      return(
+      <div>
-        
+        <Typography variant="body2" color={"textSecondary"}>
-
+          Likes {this.state.num}
-        <div>
+        </Typography>
-          <Typography variant="body2" color={"textSecondary"}>Likes {this.state.num}</Typography>
+        <button onClick={this.handleClick}>{label}</button>
-          <button onClick={this.handleClick}>{label}</button>
+      </div>
-        </div>
+    );
-      )
+  }
-    }
-
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   user: state.user,
   UI: state.UI
-})
+});
-
 
 const mapActionsToProps = {
   likePost,
   unlikePost,
   getLikes
-}
+};
 
 Home.propTypes = {
   user: PropTypes.object.isRequired,
@@ -425,16 +498,17 @@ Home.propTypes = {
   getLikes: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
   UI: PropTypes.object.isRequired
-}
+};
 
 Like.propTypes = {
   user: PropTypes.object.isRequired
-}
+};
 
 Quote.propTypes = {
   user: PropTypes.object.isRequired
-}
+};
-
-
-export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Home, Like, Quote));
 
+export default connect(
+  mapStateToProps,
+  mapActionsToProps
+)(withStyles(styles)(Home, Like, Quote));

twistter-frontend/src/pages/otherUser.js

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

twistter-frontend/src/pages/user.js

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