Merge ee2a081b41 into b9cbd610a9

Bumps [axios](https://github.com/axios/axios) from 0.19.0 to 0.21.1.
- [Release notes](https://github.com/axios/axios/releases)
- [Changelog](https://github.com/axios/axios/blob/v0.21.1/CHANGELOG.md)
- [Commits](https://github.com/axios/axios/compare/v0.19.0...v0.21.1)

Signed-off-by: dependabot[bot] <support@github.com>

README.md

@@ -1,2 +1,2 @@
 # CS307-Team24
-CS307 Team 24 Twistter website.
+CS307 Team 24 Twistter website

functions/handlers/post.js

@@ -1,7 +1,6 @@
 /* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
-const admin = require('firebase-admin');
-const { db } = require('../util/admin');
+const { admin, db } = require("../util/admin");
 
 
 exports.putPost = (req, res) => {
@@ -14,232 +13,531 @@ exports.putPost = (req, res) => {
     createdAt: new Date().toISOString(),
     likeCount: 0,
     commentCount: 0,
-        microBlogTopics: req.body.microBlogTopics
+    microBlogTopics: req.body.microBlogTopics,
+    quoteBody: null
   };
 
-    admin.firestore().collection('posts').add(newPost)
-    .then((doc) => {
-        doc.update({postId: doc.id})
+  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) => {
+    .catch(err => {
       console.error(err);
-        return res.status(500).json({ error: 'something went wrong'});
+      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.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) {
         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.");
     
+    .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);
+      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.get()
-    .then(function(allPosts) {
   let posts = [];
-        allPosts.forEach(function(doc) {
+  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());
+        });
+        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() {
-    return res.status(200).json("Successfully retrieved every post from database.");
+      return res
+        .status(200)
+        .json("Successfully retrieved all user's posts from database.");
     })
     .catch(function(err) {
-    return res.status(500).json("Failed to retrieve 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('postId', '==', req.params.postId).limit(1);
+  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) => {
+  postDoc
+    .get()
+    .then(doc => {
       if (doc.exists) {
         quoteData = doc.data();
         return quoteDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
+      } else {
+        return res.status(404).json({ error: "Post not found" });
       }
     })
-    .then((data) => {
+    .then(data => {
       if (data.empty) {
-            return admin.firestore().collection('quote').add({
-                postId : req.params.postId,
+        return admin
+          .firestore()
+          .collection("quote")
+          .add({
+            quoteId: req.params.postId,
             userHandle: req.user.handle,
-                quotePost : req.body.quotePost
+            quoteBody: req.body.quoteBody
           })
           .then(() => {
-               return admin.firestore().collection('posts').add({
-                   quoteData,
-                   quoteUser : req.user.handle,
-                   quotePost : req.body.quotePost,
-                   quotedAt : new Date().toISOString()
+            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." });
+      }
+    })
 
-               })
-            })
-        }
-        else {
-            return res.status(400).json({ error: 'Post has already been quoted.' });
-          }
-    })
-    .catch((err) => {
+    .catch(err => {
       return res.status(500).json({ error: err });
-
-    })
-
-}
+    });
+};
 
 exports.quoteWithoutPost = (req, res) => {
   let quoteData;
-    const quoteDoc = admin.firestore().collection('quote').
-    where('userHandle', '==', req.user.handle).
-    where('postId', '==', req.params.postId).limit(1);
+  const 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) => {
+  postDoc
+    .get()
+    .then(doc => {
       if (doc.exists) {
         quoteData = doc.data();
         return quoteDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
+      } else {
+        return res.status(404).json({ error: "Post not found" });
       }
     })
-    .then((data) => {
+    .then(data => {
       if (data.empty) {
-            return admin.firestore().collection('quote').add({
-                postId : req.params.postId,
+        return admin
+          .firestore()
+          .collection("quote")
+          .add({
+            quoteId: req.params.postId,
             userHandle: req.user.handle,
+            quoteBody: null
           })
           .then(() => {
-               return admin.firestore().collection('posts').add({
-                   quoteData,
-                   quoteUser : req.user.handle,
-                   quotedAt : new Date().toISOString()
-
-               })
-            })
-        }
-        else {
-        return res.status(400).json({ error: 'Post has already been quoted.' });
+            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'});
+    .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) => {
-    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();
+  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 = [];
       }
-        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
 
+      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++;
-                return postDoc.update({likeCount : postData.likeCount})
+      likedPostDoc = postData;
+      return postDoc.ref.update({ likeCount: postData.likeCount });
     })
     .then(() => {
-                return res.status(200).json(postData);
+      return res.status(201).json(likedPostDoc);
     })
-        }
-    })
-    .catch((err) => {
-        return res.status(500).json({error: 'Something is wrong'});
-    })
-
-}
-
-exports.unlikePost = (req, res) => {
-
-    let postData;
-    const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
-    .where('postId', '==', req.params.postId).limit(1);
-
-    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.log(err);
+      return res.status(500).json({ error: err });
     });
 
-    })
-    .catch((err) => {
-        console.error(err);
-        return res.status(500).json({error: 'Something is wrong'});
-    })
+  // 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 = [];
       }
 
-exports.getFilteredPosts = (req, res) => {
-    admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
+      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", "==");
 };

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()

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,22 +103,44 @@ app.post("/removeSub", fbAuth, removeSub);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost, quoteWithPost, quoteWithoutPost} = 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);
 
+//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                                                *
@@ -94,7 +149,8 @@ const {
   putTopic,
   getAllTopics,
   deleteTopic,
-  getUserTopics
+  getUserTopics,
+  putNewTopic
 } = require("./handlers/topic");
 
 // add topic to database
@@ -109,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);

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",

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;
     

twistter-frontend/package-lock.json

@@ -437,34 +437,17 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
     "axios": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
-      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
       "requires": {
-        "follow-redirects": "1.5.10",
-        "is-buffer": "^2.0.2"
+        "follow-redirects": "^1.10.0"
       },
       "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
         "follow-redirects": {
-          "version": "1.5.10",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-          "requires": {
-            "debug": "=3.1.0"
-          }
-        },
-        "is-buffer": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
+          "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
         }
       }
     },
@@ -2417,6 +2400,11 @@
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
       "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs="
     },
+    "dayjs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.2.tgz",
+      "integrity": "sha512-h/YtykNNTR8Qgtd1Fxl5J1/SFP1b7SOk/M1P+Re+bCdFMV0IMkuKNgHPN7rlvvuhfw24w0LX78iYKt4YmePJNQ=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -3092,6 +3080,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",
@@ -3957,6 +3950,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",
@@ -7167,6 +7165,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",
@@ -9761,6 +9775,11 @@
       "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
       "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE="
     },
+    "underscore": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.0.tgz",
+      "integrity": "sha512-21rQzss/XPMjolTiIezSu3JAjgagXKROtNrYFEOWK109qY1Uv2tVjPTZ1ci2HgvQDA16gHYSthQIJfB+XId/rQ=="
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -9991,6 +10010,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",

twistter-frontend/package.json

@@ -7,20 +7,24 @@
     "@material-ui/icons": "^4.5.1",
     "@material-ui/styles": "^4.5.0",
     "@material-ui/system": "^4.5.0",
-    "axios": "^0.19.0",
+    "axios": "^0.21.1",
     "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": {

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} />

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');
 
 
@@ -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>

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"
+      <div className={classes.container}>
+        <form noValidate className={classes.form}>
+          <TextField
+            id="title"
+            name="title"
+            label="Title"
+            className={classes.textField}
             value={this.state.title}
-              required
+            variant="outlined"
             onChange={this.handleChange}
-              cols={30}
-              rows={1}
+            fullWidth
+            autoComplete='off'
           />
-          </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 style={{ width: "200px", marginLeft: "50px" }}>
-          <form onSubmit={this.handleSubmit}>
-            <textarea
+          <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}
-              required
-              maxLength="250"
-              placeholder="Write Microblog here..."
-              onChange={e => {
+            helperText={`${this.state.characterCount} characters left`}
+            multiline
+            rows="9"
+            variant="outlined"
+            inputProps={{
+              maxLength: 250
+            }}
+            onChange={(e) => {
               this.handleChangeforPost(e);
               this.handleChangeforCharacterCount(e);
             }}
-              cols={40}
-              rows={20}
+            fullWidth
+            autoComplete='off'
           />
-            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-              <p2>Characters Left: {this.state.characterCount}</p2>
-            </div>
-            <div style={{ marginRight: "-100px" }}>
-              <button onClick>Share Post</button>
-            </div>
+          <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>
-      </div>
     );
   }
 }
 
-export default Writing_Microblogs;
+export default withStyles(styles)(Writing_Microblogs);

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>
           )}

twistter-frontend/src/pages/Home.js

@@ -1,78 +1,229 @@
 /* eslint-disable */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import axios from 'axios';
+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 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 ReactModal from 'react-modal';
+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";
 
+// Redux
+import { likePost, unlikePost, getLikes } from "../redux/actions/userActions";
+
+const styles = {
+  card: {
+    marginBottom: 5
+  }
+};
 
 class Home extends Component {
   state = {
-    
+    likes: [],
+    loading: false,
+    following: null,
+    topics: null
   };
 
-
   componentDidMount() {
-    axios
-      .get("/getallPosts")
+    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
-        })
-        this.setState({posts: (this.state.posts).sort((a,b) =>
-          -a.createdAt.localeCompare(b.createdAt))
-        })
+          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() {
+    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>
+    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"/>)
+                  } */}
                   {
-                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                    post.profileImage ? (<img src={post.profileImage} height="50" width="50" />) : 
                                         (<img src={noImage} height="50" width="50"/>)
                   }
                 </Typography>
-            <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt.substring(0,10) + 
-                                                          " " + post.createdAt.substring(11,19)}</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>        
+                <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics.join(", ")}</Typography>        
                 <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
-            <Like microBlog = {post.postId}></Like>
+                {!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>My Posts</p>);
+    )
+    ) : (
+      <p>Loading post...</p>
+    );
 
-    return (
-      authenticated ?
-      <Grid container spacing={16}>
+    return authenticated ? (
+      this.state.loading ? (
+        <CircularProgress
+          size={60}
+          style={{ marginTop: "300px" }}
+        ></CircularProgress>
+      ) : (
+        <Grid container>
           <Grid item sm={4} xs={8}>
             <Writing_Microblogs />
           </Grid>
@@ -80,21 +231,33 @@ class Home extends Component {
             {postMarkup}
           </Grid>
         </Grid>
-      :
+      )
+    ) : loading ? (
+      <CircularProgress
+        size={60}
+        style={{ marginTop: "300px" }}
+      ></CircularProgress>
+    ) : (
       <div>
         <div>
           <img src={logo} className="app-logo" alt="logo" />
-          <br/><br/>
+          <br />
+          <br />
           <b>Welcome to Twistter!</b>
-          <br/><br/>
+          <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/>
+          <br />
+          <br />
           <form action="./signup">
             <button className="authButtons signup">Sign up</button>
           </form>
@@ -108,15 +271,6 @@ class Home extends Component {
   }
 }
 
-
-const mapStateToProps = (state) => ({
-  user: state.user
-})
-
-Home.propTypes = {
-  user: PropTypes.object.isRequired
-}
-
 class Quote extends Component {
   constructor(props) {
     super(props);
@@ -124,7 +278,7 @@ class Quote extends Component {
       characterCount: 250,
       showModal: false,
       value: ""
-    }
+    };
 
     this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
     this.handleOpenModal = this.handleOpenModal.bind(this);
@@ -133,16 +287,18 @@ class Quote extends Component {
   }
 
   handleSubmitWithoutPost(event) {
+    const post = {
+      userImage: "bing-url"
+    };
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
-    axios.post(`/quoteWithoutPost/${this.props.microblog}`, headers)
-    .then((res) => {
-      
+    axios
+      .post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
+      .then(res => {
         console.log(res.data);
       })
       .catch(err => {
-    
         console.error(err);
       });
     event.preventDefault();
@@ -153,7 +309,7 @@ class Quote extends Component {
   }
 
   handleCloseModal() {
-    this.setState({ showModal: false });
+    this.setState({ showModal: false, characterCount: 250, value: "" });
   }
 
   handleChangeforPost(event) {
@@ -168,18 +324,18 @@ class Quote extends Component {
 
   handleSubmit(event) {
     const quotedPost = {
-      quotePost: this.state.value,
+      quoteBody: this.state.value,
+      userImage: "bing-url"
     };
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
-    axios.post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
-    .then((res) => {
-      
+    axios
+      .post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
+      .then(res => {
         console.log(res.data);
       })
       .catch(err => {
-    
         console.error(err);
       });
     event.preventDefault();
@@ -189,14 +345,29 @@ class Quote extends Component {
   render() {
     return (
       <div>
-        <button onClick={this.handleOpenModal}>Quote with Post</button>
+        <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"}}}
+          style={{
+            content: {
+              height: "50%",
+              width: "25%",
+              marginTop: "auto",
+              marginLeft: "auto",
+              marginRight: "auto",
+              marginBottom: "auto"
+            }
+          }}
         >
           <div style={{ width: "200px", marginLeft: "50px" }}>
-          <form>
-            <textarea
+            <form style={{ width: "350px" }}>
+              {/* <textarea
               value={this.state.value}
               required
               maxLength="250"
@@ -208,76 +379,173 @@ class Quote extends Component {
               }}
               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 onClick={this.handleSubmit}>Share Quoted Post</button>
-        
-          <button onClick={this.handleCloseModal}>Cancel</button>
+              <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 onClick={this.handleSubmitWithoutPost}>Quote without Post</button>
-
+        <Button
+          variant="outlined"
+          color="primary"
+          onClick={this.handleSubmitWithoutPost}
+        >
+          Quote without Post
+        </Button>
       </div>
-    )
+    );
   }
 }
 
 class Like extends Component {
-
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
-      like: false
-    }
+      num: this.props.count
+    };
 
     this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick(){
+  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)
-          {
+    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);
+        });
+    }
+  }
 
-            axios.get(`/like/${this.props.microBlog}`)
+  /* componentDidMount() {
+    axios.get(`/checkforLikePost/${this.props.microBlog}`)
     .then((res) => {
+      this.setState({
+        like2: res.data
+      })
       console.log(res.data);
     })
     .catch((err) => {
-              console.log(err);
+      console.log(err)
     })
-          }
-          else
+    if (this.state.like2 === this.state.like)
     {
-          axios.get(`/unlike/${this.props.microBlog}`)
-                .then((res) => {
-                    console.log(res.data);
-                })
-                .catch((err) => {
-                  console.log(err);
+      this.setState({
+        like: false
       })
     }
+  }  */
 
-  }
   render() {
-      const label = this.state.like ? 'Unlike' : 'Like'
+    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
+});
 
-export default connect(mapStateToProps)(Home);
+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));

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"

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);
-
+  componentDidMount() {
+    this.setState({loading: true});
+    axios.get("/getAllHandles")
+    .then((res) => {
       this.setState({
-          searchResult: res.data
-        });
+        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,35 +79,47 @@ export class Search extends Component {
   }
 
   render() {
-    let resultMarkup = this.state.searchResult ? (
-      <Router>
+    let resultMarkup = this.state.searchResult && this.state.searchResult !== "No Results" ? (
+      this.state.searchResult.map(res => 
+        <Router key={res}>
           <div>
-          <a href={`/user/${this.state.searchResult}`}>
-            {this.state.searchResult}
+            <a href={`/user/${res}`}>
+              {res}
             </a>
           </div>
         </Router>
-    ) : (
-      //   console.log(this.state.searchResult)
-      <p> No result </p>
-    );
+      )
+    ) 
+      : 
+    this.state.searchResult === "No Results" ?
+      (
+       <p> No results </p>
+      )
+        :
+      (
+        null
+      )
 
     return (
+
+      this.state.loading 
+      ? 
+        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> 
+      : 
         <Grid>
           <Grid>
             <TextField
               id="standard-required"
-            label="Search"
-            defaultValue="username"
+              label="Username"
               margin="normal"
-            value={this.state.searchPhase}
-            onChange={event => this.handleInput(event)}
+              // value={this.state.searchPhrase}
+              onChange={this.handleChange}
             />
           </Grid>
           <Grid>
-          <Button color="primary" onClick={this.handleSearch}>
+            {/* <Button color="primary" onClick={this.handleSearch}>
               Search
-          </Button>
+            </Button> */}
           </Grid>
           <Grid>{resultMarkup}</Grid>
         </Grid>

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>

twistter-frontend/src/pages/directMessages.js

@@ -0,0 +1,677 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import _ from "underscore";
+
+// Material UI
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Card from '@material-ui/core/Card';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Fab from '@material-ui/core/Fab';
+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';
+
+// Material UI Icons
+import AddCircleIcon from '@material-ui/icons/AddBox';
+import CheckMarkIcon from '@material-ui/icons/Check';
+import ErrorIcon from '@material-ui/icons/ErrorOutline';
+import SendIcon from '@material-ui/icons/Send';
+
+// Redux
+import { connect } from 'react-redux';
+import { 
+    getDirectMessages, 
+    createNewDirectMessage, 
+    getNewDirectMessages, 
+    reloadDirectMessageChannels, 
+    sendDirectMessage
+} from '../redux/actions/dataActions';
+
+const styles = {
+	pageContainer: {
+		minHeight: 'calc(100vh - 50px - 60px)'
+	},
+	sidePadding: {
+		maxWidth: 350
+	},
+	dmList: {
+		width: 300,
+        marginLeft: 15
+	},
+	dmItemsUpper: {
+        marginBottom: 1,
+        // height: 'calc(100vh - 50px - 142px)',
+        minHeight: 100,
+        maxHeight: 'calc(100vh - 50px - 142px)',
+        overflow: "auto"
+    },
+    dmItemsLower: {
+
+    },
+	dmItemUsernameSelected: {
+		fontSize: 20,
+		color: 'white'
+	},
+	dmItemUsernameUnselected: {
+		fontSize: 20,
+		color: '#1da1f2'
+	},
+	dmItemTimeSelected: {
+		color: '#D6D6D6',
+		fontSize: 12,
+		float: 'right',
+		marginRight: 5,
+		marginTop: 5
+	},
+	dmItemTimeUnselected: {
+		color: 'black',
+		fontSize: 12,
+		float: 'right',
+		marginRight: 5,
+		marginTop: 5
+	},
+	dmRecentMessageSelected: {
+		wordBreak: "break-all",
+		color: '#D6D6D6'
+	},
+	dmRecentMessageUnselected: {
+		wordBreak: "break-all",
+		color: 'black'
+	},
+	dmRecentMessageDisabled: {
+		wordBreak: "break-all",
+		color: 'red'
+	},
+	dmListItemContainer: {
+		height: 100
+	},
+	dmListLayoutContainer: {
+		height: "100%"
+	},
+	dmListRecentMessage: {
+		marginLeft: 10,
+		marginRight: 10
+	},
+	dmListTextLayout: {
+		height: 30
+	},
+	dmCardUnselected: {
+		fontSize: 20,
+		backgroundColor: '#FFFFFF',
+		width: 300
+	},
+	dmCardSelected: {
+		fontSize: 20,
+		backgroundColor: '#1da1f2',
+		width: 300
+  },
+	messagesGrid: {
+		// // margin: "auto"
+		// height: "auto",
+		// width: "auto"
+	},
+	messagesBox: {
+		width: 450
+	},
+	messagesContainer: {
+		height: 'calc(100vh - 50px - 110px)',
+		overflow: 'auto',
+		width: 450,
+		marginLeft: 2,
+		marginRight: 17
+	},
+	fromMessage: {
+		minWidth: 150,
+		maxWidth: 350,
+		minHeight: 40,
+		marginRight: 2,
+		marginTop: 2,
+		marginBottom: 10,
+		backgroundColor: '#008394',
+		color: '#FFFFFF',
+		float: 'right'
+	},
+	toMessage: {
+		minWidth: 150,
+		maxWidth: 350,
+		minHeight: 40,
+		marginLeft: 15,
+		marginTop: 2,
+		marginBottom: 10,
+		backgroundColor: '#008394',
+		color: '#FFFFFF',
+		float: 'left'
+	},
+	messageContent: {
+		// maxWidth: 330,
+		// width: 330,
+		wordBreak: "break-all",
+		textAlign: 'left',
+		marginLeft: 5,
+		marginRight: 5
+	},
+	messageTime: {
+		color: '#D6D6D6',
+		textAlign: 'left',
+		marginLeft: 5,
+		fontSize: 12
+	},
+	writeMessage: {
+		backgroundColor: '#FFFFFF',
+		boxShadow: '0px 0px 5px 0px grey',
+		width: 450
+	},
+	messageTextField: {
+		width: 388
+	},
+	messageButton: {
+		backgroundColor: '#1da1f2',
+		marginTop: 8,
+		marginLeft: 2
+	},
+	loadingUsernameChecks: {
+		height: 55,
+		width: 55,
+		marginLeft: 5
+	},
+	errorIcon: {
+		height: 55,
+		width: 55,
+		marginLeft: 5,
+		color: '#ff3d00'
+	},
+	checkMarkIcon: {
+		height: 55,
+		width: 55,
+		marginLeft: 5,
+		color: '#1da1f2'
+    },
+    createButton: {
+        // textAlign: "center",
+        // display: "block",
+        marginLeft: 96,
+        marginRight: 96,
+        position: "relative"
+    }
+};
+
+export class directMessages extends Component {
+	constructor() {
+		super();
+		this.state = {
+			hasChannelSelected: false,
+			selectedChannel: null,
+			dmData: null,
+			anchorEl: null,
+			createDMUsername: '',
+            usernameValid: false,
+            // message: '',
+            drafts: {},
+            errors: null
+		};
+	}
+
+	componentDidUpdate() {
+		if (this.state.hasChannelSelected) {
+			document.getElementById('messagesContainer').scrollTop = document.getElementById(
+				'messagesContainer'
+			).scrollHeight;
+		}
+	}
+
+	componentDidMount() {
+        this.props.getDirectMessages();
+        // this.updatePage();
+    }
+    
+    // Updates the state whenever redux is updated
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.directMessages && !_.isEqual(nextProps.directMessages, this.state.dmData)) {
+            this.setState({ dmData: nextProps.directMessages}, () => {
+                if (this.state.selectedChannel) {
+                    this.state.dmData.forEach((channel) => {
+                        if (channel.dmId === this.state.selectedChannel.dmId) {
+                            this.setState({
+                                selectedChannel: channel
+                            });
+                        }
+                    });
+                }
+            });
+        }
+    }
+
+    updatePage = async() => {
+        while (true) {
+            await this.sleep(15000);
+            // console.log("getting new DMs");
+            this.props.getNewDirectMessages();
+        }
+    }
+
+    sleep = (ms) => {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+	// Handles selecting different DM channels
+	handleClickChannel = (event) => {
+		this.setState({
+			hasChannelSelected: true
+		});
+
+		const dmItemsUpper = document.getElementById("dmItemsUpper");
+		let target = event.target;
+		let dmChannelKey;
+
+		// Determine which DM channel was clicked by finding the data-key.
+		// A while loop is necessary, because the user can click on any part of the
+		// DM list item. dmItemsUpper is the list container of the dmItems
+		while (target !== dmItemsUpper) {
+			dmChannelKey = target.dataset.key;
+
+			if (dmChannelKey) {
+				break;
+			} else {
+				target = target.parentNode;
+			}
+		}
+
+		// Save the entire DM channel in the state so that it is easier to load the messages
+		this.state.dmData.forEach((channel) => {
+			if (channel.dmId === dmChannelKey) {
+				this.setState({
+					selectedChannel: channel
+				});
+			}
+		});
+	};
+
+	formatDateToString(dateString) {
+		let newDate = new Date(Date.parse(dateString));
+		return newDate.toDateString();
+	}
+
+	formatDateToTimeDiff(dateString) {
+		return dayjs(dateString).fromNow();
+	}
+
+	shortenText = (text, length) => {
+		// Shorten the text
+		let shortened = text.slice(0, length + 1);
+
+		// Trim whitespace from the end of the text
+		if (shortened[shortened.length - 1] === ' ') {
+			shortened = shortened.trimRight();
+		}
+
+		// Add ... to the end
+		shortened = `${shortened}...`;
+
+		return shortened;
+	}
+
+	handleOpenAddDMPopover = (event) => {
+		this.setState({
+			anchorEl: event.currentTarget
+		});
+	};
+
+	handleCloseAddDMPopover = () => {
+		this.setState({
+			anchorEl: null,
+            createDMUsername: '',
+			usernameValid: false
+		});
+	};
+
+	handleChangeAddDMUsername = (event) => {
+		this.setState({
+			createDMUsername: event.target.value
+        });
+    };
+    
+    handleClickCreate = () => {
+        this.props.createNewDirectMessage(this.state.createDMUsername)
+            .then(() => {
+                return this.props.reloadDirectMessageChannels();
+            })
+            .then(() => {
+                this.handleCloseAddDMPopover();
+                return;
+            })
+            .catch(() => {
+                return;
+            })
+    }
+
+    handleChangeMessage = (event) => {
+        let drafts = this.state.drafts;
+        drafts[this.state.selectedChannel.dmId] = event.target.value;
+        this.setState({
+            drafts
+        });
+    }
+
+    handleClickSend = () => {
+        // console.log(this.state.drafts[this.state.selectedChannel.dmId]);
+        let drafts = this.state.drafts;
+        if (this.state.hasChannelSelected && drafts[this.state.selectedChannel.dmId]) {
+            this.props.sendDirectMessage(this.state.selectedChannel.recipient, drafts[this.state.selectedChannel.dmId]);
+            drafts[this.state.selectedChannel.dmId] = null;
+            this.setState({
+                drafts
+            });
+        }
+    }
+
+	render() {
+		const { classes, user: { credentials: { dmEnabled } } } = this.props;
+        const loadingDirectMessages = this.props.UI.loading2;
+        const creatingDirectMessage = this.props.UI.loading3;
+        const sendingDirectMessage = this.props.UI.loading4;
+        let errors = this.props.UI.errors ? this.props.UI.errors : {};
+		dayjs.extend(relativeTime);
+
+		// Used for the add button on the dmList
+		const open = Boolean(this.state.anchorEl);
+		const id = open ? 'simple-popover' : undefined;
+
+    let dmListMarkup = this.state.dmData ? (
+			this.state.dmData.map((channel) => (
+				<Card
+					onClick={this.handleClickChannel}
+					key={channel.dmId}
+					data-key={channel.dmId}
+					className={
+						this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? classes.dmCardSelected : classes.dmCardUnselected
+					}
+				>
+					<Box className={classes.dmListItemContainer}>
+						<Grid container direction="column" className={classes.dmListLayoutContainer} spacing={1}>
+							<Grid item>
+								<Grid container className={classes.dmListTextLayout}>
+									<Grid item sm />
+									<Grid item sm>
+										<Typography
+											className={
+												this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
+													classes.dmItemUsernameSelected
+												) : (
+													classes.dmItemUsernameUnselected
+												)
+											}
+										>
+											{channel.recipient}
+										</Typography>
+									</Grid>
+									<Grid item sm>
+										<Typography
+											className={
+												this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
+													classes.dmItemTimeSelected
+												) : (
+													classes.dmItemTimeUnselected
+												)
+											}
+										>
+											{channel.recentMessageTimestamp ? (
+												this.formatDateToTimeDiff(channel.recentMessageTimestamp)
+											) : null}
+										</Typography>
+									</Grid>
+								</Grid>
+							</Grid>
+							<Grid item className={classes.dmListRecentMessage}>
+								<Typography
+									className={
+										this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
+                      channel.hasDirectMessagesEnabled ? 
+                        classes.dmRecentMessageSelected
+                      :
+                        classes.dmRecentMessageDisabled
+										) : (
+                      channel.hasDirectMessagesEnabled ?
+                        classes.dmRecentMessageUnselected
+                      :
+                        classes.dmRecentMessageDisabled
+										)
+									}
+								>
+									{!channel.hasDirectMessagesEnabled ? "This user has DMs disabled" :
+										!channel.recentMessage ? 
+											'No messages' 
+										: 
+											channel.recentMessage.length > 65 ?
+												this.shortenText(channel.recentMessage, 65)
+											:
+												channel.recentMessage
+									}
+								</Typography>
+							</Grid>
+						</Grid>
+					</Box>
+				</Card>
+			))
+		) : (
+			<p>You don't have any DMs yet</p>
+		)
+
+		let messagesMarkup =
+			this.state.selectedChannel !== null ? this.state.selectedChannel.messages.length > 0 ? (
+				this.state.selectedChannel.messages.map((messageObj) => (
+					<Grid item key={messageObj.messageId}>
+						<Card
+							className={
+								messageObj.author === this.state.selectedChannel.recipient ? (
+									classes.toMessage
+								) : (
+									classes.fromMessage
+								)
+							}
+						>
+							<Typography className={classes.messageContent}>{messageObj.message}</Typography>
+							<Typography className={classes.messageTime}>
+								{this.formatDateToString(messageObj.createdAt)}
+							</Typography>
+						</Card>
+					</Grid>
+				))
+			) : (
+				<p>No DMs here</p>
+			) : (
+				<p>Select a DM channel</p>
+			);
+
+		let addDMMarkup = (
+			<div>
+				<AddCircleIcon
+					style={{
+						color: '#1da1f2',
+						height: 82,
+						width: 82,
+						marginTop: 9,
+						cursor: 'pointer'
+					}}
+					aria-describedby={id}
+					onClick={this.handleOpenAddDMPopover}
+				/>
+				<Popover
+					id={id}
+					open={open}
+					anchorEl={this.state.anchorEl}
+					onClose={this.handleCloseAddDMPopover}
+					anchorOrigin={{
+						vertical: 'center',
+						horizontal: 'center'
+					}}
+					transformOrigin={{
+						vertical: 'top',
+						horizontal: 'center'
+					}}
+				>
+					<Box
+						style={{
+							height: 200,
+							width: 400
+						}}
+					>
+						<Grid container>
+							<Grid item sm />
+							<Grid item style={{ height: 200, width: 285 }}>
+								<Grid container direction="column" spacing={2}>
+									<Grid item>
+										<Typography style={{ marginTop: 15 }}>
+											Who would you like to start a DM with?
+										</Typography>
+									</Grid>
+									<Grid item>
+										<TextField
+											onChange={this.handleChangeAddDMUsername}
+											value={this.state.createDMUsername}
+											label="Username"
+                      variant="outlined"
+                      helperText={errors.createDirectMessage}
+                      error={errors.createDirectMessage ? true : false}
+											style={{
+                        width: 265,
+                        marginRight: 10,
+                        marginLeft: 10,
+                        textAlign: 'center',
+											}}
+										/>
+									</Grid>
+                  <Grid item> 
+                    <Button
+                      className={classes.createButton}
+                      variant="outlined"
+                      color="primary"
+                      onClick={this.handleClickCreate}
+                      disabled={
+                        creatingDirectMessage ||
+                        this.state.createDMUsername === ""    
+                      }
+                    >
+                      Create
+                      {creatingDirectMessage && 
+                      // Won't accept classes style for some reason
+                      <CircularProgress size={30} style={{position: "absolute"}}/>
+                      }
+                    </Button>
+                  </Grid>
+								</Grid>
+							</Grid>
+							<Grid item sm />
+						</Grid>
+					</Box>
+				</Popover>
+			</div>
+		);
+
+		return (
+			loadingDirectMessages ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> : 
+				(dmEnabled !== undefined && dmEnabled !== null && !dmEnabled ? <Typography>Oops! It looks like you have DMs disabled. You can enable them on the Edit Profile page.</Typography> :
+			<Grid container className={classes.pageContainer}>
+				<Grid item className={classes.sidePadding} sm />
+				<Grid item className={classes.dmList}>
+					<Grid container direction="column">
+						<Grid item className={classes.dmItemsUpper} id="dmItemsUpper">
+							{dmListMarkup}
+						</Grid>
+              <Grid item className={classes.dmItemsLower}>
+                <Card key="5555" data-key="5555" className={classes.dmCardUnselected}>
+                  <Box className={classes.dmListItemContainer}>
+                    {addDMMarkup}
+                  </Box>
+							  </Card>
+              </Grid>
+					</Grid>
+				</Grid>
+				<Grid item className={classes.messagesGrid} sm>
+					<Box>
+						{this.state.hasChannelSelected && (
+							<Card className={classes.messagesBox}>
+								<Box className={classes.messagesContainer} id="messagesContainer">
+									<Grid container direction="column">
+										{messagesMarkup}
+									</Grid>
+								</Box>
+								<Box className={classes.writeMessage}>
+									<TextField
+										className={classes.messageTextField}
+										variant="outlined"
+										multiline
+										rows={2}
+                    margin="dense"
+                    disabled={!this.state.selectedChannel.hasDirectMessagesEnabled}
+                    value={
+                      !this.state.selectedChannel.hasDirectMessagesEnabled ? 
+                        "This user has DMs disabled"
+                      :
+                        this.state.drafts[this.state.selectedChannel.dmId] ? 
+                          this.state.drafts[this.state.selectedChannel.dmId] 
+                        : 
+                          ""
+                    }
+                    onChange={this.handleChangeMessage}
+									/>
+                    <Fab 
+                      className={classes.messageButton}
+                      onClick={this.handleClickSend}
+                      disabled={
+                        sendingDirectMessage ||
+                        !this.state.drafts[this.state.selectedChannel.dmId] ||
+                        this.state.drafts[this.state.selectedChannel.dmId] === ""
+                      }
+                    >
+										<SendIcon style={{ color: '#FFFFFF' }} />
+                    {
+                      sendingDirectMessage && 
+                      <CircularProgress size={30} style={{position: "absolute"}}/>
+                      // Won't accept classes style for some reason
+                    }
+									</Fab>
+								</Box>
+							</Card>
+						)}
+            {!this.state.hasChannelSelected &&
+						this.state.dmData && <Typography>Select a DM on the left</Typography>}
+					</Box>
+				</Grid>
+				<Grid item className={classes.sidePadding} sm />
+			</Grid>
+			)
+		);
+	}
+}
+
+directMessages.propTypes = {
+	classes: PropTypes.object.isRequired,
+    getDirectMessages: PropTypes.func.isRequired,
+    createNewDirectMessage: PropTypes.func.isRequired,
+    getNewDirectMessages: PropTypes.func.isRequired,
+    reloadDirectMessageChannels: PropTypes.func.isRequired,
+    sendDirectMessage: PropTypes.func.isRequired,
+	user: PropTypes.object.isRequired,
+	UI: PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) => ({
+	user: state.user,
+	UI: state.UI,
+	directMessages: state.data.directMessages
+});
+
+const mapActionsToProps = {
+    getDirectMessages,
+    createNewDirectMessage,
+    getNewDirectMessages,
+    reloadDirectMessageChannels,
+    sendDirectMessage
+};
+
+export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(directMessages));

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,18 +188,129 @@ 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 />
+      this.state.pageLoading ? 
+        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
+      :
+        <Grid container className={classes.form} id="container-grid">
+          <Grid item sm >
+            <Button
+              variant="outlined"
+              color="primary"
+//               className={classes.button}
+              disabled={loading || uploading}
+              className={classes.back}
+              component={ Link }
+              to='/user'
+            >
+              Back to Profile
+            </Button>
+          </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
@@ -154,6 +324,7 @@ export class edit extends Component {
                     variant="outlined"
                     onChange={this.handleChange}
                     fullWidth
+                    autoComplete='off'
                   />
                 </Grid>
                 <Grid item sm>
@@ -168,6 +339,7 @@ export class edit extends Component {
                     variant="outlined"
                     onChange={this.handleChange}
                     fullWidth
+                    autoComplete='off'
                   />
                 </Grid>
               </Grid>
@@ -185,13 +357,14 @@ export class edit extends Component {
                 variant="outlined"
                 onChange={this.handleChange}
                 fullWidth
+                autoComplete='off'
               />
               <TextField
                 id="handle"
                 name="handle"
                 label="Handle*"
                 className={classes.textField}
-              value={this.state.handle}
+                value={"@" + this.state.handle}
                 disabled
                 helperText="(disabled)"
                 // INFO: These will be uncommented if changing usernames is allowed
@@ -200,6 +373,7 @@ export class edit extends Component {
                 variant="outlined"
                 onChange={this.handleChange}
                 fullWidth
+                autoComplete='off'
               />
               <TextField
                 id="bio"
@@ -214,7 +388,20 @@ export class edit extends Component {
                 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"
@@ -229,36 +416,96 @@ export class edit extends Component {
                   <CircularProgress size={30} className={classes.progress} />
                 )}
               </Button>
-            <br />
+              
+            </form>
+          </Grid>
+          <Grid item sm>
             <Button
-              //variant="contained"
-              color="primary"
-              className={classes.button}
-              component={ Link }
-              to='/user'
-            >
-              Back to Profile
-            </Button>
-            <br />
-            <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>
-        <Grid item sm />
+          <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>
     );
   }
 }
 
-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));

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 = {
+  constructor() {
+    super();
+    this.state = {
       profile: window.location.pathname.split("/").pop(),
       imageUrl: null,
       topics: null,
       user: null,
-    following: 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));

twistter-frontend/src/pages/user.js

@@ -13,6 +13,7 @@ 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";
 
 import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
@@ -47,7 +48,7 @@ const styles = {
     // marginRight: "10%"
   },
   card: {
-    marginBottom: 10
+    marginBottom: 5
   },
   profileImage: {
     marginTop: 20
@@ -70,12 +71,16 @@ const styles = {
 };
 
 class user extends Component {
-  state = {
+  constructor() {
+    super();
+    this.state = {
       profile: null,
       imageUrl: null,
       topics: null,
-    newTopic: null
+      newTopic: "",
+      loading: false
     };
+  }
 
   handleDelete = topic => {
     console.log(topic);
@@ -83,8 +88,16 @@ class user extends Component {
       .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);
@@ -96,8 +109,13 @@ class user extends Component {
       .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) {
         console.log(err);
@@ -111,7 +129,8 @@ class user extends Component {
   }
 
   componentDidMount() {
-    axios
+    this.setState({loading: true})
+    let userPromise = axios
       .get("/user")
       .then(res => {
         this.setState({
@@ -125,18 +144,28 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let postsPromise = axios
       .get("/getallPostsforUser")
       .then(res => {
         // console.log(res.data);
         this.setState({
           posts: res.data
-        })
-        this.setState({posts: (this.state.posts).sort((a,b) =>
-          -a.createdAt.localeCompare(b.createdAt))
-        })
+        });
       })
       .catch(err => console.log(err));
+
+      Promise.all([userPromise, postsPromise])
+        .then(() => {
+          this.setState({loading: false});
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+  }
+
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
   }
 
   render() {
@@ -161,7 +190,7 @@ class user extends Component {
         topic => (
           <MyChip
             label={topic}
-            key={topic.id}
+            key={topic}
             onDelete={key => this.handleDelete(topic)}
           />
         ) // console.log({ topic }.topic.id)
@@ -188,7 +217,7 @@ class user extends Component {
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => (
-        <Card className={classes.card}>
+        <Card className={classes.card} key={post.postId}>
           <CardContent>
             <Typography>
               {this.state.imageUrl ? (
@@ -197,25 +226,29 @@ class user extends Component {
                 <img src={noImage} height="50" width="50" />
               )}
             </Typography>
-            <Typography variant="h7">
+            <Typography variant="h6">
               <b>{post.userHandle}</b>
             </Typography>
             <Typography variant="body2" color={"textSecondary"}>
-              {post.createdAt}
+              {this.formatDate(post.createdAt) }
             </Typography>
 
-            <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt.substring(0,10) + 
-                                                          " " + post.createdAt.substring(11,19)}</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>
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics.join(", ")}
+            </Typography>
             <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount}
+            </Typography>
           </CardContent>
         </Card>
       ))
@@ -229,14 +262,24 @@ class user extends Component {
     // showing the logged in users profile, instead of retreiving the
     // profile based on the URL entered
     let editButtonMarkup = true ? (
-      <Link to="/edit">
+      <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 (
+      this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
       <div>
         {/* <Paper className={classes.paper}> */}
         <Grid container direction="column">
@@ -244,6 +287,7 @@ class user extends Component {
             <Grid container>
               <Grid item sm>
                 {editButtonMarkup}
+                {verifyButtonMarkup}
               </Grid>
               <Grid item sm>
                 {/* <Grid container direction="column"> */}
@@ -263,7 +307,7 @@ class user extends Component {
                 <TextField
                   id="newTopic"
                   label="new topic"
-                  defaultValue=""
+                  // defaultValue=""
                   margin="normal"
                   variant="outlined"
                   value={this.state.newTopic}
@@ -273,7 +317,7 @@ class user extends Component {
                   className={classes.addCircle}
                   color="primary"
                   // iconStyle={classes.addCircle}
-                  clickable
+                  clickable="true"
                   onClick={this.handleAddCircle}
                   cursor="pointer"
                 />
@@ -298,7 +342,8 @@ const mapStateToProps = state => ({
 });
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
 };
 
 export default connect(mapStateToProps)(withStyles(styles)(user));

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}>

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});
+        })
+}

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;
+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);
+    })
+}
+

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;
+    }
+}

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;
     }

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;
     }

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
+export const SET_DIRECT_MESSAGES = 'SET_DIRECT_MESSAGES';
+export const SET_USERNAME_VALID = 'SET_USERNAME_VALID';
+export const SET_USERNAME_INVALID = 'SET_USERNAME_INVALID';