Bump lodash from 4.17.15 to 4.17.21 in /twistter-frontend

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.21)

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,7 @@
 /* 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) => {
   const newPost = {
@@ -33,6 +33,18 @@ exports.putPost = (req, res) => {
     });
 };
 
+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()
@@ -46,6 +58,106 @@ exports.getallPostsforUser = (req, res) => {
       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({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) => {
+  let posts = [];
+  let users = {};
+
+  // Get all the posts
+  var postsPromise = new Promise((resolve, reject) => {
+    db.collection("posts")
+      .get()
+      .then(allPosts => {
+        allPosts.forEach(post => {
+          posts.push(post.data());
+        });
+        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() {
@@ -60,59 +172,16 @@ exports.getallPostsforUser = (req, res) => {
     });
 };
 
-exports.getallPosts = (req, res) => {
-  let posts = [];
-  let users = {};
-
-  // Get all the posts
-  var postsPromise = new Promise((resolve, reject) => {
-    db.collection("posts").get()
-      .then((allPosts) => {
-        allPosts.forEach((post) => {
-          posts.push(post.data());
-        });
-        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.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()
@@ -121,6 +190,7 @@ exports.getOtherUsersPosts = (req, res) => {
       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() {
@@ -136,23 +206,25 @@ exports.getOtherUsersPosts = (req, res) => {
 };
 
 exports.quoteWithPost = (req, res) => {
-    let quoteData;
-    const quoteDoc = admin.firestore().collection('quote').
-    where('userHandle', '==', req.user.handle).
-    where('quoteId', '==', req.params.postId).limit(1);
+  let quoteData;
+  const quoteDoc = admin
+    .firestore()
+    .collection("quote")
+    .where("userHandle", "==", req.user.handle)
+    .where("quoteId", "==", req.params.postId)
+    .limit(1);
 
-    const postDoc = db.doc(`/posts/${req.params.postId}`);
+  const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
-    .then((doc) => {
-        if(doc.exists) {
-            quoteData = doc.data();
-            return quoteDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
-        }
+  postDoc
+    .get()
+    .then(doc => {
+      if (doc.exists) {
+        quoteData = doc.data();
+        return quoteDoc.get();
+      } else {
+        return res.status(404).json({ error: "Post not found" });
+      }
     })
     .then(data => {
       if (data.empty) {
@@ -200,23 +272,25 @@ exports.quoteWithPost = (req, res) => {
 };
 
 exports.quoteWithoutPost = (req, res) => {
-    let quoteData;
-    const quoteDoc = admin.firestore().collection('quote').
-    where('userHandle', '==', req.user.handle).
-    where('quoteId', '==', req.params.postId).limit(1);
+  let quoteData;
+  const quoteDoc = admin
+    .firestore()
+    .collection("quote")
+    .where("userHandle", "==", req.user.handle)
+    .where("quoteId", "==", req.params.postId)
+    .limit(1);
 
-    const postDoc = db.doc(`/posts/${req.params.postId}`);
+  const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
-    .then((doc) => {
-        if(doc.exists) {
-            quoteData = doc.data();
-            return quoteDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
-        }
+  postDoc
+    .get()
+    .then(doc => {
+      if (doc.exists) {
+        quoteData = doc.data();
+        return quoteDoc.get();
+      } else {
+        return res.status(404).json({ error: "Post not found" });
+      }
     })
     .then(data => {
       if (data.empty) {
@@ -258,7 +332,7 @@ exports.quoteWithoutPost = (req, res) => {
       }
     })
     .catch(err => {
-    //   return res.status(500).json({ error: "Something is wrong" });
+      //   return res.status(500).json({ error: "Something is wrong" });
       return res.status(500).json({ error: err });
     });
 };
@@ -272,202 +346,198 @@ exports.checkforLikePost = (req, res) => {
     .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) => {
+  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});
-  })
+      return res.status(500).json({ error: err });
+    });
 };
 
 exports.likePost = (req, res) => {
+  const postId = req.params.postId;
+  let likedPostDoc;
+  db.doc(`/users/${req.userData.handle}`)
+    .get()
+    .then(userDoc => {
+      let likes = userDoc.data().likes;
+      if (likes === undefined || likes === null) {
+        likes = [];
+      }
 
-    const postId = req.params.postId;
-    let likedPostDoc;
-    db.doc(`/users/${req.userData.handle}`)
-        .get()
-        .then((userDoc) => {
-            let likes = userDoc.data().likes;
-            if (likes === undefined || likes === null) {
-                likes = [];
-            }
+      if (likes.includes(postId)) {
+        return res
+          .status(400)
+          .json({ error: "This user has already liked this post" });
+      }
 
-            if (likes.includes(postId)) {
-                return res.status(400).json({error: "This user has already liked this post"});
-            }
+      likes.push(postId);
 
-            likes.push(postId);
+      return userDoc.ref.update({ likes });
+    })
+    .then(() => {
+      return db.doc(`/posts/${postId}`).get();
+    })
+    .then(postDoc => {
+      let postData = postDoc.data();
+      postData.likeCount++;
+      likedPostDoc = postData;
+      return postDoc.ref.update({ likeCount: postData.likeCount });
+    })
+    .then(() => {
+      return res.status(201).json(likedPostDoc);
+    })
+    .catch(err => {
+      console.log(err);
+      return res.status(500).json({ error: err });
+    });
 
-            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);
 
-    // let postData;
-    // const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
-    // .where('postId', '==', req.params.postId).limit(1);
+  // const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    // const postDoc = db.doc(`/posts/${req.params.postId}`);
-
-    // postDoc.get()
-    // .then((doc) => {
-    //     if(doc.exists) {
-    //         postData = doc.data();
-    //         return likeDoc.get();
-    //     }
-    //     else
-    //     {
-    //         return res.status(404).json({error: 'Post not found'});
-    //     }
-    // })
-    // .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'});
-    // })
-
-}
+  // 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 = [];
+      }
 
-    const postId = req.params.postId;
-    let likedPostDoc;
-    db.doc(`/users/${req.userData.handle}`)
-        .get()
-        .then((userDoc) => {
-            let likes = userDoc.data().likes;
-            if (likes === undefined || likes === null) {
-                likes = [];
-            }
+      if (!likes.includes(postId)) {
+        return res
+          .status(400)
+          .json({ error: "This user hasn't liked this post yet" });
+      }
 
-            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);
+        }
+      }
 
-            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 });
+    });
 
-            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);
 
-    // let postData;
-    // const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
-    // .where('postId', '==', req.params.postId).limit(1);
+  // const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    // const postDoc = db.doc(`/posts/${req.params.postId}`);
-
-    // postDoc.get()
-    // .then((doc) => {
-    //     if(doc.exists) {
-    //         postData = doc.data();
-    //         return likeDoc.get();
-    //     }
-    //     else
-    //     {
-    //         return res.status(404).json({error: 'Post not found'});
-    //     }
-    // })
-    // .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'});
-    // })
-
-}
+  // 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});
-        })
-}
+  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

@@ -100,18 +100,33 @@ app.post("/addSubscription", fbAuth, addSubscription);
 // remove one subscription
 app.post("/removeSub", fbAuth, removeSub);
 
-
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
 
-const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost, getLikes, quoteWithPost, quoteWithoutPost, checkforLikePost, getOtherUsersPosts} = 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);
 
@@ -125,6 +140,8 @@ app.post("/quoteWithoutPost/:postId", fbAuth, quoteWithoutPost);
 
 app.post("/getOtherUsersPosts", fbAuth, getOtherUsersPosts);
 
+app.get("/getAlert", fbAuth, getAlert);
+
 /*------------------------------------------------------------------*
  *  handlers/topic.js                                                *
  *------------------------------------------------------------------*/
@@ -132,7 +149,8 @@ const {
   putTopic,
   getAllTopics,
   deleteTopic,
-  getUserTopics
+  getUserTopics,
+  putNewTopic
 } = require("./handlers/topic");
 
 // add topic to database
@@ -147,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);

package-lock.json

@@ -1,3 +1,428 @@
 {
-  "lockfileVersion": 1
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      }
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "eslint-plugin-promise": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz",
+      "integrity": "sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw=="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.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"
+      },
+      "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"
+          }
+        }
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
+      "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA=="
+    },
+    "is-buffer": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+      "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+    },
+    "jwt-decode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
+      "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
+      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
+    },
+    "mime-types": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
+      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
+      "requires": {
+        "mime-db": "1.40.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "proxy-addr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
+      "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.0"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    }
+  }
 }

twistter-frontend/package-lock.json

@@ -2417,6 +2417,11 @@
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
       "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs="
     },
+    "dayjs": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz",
+      "integrity": "sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -5362,9 +5367,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash._arraycopy": {
       "version": "3.0.0",
@@ -9787,6 +9792,11 @@
       "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
       "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE="
     },
+    "underscore": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.1.tgz",
+      "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g=="
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",

twistter-frontend/public/global.js

@@ -1,20 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const GlobalStyles = createGlobalStyle`
-  *,
-  *::after,
-  *::before {
-    box-sizing: border-box;
-  }
-
-  body {
-    align-items: center;
-    background: ${({ theme }) => theme.body};
-    color: ${({ theme }) => theme.text};
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-  }

twistter-frontend/public/theme.js

@@ -1,14 +0,0 @@
-export const lightTheme = {
-    body: '#E2E2E2',
-    text: '#363537',
-    toggleBorder: '#FFF',
-    gradient: 'linear-gradient(#39598A, #79D7ED)',
-  }
-  
-  export const darkTheme = {
-    body: '#363537',
-    text: '#FAFAFA',
-    toggleBorder: '#6B8096',
-    gradient: 'linear-gradient(#091236, #1E215D)',
-  }
-  

twistter-frontend/src/Writing_Microblogs.js

@@ -8,6 +8,7 @@ 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: {
@@ -21,6 +22,13 @@ const styles = {
   },
   textField: {
     marginBottom: 15
+  },
+  progress: {
+    position: "absolute"
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
   }
 }
 
@@ -31,7 +39,8 @@ class Writing_Microblogs extends Component {
       value: "",
       title: "",
       topics: "",
-      characterCount: 250
+      characterCount: 250,
+      loading: false
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -56,11 +65,15 @@ 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
+    let postPromise = axios
       .post("/putPost", postData, headers) // TODO: add topics
       .then(res => {
         // alert("Post was shared successfully!");
@@ -71,20 +84,35 @@ class Writing_Microblogs extends Component {
         console.error(err);
       });
     console.log(postData.microBlogTopics);
-    postData.microBlogTopics.forEach(topic => {
-      axios
-        .post("/putTopic", {
-          following: topic
-        })
-        .then(res => {
-          console.log(res.data);
-        })
-        .catch(err => {
-          console.error(err);
-        });
-    });
+    // 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) {
@@ -149,12 +177,14 @@ class Writing_Microblogs extends Component {
             autoComplete='off'
           />
           <Button
+            className={classes.button}
             onClick={this.handleSubmit}
-            // disabled={loading}
+            disabled={this.state.loading}
             variant="outlined"
             color="primary"
             >
               Share Post
+            {this.state.loading && <CircularProgress size={30} className={classes.progress} />}
           </Button>
         </form>
       </div>

twistter-frontend/src/components/toggle/toggle.js

@@ -1,23 +0,0 @@
-import React from 'react'
-import { func, string } from 'prop-types';
-import styled from 'styled-components';
-// Import a couple of SVG files we'll use in the design: https://www.flaticon.com
-import { ReactComponent as MoonIcon } from 'icons/moon.svg';
-import { ReactComponent as SunIcon } from 'icons/sun.svg';
-
-const Toggle = ({ theme, toggleTheme }) => {
-  const isLight = theme === 'light';
-  return (
-    <button onClick={toggleTheme} >
-      <SunIcon />
-      <MoonIcon />
-    </button>
-  );
-};
-
-Toggle.propTypes = {
-  theme: string.isRequired,
-  toggleTheme: func.isRequired,
-}
-
-export default Toggle;

twistter-frontend/src/pages/Home.js

@@ -6,78 +6,134 @@ import axios from "axios";
 
 // Material UI and React Router
 
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Button from '@material-ui/core/Button';
+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 TextField from "@material-ui/core/TextField";
 
 import Typography from "@material-ui/core/Typography";
-import withStyles from '@material-ui/styles/withStyles';
+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';
-
+import { likePost, unlikePost, getLikes } from "../redux/actions/userActions";
 
 const styles = {
   card: {
     marginBottom: 5
   }
-}
+};
 
 class Home extends Component {
   state = {
-    likes: []
+    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
+          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 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)
+      this.props.unlikePost(postId, this.state.likes);
       doc.dataset.likes--;
-    } else { 
-      this.props.likePost(postId, this.state.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));
@@ -85,96 +141,133 @@ class Home extends Component {
   }
 
   render() {
-
-    const { UI:{ loading } } = this.props;
+    const {
+      UI: { loading }
+    } = this.props;
     let authenticated = this.props.user.authenticated;
-    let {classes} = this.props;
+    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 className={classes.card} key={post.postId}>
-          <CardContent>
-            <Typography>
-              {/* {
-                this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
-                                      (<img src={noImage} height="50" width="50"/>)
-              } */}
-              {
-                post.profileImage ? (<img src={post.profileImage} height="50" width="50" />) : 
-                                    (<img src={noImage} height="50" width="50"/>)
-              }
-            </Typography>
-            <Typography variant="h5"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
-            <br />
-            <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
-            <Typography variant="body2">{post.quoteBody}</Typography>
-            <br />
-            <Typography variant="body2">{post.body}</Typography>
-            <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>        
-            <br />
-            <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> 
+    console.log(hiddenBool);
+    let postMarkup = this.state.posts ? ( this.state.following === undefined || this.state.following === null ? <Typography>You aren't following anybody right now</Typography> :
+      this.state.posts.map(post => !post.hidden && this.state.following && (this.state.following.includes(post.userHandle) || post.userHandle === "Admin") ? (
+            <Card className={classes.card} key={post.postId}>
+              <CardContent>
+                <Typography>
+                  {/* {
+                    this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
+                                          (<img src={noImage} height="50" width="50"/>)
+                  } */}
+                  {
+                    post.profileImage ? (<img src={post.profileImage} height="50" width="50" />) : 
+                                        (<img src={noImage} height="50" width="50"/>)
+                  }
+                </Typography>
+                <Typography variant="h5"><b>{post.userHandle}</b></Typography>
+                <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
+                <br />
+                <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
+                <Typography variant="body2">{post.quoteBody}</Typography>
+                <br />
+                <Typography variant="body2">{post.body}</Typography>
+                <br />
+                <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics.join(", ")}</Typography>        
+                <br />
+                {!hiddenBool &&
+                  <Button
+                  onClick={this.flagPost}
+                  data-key={post.postId}
+                  variant = "contained"
+                  color = "primary"
+                >
+                  Hide Post
+                </Button>
+                }
+                
+                <Typography id={post.postId} data-likes={post.likeCount} variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
+                {/* <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like> */}
+                <Button
+                  onClick={this.handleClickLikeButton}
+                  data-key={post.postId}
+                  disabled={loading}
+                  variant="outlined"
+                  color="primary"
+                >{
+                  this.state.likes && this.state.likes.includes(post.postId) ? 'Unlike' : 'Like'
+                  }</Button>
+                <Quote microblog = {post.postId}></Quote> 
 
-            {/* <button>Quote</button> */}
+                {/* <button>Quote</button> */}
 
-          </CardContent>
-        </Card>
-      )
+                {/* <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography> */}
+                
+              </CardContent>
+            </Card>
+        ) : (
+              <p></p>
+            )
+    )
     ) : (
       <p>Loading post...</p>
     );
 
-    return (
-      authenticated ? (
-      <Grid container>
-        <Grid item sm={4} xs={8}>
-          <Writing_Microblogs />
+    return authenticated ? (
+      this.state.loading ? (
+        <CircularProgress
+          size={60}
+          style={{ marginTop: "300px" }}
+        ></CircularProgress>
+      ) : (
+        <Grid container>
+          <Grid item sm={4} xs={8}>
+            <Writing_Microblogs />
+          </Grid>
+          <Grid item sm={4} xs={8}>
+            {postMarkup}
+          </Grid>
         </Grid>
-        <Grid item sm={4} xs={8}>
-          {postMarkup}
-        </Grid>
-      </Grid> 
-     ) : loading ? 
-          (<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>)
-        :
-          (
-            <div>
-              <div>
-                <img src={logo} className="app-logo" alt="logo" />
-                <br/><br/>
-                <b>Welcome to Twistter!</b> 
-                <br/><br/>
-                <b>See the most interesting topics people are following right now.</b> 
-              </div>
+      )
+    ) : loading ? (
+      <CircularProgress
+        size={60}
+        style={{ marginTop: "300px" }}
+      ></CircularProgress>
+    ) : (
+      <div>
+        <div>
+          <img src={logo} className="app-logo" alt="logo" />
+          <br />
+          <br />
+          <b>Welcome to Twistter!</b>
+          <br />
+          <br />
+          <b>See the most interesting topics people are following right now.</b>
+        </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/>
-                <form action="./signup">
-                  <button className="authButtons signup">Sign up</button> 
-                </form>
-                <br/>
-                <form action="./login">
-                  <button className="authButtons login">Sign in</button>
-                </form>
-              </div>
-            </div>
-    ));
+        <div>
+          <b>Join today or sign in if you already have an account.</b>
+          <br />
+          <br />
+          <form action="./signup">
+            <button className="authButtons signup">Sign up</button>
+          </form>
+          <br />
+          <form action="./login">
+            <button className="authButtons login">Sign in</button>
+          </form>
+        </div>
+      </div>
+    );
   }
 }
 
@@ -185,38 +278,36 @@ class Quote extends Component {
       characterCount: 250,
       showModal: false,
       value: ""
-    }
+    };
 
-  this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
-  this.handleOpenModal = this.handleOpenModal.bind(this);
-  this.handleCloseModal = this.handleCloseModal.bind(this);
-  this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleSubmitWithoutPost(event) {
     const post = {
-      
-      userImage: "bing-url",
-    }
+      userImage: "bing-url"
+    };
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
-    axios.post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
-    .then((res) => {
-      
-      console.log(res.data);
-    })
-    .catch(err => {
-    
-      console.error(err);
-    });
+    axios
+      .post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
+      .then(res => {
+        console.log(res.data);
+      })
+      .catch(err => {
+        console.error(err);
+      });
     event.preventDefault();
   }
 
   handleOpenModal() {
     this.setState({ showModal: true });
   }
-  
+
   handleCloseModal() {
     this.setState({ showModal: false, characterCount: 250, value: "" });
   }
@@ -234,20 +325,19 @@ class Quote extends Component {
   handleSubmit(event) {
     const quotedPost = {
       quoteBody: this.state.value,
-      userImage: "bing-url",
+      userImage: "bing-url"
     };
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
-    axios.post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
-    .then((res) => {
-      
-      console.log(res.data);
-    })
-    .catch(err => {
-    
-      console.error(err);
-    });
+    axios
+      .post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
+      .then(res => {
+        console.log(res.data);
+      })
+      .catch(err => {
+        console.error(err);
+      });
     event.preventDefault();
     this.setState({ showModal: false, characterCount: 250, value: "" });
   }
@@ -255,14 +345,29 @@ class Quote extends Component {
   render() {
     return (
       <div>
-        <Button variant="outlined" color="primary" onClick={this.handleOpenModal}>Quote with Post</Button>
-        <ReactModal 
-           isOpen={this.state.showModal}
-           style={{content: {height: "50%", width: "25%", marginTop: "auto", marginLeft: "auto", marginRight: "auto", marginBottom : "auto"}}}
+        <Button
+          variant="outlined"
+          color="primary"
+          onClick={this.handleOpenModal}
+        >
+          Quote with Post
+        </Button>
+        <ReactModal
+          isOpen={this.state.showModal}
+          style={{
+            content: {
+              height: "50%",
+              width: "25%",
+              marginTop: "auto",
+              marginLeft: "auto",
+              marginRight: "auto",
+              marginBottom: "auto"
+            }
+          }}
         >
           <div style={{ width: "200px", marginLeft: "50px" }}>
-          <form style={{ width: "350px"}}>
-            {/* <textarea
+            <form style={{ width: "350px" }}>
+              {/* <textarea
               value={this.state.value}
               required
               maxLength="250"
@@ -275,101 +380,109 @@ 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 variant="outlined" color="primary" onClick={this.handleSubmit}>Share Quoted Post</Button>
-        
-          <Button variant="outlined" color="primary" onClick={this.handleCloseModal}>Cancel</Button>
+              <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>
 
-          </form>
-        </div>
-          
-          
+              <div style={{ fontSize: "14px", marginRight: "-100px" }}>
+                <p2>Characters Left: {this.state.characterCount}</p2>
+              </div>
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={this.handleSubmit}
+              >
+                Share Quoted Post
+              </Button>
+
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={this.handleCloseModal}
+              >
+                Cancel
+              </Button>
+            </form>
+          </div>
         </ReactModal>
-        <Button variant="outlined" color="primary" onClick={this.handleSubmitWithoutPost}>Quote without Post</Button>
-
+        <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 = {
-         num : this.props.count,
-
-    }
+      num: this.props.count
+    };
 
     this.handleClick = this.handleClick.bind(this);
   }
 
   componentDidMount() {
     this.setState({
-      like: localStorage.getItem(this.props.microBlog + this.props.name) === "false"
-
-    })
-
+      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())
+    });
+    localStorage.setItem(
+      this.props.microBlog + this.props.name,
+      this.state.like.toString()
+    );
 
-    if(this.state.like == false)
-          {
-            this.setState(() => {
-              return {num: this.state.num + 1}
-           });
-            axios.get(`/like/${this.props.microBlog}`)
-            .then((res) => {
-                console.log(res.data);
-            })
-            .catch((err) => {
-              console.log(err);
-            })
-          }
-          else
-          {
-            this.setState(() => {
-              return {num: this.state.num - 1}
-           });
-          axios.get(`/unlike/${this.props.microBlog}`)
-                .then((res) => {
-                    console.log(res.data);
-                })
-                .catch((err) => {
-                  console.log(err);
-                })
-            }
-            
-            
+    if (this.state.like == false) {
+      this.setState(() => {
+        return { num: this.state.num + 1 };
+      });
+      axios
+        .get(`/like/${this.props.microBlog}`)
+        .then(res => {
+          console.log(res.data);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    } else {
+      this.setState(() => {
+        return { num: this.state.num - 1 };
+      });
+      axios
+        .get(`/unlike/${this.props.microBlog}`)
+        .then(res => {
+          console.log(res.data);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    }
   }
 
   /* componentDidMount() {
@@ -390,33 +503,30 @@ class Like extends Component {
       })
     }
   }  */
-  
-    render() {
-      
-      const label = this.state.like ? 'Unlike' : 'Like'
-      return(
-        
-
-        <div>
-          <Typography variant="body2" color={"textSecondary"}>Likes {this.state.num}</Typography>
-          <button onClick={this.handleClick}>{label}</button>
-        </div>
-      )
-    }
 
+  render() {
+    const label = this.state.like ? "Unlike" : "Like";
+    return (
+      <div>
+        <Typography variant="body2" color={"textSecondary"}>
+          Likes {this.state.num}
+        </Typography>
+        <button onClick={this.handleClick}>{label}</button>
+      </div>
+    );
+  }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   user: state.user,
   UI: state.UI
-})
-
+});
 
 const mapActionsToProps = {
   likePost,
   unlikePost,
   getLikes
-}
+};
 
 Home.propTypes = {
   user: PropTypes.object.isRequired,
@@ -425,16 +535,17 @@ Home.propTypes = {
   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));
+};
 
+export default connect(
+  mapStateToProps,
+  mapActionsToProps
+)(withStyles(styles)(Home, Like, Quote));

twistter-frontend/src/pages/directMessages.js

@@ -83,6 +83,10 @@ const styles = {
 		wordBreak: "break-all",
 		color: 'black'
 	},
+	dmRecentMessageDisabled: {
+		wordBreak: "break-all",
+		color: 'red'
+	},
 	dmListItemContainer: {
 		height: 100
 	},
@@ -105,7 +109,7 @@ const styles = {
 		fontSize: 20,
 		backgroundColor: '#1da1f2',
 		width: 300
-	},
+  },
 	messagesGrid: {
 		// // margin: "auto"
 		// height: "auto",
@@ -377,7 +381,7 @@ export class directMessages extends Component {
 		const open = Boolean(this.state.anchorEl);
 		const id = open ? 'simple-popover' : undefined;
 
-        let dmListMarkup = this.state.dmData ? (
+    let dmListMarkup = this.state.dmData ? (
 			this.state.dmData.map((channel) => (
 				<Card
 					onClick={this.handleClickChannel}
@@ -426,13 +430,19 @@ export class directMessages extends Component {
 								<Typography
 									className={
 										this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
-											classes.dmRecentMessageSelected
+                      channel.hasDirectMessagesEnabled ? 
+                        classes.dmRecentMessageSelected
+                      :
+                        classes.dmRecentMessageDisabled
 										) : (
-											classes.dmRecentMessageUnselected
+                      channel.hasDirectMessagesEnabled ?
+                        classes.dmRecentMessageUnselected
+                      :
+                        classes.dmRecentMessageDisabled
 										)
 									}
 								>
-									{
+									{!channel.hasDirectMessagesEnabled ? "This user has DMs disabled" :
 										!channel.recentMessage ? 
 											'No messages' 
 										: 
@@ -524,35 +534,35 @@ export class directMessages extends Component {
 											onChange={this.handleChangeAddDMUsername}
 											value={this.state.createDMUsername}
 											label="Username"
-                                            variant="outlined"
-                                            helperText={errors.createDirectMessage}
-                                            error={errors.createDirectMessage ? true : false}
+                      variant="outlined"
+                      helperText={errors.createDirectMessage}
+                      error={errors.createDirectMessage ? true : false}
 											style={{
-                                                width: 265,
-                                                marginRight: 10,
-                                                marginLeft: 10,
-                                                textAlign: 'center',
+                        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 && 
-											    <CircularProgress size={30} style={{position: "absolute"}}/>
-                                                // Won't accept classes style for some reason
-                                            }
-                                        </Button>
-                                    </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 />
@@ -572,13 +582,13 @@ export class directMessages extends Component {
 						<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 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>
@@ -596,30 +606,39 @@ export class directMessages extends Component {
 										variant="outlined"
 										multiline
 										rows={2}
-                                        margin="dense"
-                                        value={this.state.drafts[this.state.selectedChannel.dmId] ? this.state.drafts[this.state.selectedChannel.dmId] : ""}
-                                        onChange={this.handleChangeMessage}
+                    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] === ""
-                                        }
-                                    >
+                    <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
-                                        }
+                    {
+                      sendingDirectMessage && 
+                      <CircularProgress size={30} style={{position: "absolute"}}/>
+                      // Won't accept classes style for some reason
+                    }
 									</Fab>
 								</Box>
 							</Card>
 						)}
-                        {!this.state.hasChannelSelected &&
+            {!this.state.hasChannelSelected &&
 						this.state.dmData && <Typography>Select a DM on the left</Typography>}
 					</Box>
 				</Grid>

twistter-frontend/src/pages/otherUser.js

@@ -22,6 +22,7 @@ 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";
@@ -77,7 +78,9 @@ class user extends Component {
       user: null,
       following: null,
       posts: null,
-      myTopics: null
+      myTopics: null,
+      followingList: null,
+      loading: false
     };
   }
 
@@ -90,7 +93,8 @@ class user extends Component {
         .then(res => {
           console.log("removed sub");
           this.setState({
-            following: false
+            following: false,
+            myTopics: []
           });
         })
         .catch(function(err) {
@@ -113,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
       })
@@ -126,19 +149,26 @@ 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
-          ),
-          myTopics: res.data.credentials.followedTopics
+          following: fol,
+          myTopics: list
         });
       })
       .catch(err => console.log(err));
 
-    axios
+    let posts = axios
       .post("/getOtherUsersPosts", {
         handle: this.state.profile
       })
@@ -149,6 +179,44 @@ class user extends Component {
         });
       })
       .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() {
@@ -177,8 +245,8 @@ class user extends Component {
       <p>loading username...</p>
     );
 
-    console.log(this.state.topics);
-    console.log(this.state.myTopics);
+    // console.log(this.state.topics);
+    // console.log(this.state.myTopics);
     let topicsMarkup = this.state.topics ? (
       this.state.topics.map(
         topic =>
@@ -186,16 +254,20 @@ class user extends Component {
             this.state.myTopics.includes(topic) ? (
               <MyChip
                 label={topic}
-                key={{ topic }.topic.id}
+                key={{ topic }.id}
                 onDelete
                 deleteIcon={<DoneIcon />}
               />
-            ) : (
+            ) : this.state.following ? (
               <MyChip
                 label={topic}
-                key={{ topic }.topic.id}
+                key={{ topic }.id}
                 color="secondary"
+                clickable
+                onClick={key => this.handleAdd(topic)}
               />
+            ) : (
+              <MyChip label={topic} key={{ topic }.id} color="secondary" />
             )
           ) : (
             <p></p>
@@ -211,10 +283,10 @@ class user extends Component {
     ) : (
       <img src={noImage} height="150" width="150" />
     );
-
+    //(this.state.posts);
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => (
-        <Card className={classes.card}>
+        <Card className={classes.card} key={post.postId} data-key={post.postId}>
           <CardContent>
             <Typography>
               {this.state.imageUrl ? (
@@ -223,11 +295,11 @@ class user extends Component {
                 <img src={noImage} height="50" width="50" />
               )}
             </Typography>
-            <Typography variant="h7">
+            <Typography variant="h4">
               <b>{post.userHandle}</b>
             </Typography>
             <Typography variant="body2" color={"textSecondary"}>
-              {post.createdAt}
+              {this.formatDate(post.createdAt)}
             </Typography>
 
             <br />
@@ -240,7 +312,7 @@ class user extends Component {
             <Typography variant="body2">{post.body}</Typography>
             <br />
             <Typography variant="body2">
-              <b>Topics:</b> {post.microBlogTopics}
+              <b>Topics:</b> {post.microBlogTopics.join(", ")}
             </Typography>
             <br />
             <Typography variant="body2" color={"textSecondary"}>
@@ -253,8 +325,13 @@ class user extends Component {
       <p>Posts</p>
     );
 
-    return (
-      <Grid container spacing={24}>
+    return this.state.loading ? (
+      <CircularProgress
+        size={60}
+        style={{ marginTop: "300px" }}
+      ></CircularProgress>
+    ) : (
+      <Grid container spacing={10}>
         <Grid item sm={4} xs={8}>
           {imageMarkup}
           {profileMarkup}

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";
@@ -76,7 +77,8 @@ class user extends Component {
       profile: null,
       imageUrl: null,
       topics: null,
-      newTopic: ""
+      newTopic: "",
+      loading: false
     };
   }
 
@@ -127,7 +129,8 @@ class user extends Component {
   }
 
   componentDidMount() {
-    axios
+    this.setState({loading: true})
+    let userPromise = axios
       .get("/user")
       .then(res => {
         this.setState({
@@ -141,7 +144,7 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let postsPromise = axios
       .get("/getallPostsforUser")
       .then(res => {
         // console.log(res.data);
@@ -150,6 +153,14 @@ class user extends Component {
         });
       })
       .catch(err => console.log(err));
+
+      Promise.all([userPromise, postsPromise])
+        .then(() => {
+          this.setState({loading: false});
+        })
+        .catch((error) => {
+          console.log(error)
+        })
   }
 
   formatDate(dateString) {
@@ -219,7 +230,7 @@ class user extends Component {
               <b>{post.userHandle}</b>
             </Typography>
             <Typography variant="body2" color={"textSecondary"}>
-              {post.createdAt}
+              {this.formatDate(post.createdAt) }
             </Typography>
 
             <br />
@@ -232,7 +243,7 @@ class user extends Component {
             <Typography variant="body2">{post.body}</Typography>
             <br />
             <Typography variant="body2">
-              <b>Topics:</b> {post.microBlogTopics}
+              <b>Topics:</b> {post.microBlogTopics.join(", ")}
             </Typography>
             <br />
             <Typography variant="body2" color={"textSecondary"}>
@@ -258,7 +269,17 @@ class user extends Component {
       </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">
@@ -266,6 +287,7 @@ class user extends Component {
             <Grid container>
               <Grid item sm>
                 {editButtonMarkup}
+                {verifyButtonMarkup}
               </Grid>
               <Grid item sm>
                 {/* <Grid container direction="column"> */}

twistter-frontend/src/redux/actions/dataActions.js

@@ -142,5 +142,6 @@ export const sendDirectMessage = (user, message) => (dispatch) => {
                     sendDirectMessage: err.response.data
                 }
             })
+            dispatch({type: SET_NOT_LOADING_UI_4});
         })
 }

twistter-frontend/src/redux/actions/userActions.js

@@ -36,6 +36,7 @@ export const getUserData = () => (dispatch) => {
 
 // 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)
@@ -57,6 +58,7 @@ 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)