Posts on Home now display profile images

functions/handlers/post.js

@@ -61,27 +61,51 @@ exports.getallPostsforUser = (req, res) => {
 };
 
 exports.getallPosts = (req, res) => {
-
-  var post_query = admin.firestore().collection("posts");
-  post_query
-    .get()
-    .then(function(allPosts) {
   let posts = [];
-      allPosts.forEach(function(doc) {
+  let users = {};
-        posts.push(doc.data());
+
+  // Get all the posts
+  var postsPromise = new Promise((resolve, reject) => {
+    db.collection("posts").get()
+      .then((allPosts) => {
+        allPosts.forEach((post) => {
+          posts.push(post.data());
         });
-      return res.status(200).json(posts);
+        resolve();
       })
-    .then(function() {
+      .catch((error) => {
-      return res
+        reject(error);
-        .status(200)
-        .json("Successfully retrieved every post from database.");
       })
-    .catch(function(err) {
-      return res
-        .status(500)
-        .json("Failed to retrieve posts from database.", err);
   });
+
+  // Get all users
+  var usersPromise = new Promise((resolve, reject) => {
+    db.collection("users").get()
+      .then((allUsers) => {
+        allUsers.forEach((user) => {
+          users[user.data().handle] = user.data();
+        })
+        resolve();
+      })
+      .catch((error) => {
+        reject(error);
+      })
+  });
+
+  // Wait for the two promises
+  Promise.all([postsPromise, usersPromise])
+    .then(() => {
+      let newPosts = []
+      // Add the image url of the person who made the post to all of the post objects
+      posts.forEach((post) => {
+        post.profileImage = users[post.userHandle].imageUrl ? users[post.userHandle].imageUrl : null;
+        newPosts.push(post);
+      });
+      return res.status(200).json(newPosts);
+    })
+    .catch((error) => {
+      return res.status(500).json({error});
+    })
 };
 
 exports.getOtherUsersPosts = (req, res) => {

twistter-frontend/src/pages/Home.js

@@ -60,9 +60,13 @@ class Home extends Component {
         <Card className={classes.card} key={post.postId}>
           <CardContent>
             <Typography>
-              {
+              {/* {
                 this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
                                       (<img src={noImage} height="50" width="50"/>)
+              } */}
+              {
+                post.profileImage ? (<img src={post.profileImage} height="50" width="50" />) : 
+                                    (<img src={noImage} height="50" width="50"/>)
               }
             </Typography>
             <Typography variant="h5"><b>{post.userHandle}</b></Typography>