Made the posts look prettier

twistter-frontend/src/pages/user.js

@@ -7,6 +7,8 @@ import { Link } from 'react-router-dom';
 import { makeStyles, styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
 import Chip from '@material-ui/core/Chip';
 import Button from '@material-ui/core/Button';
 import Typography from "@material-ui/core/Typography";
@@ -17,7 +19,6 @@ import TextField from '@material-ui/core/TextField';
 import Userline from '../Userline';
 import noImage from '../images/no-img.png';
 import Writing_Microblogs from '../Writing_Microblogs';
-import PostSkeleton from '../util/PostSkeleton';
 
 const MyChip = styled(Chip)({
   margin: 2,
@@ -99,25 +100,31 @@ class user extends Component {
         onDelete={ (topic) => this.handleDelete(topic)}/>)
     ) : (<p> loading topics...</p>);
 
-    let imageMarkup = this.state.imageUrl ? (
-      <img
-      src={this.state.imageUrl}
-      height="250"
-      width="250"
-      />
-    ) : (<img src={noImage}/>);
+    let imageMarkup = this.state.imageUrl ? (<img src={this.state.imageUrl} height="150" width="150" />) : 
+                                            (<img src={noImage} height="150" width="150"/>);
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
-      <p>
-        {imageMarkup} <br />
-        {post.userHandle} <br />
-        {post.createdAt} <br />
-        {post.microBlogTitle} <br />
-        {post.body} <br />
-        {post.microBlogTopics} <br />
-        Likes {post.likeCount} Comments {post.commentCount} <br />
-      </p>)
+        <Card>
+          <CardContent>
+            <Typography>
+              {
+                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                                      (<img src={noImage} height="50" width="50"/>)
+              }
+            </Typography>
+            <Typography variant="h7"><b>{post.userHandle}</b></Typography>
+            <Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
+            <br />
+            <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
+            <Typography variant="body2">{post.body}</Typography>
+            <br />
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <br />
+            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
+          </CardContent>
+        </Card>
+      )
     ) : (<p>My Posts</p>);
 
     return (
@@ -133,7 +140,7 @@ class user extends Component {
           margin="normal"
           variant="outlined"
           value={this.state.newTopic}
-          onChange={ (event) => this.handleChange(event)}
+          onChange={(event) => this.handleChange(event)}
           />
           <AddCircle
             color="primary"
@@ -144,10 +151,10 @@ class user extends Component {
           <Button component={ Link } to='/edit'>Edit Profile Info</Button>
         </Grid>
         <Grid item sm={4} xs={8}>
-          <Writing_Microblogs />
+          {postMarkup}
         </Grid>
         <Grid item sm={4} xs={8}>
-          {postMarkup}
+          <Writing_Microblogs />
         </Grid>
       </Grid>
     );

twistter-frontend/src/util/PostSkeleton.js

@@ -1,12 +1,12 @@
 /* eslint-disable */
-import React, { Component } from 'react';
+import React, { Fragment } from 'react';
 import NoImg from '../images/no-img.png';
 import PropTypes from 'prop-types';
 // MUI
 import Card from '@material-ui/core/Card';
 import CardMedia from '@material-ui/core/CardMedia';
 import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+
 import withStyles from '@material-ui/core/styles/withStyles';
 
 const styles = (theme) => ({
@@ -50,20 +50,23 @@ const styles = (theme) => ({
   }
 });
 
-class PostSkeleton extends Component {
-  render() {
-    const { classes, post: { body, createdAt, userImage, userHandle, screamId, likeCount, commentCount } } = this.props;
-    return (
-      <Card>
-        <CardMedia image={userImage} />
-        <CardContent>
-          <Typography variant="h5">{userHandle}</Typography>
-          <Typography variant="body2" color="textSecondary">{createdAt}</Typography>
-          <Typography variant="body1">{body}</Typography>
-        </CardContent>
-      </Card>
-    );
-  };
+const PostSkeleton = (props) => {
+  const { classes } = props;
+
+  const content = Array.from({ length: 5 }).map((item, index) => (
+    <Card className={classes.card} key={index}>
+      <CardMedia className={classes.cover} image={NoImg} />
+      <CardContent className={classes.cardContent}>
+        <div className={classes.handle} />
+        <div className={classes.date} />
+        <div className={classes.fullLine} />
+        <div className={classes.fullLine} />
+        <div className={classes.halfLine} />
+      </CardContent>
+    </Card>
+  ));
+
+  return <Fragment>{content}</Fragment>;
 };
 
 PostSkeleton.propTypes = {
@@ -71,3 +74,4 @@ PostSkeleton.propTypes = {
 };
 
 export default withStyles(styles)(PostSkeleton);
+