Displaying posts with image, time and content

functions/handlers/post.js

@@ -42,7 +42,3 @@ exports.getallPostsforUser = (req, res) => {
         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', '==')
-};

twistter-frontend/src/App.css

@@ -52,3 +52,6 @@ body {
   color: #1da1f2;
 }
 
+.a{
+  text-decoration: none;
+}

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);

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}>