display posts on other user's page

functions/handlers/post.js

@@ -1,297 +1,352 @@
 /* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
-const admin = require('firebase-admin');
-const { db } = require('../util/admin');
-
+const admin = require("firebase-admin");
+const { db } = require("../util/admin");
 
 exports.putPost = (req, res) => {
-    const newPost = {
-        body: req.body.body,
-        userHandle: req.user.handle,
-        userImage: req.body.userImage,
-        userID: req.user.uid,
-        microBlogTitle: req.body.microBlogTitle,
-        createdAt: new Date().toISOString(),
-        likeCount: 0,
-        commentCount: 0,
-        microBlogTopics: req.body.microBlogTopics,
-        quoteBody: null
-    };
+  const newPost = {
+    body: req.body.body,
+    userHandle: req.user.handle,
+    userImage: req.body.userImage,
+    userID: req.user.uid,
+    microBlogTitle: req.body.microBlogTitle,
+    createdAt: new Date().toISOString(),
+    likeCount: 0,
+    commentCount: 0,
+    microBlogTopics: req.body.microBlogTopics,
+    quoteBody: null
+  };
 
-    admin.firestore().collection('posts').add(newPost)
-    .then((doc) => {
-        doc.update({postId: doc.id})
-        const resPost = newPost;
-        resPost.postId = doc.id;
-        return res.status(200).json(resPost);
+  admin
+    .firestore()
+    .collection("posts")
+    .add(newPost)
+    .then(doc => {
+      doc.update({ postId: doc.id });
+      const resPost = newPost;
+      resPost.postId = doc.id;
+      return res.status(200).json(resPost);
     })
-    .catch((err) => {
-        console.error(err);
-        return res.status(500).json({ error: 'something went wrong'});
+    .catch(err => {
+      console.error(err);
+      return res.status(500).json({ error: "something went wrong" });
     });
 };
 
 exports.getallPostsforUser = (req, res) => {
-    var post_query = admin.firestore().collection("posts").where("userHandle", "==", req.user.handle);
+  var post_query = admin
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", req.user.handle);
 
-    post_query.get()
+  post_query
+    .get()
     .then(function(myPosts) {
-        let posts = [];
-        myPosts.forEach(function(doc) {
-            posts.push(doc.data());
-        });
-        return res.status(200).json(posts);
+      let posts = [];
+      myPosts.forEach(function(doc) {
+        posts.push(doc.data());
+      });
+      return res.status(200).json(posts);
     })
     .then(function() {
-    return res.status(200).json("Successfully retrieved all user's posts from database.");
-    
+      return res
+        .status(200)
+        .json("Successfully retrieved all user's posts from database.");
     })
     .catch(function(err) {
-    return res.status(500).json("Failed to retrieve user's posts from database.", err);
+      return res
+        .status(500)
+        .json("Failed to retrieve user's posts from database.", err);
     });
 };
 
 exports.getallPosts = (req, res) => {
-    var post_query = admin.firestore().collection("posts");
-    post_query.get()
+  var post_query = admin.firestore().collection("posts");
+  post_query
+    .get()
     .then(function(allPosts) {
-        let posts = [];
-        allPosts.forEach(function(doc) {
-            posts.push(doc.data());
-        });
-        return res.status(200).json(posts);
+      let posts = [];
+      allPosts.forEach(function(doc) {
+        posts.push(doc.data());
+      });
+      return res.status(200).json(posts);
     })
     .then(function() {
-    return res.status(200).json("Successfully retrieved every post from database.");
+      return res
+        .status(200)
+        .json("Successfully retrieved every post from database.");
     })
     .catch(function(err) {
-    return res.status(500).json("Failed to retrieve posts from database.", err);
+      return res
+        .status(500)
+        .json("Failed to retrieve posts from database.", err);
+    });
+};
+
+exports.getOtherUsersPosts = (req, res) => {
+  var post_query = admin
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", req.body.handle);
+
+  post_query
+    .get()
+    .then(function(myPosts) {
+      let posts = [];
+      myPosts.forEach(function(doc) {
+        posts.push(doc.data());
+      });
+      return res.status(200).json(posts);
+    })
+    .then(function() {
+      return res
+        .status(200)
+        .json("Successfully retrieved all user's posts from database.");
+    })
+    .catch(function(err) {
+      return res
+        .status(500)
+        .json("Failed to retrieve user's posts from database.", err);
     });
 };
 
 exports.quoteWithPost = (req, res) => {
+  let quoteData;
+  const quoteDoc = admin
+    .firestore()
+    .collection("quote")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
-    let quoteData;
-    const quoteDoc = admin.firestore().collection('quote').
-    where('userHandle', '==', req.user.handle).
-    where('postId', '==', req.params.postId).limit(1);
+  const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    const postDoc = db.doc(`/posts/${req.params.postId}`);
-
-    postDoc.get()
-    .then((doc) => {
-        if(doc.exists) {
-            quoteData = doc.data();
-            return quoteDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
-        }
-    })
-    .then((data) => {
-        if(data.empty) {
-            return admin.firestore().collection('quote').add({
-                quoteId : req.params.postId,
-                userHandle : req.user.handle,
-                quoteBody : req.body.quoteBody
-            })
-            .then(() => {
-                const post = {
-                   body: quoteData.body,
-                   userHandle : req.user.handle,
-                   quoteBody: req.body.quoteBody,
-                   createdAt : new Date().toISOString(),
-                   userImage: req.body.userImage,
-                   likeCount: 0,
-                   commentCount: 0,
-                   userID: req.user.uid,
-                   microBlogTitle: quoteData.microBlogTitle,
-                   microBlogTopics: quoteData.microBlogTopics,
-                   quoteId: req.params.postId
-                }
-               return admin.firestore().collection('posts').add(post)
-               .then((doc) => {
-                doc.update({postId: doc.id})
-                const resPost = post;
-                resPost.postId = doc.id;
-                return res.status(200).json(resPost);
-               })
-            })
-        }
-        else {
-            return res.status(400).json({ error: 'Post has already been quoted.' });
-          }
-    })
-    .catch((err) => {
-        return res.status(500).json({error: err});
-
-    })
-
-}
-
-exports.quoteWithoutPost = (req, res) => {
-    let quoteData;
-    const quoteDoc = admin.firestore().collection('quote').
-    where('userHandle', '==', req.user.handle).
-    where('postId', '==', req.params.postId).limit(1);
-
-    const postDoc = db.doc(`/posts/${req.params.postId}`);
-
-    postDoc.get()
-    .then((doc) => {
-        if(doc.exists) {
-            quoteData = doc.data();
-            return quoteDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
-        }
-    })
-    .then((data) => {
-        if(data.empty) {
-            return admin.firestore().collection('quote').add({
-                quoteId : req.params.postId,
-                userHandle : req.user.handle,
-                quoteBody: null
-            })
-            .then(() => {
-                const post = {
-                userHandle : req.user.handle,
-                body: quoteData.body,
-                quoteBody: null,
-                createdAt : new Date().toISOString(),
-                likeCount: 0,
-                commentCount: 0,
-                userID: req.user.uid,
-                userImage: req.body.userImage,
-                microBlogTitle: quoteData.microBlogTitle,
-                microBlogTopics: quoteData.microBlogTopics,
-                quoteId: req.params.postId
-                }
-               return admin.firestore().collection('posts').add(post)
-               .then((doc) => {
-                doc.update({postId: doc.id})
-                const resPost = post;
-                resPost.postId = doc.id;
-                return res.status(200).json(resPost);
-               })
-                
-
-               
-            })
-        }
-        else {
-        return res.status(400).json({ error: 'Post has already been quoted.' });
+  postDoc
+    .get()
+    .then(doc => {
+      if (doc.exists) {
+        quoteData = doc.data();
+        return quoteDoc.get();
+      } else {
+        return res.status(404).json({ error: "Post not found" });
       }
     })
-    .catch((err) => {
-        return res.status(500).json({error: 'Something is wrong'});
-
+    .then(data => {
+      if (data.empty) {
+        return admin
+          .firestore()
+          .collection("quote")
+          .add({
+            quoteId: req.params.postId,
+            userHandle: req.user.handle,
+            quoteBody: req.body.quoteBody
+          })
+          .then(() => {
+            const post = {
+              body: quoteData.body,
+              userHandle: req.user.handle,
+              quoteBody: req.body.quoteBody,
+              createdAt: new Date().toISOString(),
+              userImage: req.body.userImage,
+              likeCount: 0,
+              commentCount: 0,
+              userID: req.user.uid,
+              microBlogTitle: quoteData.microBlogTitle,
+              microBlogTopics: quoteData.microBlogTopics,
+              quoteId: req.params.postId
+            };
+            return admin
+              .firestore()
+              .collection("posts")
+              .add(post)
+              .then(doc => {
+                doc.update({ postId: doc.id });
+                const resPost = post;
+                resPost.postId = doc.id;
+                return res.status(200).json(resPost);
+              });
+          });
+      } else {
+        return res.status(400).json({ error: "Post has already been quoted." });
+      }
     })
+    .catch(err => {
+      return res.status(500).json({ error: err });
+    });
+};
 
-}
+exports.quoteWithoutPost = (req, res) => {
+  let quoteData;
+  const quoteDoc = admin
+    .firestore()
+    .collection("quote")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
+
+  const postDoc = db.doc(`/posts/${req.params.postId}`);
+
+  postDoc
+    .get()
+    .then(doc => {
+      if (doc.exists) {
+        quoteData = doc.data();
+        return quoteDoc.get();
+      } else {
+        return res.status(404).json({ error: "Post not found" });
+      }
+    })
+    .then(data => {
+      if (data.empty) {
+        return admin
+          .firestore()
+          .collection("quote")
+          .add({
+            quoteId: req.params.postId,
+            userHandle: req.user.handle,
+            quoteBody: null
+          })
+          .then(() => {
+            const post = {
+              userHandle: req.user.handle,
+              body: quoteData.body,
+              quoteBody: null,
+              createdAt: new Date().toISOString(),
+              likeCount: 0,
+              commentCount: 0,
+              userID: req.user.uid,
+              userImage: req.body.userImage,
+              microBlogTitle: quoteData.microBlogTitle,
+              microBlogTopics: quoteData.microBlogTopics,
+              quoteId: req.params.postId
+            };
+            return admin
+              .firestore()
+              .collection("posts")
+              .add(post)
+              .then(doc => {
+                doc.update({ postId: doc.id });
+                const resPost = post;
+                resPost.postId = doc.id;
+                return res.status(200).json(resPost);
+              });
+          });
+      } else {
+        return res.status(400).json({ error: "Post has already been quoted." });
+      }
+    })
+    .catch(err => {
+      return res.status(500).json({ error: "Something is wrong" });
+    });
+};
 
 exports.checkforLikePost = (req, res) => {
-    const likedPostDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
-    .where('postId', '==', req.params.postId).limit(1);
-    let result;
+  const likedPostDoc = admin
+    .firestore()
+    .collection("likes")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
+  let result;
 
-    likedPostDoc.get()
-    .then((data) => {
-        if (data.empty) {
-            result = false;
-            return res.status(200).json(result);
-        }
-        else
-        {
-            result = true;
-            return res.status(200).json(result);
-        }
-    })
-}
+  likedPostDoc.get().then(data => {
+    if (data.empty) {
+      result = false;
+      return res.status(200).json(result);
+    } else {
+      result = true;
+      return res.status(200).json(result);
+    }
+  });
+};
 
 exports.likePost = (req, res) => {
-    let postData;
-    const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
-    .where('postId', '==', req.params.postId).limit(1);
+  let postData;
+  const likeDoc = admin
+    .firestore()
+    .collection("likes")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
-    const postDoc = db.doc(`/posts/${req.params.postId}`);
+  const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
-    .then((doc) => {
-        if(doc.exists) {
-            postData = doc.data();
-            return likeDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
-        }
+  postDoc
+    .get()
+    .then(doc => {
+      if (doc.exists) {
+        postData = doc.data();
+        return likeDoc.get();
+      } else {
+        return res.status(404).json({ error: "Post not found" });
+      }
     })
-    .then((data) => {
-        if (data.empty) {
-            return admin.firestore().collection('likes').add({
-                postId : req.params.postId,
-                userHandle: req.user.handle
-
-            })
-            .then(() => {
-                postData.likeCount++;
-                return postDoc.update({likeCount : postData.likeCount})
-            })
-            .then(() => {
-                return res.status(200).json(postData);
-            })
-        }
+    .then(data => {
+      if (data.empty) {
+        return admin
+          .firestore()
+          .collection("likes")
+          .add({
+            postId: req.params.postId,
+            userHandle: req.user.handle
+          })
+          .then(() => {
+            postData.likeCount++;
+            return postDoc.update({ likeCount: postData.likeCount });
+          })
+          .then(() => {
+            return res.status(200).json(postData);
+          });
+      }
     })
-    .catch((err) => {
-        return res.status(500).json({error: 'Something is wrong'});
-    })
-
-}
-
+    .catch(err => {
+      return res.status(500).json({ error: "Something is wrong" });
+    });
+};
 
 exports.unlikePost = (req, res) => {
+  let postData;
+  const likeDoc = admin
+    .firestore()
+    .collection("likes")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
-    let postData;
-    const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
-    .where('postId', '==', req.params.postId).limit(1);
+  const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    const postDoc = db.doc(`/posts/${req.params.postId}`);
-
-    postDoc.get()
-    .then((doc) => {
-        if(doc.exists) {
-            postData = doc.data();
-            return likeDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
-        }
+  postDoc
+    .get()
+    .then(doc => {
+      if (doc.exists) {
+        postData = doc.data();
+        return likeDoc.get();
+      } else {
+        return res.status(404).json({ error: "Post not found" });
+      }
     })
-    .then((data) => {
-            return db
-              .doc(`/likes/${data.docs[0].id}`)
-              .delete()
-              .then(() => {
-                postData.likeCount--;
-                return postDoc.update({ likeCount: postData.likeCount });
-              })
-              .then(() => {
-                res.status(200).json(postData);
-              });
-          
+    .then(data => {
+      return db
+        .doc(`/likes/${data.docs[0].id}`)
+        .delete()
+        .then(() => {
+          postData.likeCount--;
+          return postDoc.update({ likeCount: postData.likeCount });
+        })
+        .then(() => {
+          res.status(200).json(postData);
+        });
     })
-    .catch((err) => {
-        console.error(err);
-        return res.status(500).json({error: 'Something is wrong'});
-    })
-
-}
+    .catch(err => {
+      console.error(err);
+      return res.status(500).json({ error: "Something is wrong" });
+    });
+};
 
 exports.getFilteredPosts = (req, res) => {
-    admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
+  admin
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", "new user")
+    .where("microBlogTopics", "==");
 };

functions/index.js

@@ -75,7 +75,17 @@ app.post("/removeSub", fbAuth, removeSub);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost, quoteWithPost, quoteWithoutPost, checkforLikePost} = require("./handlers/post");
+const {
+  getallPostsforUser,
+  getallPosts,
+  putPost,
+  likePost,
+  unlikePost,
+  quoteWithPost,
+  quoteWithoutPost,
+  checkforLikePost,
+  getOtherUsersPosts
+} = require("./handlers/post");
 
 app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
@@ -91,7 +101,7 @@ app.get("/checkforLikePost/:postId", fbAuth, checkforLikePost);
 app.post("/quoteWithPost/:postId", fbAuth, quoteWithPost);
 app.post("/quoteWithoutPost/:postId", fbAuth, quoteWithoutPost);
 
-
+app.post("/getOtherUsersPosts", fbAuth, getOtherUsersPosts);
 
 /*------------------------------------------------------------------*
  *  handlers/topic.js                                                *

twistter-frontend/package.json

@@ -43,5 +43,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5001/twistter-e4649/us-central1/api"
+  "proxy": "http://localhost:5006/twistter-e4649/us-central1/api"
 }

twistter-frontend/src/pages/otherUser.js

@@ -7,6 +7,8 @@ import axios from "axios";
 
 // Material UI and React Router
 import { makeStyles, styled } from "@material-ui/core/styles";
+import withStyles from "@material-ui/core/styles/withStyles";
+
 import { Link } from "react-router-dom";
 import Card from "@material-ui/core/Card";
 import CardMedia from "@material-ui/core/CardMedia";
@@ -30,14 +32,52 @@ const MyChip = styled(Chip)({
   color: "primary"
 });
 
+const styles = {
+  button: {
+    positon: "relative",
+    float: "left",
+    marginLeft: 30,
+    marginTop: 20
+  },
+  paper: {
+    // marginLeft: "10%",
+    // marginRight: "10%"
+  },
+  card: {
+    marginBottom: 5
+  },
+  profileImage: {
+    marginTop: 20
+  },
+  topicsContainer: {
+    border: "lightgray solid 1px",
+    marginTop: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+    height: 300
+  },
+  addCircle: {
+    width: 65,
+    height: 65,
+    marginTop: 10
+  },
+  username: {
+    marginBottom: 100
+  }
+};
+
 class user extends Component {
-  state = {
-    profile: window.location.pathname.split("/").pop(),
-    imageUrl: null,
-    topics: null,
-    user: null,
-    following: null
-  };
+  constructor() {
+    super();
+    this.state = {
+      profile: window.location.pathname.split("/").pop(),
+      imageUrl: null,
+      topics: null,
+      user: null,
+      following: null,
+      posts: null
+    };
+  }
 
   handleSub = () => {
     if (this.state.following === true) {
@@ -92,34 +132,22 @@ class user extends Component {
         });
       })
       .catch(err => console.log(err));
+
+    axios
+      .post("/getOtherUsersPosts", {
+        handle: this.state.profile
+      })
+      .then(res => {
+        // console.log(res.data);
+        this.setState({
+          posts: res.data
+        });
+      })
+      .catch(err => console.log(err));
   }
 
   render() {
-    let profileMarkup = this.state.profile ? (
-      <div>
-        <Typography variant="h5">
-          @{this.state.profile}{" "}
-          {this.state.verified ? (
-            <VerifiedIcon style={{ fill: "#1397D5" }} />
-          ) : null}
-        </Typography>
-      </div>
-    ) : (
-      <p>loading username...</p>
-    );
-    let topicsMarkup = this.state.topics ? (
-      this.state.topics.map(
-        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
-      )
-    ) : (
-      <p> loading topics...</p>
-    );
-
-    let imageMarkup = this.state.imageUrl ? (
-      <img src={this.state.imageUrl} height="150" width="150" />
-    ) : (
-      <img src={noImage} height="150" width="150" />
-    );
+    const { classes } = this.props;
 
     let followMarkup = this.state.following ? (
       <Button variant="contained" color="primary" onClick={this.handleSub}>
@@ -130,18 +158,87 @@ class user extends Component {
         follow
       </Button>
     );
+    let profileMarkup = this.state.profile ? (
+      <div>
+        <Typography variant="h5">
+          @{this.state.profile}{" "}
+          {this.state.verified ? (
+            <VerifiedIcon style={{ fill: "#1397D5" }} />
+          ) : null}
+        </Typography>
+        {followMarkup}
+      </div>
+    ) : (
+      <p>loading username...</p>
+    );
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(
+        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
+      )
+    ) : (
+      <p> no topic yet</p>
+    );
 
-    console.log(this.state.following);
+    let imageMarkup = this.state.imageUrl ? (
+      <img src={this.state.imageUrl} height="150" width="150" />
+    ) : (
+      <img src={noImage} height="150" width="150" />
+    );
+
+    let postMarkup = this.state.posts ? (
+      this.state.posts.map(post => (
+        <Card className={classes.card}>
+          <CardContent>
+            <Typography>
+              {this.state.imageUrl ? (
+                <img src={this.state.imageUrl} height="50" width="50" />
+              ) : (
+                <img src={noImage} height="50" width="50" />
+              )}
+            </Typography>
+            <Typography variant="h7">
+              <b>{post.userHandle}</b>
+            </Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              {post.createdAt}
+            </Typography>
+
+            <br />
+            <Typography variant="body1">
+              <b>{post.microBlogTitle}</b>
+            </Typography>
+            <Typography variant="body2">{post.quoteBody}</Typography>
+
+            <br />
+            <Typography variant="body2">{post.body}</Typography>
+            <br />
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics}
+            </Typography>
+            <br />
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount}
+            </Typography>
+          </CardContent>
+        </Card>
+      ))
+    ) : (
+      <p>Posts</p>
+    );
 
     return (
       <Grid container spacing={24}>
         <Grid item sm={4} xs={8}>
           {imageMarkup}
           {profileMarkup}
-          {followMarkup}
+          {/* {followMarkup} */}
           {topicsMarkup}
           <br />
         </Grid>
+        <Grid item sm={4} xs={8}>
+          {postMarkup}
+          <br />
+        </Grid>
       </Grid>
     );
   }
@@ -152,7 +249,8 @@ const mapStateToProps = state => ({
 });
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
 };
 
-export default connect(mapStateToProps)(user);
+export default connect(mapStateToProps)(withStyles(styles)(user));

twistter-frontend/src/pages/user.js

@@ -147,7 +147,7 @@ class user extends Component {
         // console.log(res.data);
         this.setState({
           posts: res.data
-        })
+        });
       })
       .catch(err => console.log(err));
   }
@@ -222,19 +222,22 @@ class user extends Component {
               {post.createdAt}
             </Typography>
 
-            
             <br />
             <Typography variant="body1">
               <b>{post.microBlogTitle}</b>
             </Typography>
             <Typography variant="body2">{post.quoteBody}</Typography>
-      
+
             <br />
             <Typography variant="body2">{post.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics}
+            </Typography>
             <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount}
+            </Typography>
           </CardContent>
         </Card>
       ))