changed putPost function to see postID

functions/handlers/post.js

@@ -1,6 +1,8 @@
 /* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
-const admin = require('firebase-admin');
+const { admin, db } = require("../util/admin");
+
+
 exports.putPost = (req, res) => {
 
     const newPost = {
@@ -16,10 +18,15 @@ exports.putPost = (req, res) => {
         
     };
 
+    const resPost;
+
     admin.firestore().collection('posts').add(newPost)
     .then((doc) => {
-        const resPost = newPost;
+        resPost = newPost;
         resPost.postId = doc.id;
+        return admin.firestore().doc(`posts/${doc.id}`).set(resPost)
+    })
+    .then(() => {
         return res.status(200).json(resPost);
     })
     .catch((err) => {
@@ -29,7 +36,7 @@ exports.putPost = (req, res) => {
 };
 
 exports.getallPostsforUser = (req, res) => {
-    admin.firestore().collection('posts').where('userHandle', '==', 'new user' ).get()
+    db.collection('posts').where('userHandle', '==', 'new user' ).get()
     .then((data) => {
         let posts = [];
         data.forEach(function(doc) {
@@ -43,6 +50,29 @@ exports.getallPostsforUser = (req, res) => {
     })
 };
 
-exports.getFilteredPosts = (req, res) => {
-    admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
+exports.getAllPosts = (req, res) => {
+    db.collection('posts')
+        .orderBy('createdAt', 'desc')
+        .get()
+        .then((data) => {
+            let posts = [];
+            data.forEach((doc) => {
+              posts.push({
+                body: doc.data().body,
+                userHandle: doc.data().userHandle,
+                createdAt: doc.data().createdAt,
+                commentCount: doc.data().commentCount,
+                likeCount: doc.data().likeCount,
+                userImage: doc.data().userImage,
+                microBlogTitle: doc.data().microBlogTitle,
+                microBlogTopics: doc.data().microBlogTopics,
+                postId: doc.id,
+              });
+            });
+            return res.status(200).json(posts);
+          })
+          .catch((err) => {
+            console.error(err);
+            return res.status(500).json({ error: err.code });
+          });
 };

functions/handlers/topic.js

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
 const admin = require('firebase-admin');
 exports.putTopic = (req, res) => {

functions/handlers/users.js

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/catch-or-return */
 
 const { admin, db } = require("../util/admin");

functions/index.js

@@ -44,7 +44,7 @@ app.get("/user", fbAuth, getAuthenticatedUser);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, putPost 
+const { getallPostsforUser, putPost, getAllPosts
 } = require("./handlers/post");
 
 app.get("/getallPostsforUser", getallPostsforUser);
@@ -52,6 +52,9 @@ app.get("/getallPostsforUser", getallPostsforUser);
 // Adds one post to the database
 app.post("/putPost", fbAuth, putPost);
 
+// Displays posts on home page
+app.get("/getAllPosts", getAllPosts );
+
 /*------------------------------------------------------------------*
  *  handlers/topic.js                                                *
  *------------------------------------------------------------------*/

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('/getAllPosts')
+      .then(res => {
+        this.setState({
+          posts: res.data
+        })
+      })
+      .catch(err => console.log(err));
   }
   render() {
     const classes = this.props;
@@ -85,11 +92,16 @@ class user extends Component {
         label={{topic}.topic.topic}
         onDelete={handleDelete}/>)
     ) : (<p> loading topics...</p>);
+   
+    let posts = classes.data
+    let recentPostsMarkup = posts ? (
+      this.state.posts.map(post => <Posts key={post.postId} post={post}/>)
+    ) : ( <p> Loading... </p> );
 
     return (
       <Grid container spacing={16}>
         <Grid item sm={8} xs={12}>
-          <p>Post</p>
+          {recentPostsMarkup}
         </Grid>
         <Grid item sm={4} xs={12}>
           <img src={noImage}/>