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

functions/handlers/post.js

@@ -28,7 +28,7 @@ exports.putPost = (req, res) => {
 
 exports.getallPostsforUser = (req, res) => {
 
-    admin.firestore().collection('posts').where('userHandle', '==', 'user' ).get()
+    admin.firestore().collection('posts').where('userHandle', '==', 'new user' ).get()
         .then((data) => {
             let posts = [];
             data.forEach(function(doc) {

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;

twistter-frontend/src/Writing_Microblogs.js

@@ -12,7 +12,7 @@ class Writing_Microblogs extends Component {
             value: '',
             title: '',
             topics: '',
-            characterCount: 10
+            characterCount: 250
             
         };
         
@@ -48,8 +48,9 @@ class Writing_Microblogs extends Component {
             
         )
         console.log(response.data);
+        alert('Post was shared successfully!');
         event.preventDefault();
-        this.setState({value: '', title: '',characterCount: 10, topics: ''})
+        this.setState({value: '', title: '',characterCount: 250, topics: ''})
     }
 
     handleChangeforPost(event) {
@@ -58,7 +59,7 @@ class Writing_Microblogs extends Component {
 
     handleChangeforCharacterCount(event) {
         const charCount = event.target.value.length
-        const charRemaining = 10 - charCount
+        const charRemaining = 250 - charCount
         this.setState({characterCount: charRemaining })
     
     }
@@ -80,7 +81,7 @@ class Writing_Microblogs extends Component {
              
              <div style={{ width: "200px", marginLeft: "50px"}}>        
                 <form onSubmit={this.handleSubmit}>
-                    <textarea value={this.state.value} required maxLength="10" placeholder= "Write Microblog here..." 
+                    <textarea value={this.state.value} required maxLength="250" placeholder= "Write Microblog here..." 
                         onChange = { (e) => { this.handleChangeforPost(e); this.handleChangeforCharacterCount(e) } } cols={40} rows={20} />      
                  <div style={{ fontSize: "14px", marginRight: "-100px"}} >
                     <p2>Characters Left: {this.state.characterCount}</p2>