Merge pull request #102 from ClaytonWWilson/otheruser_posts

display posts on other user's page

functions/handlers/post.js

@@ -1,8 +1,7 @@
 /* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
-const admin = require('firebase-admin');
+const admin = require("firebase-admin");
-const { db } = require('../util/admin');
+const { db } = require("../util/admin");
-
 
 exports.putPost = (req, res) => {
   const newPost = {
@@ -18,23 +17,30 @@ exports.putPost = (req, res) => {
     quoteBody: null
   };
 
-    admin.firestore().collection('posts').add(newPost)
+  admin
-    .then((doc) => {
+    .firestore()
-        doc.update({postId: doc.id})
+    .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) => {
+    .catch(err => {
       console.error(err);
-        return res.status(500).json({ error: 'something went wrong'});
+      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) {
@@ -43,17 +49,21 @@ exports.getallPostsforUser = (req, res) => {
       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()
+  post_query
+    .get()
     .then(function(allPosts) {
       let posts = [];
       allPosts.forEach(function(doc) {
@@ -62,46 +72,81 @@ exports.getallPosts = (req, res) => {
       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').
+  const quoteDoc = admin
-    where('userHandle', '==', req.user.handle).
+    .firestore()
-    where('postId', '==', req.params.postId).limit(1);
+    .collection("quote")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
   const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
+  postDoc
-    .then((doc) => {
+    .get()
-        if(doc.exists) {
+    .then(doc => {
+      if (doc.exists) {
         quoteData = doc.data();
         return quoteDoc.get();
-        }
+      } else {
-        else
+        return res.status(404).json({ error: "Post not found" });
-        {
-            return res.status(404).json({error: 'Post not found'});
       }
     })
-    .then((data) => {
+    .then(data => {
-        if(data.empty) {
+      if (data.empty) {
-            return admin.firestore().collection('quote').add({
+        return admin
-                quoteId : req.params.postId,
+          .firestore()
-                userHandle : req.user.handle,
+          .collection("quote")
-                quoteBody : req.body.quoteBody
+          .add({
+            quoteId: req.params.postId,
+            userHandle: req.user.handle,
+            quoteBody: req.body.quoteBody
           })
           .then(() => {
             const post = {
               body: quoteData.body,
-                   userHandle : req.user.handle,
+              userHandle: req.user.handle,
               quoteBody: req.body.quoteBody,
-                   createdAt : new Date().toISOString(),
+              createdAt: new Date().toISOString(),
               userImage: req.body.userImage,
               likeCount: 0,
               commentCount: 0,
@@ -109,59 +154,64 @@ exports.quoteWithPost = (req, res) => {
               microBlogTitle: quoteData.microBlogTitle,
               microBlogTopics: quoteData.microBlogTopics,
               quoteId: req.params.postId
-                }
+            };
-               return admin.firestore().collection('posts').add(post)
+            return admin
-               .then((doc) => {
+              .firestore()
-                doc.update({postId: doc.id})
+              .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 {
-        else {
+        return res.status(400).json({ error: "Post has already been quoted." });
-            return res.status(400).json({ error: 'Post has already been quoted.' });
       }
     })
-    .catch((err) => {
+    .catch(err => {
-        return res.status(500).json({error: err});
+      return res.status(500).json({ error: err });
-
+    });
-    })
+};
-
-}
 
 exports.quoteWithoutPost = (req, res) => {
   let quoteData;
-    const quoteDoc = admin.firestore().collection('quote').
+  const quoteDoc = admin
-    where('userHandle', '==', req.user.handle).
+    .firestore()
-    where('postId', '==', req.params.postId).limit(1);
+    .collection("quote")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
   const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
+  postDoc
-    .then((doc) => {
+    .get()
-        if(doc.exists) {
+    .then(doc => {
+      if (doc.exists) {
         quoteData = doc.data();
         return quoteDoc.get();
-        }
+      } else {
-        else
+        return res.status(404).json({ error: "Post not found" });
-        {
-            return res.status(404).json({error: 'Post not found'});
       }
     })
-    .then((data) => {
+    .then(data => {
-        if(data.empty) {
+      if (data.empty) {
-            return admin.firestore().collection('quote').add({
+        return admin
-                quoteId : req.params.postId,
+          .firestore()
-                userHandle : req.user.handle,
+          .collection("quote")
+          .add({
+            quoteId: req.params.postId,
+            userHandle: req.user.handle,
             quoteBody: null
           })
           .then(() => {
             const post = {
-                userHandle : req.user.handle,
+              userHandle: req.user.handle,
               body: quoteData.body,
               quoteBody: null,
-                createdAt : new Date().toISOString(),
+              createdAt: new Date().toISOString(),
               likeCount: 0,
               commentCount: 0,
               userID: req.user.uid,
@@ -169,110 +219,113 @@ exports.quoteWithoutPost = (req, res) => {
               microBlogTitle: quoteData.microBlogTitle,
               microBlogTopics: quoteData.microBlogTopics,
               quoteId: req.params.postId
-                }
+            };
-               return admin.firestore().collection('posts').add(post)
+            return admin
-               .then((doc) => {
+              .firestore()
-                doc.update({postId: doc.id})
+              .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." });
-            })
-        }
-        else {
-        return res.status(400).json({ error: 'Post has already been quoted.' });
       }
     })
-    .catch((err) => {
+    .catch(err => {
-        return res.status(500).json({error: 'Something is wrong'});
+      return res.status(500).json({ error: "Something is wrong" });
-
+    });
-    })
+};
-
-}
 
 exports.checkforLikePost = (req, res) => {
-    const likedPostDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
+  const likedPostDoc = admin
-    .where('postId', '==', req.params.postId).limit(1);
+    .firestore()
+    .collection("likes")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
   let result;
 
-    likedPostDoc.get()
+  likedPostDoc.get().then(data => {
-    .then((data) => {
     if (data.empty) {
       result = false;
       return res.status(200).json(result);
-        }
+    } else {
-        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)
+  const likeDoc = admin
-    .where('postId', '==', req.params.postId).limit(1);
+    .firestore()
+    .collection("likes")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
   const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
+  postDoc
-    .then((doc) => {
+    .get()
-        if(doc.exists) {
+    .then(doc => {
+      if (doc.exists) {
         postData = doc.data();
         return likeDoc.get();
-        }
+      } else {
-        else
+        return res.status(404).json({ error: "Post not found" });
-        {
-            return res.status(404).json({error: 'Post not found'});
       }
     })
-    .then((data) => {
+    .then(data => {
       if (data.empty) {
-            return admin.firestore().collection('likes').add({
+        return admin
-                postId : req.params.postId,
+          .firestore()
+          .collection("likes")
+          .add({
+            postId: req.params.postId,
             userHandle: req.user.handle
-
           })
           .then(() => {
             postData.likeCount++;
-                return postDoc.update({likeCount : postData.likeCount})
+            return postDoc.update({ likeCount: postData.likeCount });
           })
           .then(() => {
             return res.status(200).json(postData);
-            })
+          });
       }
     })
-    .catch((err) => {
+    .catch(err => {
-        return res.status(500).json({error: 'Something is wrong'});
+      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)
+  const likeDoc = admin
-    .where('postId', '==', req.params.postId).limit(1);
+    .firestore()
+    .collection("likes")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
   const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
+  postDoc
-    .then((doc) => {
+    .get()
-        if(doc.exists) {
+    .then(doc => {
+      if (doc.exists) {
         postData = doc.data();
         return likeDoc.get();
-        }
+      } else {
-        else
+        return res.status(404).json({ error: "Post not found" });
-        {
-            return res.status(404).json({error: 'Post not found'});
       }
     })
-    .then((data) => {
+    .then(data => {
       return db
         .doc(`/likes/${data.docs[0].id}`)
         .delete()
@@ -283,15 +336,17 @@ exports.unlikePost = (req, res) => {
         .then(() => {
           res.status(200).json(postData);
         });
-          
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
-        return res.status(500).json({error: 'Something is wrong'});
+      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 = {
+  constructor() {
+    super();
+    this.state = {
       profile: window.location.pathname.split("/").pop(),
       imageUrl: null,
       topics: null,
       user: null,
-    following: 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 ? (
+    const { classes } = this.props;
-      <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" />
-    );
 
     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,7 +222,6 @@ class user extends Component {
               {post.createdAt}
             </Typography>
 
-            
             <br />
             <Typography variant="body1">
               <b>{post.microBlogTitle}</b>
@@ -232,9 +231,13 @@ class user extends Component {
             <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>
       ))