finished rendering userline for user and changed character limit for writing microblogs

twistter-frontend/src/Userline.js

@@ -2,6 +2,12 @@ import React, { Component } from "react";
 import { BrowserRouter as Router } from 'react-router-dom';
 import Route from 'react-router-dom/Route';
 import axios from 'axios';
+import Box from '@material-ui/core/Box'
+import {borders} from '@material-ui/system';
+import { sizing } from '@material-ui/system';
+var moment = require('moment');
+
+
 
 class Userline extends Component {
 
@@ -23,20 +29,36 @@ class Userline extends Component {
                 this.setState({microBlogs : post})
 
             })
-            
-            
-
-            
-     }
+    }
 
      render() {
-         let sortedPosts = [];
-            
+         const sortedPosts = (this.state.microBlogs).sort((a,b) =>
+             -a.createdAt.localeCompare(b.createdAt)
+         )
+                
         return (
-            <ul>
-                { this.state.microBlogs.map(microBlog => <p>{microBlog.body}</p>)}
-            </ul>
-        )
-     }
+            <div>
+            <div style={{fontsize: "13px", textAlign: "left", marginLeft: "14px"}}>
+                <p>Userline</p>
+            </div>
+            <Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign= "left" padding="5px" flexWrap= "wrap" flexDirection= "row" >
+                <div style={{flexWrap: "wrap", flex: "1", flexDirection: "row", wordBreak: "break-word"}}>
+                <p>
+                {sortedPosts.map((microBlog) => <p>Microblog Title: {microBlog.microBlogTitle}
+                                                          <br></br>When post was created: {microBlog.createdAt.substring(0,10) + 
+                                                          " " + microBlog.createdAt.substring(11,19)}
+                                                          <br></br>Number of comments: {microBlog.commentCount}
+                                                          <br></br>Number of likes: {microBlog.likeCount}
+                                                          <br></br>Body of post: {microBlog.body}
+                                                          <br></br>Tagged topics: {microBlog.microBlogTopics.join("," + " ")}               
+                </p>)} 
+                </p>
+                </div>
+            </Box>
+            </div>
+            
+                )
+        }
+        
 }
 export default Userline;