diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index f57dbb7..1ef941d 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -1,115 +1,543 @@
 /* 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 = {
-        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
-    };
+  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.deletePost = (req, res) => {
+    let posts = db.collection("posts")
+    .where("userHandle", "==", req.user.handle)
+    .get()
+    .then((query) => {
+      query.forEach((snap) => {
+        snap.ref.delete();
+      });
+      return;
+    })
+};
+
 exports.getallPostsforUser = (req, res) => {
-    var post_query = admin.firestore().collection("posts");//.where("userHandle", "==", req.user.handle);
-    post_query.orderBy('createdAt', 'desc').get()
+  var post_query = admin
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", req.user.handle);
+
+  post_query
+    .get()
     .then(function(myPosts) {
-        let posts = [];
-        myPosts.forEach(function(doc) {
-            if(doc.data().userHandle === req.user.handle) {
-                posts.push(doc.data());
-            }
-        });
-        return res.status(200).json(posts);
+      let posts = [];
+      myPosts.forEach(function(doc) {
+        posts.push(doc.data());
+      });
+      posts.sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
+      return res.status(200).json(posts);
     })
+    
     .then(function() {
-    res.status(200).send("Successfully retrieved all user's posts from database.");
-    return;
+      return res
+        .status(200)
+        .json("Successfully retrieved all user's posts from database.");
     })
     .catch(function(err) {
-    res.status(500).send("Failed to retrieve user's posts from database.", err);
+      return res
+        .status(500)
+        .json({message: "Failed to retrieve user's posts from database.", error: err});
     });
 };
 
+exports.hidePost = (req, res) => {
+    /* db
+      .collection("posts")
+      .doc(${req.params.postId}) */
+      const postId = req.body.postId;
+      db.doc(`/posts/${postId}`)
+      .update({
+        hidden: true
+      })
+      .then(() => {
+        return res.status(200).json({message: "ok"});
+      })
+      .catch((error) => {
+        return res.status(500).json(error);
+      })
+};
+
 exports.getallPosts = (req, res) => {
-    var post_query = admin.firestore().collection("posts");
-    post_query.orderBy('createdAt', 'desc').get()
-    .then(function(allPosts) {
-        let posts = [];
-        allPosts.forEach(function(doc) {
-            posts.push(doc.data());
+  let posts = [];
+  let users = {};
+
+  // 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);
+        posts.sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
+        resolve();
+      })
+      .catch(error => {
+        reject(error);
+      });
+  });
+
+  // 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.getAlert = (req, res) => {
+  var post_query = admin
+    .firestore()
+    .collection("posts")
+    .where("microBlogTitle", "==", "Alert");
+
+  post_query
+    .get()
+    .then(function(myPosts) {
+      let posts = [];
+      myPosts.forEach(function(doc) {
+        posts.push(doc.data());
+      });
+      posts.sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
+      return res.status(200).json(posts);
     })
     .then(function() {
-    res.status(200).send("Successfully retrieved every post from database.");
-    return;
+      return res
+        .status(200)
+        .json("Successfully retrieved all user's posts from database.");
     })
     .catch(function(err) {
-    res.status(500).send("Failed to retrieve posts from database.", err);
+      return res
+        .status(500)
+        .json("Failed to retrieve user's posts from database.", err);
+    });
+};
+
+exports.getOtherUsersPosts = (req, res) => {
+  var post_query = admin
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", req.body.handle);
+    
+    // post_query += admin
+    // .firestore()
+    // .collection("posts")
+    // .where("microBlogTitle", "==", "Alert").where("userHandle", "==", "Admin");
+
+  post_query
+    .get()
+    .then(function(myPosts) {
+      let posts = [];
+      myPosts.forEach(function(doc) {
+        posts.push(doc.data());
+      });
+      posts.sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
+      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("quoteId", "==", 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: 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("quoteId", "==", 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" });
+      return res.status(500).json({ error: err });
+    });
+};
+
+exports.checkforLikePost = (req, res) => {
+  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);
+      }
+    })
+    .catch(err => {
+      console.log(err);
+      return res.status(500).json({ error: err });
+    });
+};
+
+exports.likePost = (req, res) => {
+  const postId = req.params.postId;
+  let likedPostDoc;
+  db.doc(`/users/${req.userData.handle}`)
+    .get()
+    .then(userDoc => {
+      let likes = userDoc.data().likes;
+      if (likes === undefined || likes === null) {
+        likes = [];
+      }
+
+      if (likes.includes(postId)) {
+        return res
+          .status(400)
+          .json({ error: "This user has already liked this post" });
+      }
+
+      likes.push(postId);
+
+      return userDoc.ref.update({ likes });
+    })
+    .then(() => {
+      return db.doc(`/posts/${postId}`).get();
+    })
+    .then(postDoc => {
+      let postData = postDoc.data();
+      postData.likeCount++;
+      likedPostDoc = postData;
+      return postDoc.ref.update({ likeCount: postData.likeCount });
+    })
+    .then(() => {
+      return res.status(201).json(likedPostDoc);
+    })
+    .catch(err => {
+      console.log(err);
+      return res.status(500).json({ error: err });
+    });
+
+  // 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}`);
+
+  // 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);
+  //         })
+  //     }
+  // })
+  // .catch((err) => {
+  //     return res.status(500).json({error: 'Something is wrong'});
+  // })
+};
+
+exports.unlikePost = (req, res) => {
+  const postId = req.params.postId;
+  let likedPostDoc;
+  db.doc(`/users/${req.userData.handle}`)
+    .get()
+    .then(userDoc => {
+      let likes = userDoc.data().likes;
+      if (likes === undefined || likes === null) {
+        likes = [];
+      }
+
+      if (!likes.includes(postId)) {
+        return res
+          .status(400)
+          .json({ error: "This user hasn't liked this post yet" });
+      }
+
+      let i;
+      for (i = 0; i < likes.length; i++) {
+        if (likes[i] === postId) {
+          likes.splice(i, 1);
+        }
+      }
+
+      return userDoc.ref.update({ likes });
+    })
+    .then(() => {
+      return db.doc(`/posts/${postId}`).get();
+    })
+    .then(postDoc => {
+      let postData = postDoc.data();
+      postData.likeCount--;
+      likedPostDoc = postData;
+      return postDoc.ref.update({ likeCount: postData.likeCount });
+    })
+    .then(() => {
+      return res.status(201).json(likedPostDoc);
+    })
+    .catch(err => {
+      console.log(err);
+      return res.status(500).json({ error: err });
+    });
+
+  // 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}`);
+
+  // 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);
+  //           });
+
+  // })
+  // .catch((err) => {
+  //     console.error(err);
+  //     return res.status(500).json({error: 'Something is wrong'});
+  // })
+};
+
+exports.getLikes = (req, res) => {
+  db.doc(`/users/${req.userData.handle}`)
+    .get()
+    .then(doc => {
+      let likes = doc.data().likes;
+      if (likes === undefined || likes === null) {
+        likes = [];
+      }
+      return res.status(200).json({ likes });
+    })
+    .catch(err => {
+      console.log(err);
+      return res.status(500).json({ error: err });
     });
 };
 
 exports.getFilteredPosts = (req, res) => {
-    admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==');
-};
-
-exports.getFollowedPosts = (req, res) => {
-    var followers_list = admin.firestore().collection("users").doc(req.user.handle).collection("followedUsers");
-    var post_query = admin.firestore().collection("posts");
-
-    followers_list.get()
-    .then(function(allFollowers) {
-        var followers_likedTopics = new Map();
-
-        allFollowers.forEach(function(followers) {
-            followers_likedTopics.set(followers.data().handle, followers.data().followedTopics);
-        });
-
-        post_query.orderBy('createdAt', 'desc').get()
-        .then(function(allPosts) {
-            let posts = [];
-            allPosts.forEach(function(doc) {
-                if(doc.data().userHandle === req.user.handle) {
-                    posts.push(doc.data());
-                }
-                else if(followers_likedTopics.has(doc.data().userHandle)) {
-                    doc.data().microBlogTopics.forEach(function(topic) {
-                        if(followers_likedTopics.get(doc.data().userHandle).includes(topic)) {
-                            posts.push(doc.data());
-                        }
-                    });
-                }
-            });
-            return res.status(200).json(posts);
-        })
-        .catch(function(err) {
-            res.status(500).send("Failed to retrieve any posts.", err);
-        });
-    })
-    .then(function() {
-        //res.status(200).send("Successfully retrieved all interesting posts from followed users.");
-        return;
-    })
-    .catch(function(err) {
-        res.status(500).send("Failed to retrieve any posts.", err);
-    });
+  admin
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", "new user")
+    .where("microBlogTopics", "==");
 };
diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js
index 88e014e..3a81810 100644
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -26,6 +26,41 @@ exports.putTopic = (req, res) => {
     });
 };
 
+exports.putNewTopic = (req, res) => {
+  let new_following = [];
+  let userRef = db.doc(`/users/${req.userData.handle}`);
+  userRef
+    .get()
+    .then(doc => {
+      let topics = [];
+      new_following = doc.data().following;
+      // new_following.push(req.body.following);
+      new_following.forEach(follow => {
+        if (follow.handle === req.body.handle) {
+          // topics = follow.topics;
+          follow.topics.push(req.body.topic);
+        }
+      });
+      // return res.status(201).json({ new_following });
+
+      // add stuff
+      userRef
+        .set({ following: new_following }, { merge: true })
+        .then(doc => {
+          return res
+            .status(201)
+            .json({ message: `Following ${req.body.topic}` });
+        })
+        .catch(err => {
+          return res.status(500).json({ err });
+        });
+      return res.status(200).json({ message: "OK" });
+    })
+    .catch(err => {
+      return res.status(500).json({ err });
+    });
+};
+
 exports.getAllTopics = (req, res) => {
   admin
     .firestore()
diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 7b6bfef..6a06568 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -1,4 +1,6 @@
 /* eslint-disable promise/catch-or-return */
+/* eslint-disable promise/always-return */
+
 const { admin, db } = require("../util/admin");
 const config = require("../util/config");
 const { validateUpdateProfileInfo } = require("../util/validator");
@@ -161,11 +163,13 @@ exports.login = (req, res) => {
         return;
       })
       .catch(function(err) {
-        if (!doc.exists) {
-          return res
-            .status(403)
-            .json({ general: "Invalid credentials. Please try again." });
-        }
+        // FIX: doc variable is out of scope
+        // if (!doc.exists) {
+        //   return res
+        //     .status(403)
+        //     .json({ general: "Invalid credentials. Please try again." });
+        // }
+        console.log(err);
         return res.status(500).send(err);
       });
   }
@@ -209,7 +213,7 @@ exports.deleteUser = (req, res) => {
   let errors = {};
 
   function thenFunction(data) {
-    console.log(`${data} data for ${req.userData.handle} has been deleted.`);
+    console.log(`${data} for ${req.userData.handle} has been deleted.`);
   }
 
   function catchFunction(data, err) {
@@ -217,14 +221,138 @@ exports.deleteUser = (req, res) => {
     errors[data] = err;
   }
 
+  function deleteDirectMessages() {
+    return new Promise((resolve, reject) => {
+      const deleteUsername = req.userData.handle;
+      db.doc(`/users/${deleteUsername}`)
+        .get()
+        .then(deleteUserDocSnap => {
+          const dms = deleteUserDocSnap.data().dms;
+          const dmRecipients = deleteUserDocSnap.data().dmRecipients;
+
+          if (!dms) {
+            resolve();
+            return;
+          }
+
+          // Iterate over the list of users who this person has DM'd
+          let otherUsersPromises = [];
+
+          // Resolve if they don't have a dmRecipients list
+          if (
+            dmRecipients === undefined ||
+            dmRecipients === null ||
+            dmRecipients.length === 0
+          ) {
+            resolve();
+            return;
+          }
+          dmRecipients.forEach(dmRecipient => {
+            otherUsersPromises.push(
+              // Get each users data
+              db
+                .doc(`/users/${dmRecipient}`)
+                .get()
+                .then(otherUserDocSnap => {
+                  // Get the index of deleteUsername so that we can remove the dangling
+                  // reference to the DM document
+                  let otherUserDMRecipients = otherUserDocSnap.data()
+                    .dmRecipients;
+                  let otherUserDMs = otherUserDocSnap.data().dms;
+                  let index = -1;
+                  otherUserDMRecipients.forEach((dmRecip, i) => {
+                    if (dmRecip === deleteUsername) {
+                      index = i;
+                    }
+                  });
+
+                  if (index !== -1) {
+                    // Remove deleteUsername from their dmRecipients list
+                    otherUserDMRecipients.splice(index, 1);
+
+                    // Remove the DM channel with deleteUsername
+                    otherUserDMs.splice(index, 1);
+
+                    // Update the users data
+                    return otherUserDocSnap.ref.update({
+                      dmRecipients: otherUserDMRecipients,
+                      dms: otherUserDMs
+                    });
+                  }
+                })
+            );
+          });
+
+          // Wait for the removal of DM data stored on other users to be deleted
+          Promise.all(otherUsersPromises)
+            .then(() => {
+              // Iterate through DM references and delete them from the dm collection
+              let dmRefsPromises = [];
+              dms.forEach(dmRef => {
+                // Create a delete queue
+                let batch = db.batch();
+                dmRefsPromises.push(
+                  // Add the messages to the delete queue
+                  db
+                    .collection(`/dm/${dmRef.id}/messages`)
+                    .listDocuments()
+                    .then(docs => {
+                      console.log("second");
+                      console.log(docs);
+                      docs.map(doc => {
+                        batch.delete(doc);
+                      });
+
+                      // Add the doc that the DM is stored in to the delete queue
+                      batch.delete(dmRef);
+
+                      // Commit the writes
+                      return batch.commit();
+                    })
+                );
+              });
+
+              return Promise.all(dmRefsPromises);
+            })
+            .then(() => {
+              resolve();
+              return;
+            })
+            .catch(err => {
+              console.log("error " + err);
+              reject(err);
+              return;
+            });
+        })
+        .catch(err => {
+          console.log(err);
+          return res.status(500).json({ error: err });
+        });
+    });
+  }
+
   // Deletes user from authentication
   let auth = admin.auth().deleteUser(userId);
 
   // Deletes database data
-  let data = db
-    .collection("users")
-    .doc(`${req.user.handle}`)
-    .delete();
+  let data = new Promise((resolve, reject) => {
+    deleteDirectMessages()
+      .then(() => {
+        return db
+          .collection("users")
+          .doc(`${req.user.handle}`)
+          .delete();
+      })
+      .then(() => {
+        resolve();
+        return;
+      })
+      .catch(err => {
+        console.log(err);
+        reject(err);
+        return;
+      });
+  });
 
   // Deletes any custom profile image
   let image;
@@ -298,7 +426,7 @@ exports.updateProfileInfo = (req, res) => {
   // Update the database entry for this user
   db.collection("users")
     .doc(req.user.handle)
-    .set(profileData, { merge: true })
+    .set(profileData)
     .then(() => {
       console.log(`${req.user.handle}'s profile info has been updated.`);
       return res.status(201).json({
@@ -331,6 +459,26 @@ exports.getUserDetails = (req, res) => {
     });
 };
 
+exports.getAllHandles = (req, res) => {
+  var user_query = admin.firestore().collection("users");
+  user_query
+    .get()
+    .then(allUsers => {
+      let users = [];
+      allUsers.forEach(user => {
+        users.push(user.data().handle);
+      });
+      return res.status(200).json(users);
+    })
+    .catch(err => {
+      return res.status(500).json({
+        message: "Failed to retrieve posts from database.",
+        error: err
+      });
+    });
+};
+
+// Returns all data stored for a user
 exports.getAuthenticatedUser = (req, res) => {
   let credentials = {};
   db.doc(`/users/${req.user.handle}`)
@@ -414,6 +562,614 @@ exports.unverifyUser = (req, res) => {
       return res.status(500).json({ error: err.code });
     });
 };
+
+// Returns all the DMs that the user is currently participating in
+exports.getDirectMessages = (req, res) => {
+  /* Return value
+   * data: [DMs]
+   *   dm : {
+   *     dmId: str
+   *     messages: [msgs]
+   *       msg: {
+   *         author: str
+   *         createdAt: ISOString
+   *         message: str
+   *         messageId: str
+   *       }
+   *     recipient: str
+   *     hasDirectMessagesEnabled: bool
+   *     recentMessage: str
+   *     recentMessageTimestamp: ISOString
+   *   }
+   */
+
+  // Returns all the messages in a dm documentSnapshot
+  function getMessages(dm) {
+    let promise = new Promise((resolve, reject) => {
+      let messagesCollection = dm.collection("messages");
+
+      // If the messagesCollection is missing, that means that there aren't any messages
+      if (messagesCollection === null || messagesCollection === undefined) {
+        return;
+      }
+
+      let msgs = [];
+      let promises = [];
+
+      // Get all of the messages in the DM
+      messagesCollection.get().then(dmQuerySnap => {
+        dmQuerySnap.forEach(dmQueryDocSnap => {
+          promises.push(
+            dmQueryDocSnap.ref.get().then(messageData => {
+              msgs.push(messageData.data());
+              return;
+            })
+          );
+        });
+
+        let waitPromise = Promise.all(promises);
+        waitPromise.then(() => {
+          // Sort the messages in reverse order by date
+          // Newest should be at the bottom, because that's how they will be displayed on the front-end
+          msgs.sort((a, b) => {
+            return b.createdAt > a.createdAt
+              ? -1
+              : b.createdAt < a.createdAt
+              ? 1
+              : 0;
+          });
+          resolve(msgs);
+        });
+      });
+    });
+    return promise;
+  }
+
+  const dms = req.userData.dms;
+  const dmRecipients = req.userData.dmRecipients;
+
+  // Return null if this user has no DMs
+  if (dms === undefined || dms === null || dms.length === 0)
+    return res.status(200).json({ data: null });
+
+  let dmsData = [];
+  let dmPromises = [];
+
+  dms.forEach(dm => {
+    let dmData = {};
+    // Make a new promise for each DM document
+    dmPromises.push(
+      new Promise((resolve, reject) => {
+        dm.get() // DM document reference
+          .then(doc => {
+            let docData = doc.data();
+
+            // Recipient is the person you are messaging
+            docData.authors[0] === req.userData.handle
+              ? (dmData.recipient = docData.authors[1])
+              : (dmData.recipient = docData.authors[0]);
+
+            // Save the createdAt time
+            dmData.createdAt = docData.createdAt;
+
+            // Get all the messages from this dm document
+            getMessages(dm).then(msgs => {
+              dmData.messages = msgs;
+              dmData.recentMessage =
+                msgs.length !== 0 ? msgs[msgs.length - 1].message : null;
+              dmData.recentMessageTimestamp =
+                msgs.length !== 0 ? msgs[msgs.length - 1].createdAt : null;
+              dmData.dmId = doc.id;
+              resolve(dmData);
+            });
+          })
+          .catch(err => {
+            console.err(err);
+            return res.status(400).json({
+              error: {
+                message:
+                  "An error occurred when reading the DM document reference",
+                error: err
+              }
+            });
+          });
+      }).then(dmData => {
+        dmsData.push(dmData);
+      })
+    );
+  });
+
+  // Get all the data from the users to get the data on whether they have DMs enabled or not
+  let userPromises = [];
+  dmRecipients.forEach(recipient => {
+    userPromises.push(db.doc(`/users/${recipient}`).get());
+  });
+
+  // Wait for all DM document promises to resolve before returning data
+  Promise.all(dmPromises)
+    .then(() => {
+      return Promise.all(userPromises);
+    })
+    .then(userData => {
+      // Sort the DMs so that the ones with the newest messages are at the top
+      dmsData.sort((a, b) => {
+        if (
+          a.recentMessageTimestamp === null &&
+          b.recentMessageTimestamp === null
+        ) {
+          if (b.createdAt < a.createdAt) {
+            return -1;
+          } else if (b.createdAt > a.createdAt) {
+            return 1;
+          } else {
+            return 0;
+          }
+        } else if (a.recentMessageTimestamp === null) {
+          return 1;
+        } else if (b.recentMessageTimestamp === null) {
+          return -1;
+        } else if (b.recentMessageTimestamp < a.recentMessageTimestamp) {
+          return -1;
+        } else if (b.recentMessageTimestamp > a.recentMessageTimestamp) {
+          return 1;
+        } else {
+          return 0;
+        }
+      });
+
+      dmsData.forEach(dm => {
+        dm.hasDirectMessagesEnabled =
+          userData
+            .find(user => {
+              if (dm.recipient === user.data().handle) {
+                return true;
+              } else {
+                return false;
+              }
+            })
+            .data().dmEnabled === false
+            ? false
+            : true;
+      });
+      return res.status(200).json({ data: dmsData });
+    })
+    .catch(err => {
+      return res.status(500).json({
+        error: {
+          message: "An error occurred while sorting",
+          error: err
+        }
+      });
+    });
+};
+
+// Toggles direct messages on or off depending on the requese
+/* Request Parameters
+ * enable: bool
+ */
+exports.toggleDirectMessages = (req, res) => {
+  const enable = req.body.enable;
+  const user = req.userData.handle;
+  db.doc(`/users/${user}`)
+    .update({ dmEnabled: enable })
+    .then(() => {
+      return res.status(201).json({ message: "Success" });
+    })
+    .catch(err => {
+      return res.status(500).json({ error: err });
+    });
+};
+
+// Returns a promise that resolves if user has DMs enabled
+// and rejects if there is an error or DMs are disabled
+isDirectMessageEnabled = username => {
+  return new Promise((resolve, reject) => {
+    let result = {};
+    result.code = null;
+    result.message = null;
+    if (username === null || username === undefined || username === "") {
+      result.code = 400;
+      result.message =
+        "No user was sent in the request. The request should have a non-empty 'user' key.";
+      reject(result);
+    }
+
+    db.doc(`/users/${username}`)
+      .get()
+      .then(doc => {
+        if (doc.exists) {
+          // console.log(doc.data())
+          if (
+            doc.data().dmEnabled === true ||
+            doc.data().dmEnabled === null ||
+            doc.data().dmEnabled === undefined
+          ) {
+            // Assume DMs are enabled if they don't have a dmEnabled key
+            resolve(result);
+          } else {
+            result.code = 400;
+            result.message = `${username} has DMs disabled`;
+            reject(result);
+          }
+        } else {
+          console.log(`${username} is not in the database`);
+          result.code = 400;
+          result.message = `${username} is not in the database`;
+          reject(result);
+        }
+      })
+      .catch(err => {
+        console.log("HI");
+        console.error(err);
+        result.code = 500;
+        result.message = err;
+        reject(result);
+      });
+  });
+};
+
+// Returns a promise that resolves if the data in the DM is valid and
+// rejects if there are any error. Errors are returned in the promise
+verifyDirectMessageIntegrity = dmRef => {
+  return new Promise((resolve, reject) => {
+    resolve("Not implemented yet");
+  });
+};
+
+// Checks if there are any DM channels open with userB on userA's side
+oneWayCheck = (userA, userB) => {
+  return new Promise((resolve, reject) => {
+    db.doc(`/users/${userA}`)
+      .get()
+      .then(userASnapshot => {
+        const dmList = userASnapshot.data().dms;
+        const dmRecipients = userASnapshot.data().dmRecipients;
+
+        if (
+          dmList === null ||
+          dmList === undefined ||
+          dmRecipients === null ||
+          dmRecipients === undefined
+        ) {
+          // They don't have any DMs yet
+          console.log("No DMs array");
+          userASnapshot.ref
+            .set({ dms: [], dmRecipients: [] }, { merge: true })
+            .then(() => {
+              resolve();
+            });
+        } else if (dmList.length === 0) {
+          // Their DMs are empty
+          console.log("DMs array is empty");
+          resolve();
+        } else {
+          // let dmDocs = [];
+          // let forEachPromises = [];
+          // dmList.forEach((dmRef) => {
+          //   forEachPromises.push(
+          //     dmRef.get()
+          //       // .then((dmDoc) => {
+          //         // TODO: Figure out why dmDoc.exists() isn't working
+          //         // Make sure all of the docs exist and none of the references
+          //         // are broken
+          //         // if (dmDoc.exists()) {
+          //           // dmDocs.push(dmDoc);
+          //         // } else {
+          //         //   console.log(`DM reference /dm/${dmDoc.id} is invalid`);
+          //         //   reject(`DM reference /dm/${dmDoc.id} is invalid`);
+          //         // }
+          //       // })
+          //   )
+          // })
+
+          dmRecipients.forEach(dmRecipient => {
+            if (dmRecipient === userB) {
+              console.log(`You already have a DM with ${userB}`);
+              // reject(new Error(`You already have a DM with ${userB}`));
+              reject({
+                code: 400,
+                message: `You already have a DM with that user`
+              });
+              return;
+            }
+          });
+
+          resolve();
+
+          // Promise.all(forEachPromises)
+          //   .then((dmDocs) => {
+          //     // Check if any of the DMs have for userA have userA and userB as the authors.
+          //     // This would mean that they already have a DM channel
+          //     dmDocs.forEach((dmDoc) => {
+          //       // Checking if any of the authors key in any of their DMs are missing
+          //       let authors = dmDoc.data().authors;
+
+          //       // if (authors[0] === "keanureeves") {
+          //       //   console.log("it is")
+          //       //   resolve();
+          //       // } else {
+          //       //   console.log("it is not")
+          //       //   reject("not my keanu");
+          //       // }
+          //       // if (authors === null || authors === undefined || authors.length !== 2) {
+          //       //   // console.log(`The authors key in /dm/${dmDoc.id} is undefined or missing values`);
+          //       //   // reject(`The authors key in /dm/${dmDoc.id} is undefined or missing values`);
+          //       //   console.log('a')
+          //       //   reject("a")
+          //       // } else if ((authors[0] === userA && authors[1] === userB) || (authors[1] === userA && authors[0] === userB)) {
+          //       //   // console.log(`${userA} already has a DM channel between ${userA} and ${userB}`);
+          //       //   // reject(`${userA} already has a DM channel between ${userA} and ${userB}`);
+          //       //   console.log('b')
+          //       //   reject('b')
+          //       // } else {
+          //       //   // BUG: For some reason the promise.all is resolving even though there are multiple rejects
+          //       //   // and only one resolve
+          //       //   console.log("c");
+          //       //   resolve();
+          //       // }
+          //       // console.log(authors)
+          //       // console.log([userA, userB])
+          //       if (authors[0] === null || authors === undefined || authors.length !== 2) {
+          //         console.log('a');
+          //         reject('a');
+          //       } else if (authors[0] === userA && authors[1] === userB) {
+          //         console.log("b");
+          //         reject('b');
+          //       } else {
+          //         console.log('c');
+          //         resolve();
+          //       }
+          //     })
+          //   })
+        }
+      });
+  });
+};
+
+// Returns a promise that resolves if there is not already a DM channel
+// between the creator and recipient usernames. It rejects if one already
+// exists or there is an error.
+checkNoDirectMessageExists = (creator, recipient) => {
+  return new Promise((resolve, reject) => {
+    let creatorPromise = oneWayCheck(creator, recipient);
+    let recipientPromise = oneWayCheck(recipient, creator);
+    let temp_array = [];
+    temp_array.push(creatorPromise);
+    temp_array.push(recipientPromise);
+
+    Promise.all(temp_array)
+      .then(() => {
+        resolve();
+      })
+      .catch(err => {
+        reject(err);
+      });
+  });
+};
+
+addDirectMessageToUser = (username, recipient, dmRef) => {
+  return new Promise((resolve, reject) => {
+    db.doc(`/users/${username}`)
+      .get()
+      .then(docSnap => {
+        let dmList = docSnap.data().dms;
+        let dmRecipients = docSnap.data().dmRecipients;
+        dmList.push(dmRef);
+        dmRecipients.push(recipient);
+        return db
+          .doc(`/users/${username}`)
+          .update({ dms: dmList, dmRecipients });
+      })
+      .then(() => {
+        resolve();
+      })
+      .catch(err => {
+        reject(err);
+      });
+  });
+};
+
+// Sends a DM from the caller to the requested DM document
+/* Request Parameters
+ * message: str
+ * user: str
+ */
+exports.sendDirectMessage = (req, res) => {
+  // TODO: add error checking for if message or user is null
+  const creator = req.userData.handle;
+  const recipient = req.body.user;
+  const message = req.body.message;
+
+  const newMessage = {
+    author: creator,
+    createdAt: new Date().toISOString(),
+    message,
+    messageId: null
+  };
+
+  db.doc(`/users/${recipient}`)
+    .get()
+    .then(recipDoc => {
+      // Return if the other user has DM's disabled
+      if (
+        recipDoc.data().dmEnabled === false &&
+        recipDoc.data().dmEnabled !== null &&
+        recipDoc.data().dmEnabled !== undefined
+      ) {
+        return res.status(400).json({ error: "This user has DMs disabled" });
+      }
+    });
+
+  db.doc(`/users/${creator}`)
+    .get()
+    .then(userDoc => {
+      let dmList = userDoc.data().dms;
+
+      // Return if the creator doesn't have any DMs.
+      // This means they have not created a DM's channel yet
+      if (dmList === null || dmList === undefined) {
+        return res
+          .status(400)
+          .json({
+            error: `There is no DM channel between ${creator} and ${recipient}. Use /api/dms/new.`
+          });
+      }
+
+      let dmRefPromises = [];
+      dmList.forEach(dmRef => {
+        dmRefPromises.push(
+          new Promise((resolve, reject) => {
+            dmRef
+              .get()
+              .then(dmDoc => {
+                let authors = dmDoc.data().authors;
+                if (
+                  (authors[0] === creator && authors[1] === recipient) ||
+                  (authors[1] === creator && authors[0] === recipient)
+                ) {
+                  resolve({ correct: true, dmRef });
+                } else {
+                  resolve({ correct: false, dmRef });
+                }
+              })
+              .catch(err => {
+                reject(err);
+              });
+          })
+        );
+      });
+
+      return Promise.all(dmRefPromises);
+    })
+    .then(results => {
+      let correctDMRef = null;
+      results.forEach(result => {
+        if (result.correct) {
+          correctDMRef = result.dmRef;
+        }
+      });
+
+      if (correctDMRef === null) {
+        console.log(
+          `There is no DM channel between ${creator} and ${recipient}. Use /api/dms/new.`
+        );
+        return res.status(400).json({
+          error: `There is no DM channel between ${creator} and ${recipient}. Use /api/dms/new.`
+        });
+      }
+
+      return db.collection(`/dm/${correctDMRef.id}/messages`).add(newMessage);
+    })
+    .then(newMsgRef => {
+      return newMsgRef.update({ messageId: newMsgRef.id }, { merge: true });
+    })
+    .then(() => {
+      return res.status(200).json({ message: "OK" });
+    })
+    .catch(err => {
+      console.log(err);
+      return res.status(500).json({ error: err });
+    });
+};
+
+// Creates a DM between the caller and the user in the request
+/* Request Parameters
+ * user: str
+ */
+exports.createDirectMessage = (req, res) => {
+  const creator = req.userData.handle;
+  const recipient = req.body.user;
+
+  // Check if they are DMing themselves
+  if (creator === recipient)
+    return res.status(400).json({ error: "You can't DM yourself" });
+
+  // Check if this user has DMs enabled
+  let creatorEnabled = isDirectMessageEnabled(creator);
+
+  // Check if the requested user has DMs enabled
+  let recipientEnabled = isDirectMessageEnabled(recipient);
+
+  // Make sure that they don't already have a DM channel
+  let noDMExists = checkNoDirectMessageExists(creator, recipient);
+
+  let dataValidations = [creatorEnabled, recipientEnabled, noDMExists];
+
+  Promise.all(dataValidations)
+    .then(() => {
+      // Create a new DM document
+      return db.collection("dm").add({});
+    })
+    .then(dmDocRef => {
+      // Fill it with some data.
+      // Note that there isn't a messages collection by default.
+      let dmData = {
+        dmId: dmDocRef.id,
+        authors: [creator, recipient],
+        createdAt: new Date().toISOString()
+      };
+
+      // Update DM document
+      let dmDocPromise = dmDocRef.set(dmData);
+
+      // Add the DM reference to the creator
+      let updateCreatorPromise = addDirectMessageToUser(
+        creator,
+        recipient,
+        dmDocRef
+      );
+
+      // Add the DM reference to the recipient
+      let updateRecipientPromise = addDirectMessageToUser(
+        recipient,
+        creator,
+        dmDocRef
+      );
+
+      // Wait for all promises
+      return Promise.all([
+        dmDocPromise,
+        updateCreatorPromise,
+        updateRecipientPromise
+      ]);
+    })
+    .then(() => {
+      return res.status(201).json({ message: "Success!" });
+    })
+    .catch(err => {
+      console.log(err);
+
+      if (err.code && err.message && err.code > 0) {
+        // Specific error that I've created
+        return res.status(err.code).json({ error: err.message });
+      } else {
+        // Generic or firebase error
+        return res.status(500).json({ error: err });
+      }
+    });
+};
+
+// Checks if the requested user has DMs enable or not
+/* Request Parameters
+ * user: str
+ */
+exports.checkDirectMessagesEnabled = (req, res) => {
+  isDirectMessageEnabled(req.body.user)
+    .then(() => {
+      return res.status(200).json({ enabled: true });
+    })
+    .catch(result => {
+      console.log(result);
+      if (result.code === 200) {
+        // DMs are disabled
+        return res.status(200).json({ enabled: false });
+      } else {
+        // Some other error occured
+        return res.status(result.code).json({ err: result.message });
+      }
+    });
+};
+
 exports.getUserHandles = (req, res) => {
   db.doc(`/users/${req.body.userHandle}`)
     .get()
@@ -436,7 +1192,13 @@ exports.addSubscription = (req, res) => {
   let userRef = db.doc(`/users/${req.userData.handle}`);
   userRef.get().then(doc => {
     new_following = doc.data().following;
-    new_following.push(req.body.following);
+    const struct = {
+      handle: req.body.following,
+      topics: ["Admin"]
+    };
+    new_following
+      ? new_following.push(struct)
+      : (new_following = req.body.following);
 
     // add stuff
     userRef
@@ -449,8 +1211,11 @@ exports.addSubscription = (req, res) => {
       .catch(err => {
         return res.status(500).json({ err });
       });
-    return res.status(200).json({ error: "Follow success!" });
-  });
+    // return res.status(200).json({ message: "ok" });
+  })
+  .catch((error) => {
+    return res.status(400).json({message: "That user doesn't exist", error});
+  })
 };
 
 exports.getSubs = (req, res) => {
@@ -466,6 +1231,142 @@ exports.getSubs = (req, res) => {
     });
 };
 
+// Uploads a profile image
+exports.uploadProfileImage = (req, res) => {
+  const BusBoy = require("busboy");
+  const path = require("path");
+  const os = require("os");
+  const fs = require("fs");
+
+  const busboy = new BusBoy({ headers: req.headers });
+
+  let imageFileName;
+  let imageToBeUploaded = {};
+  let oldImageFileName = req.userData.imageUrl
+    ? req.userData.imageUrl.split("/o/")[1].split("?alt")[0]
+    : null;
+  // console.log(`old file: ${oldImageFileName}`);
+
+  busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {
+    if (mimetype !== "image/jpeg" && mimetype !== "image/png") {
+      return res.status(400).json({ error: "Wrong filetype submitted" });
+    }
+    // console.log(fieldname);
+    // console.log(filename);
+    // console.log(mimetype);
+    const imageExtension = filename.split(".")[filename.split(".").length - 1]; // Get the image file extension
+    imageFileName = `${Math.round(
+      Math.random() * 100000000000
+    )}.${imageExtension}`; // Get a random filename
+    const filepath = path.join(os.tmpdir(), imageFileName);
+    imageToBeUploaded = { filepath, mimetype };
+    file.pipe(fs.createWriteStream(filepath));
+  });
+  busboy.on("finish", () => {
+    // Save the file to the storage bucket
+    admin
+      .storage()
+      .bucket(config.storageBucket)
+      .upload(imageToBeUploaded.filepath, {
+        resumable: false,
+        metadata: {
+          metadata: {
+            contentType: imageToBeUploaded.mimetype
+          }
+        }
+      })
+      .then(() => {
+        // Add the new URL to the user's profile
+        const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`;
+        return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
+      })
+      .then(() => {
+        // Delete their old image if they have one
+        if (oldImageFileName !== null && oldImageFileName !== "no-img.png") {
+          admin
+            .storage()
+            .bucket(config.storageBucket)
+            .file(oldImageFileName)
+            .delete()
+            .then(() => {
+              return res
+                .status(201)
+                .json({ message: "Image uploaded successfully1" });
+            })
+            .catch(err => {
+              console.log(err);
+              return res
+                .status(201)
+                .json({ message: "Image uploaded successfully2" });
+            });
+          // return res.status(201).json({ message: "Image uploaded successfully"});
+        } else {
+          return res
+            .status(201)
+            .json({ message: "Image uploaded successfully3" });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+        return res.status(500).json({ error: err.code });
+      });
+  });
+  busboy.end(req.rawBody);
+
+  // const BusBoy = require('busboy');
+  // const path = require('path');
+  // const os = require('os');
+  // const fs = require('fs');
+
+  // const busboy = new BusBoy({ headers: req.headers });
+
+  // let imageToBeUploaded = {};
+  // let imageFileName;
+
+  // busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
+  //   // console.log(fieldname, file, filename, encoding, mimetype);
+  //   if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
+  //     return res.status(400).json({ error: 'Wrong file type submitted' });
+  //   }
+  //   // my.image.png => ['my', 'image', 'png']
+  //   const imageExtension = filename.split('.')[filename.split('.').length - 1];
+  //   // 32756238461724837.png
+  //   imageFileName = `${Math.round(
+  //     Math.random() * 1000000000000
+  //   ).toString()}.${imageExtension}`;
+  //   const filepath = path.join(os.tmpdir(), imageFileName);
+  //   imageToBeUploaded = { filepath, mimetype };
+  //   file.pipe(fs.createWriteStream(filepath));
+  // });
+  // busboy.on('finish', () => {
+  //   admin
+  //     .storage()
+  //     .bucket(config.storageBucket)
+  //     .upload(imageToBeUploaded.filepath, {
+  //       resumable: false,
+  //       metadata: {
+  //         metadata: {
+  //           contentType: imageToBeUploaded.mimetype
+  //         }
+  //       }
+  //     })
+  //     .then(() => {
+  //       const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${
+  //         config.storageBucket
+  //       }/o/${imageFileName}?alt=media`;
+  //       return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
+  //     })
+  //     .then(() => {
+  //       return res.json({ message: 'image uploaded successfully' });
+  //     })
+  //     .catch((err) => {
+  //       console.error(err);
+  //       return res.status(500).json({ error: 'something went wrong' });
+  //     });
+  // });
+  //   busboy.end(req.rawBody);
+};
+
 exports.removeSub = (req, res) => {
   let new_following = [];
   let userRef = db.doc(`/users/${req.userData.handle}`);
@@ -473,7 +1374,7 @@ exports.removeSub = (req, res) => {
     new_following = doc.data().following;
     // remove username from array
     new_following.forEach(function(follower, index) {
-      if (follower === `${req.body.unfollow}`) {
+      if (follower.handle === `${req.body.unfollow}`) {
         new_following.splice(index, 1);
       }
     });
@@ -489,6 +1390,7 @@ exports.removeSub = (req, res) => {
       .catch(err => {
         return res.status(500).json({ err });
       });
-    return res.status(500).json({ error: "shouldn't execute" });
+
+    return res.status(200).json({ message: "ok" });
   });
 };
diff --git a/functions/index.js b/functions/index.js
index c3f5947..5306ae7 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -11,12 +11,19 @@ app.use(cors());
  *------------------------------------------------------------------*/
 const {
   getAuthenticatedUser,
+  getDirectMessages,
+  sendDirectMessage,
+  createDirectMessage,
+  checkDirectMessagesEnabled,
+  toggleDirectMessages,
+  getAllHandles,
   getUserDetails,
   getProfileInfo,
   login,
   signup,
   deleteUser,
   updateProfileInfo,
+  uploadProfileImage,
   verifyUser,
   unverifyUser,
   getUserHandles,
@@ -37,16 +44,42 @@ app.post("/login", login);
 //Deletes user account
 app.delete("/delete", fbAuth, deleteUser);
 
+// Returns all direct messages that the user is participating in
+app.get("/dms", fbAuth, getDirectMessages);
+
+// Send a message in a DM from one user to another
+app.post("/dms/send", fbAuth, sendDirectMessage);
+
+// Create a new DM between two users
+app.post("/dms/new", fbAuth, createDirectMessage);
+
+// Checks if the user provided has DMs enabled or not
+app.post("/dms/enabled", checkDirectMessagesEnabled);
+
+// Used to toggle DMs on or off for the current user
+app.post("/dms/toggle", fbAuth, toggleDirectMessages);
+
+app.get("/getUser", fbAuth, getUserDetails);
+
 app.post("/getUserDetails", fbAuth, getUserDetails);
 
+// Returns a list of all usernames
+// Used for searching
+app.get("/getAllHandles", fbAuth, getAllHandles);
+
 // Returns all profile data of the currently logged in user
 app.get("/getProfileInfo", fbAuth, getProfileInfo);
 
 // Updates the currently logged in user's profile information
 app.post("/updateProfileInfo", fbAuth, updateProfileInfo);
 
+// Returns all user data for the logged in user.
+// Used when setting the state in Redux.
 app.get("/user", fbAuth, getAuthenticatedUser);
 
+// Uploads a profile image
+app.post("/user/image", fbAuth, uploadProfileImage);
+
 // Verifies the user sent to the request
 // Must be run by the Admin user
 app.post("/verifyUser", fbAuth, verifyUser);
@@ -70,25 +103,54 @@ app.post("/removeSub", fbAuth, removeSub);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, getallPosts, getFollowedPosts, putPost } = require("./handlers/post");
+
+
+const {
+  getallPostsforUser,
+  getallPosts,
+  putPost,
+  hidePost, 
+  likePost,
+  unlikePost,
+  getLikes,
+  quoteWithPost,
+  quoteWithoutPost,
+  checkforLikePost,
+  getOtherUsersPosts,
+  getAlert
+} = require("./handlers/post");
 
 app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
 app.get("/getallPosts", getallPosts);
 
-app.get("/getFollowedPosts", fbAuth, getFollowedPosts);
+//Hides Post
+app.post("/hidePost", fbAuth, hidePost);
 
 // Adds one post to the database
 app.post("/putPost", fbAuth, putPost);
 
+app.get("/likes", fbAuth, getLikes);
+app.get("/like/:postId", fbAuth, likePost);
+app.get("/unlike/:postId", fbAuth, unlikePost);
+app.get("/checkforLikePost/:postId", fbAuth, checkforLikePost);
+
+app.post("/quoteWithPost/:postId", fbAuth, quoteWithPost);
+app.post("/quoteWithoutPost/:postId", fbAuth, quoteWithoutPost);
+
+app.post("/getOtherUsersPosts", fbAuth, getOtherUsersPosts);
+
+app.get("/getAlert", fbAuth, getAlert);
+
 /*------------------------------------------------------------------*
- *  handlers/topic.js                                               *
+ *  handlers/topic.js                                                *
  *------------------------------------------------------------------*/
 const {
   putTopic,
   getAllTopics,
   deleteTopic,
-  getUserTopics
+  getUserTopics,
+  putNewTopic
 } = require("./handlers/topic");
 
 // add topic to database
@@ -103,4 +165,6 @@ app.post("/deleteTopic", fbAuth, deleteTopic);
 // get topic for this user
 app.post("/getUserTopics", fbAuth, getUserTopics);
 
+app.post("/putNewTopic", fbAuth, putNewTopic);
+
 exports.api = functions.https.onRequest(app);
diff --git a/functions/package.json b/functions/package.json
index 29b3e89..04a805c 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "busboy": "^0.3.1",
     "firebase": "^6.6.2",
     "firebase-admin": "^8.6.0",
     "firebase-functions": "^3.1.0",
diff --git a/functions/util/fbAuth.js b/functions/util/fbAuth.js
index 35253e7..d440bb9 100644
--- a/functions/util/fbAuth.js
+++ b/functions/util/fbAuth.js
@@ -4,12 +4,12 @@ const { admin, db } = require('./admin');
 // The function will only execute if the user is logged in, or rather, they have
 // a valid token
 module.exports = (req, res, next) => {
-    console.log(req);
-    console.log(req.body);
-    console.log(req.headers);
-    console.log(req.headers.authorization);
-    console.log(JSON.stringify(req.body));
-    console.log(JSON.stringify(req.header));
+    // console.log(req);
+    // console.log(req.body);
+    // console.log(req.headers);
+    // console.log(req.headers.authorization);
+    // console.log(JSON.stringify(req.body));
+    // console.log(JSON.stringify(req.header));
 
     let idToken;
     
diff --git a/twistter-frontend/package-lock.json b/twistter-frontend/package-lock.json
index 385d8c1..9529c36 100644
--- a/twistter-frontend/package-lock.json
+++ b/twistter-frontend/package-lock.json
@@ -3097,6 +3097,11 @@
         "merge": "^1.2.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit-hook": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
@@ -3962,6 +3967,11 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "fuse.js": {
+      "version": "3.4.6",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.4.6.tgz",
+      "integrity": "sha512-H6aJY4UpLFwxj1+5nAvufom5b2BT2v45P1MkPvdGIK8fWjQx/7o6tTT1+ALV0yawQvbmvCF0ufl2et8eJ7v7Cg=="
+    },
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -7172,6 +7182,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
       "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.1.tgz",
+      "integrity": "sha512-8uN744Yq0X2lbfSLxsEEc2UV3RjSRb4yDVxRQ1aGzPo86QjNOwhQSukDb8U8kR+636TRTvfMren10fgOjAy9eA==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-redux": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.1.tgz",
@@ -9766,6 +9792,11 @@
       "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
       "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE="
     },
+    "underscore": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz",
+      "integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg=="
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -9996,6 +10027,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watch": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",
diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index a0ec11c..47db703 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -11,17 +11,20 @@
     "clsx": "^1.0.4",
     "create-react-app": "^3.1.2",
     "dayjs": "^1.8.17",
+    "fuse.js": "^3.4.6",
     "install": "^0.13.0",
     "jwt-decode": "^2.2.0",
     "node-pre-gyp": "^0.13.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-modal": "^3.11.1",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.1.0",
     "react-scripts": "0.9.5",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "typeface-roboto": "0.0.75"
+    "typeface-roboto": "0.0.75",
+    "underscore": "^1.9.1"
   },
   "devDependencies": {},
   "scripts": {
diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index 9e29d2e..6dd4550 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -31,6 +31,7 @@ import editProfile from "./pages/editProfile";
 import userLine from "./Userline.js";
 import verify from "./pages/verify";
 import Search from "./pages/Search.js";
+import directMessages from "./pages/directMessages";
 import otherUser from "./pages/otherUser";
 
 const theme = createMuiTheme(themeObject);
@@ -62,7 +63,7 @@ class App extends Component {
             <div className="container">
               <Navbar />
             </div>
-            <div className="app">
+            <div className="app" style={{height: "700"}}>
               <Switch>
                 {/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */}
                 <AuthRoute exact path="/signup" component={signup} />
@@ -74,9 +75,10 @@ class App extends Component {
 
                 <Route exact path="/home" component={home} />
                 <Route exact path="/user" component={user} />
-                <Route exact path="/edit" component={editProfile} />
+                <Route exact path="/user/edit" component={editProfile} />
                 <Route exact path="/verify" component={verify} />
                 <Route exact path="/search" component={Search} />
+                <Route exact path="/dm" component={directMessages} />
                 <Route exact path="/user/:userhandle" component={otherUser} />
 
                 <AuthRoute exact path="/" component={home} />
diff --git a/twistter-frontend/src/Userline.js b/twistter-frontend/src/Userline.js
index 8c95620..6c61d6d 100644
--- a/twistter-frontend/src/Userline.js
+++ b/twistter-frontend/src/Userline.js
@@ -1,10 +1,10 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router } from 'react-router-dom';
-import Route from 'react-router-dom/Route';
+// import { BrowserRouter as Router } from 'react-router-dom';
+// import Route from 'react-router-dom/Route';
 import axios from 'axios';
 import Box from '@material-ui/core/Box'
-import {borders} from '@material-ui/system';
-import { sizing } from '@material-ui/system';
+// import {borders} from '@material-ui/system';
+// import { sizing } from '@material-ui/system';
 // var moment = require('moment');
 
 
@@ -41,7 +41,7 @@ class Userline extends Component {
             <div style={{fontsize: "13px", textAlign: "left", marginLeft: "14px"}}>
                 <p>Userline</p>
             </div>
-            <Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign= "left" padding="5px" flexWrap= "wrap" flexDirection= "row" >
+            <Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign="left" padding="5px" flexWrap="wrap" flexDirection="row" >
                 <div style={{flexWrap: "wrap", flex: "1", flexDirection: "row", wordBreak: "break-word"}}>
                 <p>
                 {sortedPosts.map((microBlog) => <p>Microblog Title: {microBlog.microBlogTitle}
@@ -50,7 +50,7 @@ class Userline extends Component {
                                                           <br></br>Number of comments: {microBlog.commentCount}
                                                           <br></br>Number of likes: {microBlog.likeCount}
                                                           <br></br>Body of post: {microBlog.body}
-                                                          <br></br>Tagged topics: {microBlog.microBlogTopics.join("," + " ")}               
+                                                          <br></br>Tagged topics: {microBlog.microBlogTopics.join(", ")}               
                 </p>)} 
                 </p>
                 </div>
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index 9cac7b7..95ceba3 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -1,8 +1,37 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import Route from "react-router-dom/Route";
+// import { BrowserRouter as Router } from "react-router-dom";
+// import Route from "react-router-dom/Route";
 import axios from "axios";
 
+// Material-UI
+import TextField from '@material-ui/core/TextField';
+// import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import withStyles from "@material-ui/styles/withStyles";
+import CircularProgress from "@material-ui/core/CircularProgress";
+
+const styles = {
+  container: {
+    position: "fixed"
+  },
+  form: {
+    width: "300px",
+    height: "50px",
+    marginTop: "180px",
+    marginLeft: "50px"
+  },
+  textField: {
+    marginBottom: 15
+  },
+  progress: {
+    position: "absolute"
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
+  }
+}
+
 class Writing_Microblogs extends Component {
   constructor(props) {
     super(props);
@@ -10,7 +39,8 @@ class Writing_Microblogs extends Component {
       value: "",
       title: "",
       topics: "",
-      characterCount: 250
+      characterCount: 250,
+      loading: false
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -27,7 +57,7 @@ class Writing_Microblogs extends Component {
     this.setState({ topics: event.target.value });
   }
 
-  handleSubmit(event) {
+  handleSubmit = (event) => {
     // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
     const postData = {
       body: this.state.value,
@@ -35,25 +65,58 @@ class Writing_Microblogs extends Component {
       microBlogTitle: this.state.title,
       microBlogTopics: this.state.topics.split(", ")
     };
+
+    this.setState({
+      loading: true
+    })
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
 
-    axios
-      .post("/putPost", postData, headers)
+    let postPromise = axios
+      .post("/putPost", postData, headers) // TODO: add topics
       .then(res => {
-        alert("Post was shared successfully!");
+        // alert("Post was shared successfully!");
         console.log(res.data);
       })
       .catch(err => {
         alert("An error occured.");
         console.error(err);
       });
+    console.log(postData.microBlogTopics);
+    // let topicPromises = [];
+    // postData.microBlogTopics.forEach(topic => {
+    //   topicPromises.push(axios
+    //     .post("/putTopic", {
+    //       following: topic
+    //     })
+    //     .then(res => {
+    //       console.log(res.data);
+    //     })
+    //     .catch(err => {
+    //       console.error(err);
+    //     })
+    //   )
+    // });
     event.preventDefault();
-    this.setState({ value: "", title: "", characterCount: 250, topics: "" });
+    // topicPromises.push(postPromise);
+    Promise.all([postPromise])
+      .then(() => {
+        this.setState({ 
+          value: "", 
+          title: "", 
+          characterCount: 250, 
+          topics: "",
+          loading: false
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+      })
   }
 
   handleChangeforPost(event) {
+
     this.setState({ value: event.target.value });
   }
 
@@ -64,65 +127,69 @@ class Writing_Microblogs extends Component {
   }
 
   render() {
+    const { classes } = this.props;
     return (
-      <div>
-        <div
-          style={{
-            width: "200px",
-            height: "50px",
-            marginTop: "180px",
-            marginLeft: "50px"
-          }}
-        >
-          <form>
-            <textarea
-              placeholder="Enter Microblog Title"
-              value={this.state.title}
-              required
-              onChange={this.handleChange}
-              cols={30}
-              rows={1}
-            />
-          </form>
-        </div>
-        <div style={{ width: "200px", height: "50px", marginLeft: "50px" }}>
-          <form>
-            <textarea
-              placeholder="Enter topics seperated by a comma"
-              value={this.state.topics}
-              required
-              onChange={this.handleChangeforTopics}
-              cols={40}
-              rows={1}
-            />
-          </form>
-        </div>
+      <div className={classes.container}>
+        <form noValidate className={classes.form}>
+          <TextField
+            id="title"
+            name="title"
+            label="Title"
+            className={classes.textField}
+            value={this.state.title}
+            variant="outlined"
+            onChange={this.handleChange}
+            fullWidth
+            autoComplete='off'
+          />
 
-        <div style={{ width: "200px", marginLeft: "50px" }}>
-          <form onSubmit={this.handleSubmit}>
-            <textarea
-              value={this.state.value}
-              required
-              maxLength="250"
-              placeholder="Write Microblog here..."
-              onChange={e => {
-                this.handleChangeforPost(e);
-                this.handleChangeforCharacterCount(e);
-              }}
-              cols={40}
-              rows={20}
-            />
-            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-              <p2>Characters Left: {this.state.characterCount}</p2>
-            </div>
-            <div style={{ marginRight: "-100px" }}>
-              <button onClick>Share Post</button>
-            </div>
-          </form>
-        </div>
+          <TextField
+            id="topics"
+            name="topics"
+            label="Topics"
+            className={classes.textField}
+            value={this.state.topics}
+            variant="outlined"
+            onChange={this.handleChangeforTopics}
+            color="primary"
+            fullWidth
+            autoComplete='off'
+          />
+          <TextField
+            id="content"
+            name="content"
+            label="Content"
+            color="primary"
+            className={classes.textField}
+            value={this.state.value}
+            helperText={`${this.state.characterCount} characters left`}
+            multiline
+            rows="9"
+            variant="outlined"
+            inputProps={{
+              maxLength: 250
+            }}
+            onChange={(e) => {
+              this.handleChangeforPost(e);
+              this.handleChangeforCharacterCount(e);
+            }}
+            fullWidth
+            autoComplete='off'
+          />
+          <Button
+            className={classes.button}
+            onClick={this.handleSubmit}
+            disabled={this.state.loading}
+            variant="outlined"
+            color="primary"
+            >
+              Share Post
+            {this.state.loading && <CircularProgress size={30} className={classes.progress} />}
+          </Button>
+        </form>
       </div>
     );
   }
 }
 
-export default Writing_Microblogs;
+export default withStyles(styles)(Writing_Microblogs);
diff --git a/twistter-frontend/src/components/layout/NavBar.js b/twistter-frontend/src/components/layout/NavBar.js
index f1e1b4a..761db65 100644
--- a/twistter-frontend/src/components/layout/NavBar.js
+++ b/twistter-frontend/src/components/layout/NavBar.js
@@ -46,6 +46,11 @@ export class Navbar extends Component {
               Profile
             </Button>
           )}
+          {authenticated && (
+            <Button component={Link} to="/dm">
+              DMs
+            </Button>
+          )}
           {!authenticated && (
             <Button component={Link} to="/login">
               Login
@@ -62,7 +67,7 @@ export class Navbar extends Component {
             </Button>
           )}
           {authenticated && (
-            <Button component={Link} to="/logout">
+            <Button style={{position: "absolute", right: 30}} component={Link} to="/logout">
               Logout
             </Button>
           )}
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index 38af793..2535505 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -1,100 +1,267 @@
 /* eslint-disable */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import axios from 'axios';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import axios from "axios";
 
 // Material UI and React Router
-import { makeStyles, styled } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
+
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Button from "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import TextField from "@material-ui/core/TextField";
+
 import Typography from "@material-ui/core/Typography";
+import withStyles from "@material-ui/styles/withStyles";
 
 // component
-import '../App.css';
-import logo from '../images/twistter-logo.png';
-import noImage from '../images/no-img.png';
-import Writing_Microblogs from '../Writing_Microblogs';
+import "../App.css";
+import logo from "../images/twistter-logo.png";
+import noImage from "../images/no-img.png";
+import Writing_Microblogs from "../Writing_Microblogs";
+import ReactModal from "react-modal";
 
-const MyCardContent = styled(CardContent)({
-  textAlign: "left"
-});
+// Redux
+import { likePost, unlikePost, getLikes } from "../redux/actions/userActions";
+
+const styles = {
+  card: {
+    marginBottom: 5
+  }
+};
 
 class Home extends Component {
-  state = {};
+  state = {
+    likes: [],
+    loading: false,
+    following: null,
+    topics: null
+  };
 
   componentDidMount() {
-    axios
-      .get("/getFollowedPosts")
+    this.setState({ loading: true });
+    let userPromise = axios
+      .get("/user")
       .then(res => {
-        console.log(res.data);
+        console.log(res.data.credentials.following);
+        let list = [];
+        res.data.credentials.following.forEach(element => {
+          list.push(element.handle);
+        });
         this.setState({
-          posts: res.data
-        })
+          following: list,
+          topics: res.data.credentials.followedTopics
+        });
       })
       .catch(err => console.log(err));
+
+    let allPosts;
+    let postPromise = axios
+      .get("/getallPosts")
+      .then(res => {
+        // console.log(res.data);
+        // this.setState({
+        //   posts: res.data
+        // });
+        allPosts = res.data;
+        // console.log(allPosts)
+        return axios.get("/getAlert")
+      })
+      .then((res) => {
+        // console.log(res.data)
+        // res.data.forEach((adminAlert) => {
+        //   allPosts.push(adminAlert);
+        // })
+        this.setState({
+          posts: allPosts
+        });
+      })
+
+      .catch(err => console.log(err));
+
+    Promise.all([userPromise, postPromise])
+      .then(() => {
+        this.setState({
+          loading: false
+        });
+      })
+      .catch(error => {
+        console.log(error);
+      });
+
+    this.props.getLikes();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      likes: nextProps.user.likes
+    });
+  }
+
+  flagPost = (event) => {
+    // Flags a post
+    let postId = event.target.dataset.key ? event.target.dataset.key : event.target.parentNode.dataset.key;
+    console.log(postId);
+    axios.post(`/hidePost`, {postId})
+    .then((res) => {
+      console.log(res.data);
+    })
+    .catch(err => {
+      console.error(err);
+    });
+    // event.preventDefault();
+  }
+
+  handleClickLikeButton = (event) => {
+    // Need the ternary if statement because the user can click on the text or body of the 
+    // Button and they are two different html elements
+    let postId = event.target.dataset.key
+      ? event.target.dataset.key
+      : event.target.parentNode.dataset.key;
+    console.log(postId);
+
+    let doc = document.getElementById(postId);
+    // console.log(postId);
+    if (this.state.likes.includes(postId)) {
+      this.props.unlikePost(postId, this.state.likes);
+      doc.dataset.likes--;
+    } else {
+      this.props.likePost(postId, this.state.likes);
+      doc.dataset.likes++;
+    }
+
+    doc.innerHTML = "Likes " + doc.dataset.likes;
+  };
+
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
   }
 
   render() {
-    dayjs.extend(relativeTime);
+    const {
+      UI: { loading }
+    } = this.props;
     let authenticated = this.props.user.authenticated;
+    let { classes } = this.props;
+    let username = this.props.user.credentials.handle;
+    console.log(username);
+    var hiddenBool = true;
+    if (username === "Admin") {
+      hiddenBool = false;
+    }
 
-    let postMarkup = this.state.posts ? (
-      this.state.posts.map(post => 
-        <Card>
-          <MyCardContent>
-            <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"}>{dayjs(post.createdAt).fromNow()}</Typography>
-            <br />
-            <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
-            <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} &nbsp; Shares {post.commentCount} </Typography>
-          </MyCardContent>
-        </Card>
+    console.log(hiddenBool);
+    let postMarkup = this.state.posts ? ( this.state.following === undefined || this.state.following === null ? <Typography>You aren't following anybody right now</Typography> :
+      this.state.posts.map(post => !post.hidden && this.state.following && (this.state.following.includes(post.userHandle) || post.userHandle === "Admin") ? (
+            <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>
+                <Typography variant="body2" color={"textSecondary"}>{this.formatDate(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.join(", ")}</Typography>        
+                <br />
+                {!hiddenBool &&
+                  <Button
+                  onClick={this.flagPost}
+                  data-key={post.postId}
+                  variant = "contained"
+                  color = "primary"
+                >
+                  Hide Post
+                </Button>
+                }
+                
+                <Typography id={post.postId} data-likes={post.likeCount} variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
+                {/* <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like> */}
+                <Button
+                  onClick={this.handleClickLikeButton}
+                  data-key={post.postId}
+                  disabled={loading}
+                  variant="outlined"
+                  color="primary"
+                >{
+                  this.state.likes && this.state.likes.includes(post.postId) ? 'Unlike' : 'Like'
+                  }</Button>
+                <Quote microblog = {post.postId}></Quote> 
+
+                {/* <button>Quote</button> */}
+
+                {/* <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography> */}
+                
+              </CardContent>
+            </Card>
+        ) : (
+              <p></p>
+            )
+    )
+    ) : (
+      <p>Loading post...</p>
+    );
+
+    return authenticated ? (
+      this.state.loading ? (
+        <CircularProgress
+          size={60}
+          style={{ marginTop: "300px" }}
+        ></CircularProgress>
+      ) : (
+        <Grid container>
+          <Grid item sm={4} xs={8}>
+            <Writing_Microblogs />
+          </Grid>
+          <Grid item sm={4} xs={8}>
+            {postMarkup}
+          </Grid>
+        </Grid>
       )
-    ) : (<p>loading posts...</p>);
-
-    return (
-      authenticated ?
-      <Grid container spacing={16}>
-        <Grid item sm={4} xs={8}>
-          <Writing_Microblogs />
-        </Grid>
-        <Grid item sm={4} xs={8}>
-          {postMarkup}
-        </Grid>
-      </Grid> 
-      :
+    ) : loading ? (
+      <CircularProgress
+        size={60}
+        style={{ marginTop: "300px" }}
+      ></CircularProgress>
+    ) : (
       <div>
         <div>
           <img src={logo} className="app-logo" alt="logo" />
-          <br/><br/>
-          <b>Welcome to Twistter!</b> 
-          <br/><br/>
-          <b>See the most interesting topics people are following right now.</b> 
+          <br />
+          <br />
+          <b>Welcome to Twistter!</b>
+          <br />
+          <br />
+          <b>See the most interesting topics people are following right now.</b>
         </div>
 
-        <br/><br/><br/><br/>
+        <br />
+        <br />
+        <br />
+        <br />
 
-        <div>                    
-          <b>Join today or sign in if you already have an account.</b> 
-          <br/><br/>
+        <div>
+          <b>Join today or sign in if you already have an account.</b>
+          <br />
+          <br />
           <form action="./signup">
-            <button className="authButtons signup">Sign up</button> 
+            <button className="authButtons signup">Sign up</button>
           </form>
-          <br/>
+          <br />
           <form action="./login">
             <button className="authButtons login">Sign in</button>
           </form>
@@ -104,12 +271,281 @@ class Home extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  user: state.user
-})
+class Quote extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      characterCount: 250,
+      showModal: false,
+      value: ""
+    };
 
-Home.propTypes = {
-  user: PropTypes.object.isRequired
+    this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmitWithoutPost(event) {
+    const post = {
+      userImage: "bing-url"
+    };
+    const headers = {
+      headers: { "Content-Type": "application/json" }
+    };
+    axios
+      .post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
+      .then(res => {
+        console.log(res.data);
+      })
+      .catch(err => {
+        console.error(err);
+      });
+    event.preventDefault();
+  }
+
+  handleOpenModal() {
+    this.setState({ showModal: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ showModal: false, characterCount: 250, value: "" });
+  }
+
+  handleChangeforPost(event) {
+    this.setState({ value: event.target.value });
+  }
+
+  handleChangeforCharacterCount(event) {
+    const charCount = event.target.value.length;
+    const charRemaining = 250 - charCount;
+    this.setState({ characterCount: charRemaining });
+  }
+
+  handleSubmit(event) {
+    const quotedPost = {
+      quoteBody: this.state.value,
+      userImage: "bing-url"
+    };
+    const headers = {
+      headers: { "Content-Type": "application/json" }
+    };
+    axios
+      .post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
+      .then(res => {
+        console.log(res.data);
+      })
+      .catch(err => {
+        console.error(err);
+      });
+    event.preventDefault();
+    this.setState({ showModal: false, characterCount: 250, value: "" });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button
+          variant="outlined"
+          color="primary"
+          onClick={this.handleOpenModal}
+        >
+          Quote with Post
+        </Button>
+        <ReactModal
+          isOpen={this.state.showModal}
+          style={{
+            content: {
+              height: "50%",
+              width: "25%",
+              marginTop: "auto",
+              marginLeft: "auto",
+              marginRight: "auto",
+              marginBottom: "auto"
+            }
+          }}
+        >
+          <div style={{ width: "200px", marginLeft: "50px" }}>
+            <form style={{ width: "350px" }}>
+              {/* <textarea
+              value={this.state.value}
+              required
+              maxLength="250"
+              placeholder="Write Quoted Post here..."
+              onChange={e => {
+                this.handleChangeforPost(e);
+                this.handleChangeforCharacterCount(e);
+                
+              }}
+              cols={40}
+              rows={20}
+            /> */}
+              <TextField
+                style={{ width: 300 }}
+                value={this.state.value}
+                label="Write Quoted Post here..."
+                required
+                multiline
+                color="primary"
+                rows="14"
+                variant="outlined"
+                inputProps={{
+                  maxLength: 250
+                }}
+                onChange={e => {
+                  this.handleChangeforPost(e);
+                  this.handleChangeforCharacterCount(e);
+                }}
+                autoComplete="off"
+              ></TextField>
+
+              <div style={{ fontSize: "14px", marginRight: "-100px" }}>
+                <p2>Characters Left: {this.state.characterCount}</p2>
+              </div>
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={this.handleSubmit}
+              >
+                Share Quoted Post
+              </Button>
+
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={this.handleCloseModal}
+              >
+                Cancel
+              </Button>
+            </form>
+          </div>
+        </ReactModal>
+        <Button
+          variant="outlined"
+          color="primary"
+          onClick={this.handleSubmitWithoutPost}
+        >
+          Quote without Post
+        </Button>
+      </div>
+    );
+  }
 }
 
-export default connect(mapStateToProps)(Home);
\ No newline at end of file
+class Like extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      num: this.props.count
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  componentDidMount() {
+    this.setState({
+      like:
+        localStorage.getItem(this.props.microBlog + this.props.name) === "false"
+    });
+  }
+
+  handleClick(){
+    this.setState({
+      like: !this.state.like
+    });
+    localStorage.setItem(
+      this.props.microBlog + this.props.name,
+      this.state.like.toString()
+    );
+
+    if (this.state.like == false) {
+      this.setState(() => {
+        return { num: this.state.num + 1 };
+      });
+      axios
+        .get(`/like/${this.props.microBlog}`)
+        .then(res => {
+          console.log(res.data);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    } else {
+      this.setState(() => {
+        return { num: this.state.num - 1 };
+      });
+      axios
+        .get(`/unlike/${this.props.microBlog}`)
+        .then(res => {
+          console.log(res.data);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    }
+  }
+
+  /* componentDidMount() {
+    axios.get(`/checkforLikePost/${this.props.microBlog}`)
+    .then((res) => {
+      this.setState({
+        like2: res.data
+      })
+      console.log(res.data);
+    })
+    .catch((err) => {
+      console.log(err)
+    })
+    if (this.state.like2 === this.state.like)
+    {
+      this.setState({
+        like: false
+      })
+    }
+  }  */
+
+  render() {
+    const label = this.state.like ? "Unlike" : "Like";
+    return (
+      <div>
+        <Typography variant="body2" color={"textSecondary"}>
+          Likes {this.state.num}
+        </Typography>
+        <button onClick={this.handleClick}>{label}</button>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  user: state.user,
+  UI: state.UI
+});
+
+const mapActionsToProps = {
+  likePost,
+  unlikePost,
+  getLikes
+};
+
+Home.propTypes = {
+  user: PropTypes.object.isRequired,
+  likePost: PropTypes.func.isRequired,
+  unlikePost: PropTypes.func.isRequired,
+  getLikes: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+  UI: PropTypes.object.isRequired
+};
+
+Like.propTypes = {
+  user: PropTypes.object.isRequired
+};
+
+Quote.propTypes = {
+  user: PropTypes.object.isRequired
+};
+
+export default connect(
+  mapStateToProps,
+  mapActionsToProps
+)(withStyles(styles)(Home, Like, Quote));
diff --git a/twistter-frontend/src/pages/Login.js b/twistter-frontend/src/pages/Login.js
index 336255a..acdff3e 100644
--- a/twistter-frontend/src/pages/Login.js
+++ b/twistter-frontend/src/pages/Login.js
@@ -110,7 +110,7 @@ export class Login extends Component {
         <Grid item sm>
         <img src={logo} className="app-logo" alt="logo" />
           <br></br>
-          <Typography variant="p" className={classes.pageTitle} fontFamily = "Georgia, serif">
+          <Typography variant="h6" className={classes.pageTitle} fontFamily = "Georgia, serif">
             <b>Log in to Twistter</b>
             <br></br>
           </Typography>
@@ -119,7 +119,7 @@ export class Login extends Component {
             <TextField
               id="email"
               name="email"
-              label="Email*"
+              label="Email or Username*"
               className={classes.textField}
               value={this.state.email}
               helperText={errors.email}
@@ -127,6 +127,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -140,6 +141,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <Button
               type="submit"
diff --git a/twistter-frontend/src/pages/Search.js b/twistter-frontend/src/pages/Search.js
index 14cbc52..80507b7 100644
--- a/twistter-frontend/src/pages/Search.js
+++ b/twistter-frontend/src/pages/Search.js
@@ -1,39 +1,77 @@
 import React, { Component } from "react";
 // import props
-import { TextField, Button } from "@material-ui/core";
+// import { TextField, Button } from "@material-ui/core";
+import TextField from "@material-ui/core/TextField"
 import Grid from "@material-ui/core/Grid";
-import Axios from "axios";
+import axios from "axios";
+import Fuse from "fuse.js";
 
 import { BrowserRouter as Router } from "react-router-dom";
 
+import CircularProgress from "@material-ui/core/CircularProgress";
+
+const fuseOptions = {
+  shouldSort: true,
+  threshold: 0.6,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: []
+};
+
+let fuse;
+
+
 export class Search extends Component {
   state = {
-    searchPhase: null,
-    searchResult: null
+    handles: [],
+    // searchPhrase: null,
+    searchResult: null,
+    loading: false
   };
 
-  handleSearch = () => {
-    console.log(this.state.searchPhase);
-    Axios.post("/getUserHandles", {
-      userHandle: this.state.searchPhase
-    })
-      .then(res => {
-        console.log(res);
-
-        this.setState({
-          searchResult: res.data
-        });
+  componentDidMount() {
+    this.setState({loading: true});
+    axios.get("/getAllHandles")
+    .then((res) => {
+      this.setState({
+        handles: res.data,
+        loading: false
+      }, () => {
+        // console.log(res.data);
+        fuse = new Fuse(this.state.handles, fuseOptions); // "list" is the item array
       })
-      .catch(err => {
-        console.log(err);
-      });
-  };
+    })
+  }
 
-  handleInput(event) {
+  // handleSearch = () => {
+  //   console.log(this.state.searchPhase);
+  //   axios.post("/getUserHandles", {
+  //     userHandle: this.state.searchPhase
+  //   })
+  //     .then(res => {
+  //       console.log(res);
+
+  //       this.setState({
+  //         searchResult: res.data
+  //       });
+  //     })
+  //     .catch(err => {
+  //       console.log(err);
+  //     });
+  // };
+
+  handleChange = (event) => {
+    let result = fuse.search(event.target.value);
+    let parsed = [];
+    result.forEach((res) => {
+      // console.log(res)
+      parsed.push(this.state.handles[res])
+    })
     this.setState({
-      searchPhase: event.target.value
-    });
-    console.log(this.state.searchPhase);
+      searchResult: parsed.length !== 0 ? parsed : "No Results"
+    })
   }
 
   handleRedirect() {
@@ -41,38 +79,50 @@ export class Search extends Component {
   }
 
   render() {
-    let resultMarkup = this.state.searchResult ? (
-      <Router>
-        <div>
-          <a href={`/user/${this.state.searchResult}`}>
-            {this.state.searchResult}
-          </a>
-        </div>
-      </Router>
-    ) : (
-      //   console.log(this.state.searchResult)
-      <p> No result </p>
-    );
+    let resultMarkup = this.state.searchResult && this.state.searchResult !== "No Results" ? (
+      this.state.searchResult.map(res => 
+        <Router key={res}>
+          <div>
+            <a href={`/user/${res}`}>
+              {res}
+            </a>
+          </div>
+        </Router>
+      )
+    ) 
+      : 
+    this.state.searchResult === "No Results" ?
+      (
+       <p> No results </p>
+      )
+        :
+      (
+        null
+      )
 
     return (
-      <Grid>
+
+      this.state.loading 
+      ? 
+        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> 
+      : 
         <Grid>
-          <TextField
-            id="standard-required"
-            label="Search"
-            defaultValue="username"
-            margin="normal"
-            value={this.state.searchPhase}
-            onChange={event => this.handleInput(event)}
-          />
+          <Grid>
+            <TextField
+              id="standard-required"
+              label="Username"
+              margin="normal"
+              // value={this.state.searchPhrase}
+              onChange={this.handleChange}
+            />
+          </Grid>
+          <Grid>
+            {/* <Button color="primary" onClick={this.handleSearch}>
+              Search
+            </Button> */}
+          </Grid>
+          <Grid>{resultMarkup}</Grid>
         </Grid>
-        <Grid>
-          <Button color="primary" onClick={this.handleSearch}>
-            Search
-          </Button>
-        </Grid>
-        <Grid>{resultMarkup}</Grid>
-      </Grid>
     );
   }
 }
diff --git a/twistter-frontend/src/pages/Signup.js b/twistter-frontend/src/pages/Signup.js
index 99afab3..74a6fa1 100644
--- a/twistter-frontend/src/pages/Signup.js
+++ b/twistter-frontend/src/pages/Signup.js
@@ -122,6 +122,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="email"
@@ -134,6 +135,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -147,6 +149,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="confirmPassword"
@@ -160,6 +163,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <br></br>
             <br></br>
diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index 7272e76..1d1e3cc 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -1,17 +1,28 @@
 import React, { Component } from "react";
+import { Link } from 'react-router-dom';
 import axios from "axios";
 import PropTypes from "prop-types";
-// TODO: Add a read-only '@' in the left side of the handle input
-// TODO: Add a cancel button, that takes the user back to their profile page
+
+import noImage from '../images/no-img.png';
 
 // Material-UI stuff
+import Box from "@material-ui/core/Box"
 import Button from "@material-ui/core/Button";
-import { Link } from 'react-router-dom';
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
+import Popover from "@material-ui/core/Popover";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+import IconButton from "@material-ui/core/IconButton";
+import EditIcon from "@material-ui/icons/Edit";
+import Tooltip from "@material-ui/core/Tooltip";
+
+// Redux stuff
+import { connect } from "react-redux";
+import { uploadImage } from "../redux/actions/userActions";
 
 const styles = {
   form: {
@@ -28,34 +39,77 @@ const styles = {
     positon: "relative",
     marginBottom: 30
   },
+  box: {
+    position: "relative"
+  },
+  back: {
+    float: "left",
+    marginLeft: 15
+  },
+  delete: {
+    float: "right",
+    marginRight: 15
+  },
   progress: {
     position: "absolute"
+  },
+  uploadProgress: {
+    position: "absolute",
+    marginLeft: -155,
+    marginTop: 95
+  },
+  popoverBackground: {
+    marginTop: "-100px",
+    width: "calc(100vw)",
+    height: 'calc(100vh + 100px)',
+    backgroundColor: "gray",
+    position: "absolute",
+    opacity: "70%"
   }
 };
 
-export class edit extends Component {
+export class editProfile extends Component {
+  // mapReduxToState = (credentials) => {
+  //   this.setState({
+  //     imageUrl: credentials.imageUrl ? credentials.imageUrl : noImage,
+  //     firstName: credentials.firstName ? credentials.firstName : '',
+  //     lastName: credentials.lastName ? credentials.lastName : '',
+  //     email: credentials.email ? credentials.email : 'error, email doesn\'t exist',
+  //     handle: credentials.handle ? credentials.handle : 'error, handle doesn\'t exist',
+  //     bio: credentials.bio ? credentials.bio : ''
+  //   });
+  // };
+
   // Runs as soon as the page loads.
   // Sets the default values of all the textboxes to the data
   // that is stored in the database for the user.
   componentDidMount() {
+    // const { credentials } = this.props;
+    // console.log(this.props.user);
+    // this.mapReduxToState(credentials);
+    this.setState({pageLoading: true})
+
     axios
       .get("/getProfileInfo")
       .then((res) => {
+        // Need to have the ternary if statements, because react throws an error if
+        // any of the res.data keys are undefined
         this.setState({
-          firstName: res.data.firstName,
-          lastName: res.data.lastName,
+          imageUrl: res.data.imageUrl,
+          firstName: res.data.firstName ? res.data.firstName : "",
+          lastName: res.data.lastName ? res.data.lastName : "",
           email: res.data.email,
           handle: res.data.handle,
-          bio: res.data.bio
+          bio: res.data.bio ? res.data.bio : "",
+          dmEnabled: res.data.dmEnabled === false ? false : true,
+          pageLoading: false
         });
       })
       .catch((err) => {
         console.error(err);
         if (err.response.status === 403) {
-          alert("You are not logged in");
-          // TODO: Redirect them, to the profile they are trying to edit
-          // If they are on /itsjimmy/edit, they will be redirected to /itsjimmy
-          this.props.history.push('../');
+          // This user is not logged in
+          this.props.history.push('/');
         }
       });
   }
@@ -64,12 +118,17 @@ export class edit extends Component {
   constructor() {
     super();
     this.state = {
+      imageUrl: "",
       firstName: "",
       lastName: "",
       email: "",
       handle: "",
       bio: "",
+      dmEnabled: false,
+      togglingDirectMessages: false,
+      anchorEl: null,
       loading: false,
+      pageLoading: false,
       errors: {}
     };
   }
@@ -104,11 +163,11 @@ export class edit extends Component {
         this.setState({
           loading: false
         });
-        // this.props.history.push('/');
-        // TODO: Need to redirect user to their profile page
+        this.props.history.push('/user');
       })
       .catch((err) => {
         console.log(err);
+        // TODO: Should redirect to login page if they get a 403
         this.setState({
           errors: err.response.data,
           loading: false
@@ -129,136 +188,324 @@ export class edit extends Component {
     });
   };
 
+  handleDMSwitch = () => {
+    let enable;
+    
+    if (this.state.dmEnabled) {
+      enable = {enable: false};
+    } else {
+      enable = {enable: true};
+    }
+
+    this.setState({
+      dmEnabled: enable.enable,
+      togglingDirectMessages: true
+    });
+
+    axios.post("/dms/toggle", enable)
+      .then(() => {
+        this.setState({
+          togglingDirectMessages: false
+        });
+      })
+  }
+
+  handleImageChange = (event) => {
+    if (event.target.files[0]) {
+      const image = event.target.files[0];
+      const formData = new FormData();
+      formData.append('image', image, image.name);
+      this.props.uploadImage(formData);
+    }
+  }
+
+  handleEditPicture = () => {
+    const fileInput = document.getElementById('imageUpload');
+    fileInput.click();
+  }
+
+  // logging = () => {
+  //   console.log(this.state);
+  //   console.log(this.props);
+  //   this.mapReduxToState(this.props.credentials);
+  // }
+
+  handleOpenConfirmDelete = (event) => {
+		this.setState({
+      // anchorEl: event.currentTarget
+      anchorEl: document.getElementById("container-grid")
+		});
+	};
+
+	handleCloseConfirmDelete = () => {
+		this.setState({
+			anchorEl: null,
+            createDMUsername: ''
+		});
+	};
+
   render() {
     const { classes } = this.props;
+    const uploading = this.props.UI.loading;
     const { errors, loading } = this.state;
 
+
+    let imageMarkup = this.props.user.credentials.imageUrl ? (
+      <Box
+      // className={classes.box}
+      >
+        <img
+        src={this.props.user.credentials.imageUrl}
+        height="250"
+        width="250"
+        className={classes.box}/>
+        {uploading && (
+          <CircularProgress size={60} className={classes.uploadProgress} />
+        )}
+      </Box>
+    ) : (
+      <Box
+      // className={classes.box}
+      >
+        <img
+        src={noImage}
+        height="250"
+        width="250"
+        className={classes.box}/>
+        {uploading && (
+          <CircularProgress size={60} className={classes.uploadProgress} />
+        )}
+      </Box>
+    )
+
+    // Used for the delete button
+		const open = Boolean(this.state.anchorEl);
+		const id = open ? 'simple-popover' : undefined;
+
     return (
-      <Grid container className={classes.form}>
-        <Grid item sm />
-        <Grid item sm>
-          <Typography variant="h2" className={classes.pageTitle}>
-            Edit Profile
-          </Typography>
-          <form noValidate onSubmit={this.handleSubmit}>
-            <Grid container className={classes.form} spacing={4}>
-              <Grid item sm>
-                <TextField
-                  id="firstName"
-                  name="firstName"
-                  label="First Name"
-                  className={classes.textField}
-                  value={this.state.firstName}
-                  helperText={errors.firstName}
-                  error={errors.firstName ? true : false}
-                  variant="outlined"
-                  onChange={this.handleChange}
-                  fullWidth
-                />
-              </Grid>
-              <Grid item sm>
-                <TextField
-                  id="lastName"
-                  name="lastName"
-                  label="Last Name"
-                  className={classes.textField}
-                  value={this.state.lastName}
-                  helperText={errors.lastname}
-                  error={errors.lastName ? true : false}
-                  variant="outlined"
-                  onChange={this.handleChange}
-                  fullWidth
-                />
-              </Grid>
-            </Grid>
-            <TextField
-              id="email"
-              name="email"
-              label="Email*"
-              className={classes.textField}
-              value={this.state.email}
-              disabled
-              helperText="(disabled)"
-              // INFO: These will be uncommented if changing emails is allowed
-              // helperText={errors.email}
-              // error={errors.email ? true : false}
-              variant="outlined"
-              onChange={this.handleChange}
-              fullWidth
-            />
-            <TextField
-              id="handle"
-              name="handle"
-              label="Handle*"
-              className={classes.textField}
-              value={this.state.handle}
-              disabled
-              helperText="(disabled)"
-              // INFO: These will be uncommented if changing usernames is allowed
-              // helperText={errors.handle}
-              // error={errors.handle ? true : false}
-              variant="outlined"
-              onChange={this.handleChange}
-              fullWidth
-            />
-            <TextField
-              id="bio"
-              name="bio"
-              label="Bio"
-              className={classes.textField}
-              value={this.state.bio}
-              helperText={errors.bio}
-              error={errors.bio ? true : false}
-              multiline
-              rows="8"
-              variant="outlined"
-              onChange={this.handleChange}
-              fullWidth
-            />
+      this.state.pageLoading ? 
+        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
+      :
+        <Grid container className={classes.form} id="container-grid">
+          <Grid item sm >
             <Button
-              type="submit"
-              variant="contained"
+              variant="outlined"
               color="primary"
-              className={classes.button}
-              disabled={loading}
-              //component={ Link }
-              //to='/user'
-            >
-              Submit
-              {loading && (
-                <CircularProgress size={30} className={classes.progress} />
-              )}
-            </Button>
-            <br />
-            <Button
-              //variant="contained"
-              color="primary"
-              className={classes.button}
+//               className={classes.button}
+              disabled={loading || uploading}
+              className={classes.back}
               component={ Link }
               to='/user'
             >
               Back to Profile
             </Button>
-            <br />
+          </Grid>
+          <Grid item sm>
+            <Typography variant="h2" className={classes.pageTitle}>
+              Edit Profile
+            </Typography>
+            <form noValidate onSubmit={this.handleSubmit}>
+              {imageMarkup}
+              <input type="file" id="imageUpload" onChange={this.handleImageChange} hidden = "hidden"/>
+              <Tooltip title="Edit profile picture" placement="top">
+              <IconButton onClick={this.handleEditPicture} className="button">
+              <EditIcon color="primary"/>
+              </IconButton></Tooltip>
+              <Grid container className={classes.form} spacing={4}>
+                <Grid item sm>
+                  <TextField
+                    id="firstName"
+                    name="firstName"
+                    label="First Name"
+                    className={classes.textField}
+                    value={this.state.firstName}
+                    helperText={errors.firstName}
+                    error={errors.firstName ? true : false}
+                    variant="outlined"
+                    onChange={this.handleChange}
+                    fullWidth
+                    autoComplete='off'
+                  />
+                </Grid>
+                <Grid item sm>
+                  <TextField
+                    id="lastName"
+                    name="lastName"
+                    label="Last Name"
+                    className={classes.textField}
+                    value={this.state.lastName}
+                    helperText={errors.lastname}
+                    error={errors.lastName ? true : false}
+                    variant="outlined"
+                    onChange={this.handleChange}
+                    fullWidth
+                    autoComplete='off'
+                  />
+                </Grid>
+              </Grid>
+              <TextField
+                id="email"
+                name="email"
+                label="Email*"
+                className={classes.textField}
+                value={this.state.email}
+                disabled
+                helperText="(disabled)"
+                // INFO: These will be uncommented if changing emails is allowed
+                // helperText={errors.email}
+                // error={errors.email ? true : false}
+                variant="outlined"
+                onChange={this.handleChange}
+                fullWidth
+                autoComplete='off'
+              />
+              <TextField
+                id="handle"
+                name="handle"
+                label="Handle*"
+                className={classes.textField}
+                value={"@" + this.state.handle}
+                disabled
+                helperText="(disabled)"
+                // INFO: These will be uncommented if changing usernames is allowed
+                // helperText={errors.handle}
+                // error={errors.handle ? true : false}
+                variant="outlined"
+                onChange={this.handleChange}
+                fullWidth
+                autoComplete='off'
+              />
+              <TextField
+                id="bio"
+                name="bio"
+                label="Bio"
+                className={classes.textField}
+                value={this.state.bio}
+                helperText={errors.bio}
+                error={errors.bio ? true : false}
+                multiline
+                rows="8"
+                variant="outlined"
+                onChange={this.handleChange}
+                fullWidth
+                autoComplete='off'
+              />
+              <FormControlLabel
+                control={
+                  <Switch
+                    color="primary"
+                    disabled={this.state.togglingDirectMessages} 
+                    checked={this.state.dmEnabled} 
+                    onChange={this.handleDMSwitch} 
+                  />
+                }
+                label="Enable Direct Messages"
+              />
+              <br></br>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                className={classes.button}
+                disabled={loading}
+                //component={ Link }
+                //to='/user'
+              >
+                Submit
+                {loading && (
+                  <CircularProgress size={30} className={classes.progress} />
+                )}
+              </Button>
+              
+            </form>
+          </Grid>
+          <Grid item sm>
             <Button
-              variant="contained"
+              variant="outlined"
               color="secondary"
-              className={classes.button}
-              component={ Link }
-              to='/delete'
+              className={classes.delete}
+              onClick={this.handleOpenConfirmDelete}
             >
               Delete Account
             </Button>
-          </form>
+          </Grid>
+          <Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box>
+          <Popover
+              id={id}
+              open={open}
+              anchorEl={this.state.anchorEl}
+              onClose={this.handleCloseConfirmDelete}
+              anchorOrigin={{
+                vertical: 'center',
+                horizontal: 'center'
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center'
+              }}
+              style={{
+                marginTop: "-200px"
+              }}
+            >
+              <Box
+                style={{
+                  height: 200,
+                  width: 400
+                }}
+              >
+                <Grid container direction="column" spacing={3}>
+                  <Grid item>
+                      <Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography>
+                  </Grid>
+                  <Grid item>
+                    <Button 
+                      color="secondary"
+                      variant="contained"
+                      component={ Link }
+                      to='/delete'
+                      style={{
+                        marginBottom: "-40px",
+                        marginLeft: 10,
+                        width: 90
+                      }}
+                    >
+                      Yes
+                    </Button>
+                    <Button 
+                      color="primary"
+                      variant="outlined"
+                      onClick={this.handleCloseConfirmDelete}
+                      style={{
+                        marginBottom: "-40px",
+                        marginLeft: 195
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Popover>
         </Grid>
-        <Grid item sm />
-      </Grid>
     );
   }
 }
 
-edit.propTypes = {
-  classes: PropTypes.object.isRequired
+
+const mapStateToProps = (state) => ({
+  user: state.user,
+  UI: state.UI,
+  // credentials: state.user.credentials
+});
+
+const mapActionsToProps = { uploadImage }
+
+editProfile.propTypes = {
+  uploadImage: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+	user: PropTypes.object.isRequired,
+	UI: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(edit);
+// export default withStyles(styles)(edit);
+export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(editProfile));
diff --git a/twistter-frontend/src/pages/otherUser.js b/twistter-frontend/src/pages/otherUser.js
index f128f72..a25b9fd 100644
--- a/twistter-frontend/src/pages/otherUser.js
+++ b/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";
@@ -19,6 +21,8 @@ import Typography from "@material-ui/core/Typography";
 import AddCircle from "@material-ui/icons/AddCircle";
 import TextField from "@material-ui/core/TextField";
 import VerifiedIcon from "@material-ui/icons/CheckSharp";
+import DoneIcon from "@material-ui/icons/Done";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 // component
 import "../App.css";
@@ -30,14 +34,55 @@ 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,
+      myTopics: null,
+      followingList: null,
+      loading: false
+    };
+  }
 
   handleSub = () => {
     if (this.state.following === true) {
@@ -48,7 +93,8 @@ class user extends Component {
         .then(res => {
           console.log("removed sub");
           this.setState({
-            following: false
+            following: false,
+            myTopics: []
           });
         })
         .catch(function(err) {
@@ -71,8 +117,27 @@ class user extends Component {
     }
   };
 
-  componentDidMount() {
+  handleAdd = newTopic => {
     axios
+      .post("/putNewTopic", {
+        handle: this.state.profile,
+        topic: newTopic
+      })
+      .then(() => {
+        let temp = this.state.myTopics;
+        temp.push(newTopic);
+        this.setState({
+          myTopics: temp
+        });
+      })
+      .catch(err => {
+        console.err(err);
+      });
+  };
+
+  componentDidMount() {
+    this.setState({ loading: true });
+    let otherUserPromise = axios
       .post("/getUserDetails", {
         handle: this.state.profile
       })
@@ -84,42 +149,78 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let userPromise = axios
       .get("/user")
       .then(res => {
+        let list = [];
+        let fol = false;
+        res.data.credentials.following.forEach(follow => {
+          // console.log(follow);
+          if (this.state.profile === follow.handle) {
+            fol = true;
+            list = follow.topics;
+          }
+        });
         this.setState({
-          following: res.data.credentials.following.includes(this.state.profile)
+          following: fol,
+          myTopics: list
         });
       })
       .catch(err => console.log(err));
+
+    let posts = axios
+      .post("/getOtherUsersPosts", {
+        handle: this.state.profile
+      })
+      .then(res => {
+        // console.log(res.data);
+        this.setState({
+          posts: res.data
+        });
+      })
+      .catch(err => console.log(err));
+
+    // Only add Admin posts if this is not the Admin account
+    let alertPromise;
+    if (this.state.profile !== "Admin") {
+      alertPromise = axios
+        .get("/getAlert")
+        .then(res => {
+          let temp = this.state.posts;
+          // console.log(res.data);
+          res.data.forEach(element => {
+            element ? temp.push(element) : console.err;
+          });
+          // temp.push(res.data[0]);
+          this.setState({
+            posts: temp
+          });
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    } else {
+      alertPromise = new Promise((resolve, reject) => {
+        resolve();
+      });
+    }
+
+    Promise.all([otherUserPromise, userPromise, posts, alertPromise])
+      .then(() => {
+        this.setState({ loading: false });
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
   }
 
   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 +231,118 @@ 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>
+    );
 
-    console.log(this.state.following);
+    // console.log(this.state.topics);
+    // console.log(this.state.myTopics);
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(
+        topic =>
+          this.state.myTopics ? (
+            this.state.myTopics.includes(topic) ? (
+              <MyChip
+                label={topic}
+                key={{ topic }.id}
+                onDelete
+                deleteIcon={<DoneIcon />}
+              />
+            ) : this.state.following ? (
+              <MyChip
+                label={topic}
+                key={{ topic }.id}
+                color="secondary"
+                clickable
+                onClick={key => this.handleAdd(topic)}
+              />
+            ) : (
+              <MyChip label={topic} key={{ topic }.id} color="secondary" />
+            )
+          ) : (
+            <p></p>
+          )
+        // topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
+      )
+    ) : (
+      <p> no topic yet</p>
+    );
 
-    return (
-      <Grid container spacing={24}>
+    let imageMarkup = this.state.imageUrl ? (
+      <img src={this.state.imageUrl} height="150" width="150" />
+    ) : (
+      <img src={noImage} height="150" width="150" />
+    );
+    //(this.state.posts);
+    let postMarkup = this.state.posts ? (
+      this.state.posts.map(post => (
+        <Card className={classes.card} key={post.postId} data-key={post.postId}>
+          <CardContent>
+            <Typography>
+              {this.state.imageUrl ? (
+                <img src={this.state.imageUrl} height="50" width="50" />
+              ) : (
+                <img src={noImage} height="50" width="50" />
+              )}
+            </Typography>
+            <Typography variant="h4">
+              <b>{post.userHandle}</b>
+            </Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              {this.formatDate(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.join(", ")}
+            </Typography>
+            <br />
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount}
+            </Typography>
+          </CardContent>
+        </Card>
+      ))
+    ) : (
+      <p>Posts</p>
+    );
+
+    return this.state.loading ? (
+      <CircularProgress
+        size={60}
+        style={{ marginTop: "300px" }}
+      ></CircularProgress>
+    ) : (
+      <Grid container spacing={10}>
         <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 +353,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));
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index d9256fe..8a80558 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,192 +1,349 @@
 /* eslint-disable */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import axios from 'axios';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import axios from "axios";
+//import '../App.css';
+// Material-UI
+import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles, styled } from "@material-ui/core/styles";
+import { Link } from "react-router-dom";
+import Card from "@material-ui/core/Card";
+import CardMedia from "@material-ui/core/CardMedia";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
-// Material UI and React Router
-import { Link } from 'react-router-dom';
-import { makeStyles, styled } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Card from '@material-ui/core/Card';
-import CardMedia from '@material-ui/core/CardMedia';
-import CardContent from '@material-ui/core/CardContent';
-import Chip from '@material-ui/core/Chip';
-import Button from '@material-ui/core/Button';
+import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
-import AddCircle from '@material-ui/icons/AddCircle';
-import TextField from '@material-ui/core/TextField';
+import AddCircle from "@material-ui/icons/AddCircle";
+import TextField from "@material-ui/core/TextField";
+import VerifiedIcon from "@material-ui/icons/CheckSharp";
+import Paper from "@material-ui/core/Paper";
+import GridList from "@material-ui/core/GridList";
+import GridListTile from "@material-ui/core/GridListTile";
+import GridListTileBar from "@material-ui/core/GridListTileBar";
+import Container from "@material-ui/core/Container";
 
 // component
-import '../App.css';
-import noImage from '../images/no-img.png';
-import Writing_Microblogs from '../Writing_Microblogs';
+import "../App.css";
+import noImage from "../images/no-img.png";
+import Writing_Microblogs from "../Writing_Microblogs";
 
 const MyChip = styled(Chip)({
   margin: 2,
-  color: 'primary'
+  color: "primary"
 });
 
-const MyCardContent = styled(CardContent)({
-  textAlign: "left"
-});
+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: null,
-    imageUrl: null,
-    topics: null,
-    newTopic: null
-  };
+  constructor() {
+    super();
+    this.state = {
+      profile: null,
+      imageUrl: null,
+      topics: null,
+      newTopic: "",
+      loading: false
+    };
+  }
 
-  handleDelete = (topic) => {
-    axios.post(`/deleteTopic`, {
+  handleDelete = topic => {
+    console.log(topic);
+    axios
+      .post(`/deleteTopic`, {
         unfollow: topic
       })
-      .then(function() {
-        location.reload();
+      .then(() => {
+        let tempTopics = this.state.topics;
+        tempTopics.forEach((oldTopic, index) => {
+          if (oldTopic === topic) {
+            tempTopics.splice(index, 1);
+          }
+        });
+        this.setState({
+          topics: tempTopics
+        });
       })
       .catch(function(err) {
         console.log(err);
       });
-  }
+  };
 
   handleAddCircle = () => {
-    axios.post('/putTopic', {
+    axios
+      .post("/putTopic", {
         following: this.state.newTopic
       })
-      .then(function () {
-        location.reload();
+      .then(() => {
+        let tempTopics = this.state.topics;
+        tempTopics.push(this.state.newTopic);
+        this.setState({
+          topics: tempTopics,
+          newTopic: ""
+        });
       })
-      .catch(function (err) {
+      .catch(function(err) {
         console.log(err);
       });
-  }
+  };
 
   handleChange(event) {
     this.setState({
       newTopic: event.target.value
-    })
+    });
   }
 
   componentDidMount() {
-    axios
+    this.setState({loading: true})
+    let userPromise = axios
       .get("/user")
       .then(res => {
         this.setState({
           profile: res.data.credentials.handle,
           imageUrl: res.data.credentials.imageUrl,
-          verified: res.data.credentials.verified ? res.data.credentials.verified : false,
+          verified: res.data.credentials.verified
+            ? res.data.credentials.verified
+            : false,
           topics: res.data.credentials.followedTopics
         });
       })
       .catch(err => console.log(err));
 
-      axios
-      .get("/getAllTopics")
+    let postsPromise = axios
+      .get("/getallPostsforUser")
       .then(res => {
+        // console.log(res.data);
         this.setState({
-          topics: res.data
-        })
+          posts: res.data
+        });
       })
       .catch(err => console.log(err));
 
-    axios
-      .get("/getallPostsforUser")
-      .then(res => {
-        console.log(res.data);
-        this.setState({
-          posts: res.data
+      Promise.all([userPromise, postsPromise])
+        .then(() => {
+          this.setState({loading: false});
         })
-      })
-      .catch(err => console.log(err));
+        .catch((error) => {
+          console.log(error)
+        })
+  }
+
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
   }
 
   render() {
-    dayjs.extend(relativeTime);
+    const { classes } = this.props;
     let authenticated = this.props.user.authenticated;
-    let classes = this.props;
-    let profileMarkup = this.state.profile ? (
-      <p>
-      <Typography variant='h5'>{this.state.profile}</Typography>
-      </p>) : (<p>loading username...</p>);
-    
-    let topicsMarkup = this.state.topics ? (
-      this.state.topics.map(topic => <MyChip 
-        label={{topic}.topic.topic}
-        key={{topic}.topic.topicId}
-        onDelete={ (topic) => this.handleDelete(topic)}/>)
-    ) : (<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 profileMarkup = this.state.profile ? (
+      <div>
+        <Typography variant="h5" className={classes.username}>
+          @{this.state.profile}{" "}
+          {this.state.verified ? (
+            <VerifiedIcon style={{ fill: "#1397D5" }} />
+          ) : null}
+        </Typography>
+      </div>
+    ) : (
+      <p className={classes.username}>loading username...</p>
+    );
+
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(
+        topic => (
+          <MyChip
+            label={topic}
+            key={topic}
+            onDelete={key => this.handleDelete(topic)}
+          />
+        ) // console.log({ topic }.topic.id)
+      )
+    ) : (
+      <p> loading topics...</p>
+    );
+
+    let imageMarkup = this.state.imageUrl ? (
+      <img
+        className={classes.profileImage}
+        src={this.state.imageUrl}
+        height="250"
+        width="250"
+      />
+    ) : (
+      <img
+        className={classes.profileImage}
+        src={noImage}
+        height="250"
+        width="250"
+      />
+    );
 
     let postMarkup = this.state.posts ? (
-      this.state.posts.map(post => 
-        <Card>
-          <MyCardContent>
+      this.state.posts.map(post => (
+        <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"/>)
-              }
+              {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"}>{dayjs(post.createdAt).fromNow()}</Typography>
+            <Typography variant="h6">
+              <b>{post.userHandle}</b>
+            </Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              {this.formatDate(post.createdAt) }
+            </Typography>
+
+            <br />
+            <Typography variant="body1">
+              <b>{post.microBlogTitle}</b>
+            </Typography>
+            <Typography variant="body2">{post.quoteBody}</Typography>
+
             <br />
-            <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
             <Typography variant="body2">{post.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics.join(", ")}
+            </Typography>
             <br />
-            <Typography variant="body2" color={"textSecondary"}> Likes {post.likeCount} &nbsp; Shares {post.commentCount} </Typography>
-          </MyCardContent>
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount}
+            </Typography>
+          </CardContent>
         </Card>
-      )
-    ) : (<p>loading posts...</p>);
+      ))
+    ) : (
+      <p>My Posts</p>
+    );
+
+    // FIX: This needs to check if user's profile page being displayed
+    // is the same as the user who is logged in
+    // Can't check for that right now, because this page is always
+    // showing the logged in users profile, instead of retreiving the
+    // profile based on the URL entered
+    let editButtonMarkup = true ? (
+      <Link to="/user/edit">
+        <Button className={classes.button} variant="outlined" color="primary">
+          Edit Profile
+        </Button>
+      </Link>
+    ) : null;
+
+    let verifyButtonMarkup = this.state.profile === "Admin" ?
+      <Link to="/verify">
+        <Button className={classes.button} variant="outlined" color="primary">
+          Verify Users
+        </Button>
+      </Link>
+    :
+      null
 
     return (
-      <Grid container spacing={24}>
-        <Grid item sm={4} xs={8}>
-          {imageMarkup}
-          {profileMarkup}
-          {topicsMarkup}
-          <TextField
-          id="newTopic"
-          label="new topic"
-          defaultValue=""
-          margin="normal"
-          variant="outlined"
-          value={this.state.newTopic}
-          onChange={(event) => this.handleChange(event)}
-          />
-          <AddCircle
-            color="primary"
-            clickable
-            onClick={this.handleAddCircle}
-          />
-          <br />
-          {authenticated && <Button component={ Link } to='/edit'>Edit Profile Info</Button>}
+      this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
+      <div>
+        {/* <Paper className={classes.paper}> */}
+        <Grid container direction="column">
+          <Grid item>
+            <Grid container>
+              <Grid item sm>
+                {editButtonMarkup}
+                {verifyButtonMarkup}
+              </Grid>
+              <Grid item sm>
+                {/* <Grid container direction="column"> */}
+                {/* <Grid item sm> */}
+                {imageMarkup}
+                {profileMarkup}
+                {/* </Grid> */}
+                {/* <Grid item sm> */}
+                {/* {postMarkup} */}
+                {/* </Grid> */}
+                {/* </Grid> */}
+              </Grid>
+              <Grid item sm>
+                <Container className={classes.topicsContainer} maxWidth="xs">
+                  {topicsMarkup}
+                </Container>
+                <TextField
+                  id="newTopic"
+                  label="new topic"
+                  // defaultValue=""
+                  margin="normal"
+                  variant="outlined"
+                  value={this.state.newTopic}
+                  onChange={event => this.handleChange(event)}
+                />
+                <AddCircle
+                  className={classes.addCircle}
+                  color="primary"
+                  // iconStyle={classes.addCircle}
+                  clickable="true"
+                  onClick={this.handleAddCircle}
+                  cursor="pointer"
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item>
+            <Grid container>
+              <Grid item sm />
+              <Grid item>{postMarkup}</Grid>
+              <Grid item sm />
+            </Grid>
+          </Grid>
         </Grid>
-        <Grid item sm={4} xs={8}>
-          {postMarkup}
-        </Grid>
-        <Grid item sm={4} xs={8}>
-          <Writing_Microblogs />
-        </Grid>
-      </Grid>
+      </div>
     );
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   user: state.user
-})
+});
 
 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));
diff --git a/twistter-frontend/src/pages/verify.js b/twistter-frontend/src/pages/verify.js
index e36a317..88a804e 100644
--- a/twistter-frontend/src/pages/verify.js
+++ b/twistter-frontend/src/pages/verify.js
@@ -89,7 +89,7 @@ export class verify extends Component {
 
   render() {
     const { classes } = this.props;
-    const { errors, loading } = this.state;
+    const { loading } = this.state;
 
     return (
       <Grid container className={classes.form}>
diff --git a/twistter-frontend/src/redux/actions/dataActions.js b/twistter-frontend/src/redux/actions/dataActions.js
index e69de29..b4bdf37 100644
--- a/twistter-frontend/src/redux/actions/dataActions.js
+++ b/twistter-frontend/src/redux/actions/dataActions.js
@@ -0,0 +1,147 @@
+import {
+    SET_DIRECT_MESSAGES, 
+    LOADING_UI, 
+    SET_ERRORS, 
+    CLEAR_ERRORS,
+    SET_LOADING_UI_2,
+    SET_LOADING_UI_3,
+    SET_LOADING_UI_4,
+    SET_NOT_LOADING_UI_2,
+    SET_NOT_LOADING_UI_3,
+    SET_NOT_LOADING_UI_4
+} from '../types';
+import axios from "axios";
+
+// TODO: Tidy up these functions. They shouldn't have all these promises in them.
+
+export const getDirectMessages = () => (dispatch) => {
+    dispatch({type: SET_LOADING_UI_2});
+    axios.get('/dms')
+        .then((res) => {
+            dispatch({
+                type: SET_DIRECT_MESSAGES,
+                payload: res.data.data
+            });
+            dispatch({type: SET_NOT_LOADING_UI_2});
+            dispatch({type: CLEAR_ERRORS});
+        })
+        .catch((err) => {
+            console.error(err);
+            dispatch({
+                type: SET_ERRORS,
+                payload: {
+                    errors: err.response.data.error
+                }
+            });
+        })
+}
+
+export const getNewDirectMessages = () => (dispatch) => {
+    return new Promise((resolve, reject) => {
+        axios.get('/dms')
+            .then((res) => {
+                dispatch({
+                    type: SET_DIRECT_MESSAGES,
+                    payload: res.data.data
+                });
+                dispatch({type: SET_NOT_LOADING_UI_2});
+                dispatch({type: CLEAR_ERRORS});
+                resolve();
+            })
+            .catch((err) => {
+                console.log(err)
+                reject(err);
+            })
+    })
+}
+
+export const reloadDirectMessageChannels = () => (dispatch) => {
+    return new Promise((resolve, reject) => {
+        axios.get('/dms')
+            .then((res) => {
+                dispatch({
+                    type: SET_DIRECT_MESSAGES,
+                    payload: res.data.data
+                });
+                dispatch({type: SET_NOT_LOADING_UI_3});
+                dispatch({type: CLEAR_ERRORS});
+                resolve();
+            })
+            .catch((err) => {
+                console.log(err)
+                reject(err);
+            })
+    })
+    
+}
+
+export const createNewDirectMessage = (username) => (dispatch) => {
+    return new Promise((resolve, reject) => {
+        dispatch({type: SET_LOADING_UI_3});
+        const data = {
+            user: username
+        }
+        // console.log(username);
+
+        axios.post('/dms/new', data)
+            .then((res) => {
+                // console.log(res.data);
+                if (res.data.err) {
+                    dispatch({
+                        type: SET_ERRORS,
+                        payload: {
+                            createDirectMessage: res.data.err
+                        }
+                    });
+                    dispatch({type: SET_NOT_LOADING_UI_3});
+                } else {
+                    // dispatch(getNewDirectMessages());
+                    // dispatch({type: SET_NOT_LOADING_UI_3});
+                }
+                resolve();
+            })
+            .catch((err) => {
+                dispatch({
+                    type: SET_ERRORS,
+                    payload: {
+                        createDirectMessage: err.response.data.error
+                    }
+                });
+                dispatch({type: SET_NOT_LOADING_UI_3});
+                console.log(err.response.data);
+                reject(err);
+            })
+    });
+}
+
+export const sendDirectMessage = (user, message) => (dispatch) => {
+    dispatch({type: SET_LOADING_UI_4});
+    const data = {
+        message,
+        user
+    };
+
+    axios.post('/dms/send', data)
+        .then((res) => {
+            // console.log(res);
+            return axios.get('/dms')
+        })
+        .then((res) => {
+            dispatch({
+                type: SET_DIRECT_MESSAGES,
+                payload: res.data.data
+            });
+            dispatch({type: SET_NOT_LOADING_UI_4});
+            dispatch({type: CLEAR_ERRORS});
+        })
+        .catch((err) => {
+            console.log(err);
+            dispatch({
+                type: SET_ERRORS,
+                payload: {
+                    sendDirectMessage: err.response.data
+                }
+            })
+            dispatch({type: SET_NOT_LOADING_UI_4});
+        })
+}
\ No newline at end of file
diff --git a/twistter-frontend/src/redux/actions/userActions.js b/twistter-frontend/src/redux/actions/userActions.js
index 5993804..7b43e3f 100644
--- a/twistter-frontend/src/redux/actions/userActions.js
+++ b/twistter-frontend/src/redux/actions/userActions.js
@@ -1,19 +1,42 @@
-import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
+
+import {
+  SET_USER, 
+  SET_ERRORS, 
+  CLEAR_ERRORS, 
+  LOADING_UI, 
+  // SET_AUTHENTICATED, 
+  SET_UNAUTHENTICATED,
+  LIKE_POST, 
+  UNLIKE_POST, 
+  SET_LIKES,
+  LOADING_USER
+} from '../types';
 import axios from 'axios';
 
+// Saves Authorization in browser local storage and adds it as a header to axios
+const setAuthorizationHeader = (token) => {
+  const FBIdToken = `Bearer ${token}`;
+  localStorage.setItem('FBIdToken', FBIdToken);
+  axios.defaults.headers.common['Authorization'] = FBIdToken;
+}
 
+// Gets Database info for the logged in user and sets it in Redux
 export const getUserData = () => (dispatch) => {
+  dispatch({ type: LOADING_USER });
     axios.get('/user')
         .then((res) => {
             dispatch({
                 type: SET_USER,
                 payload: res.data,
-            })
+            });
+            dispatch({type: CLEAR_ERRORS});
         })
         .catch((err) => console.error(err));
 }
 
+// Sends login data to firebase and sets the user data in Redux
 export const loginUser = (loginData, history) => (dispatch) => {
+    dispatch({type: CLEAR_ERRORS});
     dispatch({ type: LOADING_UI });
     axios
       .post("/login", loginData)
@@ -21,7 +44,7 @@ export const loginUser = (loginData, history) => (dispatch) => {
         // Save the login token
         setAuthorizationHeader(res.data.token);
         dispatch(getUserData());
-        dispatch({ type: CLEAR_ERRORS })
+        // dispatch({ type: CLEAR_ERRORS })
         // Redirects to home page
         history.push('/home');
       })
@@ -33,7 +56,9 @@ export const loginUser = (loginData, history) => (dispatch) => {
       });
 };
 
+// Sends signup data to firebase and sets the user data in Redux
 export const signupUser = (newUserData, history) => (dispatch) => {
+    dispatch({type: CLEAR_ERRORS});
     dispatch({ type: LOADING_UI });
     axios
       .post("/signup", newUserData)
@@ -43,7 +68,7 @@ export const signupUser = (newUserData, history) => (dispatch) => {
         // Save the signup token
         setAuthorizationHeader(res.data.token);
         dispatch(getUserData());
-        dispatch({ type: CLEAR_ERRORS })
+        // dispatch({ type: CLEAR_ERRORS })
         // Redirects to home page
         history.push('/home');
       })
@@ -55,12 +80,14 @@ export const signupUser = (newUserData, history) => (dispatch) => {
       });
 };
 
+// Deletes the Authorization header and clears all user data from Redux
 export const logoutUser = () => (dispatch) => {
     localStorage.removeItem('FBIdToken');
     delete axios.defaults.headers.common['Authorization'];
     dispatch({ type: SET_UNAUTHENTICATED });
 }
 
+
 export const deleteUser = () => (dispatch) => {
   axios
     .delete("/delete")
@@ -81,8 +108,65 @@ export const deleteUser = () => (dispatch) => {
   dispatch({ type: SET_UNAUTHENTICATED });
 }
 
-const setAuthorizationHeader = (token) => {
-    const FBIdToken = `Bearer ${token}`;
-    localStorage.setItem('FBIdToken', FBIdToken);
-    axios.defaults.headers.common['Authorization'] = FBIdToken;
-}
\ No newline at end of file
+export const getLikes = () => (dispatch) => {
+  axios.get('/likes')
+    .then((res) => {
+      dispatch({
+        type: SET_LIKES,
+        payload: res.data
+      })
+    })
+}
+
+export const likePost = (postId, postArray) => (dispatch) => {
+  postArray.push(postId);
+      dispatch({
+        type: LIKE_POST,
+        payload: {
+          likes: postArray
+        }
+    })
+  axios.get(`/like/${postId}`)
+    .then((res) => {
+      getLikes();
+    })
+  
+  
+}
+
+export const unlikePost = (postId, postArray) => (dispatch) => {
+  let i;
+  for (i = 0; i < postArray.length; i++) {
+    if (postArray[i] === postId) {
+      postArray.splice(i, 1);
+      break;
+    }
+  }
+
+  dispatch({
+    type: UNLIKE_POST,
+    payload:  {
+      likes: postArray
+    }
+  })
+
+  axios.get(`/unlike/${postId}`)
+    .then((res) => {
+      getLikes();
+    })
+
+}
+
+// Sends an image data form to firebase to be uploaded to the user profile
+export const uploadImage = (formData) => (dispatch) => {
+  dispatch({ type: LOADING_UI });
+  axios.post('/user/image', formData)
+    .then(() => {
+      dispatch(getUserData());
+      // dispatch({ type: CLEAR_ERRORS });
+    })
+    .catch(err => {
+      console.log(err);
+    })
+}
+
diff --git a/twistter-frontend/src/redux/reducers/dataReducer.js b/twistter-frontend/src/redux/reducers/dataReducer.js
index e69de29..5302d64 100644
--- a/twistter-frontend/src/redux/reducers/dataReducer.js
+++ b/twistter-frontend/src/redux/reducers/dataReducer.js
@@ -0,0 +1,17 @@
+import {SET_DIRECT_MESSAGES, SET_USERNAME_VALID, SET_USERNAME_INVALID} from '../types';
+
+const initialState = {
+    directMessages: null,
+};
+
+export default function(state = initialState, action) {
+    switch(action.type) {
+        case SET_DIRECT_MESSAGES:
+            return {
+                ...state,
+                directMessages: action.payload
+            };
+        default:
+            return state;
+    }
+}
\ No newline at end of file
diff --git a/twistter-frontend/src/redux/reducers/uiReducer.js b/twistter-frontend/src/redux/reducers/uiReducer.js
index 65e781d..3188cc1 100644
--- a/twistter-frontend/src/redux/reducers/uiReducer.js
+++ b/twistter-frontend/src/redux/reducers/uiReducer.js
@@ -1,7 +1,20 @@
-import { SET_ERRORS, CLEAR_ERRORS, LOADING_UI } from '../types';
+import { 
+    SET_ERRORS, 
+    CLEAR_ERRORS, 
+    LOADING_UI, 
+    SET_LOADING_UI_2, 
+    SET_LOADING_UI_3, 
+    SET_LOADING_UI_4,
+    SET_NOT_LOADING_UI_2,
+    SET_NOT_LOADING_UI_3,
+    SET_NOT_LOADING_UI_4
+ } from '../types';
 
 const initialState = {
     loading: false,
+    loading2: false,
+    loading3: false,
+    loading4: false,
     errors: null
 };
 
@@ -23,7 +36,37 @@ export default function(state = initialState, action) {
             return {
                 ...state,
                 loading: true
-            }
+            };
+        case SET_LOADING_UI_2:
+            return {
+                ...state,
+                loading2: true
+            };
+        case SET_LOADING_UI_3:
+            return {
+                ...state,
+                loading3: true
+            };
+        case SET_LOADING_UI_4:
+            return {
+                ...state,
+                loading4: true
+            };
+        case SET_NOT_LOADING_UI_2:
+            return {
+                ...state,
+                loading2: false
+            };
+        case SET_NOT_LOADING_UI_3:
+            return {
+                ...state,
+                loading3: false
+            };
+        case SET_NOT_LOADING_UI_4:
+            return {
+                ...state,
+                loading4: false
+            };
         default:
             return state;
     }
diff --git a/twistter-frontend/src/redux/reducers/userReducer.js b/twistter-frontend/src/redux/reducers/userReducer.js
index 7a29e90..74f8aaf 100644
--- a/twistter-frontend/src/redux/reducers/userReducer.js
+++ b/twistter-frontend/src/redux/reducers/userReducer.js
@@ -1,4 +1,17 @@
-import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
+
+import {
+    SET_USER,
+    // SET_ERRORS, 
+    // CLEAR_ERRORS, 
+    // LOADING_UI, 
+    SET_AUTHENTICATED, 
+    SET_UNAUTHENTICATED,
+    LOADING_USER,
+    LIKE_POST, 
+    UNLIKE_POST, 
+    SET_LIKES
+} from '../types';
+
 
 const initialState = {
     authenticated: false,
@@ -19,9 +32,31 @@ export default function(state = initialState, action) {
             return initialState;
         case SET_USER:
             return {
+                ...state,
                 authenticated: true,
+                loading: false,
                 ...action.payload,
             };
+        case LIKE_POST:
+            return {
+                ...state,
+                ...action.payload
+            }
+        case UNLIKE_POST:
+            return {
+                ...state,
+                ...action.payload
+            }
+        case SET_LIKES:
+            return {
+                ...state,
+                ...action.payload
+            }
+        case LOADING_USER:
+            return {
+                ...state,
+                loading: true
+            }
         default:
             return state;
     }
diff --git a/twistter-frontend/src/redux/types.js b/twistter-frontend/src/redux/types.js
index 6f16afc..c8755b7 100644
--- a/twistter-frontend/src/redux/types.js
+++ b/twistter-frontend/src/redux/types.js
@@ -3,10 +3,22 @@ export const SET_AUTHENTICATED = 'SET_AUTHENTICATED';
 export const SET_UNAUTHENTICATED = 'SET_UNAUTHENTICATED';
 export const SET_USER = 'SET_USER';
 export const LOADING_USER = 'LOADING_USER';
+export const LIKE_POST = 'LIKE_POST';
+export const UNLIKE_POST = 'UNLIKE_POST';
+export const SET_LIKES = 'SET_LIKES';
 
 // UI reducer types
 export const SET_ERRORS = 'SET_ERRORS';
 export const LOADING_UI = 'LOADING_UI';
+export const SET_LOADING_UI_2 = 'SET_LOADING_UI_2';
+export const SET_LOADING_UI_3 = 'SET_LOADING_UI_3';
+export const SET_LOADING_UI_4 = 'SET_LOADING_UI_4';
+export const SET_NOT_LOADING_UI_2 = 'SET_NOT_LOADING_UI_2';
+export const SET_NOT_LOADING_UI_3 = 'SET_NOT_LOADING_UI_3';
+export const SET_NOT_LOADING_UI_4 = 'SET_NOT_LOADING_UI_4';
 export const CLEAR_ERRORS = 'CLEAR_ERRORS';
 
-// Data reducer types
\ No newline at end of file
+// Data reducer types
+export const SET_DIRECT_MESSAGES = 'SET_DIRECT_MESSAGES';
+export const SET_USERNAME_VALID = 'SET_USERNAME_VALID';
+export const SET_USERNAME_INVALID = 'SET_USERNAME_INVALID';
\ No newline at end of file