From d6a0b0b1bcef68541788c94650ac3e4a4d76d986 Mon Sep 17 00:00:00 2001
From: shobhitm23 <smakhij@purdue.edu>
Date: Mon, 28 Oct 2019 01:33:20 -0400
Subject: [PATCH] Displaying posts with image, time and content

---
 functions/handlers/post.js                    |  4 --
 twistter-frontend/src/App.css                 |  3 +
 .../src/components/post/Posts.js              | 55 +++++++++++++++++++
 twistter-frontend/src/pages/user.js           | 13 ++++-
 4 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 twistter-frontend/src/components/post/Posts.js

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 2ae8d3c..6159e71 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -41,8 +41,4 @@ exports.getallPostsforUser = (req, res) => {
         console.error(err);
         return res.status(500).json({error: 'Failed to fetch all posts written by specific user.'})
     })
-};
-
-exports.getFilteredPosts = (req, res) => {
-    admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
 };
\ No newline at end of file
diff --git a/twistter-frontend/src/App.css b/twistter-frontend/src/App.css
index 940f1fc..af56c8c 100644
--- a/twistter-frontend/src/App.css
+++ b/twistter-frontend/src/App.css
@@ -52,3 +52,6 @@ body {
   color: #1da1f2;
 }
 
+.a{
+  text-decoration: none;
+}
diff --git a/twistter-frontend/src/components/post/Posts.js b/twistter-frontend/src/components/post/Posts.js
new file mode 100644
index 0000000..86c1cce
--- /dev/null
+++ b/twistter-frontend/src/components/post/Posts.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import withStyles from '@material-ui/core/styles/withStyles';
+import Link from 'react-router-dom/Link';
+// MUI Stuff
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import { Typography } from '@material-ui/core';
+ 
+
+const styles = {
+    card:{
+        display: 'flex',
+        marginBottom: 20,
+    },
+    image:{
+        minWidth: 200,
+    },
+    content: {
+        padding: 25,
+        objectFit: 'cover',
+    }
+}
+class Posts extends Component {
+    render() {
+          const { classes, post : {body, createdAt, userImage, userHandle, commmentCount, likeCount, microBlogTopics} } = this.props
+
+        return (
+            <Card className={classes.card}>
+                <CardMedia
+                image={userImage}
+                title="Profile Image"
+                className={classes.image}/>
+                <CardContent class={classes.content}>
+                    <Typography 
+                        variant = "h5" 
+                        component={Link} 
+                        to={`/users/${userHandle}`}
+                        color="primary"
+                        >
+                        {userHandle}
+                    </Typography>
+                    <Typography 
+                        variant = "body2" 
+                        color="textSecondary">
+                        {createdAt}
+                    </Typography>
+                    <Typography variant="body1">{body}</Typography>
+                </CardContent>
+            </Card>            
+        )
+    }
+}
+
+export default withStyles(styles)(Posts);
\ No newline at end of file
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 435c92c..8d0ca4d 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -17,7 +17,7 @@ import AddCircle from '@material-ui/icons/AddCircle';
 import Profile from '../components/profile/Profile';
 import Userline from '../Userline';
 import noImage from '../images/no-img.png';
-
+import Posts from '../components/post/Posts';
 
 const PostCard = styled(Card)({
   background: 'linear-gradient(45deg, #1da1f2 90%)',
@@ -71,6 +71,13 @@ class user extends Component {
         })
       })
       .catch(err => console.log(err));
+    axios.get('/posts')
+      .then(res => {
+        this.setState({
+          posts: res.data
+        })
+      })
+      .catch(err => console.log(err));
   }
   render() {
     const classes = this.props;
@@ -86,6 +93,10 @@ class user extends Component {
         onDelete={handleDelete}/>)
     ) : (<p> loading topics...</p>);
 
+    let recentPostsMarkup = this.state.posts ? (
+      this.state.posts.map(post => <Posts post={post}/>)
+    ) : ( <p> Loading... </p> );
+
     return (
       <Grid container spacing={16}>
         <Grid item sm={8} xs={12}>