router page for writing microblogs

2026-03-10 21:25:04 +00:00 · 2019-09-28 14:17:58 -04:00
74 changed files with 2158 additions and 11525 deletions
--- a/.firebaserc
+++ b/.firebaserc
@@ -5,4 +5,4 @@
    "Twistter1": "twistter-6a42d",
    "SuperTiger69": "twistter-e4649"
  }
-}
+}
--- a/.gitignore
+++ b/.gitignore
@@ -63,6 +63,3 @@ node_modules/
 # dotenv environment variables file
 .env
 # The keyfile for google services authentication
 twistter-e4649-firebase-adminsdk-pgjve-1e57494429.json
--- a/README.md
+++ b/README.md
@@ -1,14 +1,2 @@
 # CS307-Team24
-CS307 Team 24 Twistter website
+CS307 Team 24 Twistter website.
 ### Images
 <p>
  <img alt="00.png" src="./screenshots/00.png" width="1000">
  <img alt="01.png" src="./screenshots/01.png" width="1000">
  <img alt="02.png" src="./screenshots/02.png" width="1000">
  <img alt="03.png" src="./screenshots/03.png" width="1000">
  <img alt="04.png" src="./screenshots/04.png" width="1000">
  <img alt="05.png" src="./screenshots/05.png" width="1000">
  <img alt="06.png" src="./screenshots/06.png" width="1000">
  <img alt="07.png" src="./screenshots/07.png" width="1000">
 </p>
--- a/firebase.json
+++ b/firebase.json
@@ -1,30 +1,29 @@
 {
-    "database": {
+  "database": {
-      "rules": "database.rules.json"
+    "rules": "database.rules.json"
-    },
+  },
-    "firestore": {
+  "firestore": {
-      "rules": "firestore.rules",
+    "rules": "firestore.rules",
-      "indexes": "firestore.indexes.json"
+    "indexes": "firestore.indexes.json"
-    },
+  },
-    "functions": {
+  "functions": {
-      "predeploy": [
+    "predeploy": [
-        "npm --prefix \"$RESOURCE_DIR\" run lint"
+      "npm --prefix \"$RESOURCE_DIR\" run lint"
-      ]
+    ]
-    },
+  },
-    "hosting": {
+  "hosting": {
-      "public": "public",
+    "public": "public",
-      "ignore": [
+    "ignore": [
-        "firebase.json",
+      "firebase.json",
-        "**/.*",
+      "**/.*",
-        "**/node_modules/**"
+      "**/node_modules/**"
-      ],
+    ],
-      "rewrites": [{
+    "rewrites": [{
-        "source": "/feed",
+      "source": "/feed",
-        "destination": "/feed.html"
+      "destination": "/feed.html"
-      }]
+    }]
-    },
+  },
-    "storage": {
+  "storage": {
-      "rules": "storage.rules"
+    "rules": "storage.rules"
    }
  }
-  
+}
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -1,543 +0,0 @@
 /* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
 const { admin, db } = require("../util/admin");
 exports.putPost = (req, res) => {
  const newPost = {
    body: req.body.body,
    userHandle: req.user.handle,
    userImage: req.body.userImage,
    userID: req.user.uid,
    microBlogTitle: req.body.microBlogTitle,
    createdAt: new Date().toISOString(),
    likeCount: 0,
    commentCount: 0,
    microBlogTopics: req.body.microBlogTopics,
    quoteBody: null
  };
  admin
    .firestore()
    .collection("posts")
    .add(newPost)
    .then(doc => {
      doc.update({ postId: doc.id });
      const resPost = newPost;
      resPost.postId = doc.id;
      return res.status(200).json(resPost);
    })
    .catch(err => {
      console.error(err);
      return res.status(500).json({ error: "something went wrong" });
    });
 };
 exports.deletePost = (req, res) => {
    let posts = db.collection("posts")
    .where("userHandle", "==", req.user.handle)
    .get()
    .then((query) => {
      query.forEach((snap) => {
        snap.ref.delete();
      });
      return;
    })
 };
 exports.getallPostsforUser = (req, res) => {
  var post_query = admin
    .firestore()
    .collection("posts")
    .where("userHandle", "==", req.user.handle);
  post_query
    .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({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() {
      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.getOtherUsersPosts = (req, res) => {
  var post_query = admin
    .firestore()
    .collection("posts")
    .where("userHandle", "==", req.body.handle);
    // post_query += admin
    // .firestore()
    // .collection("posts")
    // .where("microBlogTitle", "==", "Alert").where("userHandle", "==", "Admin");
  post_query
    .get()
    .then(function(myPosts) {
      let posts = [];
      myPosts.forEach(function(doc) {
        posts.push(doc.data());
      });
      posts.sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
      return res.status(200).json(posts);
    })
    .then(function() {
      return res
        .status(200)
        .json("Successfully retrieved all user's posts from database.");
    })
    .catch(function(err) {
      return res
        .status(500)
        .json("Failed to retrieve user's posts from database.", err);
    });
 };
 exports.quoteWithPost = (req, res) => {
  let quoteData;
  const quoteDoc = admin
    .firestore()
    .collection("quote")
    .where("userHandle", "==", req.user.handle)
    .where("quoteId", "==", req.params.postId)
    .limit(1);
  const postDoc = db.doc(`/posts/${req.params.postId}`);
  postDoc
    .get()
    .then(doc => {
      if (doc.exists) {
        quoteData = doc.data();
        return quoteDoc.get();
      } else {
        return res.status(404).json({ error: "Post not found" });
      }
    })
    .then(data => {
      if (data.empty) {
        return admin
          .firestore()
          .collection("quote")
          .add({
            quoteId: req.params.postId,
            userHandle: req.user.handle,
            quoteBody: req.body.quoteBody
          })
          .then(() => {
            const post = {
              body: quoteData.body,
              userHandle: req.user.handle,
              quoteBody: req.body.quoteBody,
              createdAt: new Date().toISOString(),
              userImage: req.body.userImage,
              likeCount: 0,
              commentCount: 0,
              userID: req.user.uid,
              microBlogTitle: quoteData.microBlogTitle,
              microBlogTopics: quoteData.microBlogTopics,
              quoteId: req.params.postId
            };
            return admin
              .firestore()
              .collection("posts")
              .add(post)
              .then(doc => {
                doc.update({ postId: doc.id });
                const resPost = post;
                resPost.postId = doc.id;
                return res.status(200).json(resPost);
              });
          });
      } else {
        return res.status(400).json({ error: "Post has already been quoted." });
      }
    })
    .catch(err => {
      return res.status(500).json({ error: err });
    });
 };
 exports.quoteWithoutPost = (req, res) => {
  let quoteData;
  const quoteDoc = admin
    .firestore()
    .collection("quote")
    .where("userHandle", "==", req.user.handle)
    .where("quoteId", "==", req.params.postId)
    .limit(1);
  const postDoc = db.doc(`/posts/${req.params.postId}`);
  postDoc
    .get()
    .then(doc => {
      if (doc.exists) {
        quoteData = doc.data();
        return quoteDoc.get();
      } else {
        return res.status(404).json({ error: "Post not found" });
      }
    })
    .then(data => {
      if (data.empty) {
        return admin
          .firestore()
          .collection("quote")
          .add({
            quoteId: req.params.postId,
            userHandle: req.user.handle,
            quoteBody: null
          })
          .then(() => {
            const post = {
              userHandle: req.user.handle,
              body: quoteData.body,
              quoteBody: null,
              createdAt: new Date().toISOString(),
              likeCount: 0,
              commentCount: 0,
              userID: req.user.uid,
              userImage: req.body.userImage,
              microBlogTitle: quoteData.microBlogTitle,
              microBlogTopics: quoteData.microBlogTopics,
              quoteId: req.params.postId
            };
            return admin
              .firestore()
              .collection("posts")
              .add(post)
              .then(doc => {
                doc.update({ postId: doc.id });
                const resPost = post;
                resPost.postId = doc.id;
                return res.status(200).json(resPost);
              });
          });
      } else {
        return res.status(400).json({ error: "Post has already been quoted." });
      }
    })
    .catch(err => {
      //   return res.status(500).json({ error: "Something is wrong" });
      return res.status(500).json({ error: err });
    });
 };
 exports.checkforLikePost = (req, res) => {
  const likedPostDoc = admin
    .firestore()
    .collection("likes")
    .where("userHandle", "==", req.user.handle)
    .where("postId", "==", req.params.postId)
    .limit(1);
  let result;
  likedPostDoc
    .get()
    .then(data => {
      if (data.empty) {
        result = false;
        return res.status(200).json(result);
      } else {
        result = true;
        return res.status(200).json(result);
      }
    })
    .catch(err => {
      console.log(err);
      return res.status(500).json({ error: err });
    });
 };
 exports.likePost = (req, res) => {
  const postId = req.params.postId;
  let likedPostDoc;
  db.doc(`/users/${req.userData.handle}`)
    .get()
    .then(userDoc => {
      let likes = userDoc.data().likes;
      if (likes === undefined || likes === null) {
        likes = [];
      }
      if (likes.includes(postId)) {
        return res
          .status(400)
          .json({ error: "This user has already liked this post" });
      }
      likes.push(postId);
      return userDoc.ref.update({ likes });
    })
    .then(() => {
      return db.doc(`/posts/${postId}`).get();
    })
    .then(postDoc => {
      let postData = postDoc.data();
      postData.likeCount++;
      likedPostDoc = postData;
      return postDoc.ref.update({ likeCount: postData.likeCount });
    })
    .then(() => {
      return res.status(201).json(likedPostDoc);
    })
    .catch(err => {
      console.log(err);
      return res.status(500).json({ error: err });
    });
  // let postData;
  // const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
  // .where('postId', '==', req.params.postId).limit(1);
  // const postDoc = db.doc(`/posts/${req.params.postId}`);
  // postDoc.get()
  // .then((doc) => {
  //     if(doc.exists) {
  //         postData = doc.data();
  //         return likeDoc.get();
  //     }
  //     else
  //     {
  //         return res.status(404).json({error: 'Post not found'});
  //     }
  // })
  // .then((data) => {
  //     if (data.empty) {
  //         return admin.firestore().collection('likes').add({
  //             postId : req.params.postId,
  //             userHandle: req.user.handle
  //         })
  //         .then(() => {
  //             postData.likeCount++;
  //             return postDoc.update({likeCount : postData.likeCount})
  //         })
  //         .then(() => {
  //             return res.status(200).json(postData);
  //         })
  //     }
  // })
  // .catch((err) => {
  //     return res.status(500).json({error: 'Something is wrong'});
  // })
 };
 exports.unlikePost = (req, res) => {
  const postId = req.params.postId;
  let likedPostDoc;
  db.doc(`/users/${req.userData.handle}`)
    .get()
    .then(userDoc => {
      let likes = userDoc.data().likes;
      if (likes === undefined || likes === null) {
        likes = [];
      }
      if (!likes.includes(postId)) {
        return res
          .status(400)
          .json({ error: "This user hasn't liked this post yet" });
      }
      let i;
      for (i = 0; i < likes.length; i++) {
        if (likes[i] === postId) {
          likes.splice(i, 1);
        }
      }
      return userDoc.ref.update({ likes });
    })
    .then(() => {
      return db.doc(`/posts/${postId}`).get();
    })
    .then(postDoc => {
      let postData = postDoc.data();
      postData.likeCount--;
      likedPostDoc = postData;
      return postDoc.ref.update({ likeCount: postData.likeCount });
    })
    .then(() => {
      return res.status(201).json(likedPostDoc);
    })
    .catch(err => {
      console.log(err);
      return res.status(500).json({ error: err });
    });
  // let postData;
  // const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
  // .where('postId', '==', req.params.postId).limit(1);
  // const postDoc = db.doc(`/posts/${req.params.postId}`);
  // postDoc.get()
  // .then((doc) => {
  //     if(doc.exists) {
  //         postData = doc.data();
  //         return likeDoc.get();
  //     }
  //     else
  //     {
  //         return res.status(404).json({error: 'Post not found'});
  //     }
  // })
  // .then((data) => {
  //         return db
  //           .doc(`/likes/${data.docs[0].id}`)
  //           .delete()
  //           .then(() => {
  //             postData.likeCount--;
  //             return postDoc.update({ likeCount: postData.likeCount });
  //           })
  //           .then(() => {
  //             res.status(200).json(postData);
  //           });
  // })
  // .catch((err) => {
  //     console.error(err);
  //     return res.status(500).json({error: 'Something is wrong'});
  // })
 };
 exports.getLikes = (req, res) => {
  db.doc(`/users/${req.userData.handle}`)
    .get()
    .then(doc => {
      let likes = doc.data().likes;
      if (likes === undefined || likes === null) {
        likes = [];
      }
      return res.status(200).json({ likes });
    })
    .catch(err => {
      console.log(err);
      return res.status(500).json({ error: err });
    });
 };
 exports.getFilteredPosts = (req, res) => {
  admin
    .firestore()
    .collection("posts")
    .where("userHandle", "==", "new user")
    .where("microBlogTopics", "==");
 };
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -1,128 +0,0 @@
 const { admin, db } = require("../util/admin");
 exports.putTopic = (req, res) => {
  let new_following = [];
  let userRef = db.doc(`/users/${req.userData.handle}`);
  userRef
    .get()
    .then(doc => {
      new_following = doc.data().followedTopics;
      new_following.push(req.body.following);
      // add stuff
      userRef
        .set({ followedTopics: new_following }, { merge: true })
        .then(doc => {
          return res
            .status(201)
            .json({ message: `Following ${req.body.following}` });
        })
        .catch(err => {
          return res.status(500).json({ err });
        });
      return res.status(200).json({ message: "OK" });
    })
    .catch(err => {
      return res.status(500).json({ err });
    });
 };
 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()
    .collection("topics")
    .get()
    .then(data => {
      let topics = [];
      data.forEach(function(doc) {
        topics.push({
          topic: doc.data().topic,
          id: doc.id
        });
      });
      return res.status(200).json(topics);
    })
    .catch(err => {
      console.error(err);
      return res.status(500).json({ error: "Failed to fetch all topics." });
    });
 };
 exports.deleteTopic = (req, res) => {
  let new_following = [];
  let userRef = db.doc(`/users/${req.userData.handle}`);
  userRef
    .get()
    .then(doc => {
      new_following = doc.data().followedTopics;
      // remove username from array
      new_following.forEach(function(follower, index) {
        if (follower === `${req.body.unfollow}`) {
          new_following.splice(index, 1);
        }
      });
      // update database
      userRef
        .set({ followedTopics: new_following }, { merge: true })
        .then(doc => {
          return res
            .status(202)
            .json({ message: `Successfully unfollow ${req.body.unfollow}` });
        })
        .catch(err => {
          return res.status(500).json({ err });
        });
      return res.status(200).json({ message: "ok" });
    })
    .catch(err => {
      return res.status(500).json({ err });
    });
 };
 exports.getUserTopics = (req, res) => {
  let data = [];
  db.doc(`/users/${req.body.handle}`)
    .get()
    .then(doc => {
      data = doc.data().followedTopics;
      return res.status(200).json({ data });
    })
    .catch(err => {
      return res.status(500).json({ err });
    });
 };
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
--- a/functions/index.js
+++ b/functions/index.js
@@ -1,170 +1,43 @@
 /* eslint-disable promise/always-return */
-const app = require("express")();
+const functions = require('firebase-functions');
-const cors = require("cors");
+const admin = require('firebase-admin');
-const { db } = require("./util/admin");
+const app = require('express')();
-const fbAuth = require("./util/fbAuth");
+admin.initializeApp();
 const functions = require("firebase-functions");
 app.use(cors());
-/*------------------------------------------------------------------*
+const firebaseConfig = {
- *  handlers/users.js                                               *
+    apiKey: "AIzaSyCvsWetg4qFdsPGfJ3LCw_QaaYzoan7Q34",
- *------------------------------------------------------------------*/
+    authDomain: "twistter-e4649.firebaseapp.com",
-const {
+    databaseURL: "https://twistter-e4649.firebaseio.com",
-  getAuthenticatedUser,
+    projectId: "twistter-e4649",
-  getDirectMessages,
+    storageBucket: "twistter-e4649.appspot.com",
-  sendDirectMessage,
+    messagingSenderId: "20131817365",
-  createDirectMessage,
+    appId: "1:20131817365:web:633c95fb08b16d4526b89c"
-  checkDirectMessagesEnabled,
+};
-  toggleDirectMessages,
+const firebase = require('firebase');
-  getAllHandles,
+firebase.initializeApp(firebaseConfig);
  getUserDetails,
  getProfileInfo,
  login,
  signup,
  deleteUser,
  updateProfileInfo,
  uploadProfileImage,
  verifyUser,
  unverifyUser,
  getUserHandles,
  addSubscription,
  getSubs,
  removeSub
 } = require("./handlers/users");
-// Adds a user to the database and registers them in firebase with
+app.get('/getUsers', (req, res) => {
-// an email and password pair
+    admin.firestore().collection('users').get().then(data => {
-// Returns a token for the new user
+        let users = [];
-app.post("/signup", signup);
+        data.forEach(doc => {
            users.push(doc.data());
        }); return res.json(users);
    }).catch((err) => console.error(err));
 });
-// Returns a token for the user that matches the provided username
+app.post('/postUser', (req, res) => {
-// and password
+    const newUser = {
-app.post("/login", login);
+        body: req.body.body
-
+    };
-//Deletes user account
+    admin.firestore().collection('users').add(newUser).then((doc) => {
-app.delete("/delete", fbAuth, deleteUser);
+        res.json({
-
+            message: 'Successfully added!'
-// Returns all direct messages that the user is participating in
+        });
-app.get("/dms", fbAuth, getDirectMessages);
+    }).catch((err) => {
-
+        res.status(500).json({
-// Send a message in a DM from one user to another
+            error: "Error in posting user!"
-app.post("/dms/send", fbAuth, sendDirectMessage);
+        });
-
+        console.error(err);
-// Create a new DM between two users
+    });
-app.post("/dms/new", fbAuth, createDirectMessage);
+});
-
+exports.api = functions.https.onRequest(app);
 // 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);
 // Unverifies the user sent to the request
 // Must be run by admin
 app.post("/unverifyUser", fbAuth, unverifyUser);
 // get user handles with search phase
 app.post("/getUserHandles", fbAuth, getUserHandles);
 // get user's subscription
 app.get("/getSubs", fbAuth, getSubs);
 // add user to another user's "following" data field
 app.post("/addSubscription", fbAuth, addSubscription);
 // remove one subscription
 app.post("/removeSub", fbAuth, removeSub);
 /*------------------------------------------------------------------*
 *  handlers/post.js                                                *
 *------------------------------------------------------------------*/
 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                                                *
 *------------------------------------------------------------------*/
 const {
  putTopic,
  getAllTopics,
  deleteTopic,
  getUserTopics,
  putNewTopic
 } = require("./handlers/topic");
 // add topic to database
 app.post("/putTopic", fbAuth, putTopic);
 // get all topics from database
 app.get("/getAllTopics", fbAuth, getAllTopics);
 // delete a specific topic
 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);
--- a/functions/package-lock.json
+++ b/functions/package-lock.json
@@ -24,13 +24,13 @@
      }
    },
    "@firebase/app": {
-      "version": "0.4.17",
+      "version": "0.4.16",
-      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.4.17.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.4.16.tgz",
-      "integrity": "sha512-YkCe10/KHnfJ5Lx79SCQ4ZJRlpnwe8Yns6Ntf7kltXq1hCQCUrKEU3zaOTPY90SBx36hYm47IaqkKwT/kBOK3A==",
+      "integrity": "sha512-4aa6ixQlV6xQxj4HbwFKrfYZnnKk8AtB/vEEuIaBCGQYBvV287OVNCozXd4CC4Q4I4Vtkzrc+kggahYFl8nDWQ==",
      "requires": {
        "@firebase/app-types": "0.4.3",
-        "@firebase/logger": "0.1.25",
+        "@firebase/logger": "0.1.24",
-        "@firebase/util": "0.2.28",
+        "@firebase/util": "0.2.27",
        "dom-storage": "2.1.0",
        "tslib": "1.10.0",
        "xmlhttprequest": "1.8.0"
@@ -55,30 +55,15 @@
      "integrity": "sha512-foQHhvyB0RR+mb/+wmHXd/VOU+D8fruFEW1k79Q9wzyTPpovMBa1Mcns5fwEWBhUfi8bmoEtaGB8RSAHnTFzTg=="
    },
    "@firebase/database": {
-      "version": "0.5.4",
+      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.5.2.tgz",
-      "integrity": "sha512-Hz1Bi3fzIcNNocE4EhvvwoEQGurG2BGssWD3/6a2bzty+K1e57SLea2Ied8QYNBUU1zt/4McHfa3Y71EQIyn/w==",
+      "integrity": "sha512-LnXKRE1AmjlS+iRF7j8vx+Ni8x85CmLP5u5Pw5rDKhKLn2eTR1tJKD937mUeeGEtDHwR1rrrkLYOqRR2cSG3hQ==",
      "requires": {
        "@firebase/database-types": "0.4.3",
-        "@firebase/logger": "0.1.25",
+        "@firebase/logger": "0.1.24",
-        "@firebase/util": "0.2.28",
+        "@firebase/util": "0.2.27",
        "faye-websocket": "0.11.3",
        "tslib": "1.10.0"
      },
      "dependencies": {
        "@firebase/logger": {
          "version": "0.1.25",
          "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.25.tgz",
          "integrity": "sha512-/lRhuepVcCCnQ2jcO5Hr08SYdmZDTQU9fdPdzg+qXJ9k/QnIrD2RbswXQcL6mmae3uPpX7fFXQAoScJ9pzp50w=="
        },
        "@firebase/util": {
          "version": "0.2.28",
          "resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.28.tgz",
          "integrity": "sha512-ZQMAWtXj8y5kvB6izs0aTM/jG+WO8HpqhXA/EwD6LckJ+1P5LnAhaLZt1zR4HpuCE+jeP5I32Id5RJ/aifFs6A==",
          "requires": {
            "tslib": "1.10.0"
          }
        }
      }
    },
    "@firebase/database-types": {
@@ -90,13 +75,13 @@
      }
    },
    "@firebase/firestore": {
-      "version": "1.5.3",
+      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-1.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-1.5.2.tgz",
-      "integrity": "sha512-O/yAbXpitOA6g627cUl0/FHYlkTy1EiEKMKOlnlMOJF2fH+nLVZREXjsrCC7N2tIvTn7yYwfpZ4zpSNvrhwiTA==",
+      "integrity": "sha512-CPYLvkGZBKE47oQC9a0q13UMVRj3LvnSbB1nOerktE3CGRHKy44LxDumamN8Kj067hV/80mKK9FdbeUufwO/Rg==",
      "requires": {
        "@firebase/firestore-types": "1.5.0",
-        "@firebase/logger": "0.1.25",
+        "@firebase/logger": "0.1.24",
-        "@firebase/util": "0.2.28",
+        "@firebase/util": "0.2.27",
        "@firebase/webchannel-wrapper": "0.2.26",
        "@grpc/proto-loader": "^0.5.0",
        "grpc": "1.23.3",
@@ -109,9 +94,9 @@
      "integrity": "sha512-VhRHNbEbak+R2iK8e1ir2Lec7eaHMZpGTRy6LMtzATYthlkwNHF9tO8JU8l6d1/kYkI4+DWzX++i3HhTziHEWA=="
    },
    "@firebase/functions": {
-      "version": "0.4.18",
+      "version": "0.4.17",
-      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.4.18.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.4.17.tgz",
-      "integrity": "sha512-N/ijwpxJy26kOErYIi5QS8pQgMZEuEMF/zDaNmgqcoN3J8P52NhBnVQZnIl+U4W96nQfNiURhSwXEERHFyvSZQ==",
+      "integrity": "sha512-heWMXrR3hgvQNe1JEZMUeY7a0QFLMVwVS+lzLq/lzk06bj22X9bJy7Yct+/P9P1ftnsCGLrhk3jAEuL78seoqg==",
      "requires": {
        "@firebase/functions-types": "0.3.8",
        "@firebase/messaging-types": "0.3.2",
@@ -125,12 +110,12 @@
      "integrity": "sha512-9hajHxA4UWVCGFmoL8PBYHpamE3JTNjObieMmnvZw3cMRTP2EwipMpzZi+GPbMlA/9swF9yHCY/XFAEkwbvdgQ=="
    },
    "@firebase/installations": {
-      "version": "0.2.7",
+      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.2.6.tgz",
-      "integrity": "sha512-67tzowHVwRBtEuB1HLMD+fCdoRyinOQlMKBes7UwrtZIVd0CPDUqAKxNqup5EypWZb7O2tqFtRzK7POajfSNMA==",
+      "integrity": "sha512-hkuKmBtnsmqIfWxt9KyaN+cP574pfTcB81IG5tnmVcgP1xQ4hyQ9LRP0M7jDTGWMw272TInBzUuaM05xw9GMnA==",
      "requires": {
        "@firebase/installations-types": "0.1.2",
-        "@firebase/util": "0.2.28",
+        "@firebase/util": "0.2.27",
        "idb": "3.0.2",
        "tslib": "1.10.0"
      }
@@ -141,17 +126,17 @@
      "integrity": "sha512-fQaWIW8hyX1XUN7+FCSPjvM1agFjGidVuF4Sxi7aFwfyh5t+4fD2VpM4wCQbWmodnx4fZLvsuQd9mkxxU+lGYQ=="
    },
    "@firebase/logger": {
-      "version": "0.1.25",
+      "version": "0.1.24",
-      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.25.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.24.tgz",
-      "integrity": "sha512-/lRhuepVcCCnQ2jcO5Hr08SYdmZDTQU9fdPdzg+qXJ9k/QnIrD2RbswXQcL6mmae3uPpX7fFXQAoScJ9pzp50w=="
+      "integrity": "sha512-wPwhWCepEjWiTIqeC9U+7Hcw4XwezKPdXmyXbYSPiWNDcVekNgMPkntwSK+/2ufJO/1nMwAL2n6fL12oQG/PpQ=="
    },
    "@firebase/messaging": {
-      "version": "0.4.11",
+      "version": "0.4.10",
-      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.4.10.tgz",
-      "integrity": "sha512-KYt479yio6ThkV7Pb9LRB1KPIBio+OR4RozwyoLC1ZSVQdTIrd/sVEuDSzYY88Wh/6Kg6ejdu2z6mfWG9l1ZaQ==",
+      "integrity": "sha512-WqtSqlulV2ix4MZ3r1HwGAEj0DiEWtpNCSPh5wOXZsj8Kd01Q2QPTLUtUWmwXSV9WCQWnowfE2x8wjq5388ixw==",
      "requires": {
        "@firebase/messaging-types": "0.3.2",
-        "@firebase/util": "0.2.28",
+        "@firebase/util": "0.2.27",
        "tslib": "1.10.0"
      }
    },
@@ -161,14 +146,14 @@
      "integrity": "sha512-2qa2qNKqpalmtwaUV3+wQqfCm5myP/dViIBv+pXF8HinemIfO1IPQtr9pCNfsSYyus78qEhtfldnPWXxUH5v0w=="
    },
    "@firebase/performance": {
-      "version": "0.2.19",
+      "version": "0.2.18",
-      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.2.19.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.2.18.tgz",
-      "integrity": "sha512-dINWwR/XcSiSnFNNX7QWfec8bymiXk1Zp6mPyPN+R9ONMrpDbygQUy06oT/6r/xx9nHG4Za6KMUJag3sWNKqnQ==",
+      "integrity": "sha512-PcN+nTPaMGqODfwAXgwbaCvcxXH+YzvK6UpZzm0Bl9wmW28/oJipnUxF3cYbVGCiaLAaByIPVSIF22XhTOjUtA==",
      "requires": {
-        "@firebase/installations": "0.2.7",
+        "@firebase/installations": "0.2.6",
-        "@firebase/logger": "0.1.25",
+        "@firebase/logger": "0.1.24",
        "@firebase/performance-types": "0.0.3",
-        "@firebase/util": "0.2.28",
+        "@firebase/util": "0.2.27",
        "tslib": "1.10.0"
      }
    },
@@ -178,9 +163,9 @@
      "integrity": "sha512-RuC63nYJPJU65AsrNMc3fTRcRgHiyNcQLh9ufeKUT1mEsFgpxr167gMb+tpzNU4jsbvM6+c6nQAFdHpqcGkRlQ=="
    },
    "@firebase/polyfill": {
-      "version": "0.3.22",
+      "version": "0.3.21",
-      "resolved": "https://registry.npmjs.org/@firebase/polyfill/-/polyfill-0.3.22.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/polyfill/-/polyfill-0.3.21.tgz",
-      "integrity": "sha512-PYbEqDHJhJJoF2Q5IB/oP0Tz6O2vSUPtODy9kUQibi+T0bK1gkTaySPwz8GAgHfIpFNENj1kK+7Xpf87R8bYbw==",
+      "integrity": "sha512-2mqS3FQHMhCGyfMGRsaZEypHSBD8hVmp9ZBnZSkn8hq5sSOLiNTFSC0FsvNu5z99GNsPQJFTui8bxcZl5cHQbw==",
      "requires": {
        "core-js": "3.2.1",
        "promise-polyfill": "8.1.3",
@@ -195,12 +180,12 @@
      }
    },
    "@firebase/storage": {
-      "version": "0.3.12",
+      "version": "0.3.11",
-      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.3.12.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.3.11.tgz",
-      "integrity": "sha512-8hXt3qPZlVH+yPF4W9Dc15/gBiTPGUJUgYs3dH9WnO41QWl1o4aNlZpZK/pdnpCIO1GmN0+PxJW9TCNb0H0Hqw==",
+      "integrity": "sha512-Q2ffXE+X62gFy5mZkg7qhzAC7+kqaNZWpgS+297h/hWr/cFBDyC8eBPmnI509eKi2okixmOMbWnNluZkNYNSfw==",
      "requires": {
        "@firebase/storage-types": "0.3.3",
-        "@firebase/util": "0.2.28",
+        "@firebase/util": "0.2.27",
        "tslib": "1.10.0"
      }
    },
@@ -210,9 +195,9 @@
      "integrity": "sha512-fUp4kpbxwDiWs/aIBJqBvXgFHZvgoND2JA0gJYSEsXtWtVwfgzY/710plErgZDeQKopX5eOR1sHskZkQUy0U6w=="
    },
    "@firebase/util": {
-      "version": "0.2.28",
+      "version": "0.2.27",
-      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.28.tgz",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.27.tgz",
-      "integrity": "sha512-ZQMAWtXj8y5kvB6izs0aTM/jG+WO8HpqhXA/EwD6LckJ+1P5LnAhaLZt1zR4HpuCE+jeP5I32Id5RJ/aifFs6A==",
+      "integrity": "sha512-kFlbWNX1OuLfHrDXZ5QLmNNiLtMyxzbBgMo1DY1tXMjKK1AMYsHnyjInA8esvO0SCDp5XN3Pt9EDlhY4sRiLsw==",
      "requires": {
        "tslib": "1.10.0"
      }
@@ -223,9 +208,9 @@
      "integrity": "sha512-VlTurkvs4v7EVFWESBZGOPghFEokQhU5au5CP9WqA8B2/PcQRDsaaQlQCA6VATuEnW+vtSiSBvTiOc4004f8xg=="
    },
    "@google-cloud/common": {
-      "version": "2.2.2",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.2.0.tgz",
-      "integrity": "sha512-AgMdDgLeYlEG17tXtMCowE7mplm907pcugtfJYYAp06HNe9RDnunUIY5KMnn9yikYl7NXNofARC+hwG77Zsa4g==",
+      "integrity": "sha512-ArSNbbuMOWVhrSasxECEYRcjMzkPgTfXJHQE5gccyDaoBv0oKqG9S2lse2KAgHpRADRna7wKiX9PWOpeB19VvA==",
      "optional": true,
      "requires": {
        "@google-cloud/projectify": "^1.0.0",
@@ -275,9 +260,9 @@
      "optional": true
    },
    "@google-cloud/storage": {
-      "version": "3.3.0",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-3.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-3.2.1.tgz",
-      "integrity": "sha512-9jmHJ0ncQTcrZRwq5MRjXEwuCFkIjHenYwVbycV6bbZ4O84Hcgg4Yp33sKcJug5rvZeVgrpCzPbYXqO3B0LzJw==",
+      "integrity": "sha512-129EwPGej6bXzY1u5nja2aeMDew6DIHaJn7ZV6nteQ74LQQSNv2jKrqTlyhndBsAwpuwQAxeghPTCoFT/H8Frg==",
      "optional": true,
      "requires": {
        "@google-cloud/common": "^2.1.1",
@@ -286,50 +271,27 @@
        "arrify": "^2.0.0",
        "compressible": "^2.0.12",
        "concat-stream": "^2.0.0",
-        "date-and-time": "^0.10.0",
+        "date-and-time": "^0.9.0",
        "duplexify": "^3.5.0",
        "extend": "^3.0.2",
        "gaxios": "^2.0.1",
-        "gcs-resumable-upload": "^2.2.4",
+        "gcs-resumable-upload": "^2.0.0",
        "hash-stream-validation": "^0.2.1",
        "mime": "^2.2.0",
        "mime-types": "^2.0.8",
        "onetime": "^5.1.0",
        "p-limit": "^2.2.0",
        "pumpify": "^2.0.0",
        "readable-stream": "^3.4.0",
        "snakeize": "^0.1.0",
        "stream-events": "^1.0.1",
        "through2": "^3.0.0",
        "xdg-basedir": "^4.0.0"
      },
      "dependencies": {
        "readable-stream": {
          "version": "3.4.0",
          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
          "optional": true,
          "requires": {
            "inherits": "^2.0.3",
            "string_decoder": "^1.1.1",
            "util-deprecate": "^1.0.1"
          }
        },
        "string_decoder": {
          "version": "1.3.0",
          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
          "optional": true,
          "requires": {
            "safe-buffer": "~5.2.0"
          }
        }
      }
    },
    "@grpc/grpc-js": {
-      "version": "0.5.4",
+      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-0.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-0.5.3.tgz",
-      "integrity": "sha512-aY4fTCz7jq7oKFmfAeZVqGzMCR5I9NLdY9E2fJ70QtGXwlJnTaN6cnbRmCk23/aKPx9UHqOtk2lyjpN6LbAaxw==",
+      "integrity": "sha512-doDzxjdN0IJihQJvjDkZun9bZp/TW2EKO5E4fNvw8634kU1eNqPnFtAmiEiIYptqJ9StC+zRo1mwrazhqI0k5A==",
      "optional": true,
      "requires": {
        "semver": "^6.2.0"
@@ -536,9 +498,10 @@
      "dev": true
    },
    "ansi-regex": {
-      "version": "4.1.0",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
      "dev": true
    },
    "ansi-styles": {
      "version": "3.2.1",
@@ -584,15 +547,6 @@
      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
      "dev": true
    },
    "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"
      }
    },
    "balanced-match": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -945,9 +899,9 @@
      "optional": true
    },
    "date-and-time": {
-      "version": "0.10.0",
+      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-0.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-0.9.0.tgz",
-      "integrity": "sha512-IbIzxtvK80JZOVsWF6+NOjunTaoFVYxkAQoyzmflJyuRCJAJebehy48mPiCAedcGp4P7/UO3QYRWa0fe6INftg==",
+      "integrity": "sha512-4JybB6PbR+EebpFx/KyR5Ybl+TcdXMLIJkyYsCx3P4M4CWGMuDyFF19yh6TyasMAIF5lrsgIxiSHBXh2FFc7Fg==",
      "optional": true
    },
    "debug": {
@@ -1117,9 +1071,9 @@
      }
    },
    "end-of-stream": {
-      "version": "1.4.3",
+      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
-      "integrity": "sha512-cbNhPFS6MlYlWTGncSiDYbdqKhwWFy7kNeb1YSOG6K65i/wPTkLVCJQj0hXA4j0m5Da+hBWnqopEnu1FFelisQ==",
+      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
      "optional": true,
      "requires": {
        "once": "^1.4.0"
@@ -1201,12 +1155,6 @@
        "text-table": "^0.2.0"
      },
      "dependencies": {
        "ansi-regex": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
          "dev": true
        },
        "debug": {
          "version": "4.1.1",
          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -1221,15 +1169,6 @@
          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
          "dev": true
        },
        "strip-ansi": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
          "dev": true,
          "requires": {
            "ansi-regex": "^3.0.0"
          }
        }
      }
    },
@@ -1476,28 +1415,42 @@
      }
    },
    "firebase": {
-      "version": "6.6.2",
+      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-6.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-6.6.1.tgz",
-      "integrity": "sha512-uL9uNbutC0T8GAxrGgOCC35Ven3QKJqzJozNoVIpBuiWrB9ifm9aKOxn44h6o5ouviax3LVvoiG2jLkLkdQq4A==",
+      "integrity": "sha512-iXbHPIBRt04xYSjWffnARqZbc3vUc0RTnOHsMtAqaT7pqDWicaghEwj2WbCJ0+JLAiKnLNK7fTjW73zfKQSSoQ==",
      "requires": {
-        "@firebase/app": "0.4.17",
+        "@firebase/app": "0.4.16",
        "@firebase/app-types": "0.4.3",
        "@firebase/auth": "0.12.0",
-        "@firebase/database": "0.5.4",
+        "@firebase/database": "0.5.3",
-        "@firebase/firestore": "1.5.3",
+        "@firebase/firestore": "1.5.2",
-        "@firebase/functions": "0.4.18",
+        "@firebase/functions": "0.4.17",
-        "@firebase/installations": "0.2.7",
+        "@firebase/installations": "0.2.6",
-        "@firebase/messaging": "0.4.11",
+        "@firebase/messaging": "0.4.10",
-        "@firebase/performance": "0.2.19",
+        "@firebase/performance": "0.2.18",
-        "@firebase/polyfill": "0.3.22",
+        "@firebase/polyfill": "0.3.21",
-        "@firebase/storage": "0.3.12",
+        "@firebase/storage": "0.3.11",
-        "@firebase/util": "0.2.28"
+        "@firebase/util": "0.2.27"
      },
      "dependencies": {
        "@firebase/database": {
          "version": "0.5.3",
          "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.5.3.tgz",
          "integrity": "sha512-TFjQ/M0T4jO24jAMU5cZAHNk3ndNfeNtGKe5PL4o/YrGYJHg3XaE2LKzU/vFrXUFLnLxqbETzXjFa4hTA6cDUg==",
          "requires": {
            "@firebase/database-types": "0.4.3",
            "@firebase/logger": "0.1.24",
            "@firebase/util": "0.2.27",
            "faye-websocket": "0.11.3",
            "tslib": "1.10.0"
          }
        }
      }
    },
    "firebase-admin": {
-      "version": "8.6.0",
+      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-8.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-8.5.0.tgz",
-      "integrity": "sha512-+JqOinU5bYUkg434LqEBXrHMrIBhL/+HwWEgbZpS1sBKHQRJK7LlcBrayqxvQKwJzgh5xs/JTInTmkozXk7h1w==",
+      "integrity": "sha512-rvgCj5Z1iFOT6K6uW37VRl4PKNpAcBFu/FIQ4Nl5bFnqbHSxf+QxzsqdsUtIxdqZU1yh2DTs2t+s5qORx/T9+g==",
      "requires": {
        "@firebase/database": "^0.5.1",
        "@google-cloud/firestore": "^2.0.0",
@@ -1571,29 +1524,6 @@
      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
      "dev": true
    },
    "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"
          }
        },
        "ms": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
        }
      }
    },
    "forwarded": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -1634,9 +1564,9 @@
      }
    },
    "gcp-metadata": {
-      "version": "3.0.0",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-2.0.2.tgz",
-      "integrity": "sha512-WP5/TZWri9TrD41jNr8ukY9dKYLL+8jwQVwbtUbmprjWuyybdnJNkbXbwqD2sdbXIVXD1WCqzfj7QftSLB6K8Q==",
+      "integrity": "sha512-dxPXBvjyfz5qFEBXzEwNmuZXwsGYfuASGYeg3CKZDaQRXdiWti9J3/Ezmtyon1OrCNpDO2YekyoSjEqMtsrcXw==",
      "optional": true,
      "requires": {
        "gaxios": "^2.0.1",
@@ -1678,25 +1608,25 @@
      "dev": true
    },
    "google-auth-library": {
-      "version": "5.2.2",
+      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-5.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-5.2.1.tgz",
-      "integrity": "sha512-0vzniXbjD5SE9aenAMqhjVR99wvqLpyd5Fw6zC3WxJ15GIMGx96tq+Cu1WRviqsnQqhrmnad6T69kv6qkj/w2Q==",
+      "integrity": "sha512-p9vO6UcRIK/zD3PxoMijaUfFYu6tvzaQwvag1K/82O42NBeAnmllyQUgqaBhcAh9FzFAVlN4bQIaO8+prpE7Vg==",
      "optional": true,
      "requires": {
        "arrify": "^2.0.0",
        "base64-js": "^1.3.0",
        "fast-text-encoding": "^1.0.0",
        "gaxios": "^2.0.0",
-        "gcp-metadata": "^3.0.0",
+        "gcp-metadata": "^2.0.0",
        "gtoken": "^4.0.0",
        "jws": "^3.1.5",
        "lru-cache": "^5.0.0"
      }
    },
    "google-gax": {
-      "version": "1.6.1",
+      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-1.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-1.5.2.tgz",
-      "integrity": "sha512-5/6uaUA9qAqRKVe2sjvMgsnU/HbfQisQTM5EZ5DfNGOYVBoTsPBdOhR2ZqEWPyqHe7YkdzVHev3FH9W3YWcORw==",
+      "integrity": "sha512-NceyDzlw4mQz6qH3bDIuRtfDAZKehM96QpnPPJ3Hur7FA/gPzpzboUYwhfP6q5obSP4LuSSDhI/76Fu51/ljtg==",
      "optional": true,
      "requires": {
        "@grpc/grpc-js": "^0.5.2",
@@ -2167,9 +2097,9 @@
      }
    },
    "gtoken": {
-      "version": "4.1.0",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-4.0.0.tgz",
-      "integrity": "sha512-wqyn2gf5buzEZN4QNmmiiW2i2JkEdZnL7Z/9p44RtZqgt4077m4khRgAYNuu8cBwHWCc6MsP6eDUn/KkF6jFIw==",
+      "integrity": "sha512-XaRCfHJxhj06LmnWNBzVTAr85NfAErq0W1oabkdqwbq3uL/QTB1kyvGog361Uu2FMG/8e3115sIy/97Rnd4GjQ==",
      "optional": true,
      "requires": {
        "gaxios": "^2.0.0",
@@ -2414,11 +2344,6 @@
      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
      "optional": true
    },
    "is-buffer": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
      "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
    },
    "is-date-object": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
@@ -3329,23 +3254,6 @@
      "requires": {
        "is-fullwidth-code-point": "^2.0.0",
        "strip-ansi": "^4.0.0"
      },
      "dependencies": {
        "ansi-regex": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
          "dev": true
        },
        "strip-ansi": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
          "dev": true,
          "requires": {
            "ansi-regex": "^3.0.0"
          }
        }
      }
    },
    "string_decoder": {
@@ -3355,11 +3263,12 @@
      "optional": true
    },
    "strip-ansi": {
-      "version": "5.2.0",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
      "dev": true,
      "requires": {
-        "ansi-regex": "^4.1.0"
+        "ansi-regex": "^3.0.0"
      }
    },
    "strip-json-comments": {
--- a/functions/package.json
+++ b/functions/package.json
@@ -10,15 +10,12 @@
    "logs": "firebase functions:log"
  },
  "engines": {
-    "node": "10"
+    "node": "8"
  },
  "dependencies": {
-    "axios": "^0.19.0",
+    "firebase": "^6.6.1",
-    "busboy": "^0.3.1",
+    "firebase-admin": "^8.0.0",
-    "firebase": "^6.6.2",
+    "firebase-functions": "^3.1.0"
    "firebase-admin": "^8.6.0",
    "firebase-functions": "^3.1.0",
    "strip-ansi": "^5.2.0"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
--- a/functions/util/admin.js
+++ b/functions/util/admin.js
@@ -1,6 +0,0 @@
 const admin = require('firebase-admin');
 admin.initializeApp();
 const db = admin.firestore();
 module.exports = { admin, db };
--- a/functions/util/config.js
+++ b/functions/util/config.js
@@ -1,9 +0,0 @@
 module.exports = {
    apiKey: "AIzaSyCvsWetg4qFdsPGfJ3LCw_QaaYzoan7Q34",
    authDomain: "twistter-e4649.firebaseapp.com",
    databaseURL: "https://twistter-e4649.firebaseio.com",
    projectId: "twistter-e4649",
    storageBucket: "twistter-e4649.appspot.com",
    messagingSenderId: "20131817365",
    appId: "1:20131817365:web:633c95fb08b16d4526b89c"
 };
--- a/functions/util/fbAuth.js
+++ b/functions/util/fbAuth.js
@@ -1,42 +0,0 @@
 const { admin, db } = require('./admin');
 // Acts as a middleman between the client and any function that you use it with
 // 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));
    let idToken;
    // Checking that the token exists in the header of the request
    if (req.headers.authorization && req.headers.authorization.startsWith('Bearer ')) {
        idToken = req.headers.authorization.split('Bearer ')[1];
    } else {
        console.error('No token found');
        return res.status(403).json({ error: 'Unauthorized'});
    }
    // Checking that the token is valid in firebase
    admin.auth().verifyIdToken(idToken)
        .then((decodedToken) => {
            req.user = decodedToken;
            return db.collection('users').where('userId', '==', req.user.uid)
            .limit(1)
            .get();
        })
        .then((data) => {
            req.user.handle = data.docs[0].data().handle;  // Save username
            req.user.imageUrl = data.docs[0].data().imageUrl;
            req.userData = data.docs[0].data();  // Stores all user data from the database
            return next();
        })
        .catch((err) => {
            console.error('Error while verifying token ', err);
            return res.status(403).json(err);
        });
 };
--- a/functions/util/validator.js
+++ b/functions/util/validator.js
@@ -1,52 +0,0 @@
 const isEmail = (str) => {
  const emailRegEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (str.match(emailRegEx)) return true;
  else return false;
 };
 const isEmpty = (str) => {
  if (str.trim() === "") return true;
  else return false;
 };
 exports.validateUpdateProfileInfo = (req) => {
  const newData = req.body;
  // const oldData = req.userData;
  let errors = {};
  let profileData = req.userData;
  // ?: Should users be able to change their handles and emails?
  // Deletes any unused keys so that they aren't stored in the database
  if (newData.firstName) {
    profileData.firstName = newData.firstName.toString().trim();
  } else {
    delete profileData.firstName;
  }
  if (newData.lastName) {
    profileData.lastName = newData.lastName.toString().trim();
  } else {
    delete profileData.lastName;
  }
  if (newData.bio) {
    profileData.bio = newData.bio.toString().trim();
  } else {
    delete profileData.bio;
  }
  if (isEmpty(newData.email)) {
    errors.email = "Must not be empty.";
  } else if (!isEmail(newData.email)) {
    errors.email = "Must be a valid email.";
  } else {
    profileData.email = newData.email;
  }
  return {
    errors,
    valid: Object.keys(errors).length === 0 ? true : false,
    profileData
  };
 };
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,15 +16,6 @@
      "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",
@@ -173,24 +164,6 @@
        "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",
@@ -231,16 +204,6 @@
      "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",
--- a/twistter-frontend/public/404.html
+++ b/twistter-frontend/public/404.html
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,78 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>
    <!-- update the version number as needed -->
    <script defer src="/__/firebase/6.6.0/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/6.6.0/firebase-auth.js"></script>
    <script defer src="/__/firebase/6.6.0/firebase-database.js"></script>
    <script defer src="/__/firebase/6.6.0/firebase-messaging.js"></script>
    <script defer src="/__/firebase/6.6.0/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>
    <style media="screen">
      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
      @media (max-width: 600px) {
        body, #message { margin-top: 0; background: white; box-shadow: none; }
        body { border-top: 16px solid #ffa100; }
      }
    </style>
  </head>
  <body>
    <div id="message">
      <h2>This is a test message!</h2>
      <h2>Welcome</h2>
      <h1>Firebase Hosting Setup Complete</h1>
      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
      <div id="like_button_container"></div>
    </div>
    <p id="load">Firebase SDK Loading&hellip;</p>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
        // // The Firebase SDK is initialized and available here!
        //
        // firebase.auth().onAuthStateChanged(user => { });
        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
        // firebase.messaging().requestPermission().then(() => { });
        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
        //
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
        try {
          let app = firebase.app();
          let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
          document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
        } catch (e) {
          console.error(e);
          document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
        }
      });
    </script>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- Load our React component. -->
    <script src="like_button.js"></script>
    <script src="loader.js"></script>
  </body>
 </html>
--- a/public/like_button.js
+++ b/public/like_button.js
@@ -0,0 +1,30 @@
 'use strict';
 const e = React.createElement;
 class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            liked: false
        };
    }
    render() {
        if (this.state.liked) {
            return 'You liked this.';
        }
        return e(
            'button', {
                onClick: () => this.setState({
                    liked: true
                })
            },
            'Like'
        );
    }
 }
 const domContainer = document.querySelector('#like_button_container');
 ReactDOM.render(e(LikeButton), domContainer);
--- a/screenshots/00.png
+++ b/screenshots/00.png
--- a/screenshots/01.png
+++ b/screenshots/01.png
--- a/screenshots/02.png
+++ b/screenshots/02.png
--- a/screenshots/03.png
+++ b/screenshots/03.png
--- a/screenshots/04.png
+++ b/screenshots/04.png
--- a/screenshots/05.png
+++ b/screenshots/05.png
--- a/screenshots/06.png
+++ b/screenshots/06.png
--- a/screenshots/07.png
+++ b/screenshots/07.png
--- a/twistter-e4649-firebase-adminsdk-pgjve-1e57494429.json
+++ b/twistter-e4649-firebase-adminsdk-pgjve-1e57494429.json
@@ -0,0 +1,12 @@
 {
  "type": "service_account",
  "project_id": "twistter-e4649",
  "private_key_id": "1e57494429e4fd7d17f6fc28524e14b8e5227596",
  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCyRdMZwXrpf3HB\nsVrGZVoPt+S+ahkT4SCCEWV/Q4O4hVyW277Rs0p7k5ZkZfkhcVVBUqKGMgW/Esvz\npx0VIgpg3gg308kMRmC3MGzYbodjynVyDHatyAZhhUi9cg0N2K9+vSsW5eSmWROe\nfVvB8hvr6m5xGVdJFA7DV4/0vm2cfy+Q/FlFb6vFmQTZtPZzGFf5BKoNMe7pMxey\n4zspAIZgRmxWDbAqqzX0PYk/WbXFgH/wn2X25S+ArHhoay2Hms65/NbWCV6mpFUJ\nYqzrlCn/WcwXGAm7tjmu00yD+bARabImh8R7+PSBaHMQ+SGdri2snIXWsvB/xi9/\nSNFqzHynAgMBAAECggEAVty/zapg1bnTt0FPziBfIA6FpaPzoSSN3uJUFozSdwuA\nAD+E/A9EiO7yFew71egvVrtJVmK0OxQRDSDNglkKPoWg8na+XL1D7a5qMpC0ZlKl\nJBNfljBCr6yuMySJqMf+Rp4siyUr4kO/0/cXyOnLYglhk7j5tzFPOi4FhgZtSRU9\nYckk5wwcBObUFE0Rmqf0gPcI9WuFUkusIjz3rjuEju1/U6E/VV5gHmMuQy3f9LHB\nnsiLAobx9+TGgs12CvkjWYpW5raUCCn5z/EYNPZSt7rg9CSWqXW009HCfTqi6i7o\nNpZ7qpp5DVQdHNFJunSGvI+k44+i8OE7HEY4xXt+OQKBgQDZ/E1QwJQoHuzPkrGW\nAc0a+NQeG8NwaXwsezlvYXMTbL27SxKXC3dzPT1WgNUKpaKj3wLJPar4NgPPSPi3\nqgmcvMqgwm4B+HPbXc1oxBS7/jD3pWJVyPO9Re17Uc0RYV/DORQhWe1Yq7TyMHvl\nbD/KqIvOxswigVxK4JMIxp4s7wKBgQDRXJfb4BHdR7CGfuTVQ19gH5uLgrK9ezBk\nQOLK+u9yBpoKyYSnD3OH/i0wG5bm3rUegzvwHGKKhDfiLbajMIt04n2DuVUm57HQ\n+Jca29V8XMWfhTbu3kDl+OOFmLvPCwg8C9edNTJWUVYu3EbwsyzCQY5TDroWGQdF\n6cQIkAIbyQKBgQCUtWd1UHuCR16cWOHniQEIhnoGtEAHHx9EJShQkLV1qfhhnlxn\nSL5LkpqWubsc0VR74LbA3N4XCJpevdRXT5vRHoZJV3q+w2UeYQaxkxrmCQoU1/GW\nvklxdRQGzg5M7hXrU7Qk8HlXxYPiuSq8n7WBJqyB+uLmI0P4HO6RzRW5ZwKBgBkr\nf5pQkvU+dCuHP+2fvuyogCPCn8iF8ehroJh0mKrlvklDtu36vpH/7eDVwEubRL0Z\nW/BfCT3L7YgEpOtzn6B6xko60tDtlAQijtAM09qysJOgCV2oXLcJOBlMpm+azO+j\nINXmmlmkR680jlbLw7rK9NhpcdfMRIKUOxwobAh5AoGBAJMN6n7Hy8nJRJZ18iHY\n3hEkVbKrLLMMHFDQj5BZQCeAp1v0Fj30RYJWS4hTzR9ht0MtdmPub460lh9hhqCM\nl3UnCJoz00ApF3Z2FRN/l0KpCFD9Gw2Hjyc3u9sEUpqd8G3cg3IZE6eZ6CZWljFT\nHcuQ2cTFdB8bq8oLUxXeY3Yv\n-----END PRIVATE KEY-----\n",
  "client_email": "firebase-adminsdk-pgjve@twistter-e4649.iam.gserviceaccount.com",
  "client_id": "102241295911303209723",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-pgjve%40twistter-e4649.iam.gserviceaccount.com"
 }
--- a/twistter-e4649-firebase-adminsdk-pgjve-382fc005e1.json
+++ b/twistter-e4649-firebase-adminsdk-pgjve-382fc005e1.json
@@ -1,12 +0,0 @@
 {
  "type": "service_account",
  "project_id": "twistter-e4649",
  "private_key_id": "382fc005e17340a21dd39079feca75371330644d",
  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDL1bwTpEluR6dJ\nVfS/K1d76j2I3Wrn4qSbrTYm4/cAPBPlsBRO0bwrkhr+g0I6rwW/fFz8udjNAFB1\nfDfz769buR6go5us71I5LxMNviIhzFr59ZsEkcnUCgW8G7koicLEjWdstI4lJxZT\nRRolH+SFpPwsQAY399zjdBiCC8STbavVVhe+ChEDl/S2K72W7A7nWSMbLsyGsz2o\nQ9uIG3onwFNE7WRIeObWCxSBKlydMmTJ+p/CsTdFY4fUHb97QsMEmzRJox10kmyt\nP9l5wfJ2wUYvRXRJKq7Mwx1UnLduXP2oe/XvR5fzJLJ780HO6BNBf5IKcTHXHVBA\ne6ZtiL5dAgMBAAECggEAFvfN1NttjXL0KKak3hMA1+z8Y2WqXC1aUFMOMlz8Qhct\nmXNjy8CFAYEvGtVTgHqkR9Vi7PShYfLSc3U8diI155H5H4S6pUaPmfNHTwRzosyn\ncQRPJA6sEqvRGvHMxVfwjbvultMpiTTZpnxiMSNiLqT5PUs26CuSb5bErt1V7dP5\nn/lhY+4rzfXSrw38ZsO/gEvLZ/7iRA+JZgqE3Qs2cD5idxqqOcOLLiW741JpXTmd\n5ug/urJgSyvz+cNo3yHnajEtAxiSfkpU4sUHZ/WWqaRGWxpt3XWILtR9Q/4afPeM\n/T82YvddoW5pUwDpgvZxdVYjopuoxvnS298L0AGySQKBgQDqDD7Yh6SbOR3w4ZN9\nRO7q5KiJbyZmVdZ3lLZddsL/vto9JkUtnLDOMpYnb2TezGfN6ErzAkRQCSUsWK4m\nERbSK6oyUvevhlt/gHGP34uc/OCxGk2D7WCAS3s54ofDt2369tzIpGjsnkYM+h3b\nuZ5lFoWHG1YM3JtgcIIU6UygTwKBgQDe9ArV08wPDuXf4rcldmImQDB7xhGcg9xU\njAKEn5FZW1mvmBy3Sq1qpZj0baZz6eEDn6FBLwH1Ke5gdfrd8WnESUNnFnBBqpA1\nospIgUmKZ1sjyly9CHMQ11Kbzt7+kA9GYZrMbaMjS8M18qFEBZ7CoPLv5DLyabJW\nOkPzTwb/kwKBgQDR3fUkmEzj202bx8pHE97gxfTSd9aJAQN06uaz3GByjyKGnqB9\ni/mGjBnUdrCOj9+s5VT/ntK+qdSpdUODYuOBxiGxSnBK9kFpjTVHe35nYOHiLOHB\nIMPdhtGSUCzJNNvrpBzJ1ZM4SZwq2sSXWFRN9On7Amog0liJG5mpQqGxRQKBgHmP\nzFycF3XaZKH2xm8ppgg/FXBXJYEWMEr07+aJ7kEvWq4wHPAfSoCMe+JB6vDmg2Zr\nYgvdao7W5v83NKpQl5+LZrHNfTWAnxJviSWRQJyzD/Fqw7fZ5Is5K/SCDfn0aC+y\nxilSWhHDnFNM0Hr7KX3rLap43QJpePAk4qnF3AX7AoGBAOe5C1VMKoTapnxvo/FI\nBCvXw05SSEExfXVR0ryoqUxgu1asCkYyJSoWxOZQ+33npQ1/zV1mCXn/lNZcyveW\nZ5/cUw71grW8KBYFrW7LeQIzjZb7xPI3Z4EV0uYd2b69GkQk1buHj/gsswRhGEvx\nJM1DN1SCenbGcVLprM0vVelp\n-----END PRIVATE KEY-----\n",
  "client_email": "firebase-adminsdk-pgjve@twistter-e4649.iam.gserviceaccount.com",
  "client_id": "102241295911303209723",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-pgjve%40twistter-e4649.iam.gserviceaccount.com"
 }
--- a/twistter-frontend/README.md
+++ b/twistter-frontend/README.md
@@ -1,10 +1,5 @@
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 Cloud: https://us-central1-twistter-e4649.cloudfunctions.net/api
 Local: http://localhost:5001/twistter-e4649/us-central1/api (npm install --save firebase)
 Below you will find some information on how to perform common tasks.<br>
 You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
--- a/twistter-frontend/package-lock.json
+++ b/twistter-frontend/package-lock.json
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -3,28 +3,10 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.4.3",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/styles": "^4.5.0",
    "@material-ui/system": "^4.5.0",
    "axios": "^0.19.0",
    "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-router-dom": "^5.0.1",
-    "react-redux": "^7.1.1",
+    "react-scripts": "0.9.5"
    "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",
    "underscore": "^1.9.1"
  },
  "devDependencies": {},
  "scripts": {
@@ -32,18 +14,5 @@
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
-  },
+  }
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5001/twistter-e4649/us-central1/api"
 }
--- a/twistter-frontend/public/index.html
+++ b/twistter-frontend/public/index.html
@@ -5,13 +5,6 @@
  <head>
    <meta charset="utf-8">
    <title>Twistter</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
--- a/twistter-frontend/redux/actions/dataActions.js
+++ b/twistter-frontend/redux/actions/dataActions.js
--- a/twistter-frontend/redux/actions/userActions.js
+++ b/twistter-frontend/redux/actions/userActions.js
--- a/twistter-frontend/redux/reducers/dataReducer.js
+++ b/twistter-frontend/redux/reducers/dataReducer.js
--- a/twistter-frontend/redux/reducers/uiReducer.js
+++ b/twistter-frontend/redux/reducers/uiReducer.js
--- a/twistter-frontend/redux/reducers/userReducer.js
+++ b/twistter-frontend/redux/reducers/userReducer.js
--- a/twistter-frontend/redux/store.js
+++ b/twistter-frontend/redux/store.js
@@ -1,18 +0,0 @@
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import userReducer from './reducers/userReducer';
 import dataReducer from './reducers/dataReducer';
 import uiReducer from './reducers/uiReducer';
 const initialState = {};
 const middleware = {thunk};
 const reducers = combineReducers({
    user: userReducer,
    data: dataReducer,
    UI: uiReducer
 });
 //const store = createStore(reducers, )
--- a/twistter-frontend/redux/types.js
+++ b/twistter-frontend/redux/types.js
--- a/twistter-frontend/src/App.css
+++ b/twistter-frontend/src/App.css
@@ -1,7 +1,3 @@
 html,
 body {
  background-color: rgb(245, 245, 245);
 }
 .app {
  font-family: "Segoe UI";
  font-size: large;
@@ -26,7 +22,7 @@ body {
  white-space: nowrap;
 }
-.signup {
+.register {
  background-color: #1da1f2;
  border: 1px solid #fff;
  color: #fff;
@@ -44,11 +40,4 @@ body {
  height:40px;
  border: 0px;
  padding: 10px;
-}
+}
 .container {
  margin: 80px auto 0 auto;
  max-width: 1200px;
  color: #1da1f2;
 }
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -1,94 +1,182 @@
-/* eslint-disable */
+import React, { Component } from 'react';
-import React, { Component } from "react";
+import logo from './twistter-logo.png';
-import "./App.css";
+import { BrowserRouter as Router } from 'react-router-dom';
-import axios from "axios";
+import Route from 'react-router-dom/Route';
 import './App.css';
 import Writing_Microblogs from './Writing_Microblogs.js'
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+var validEmail = true;
-import Navbar from "./components/layout/NavBar";
+var validUsername = false;
-import jwtDecode from "jwt-decode";
+var validPassword = false;
 var passwordsMatch = false;
-// Redux
+const emailBlur = () => {
-import { Provider } from "react-redux";
+  //var email = document.getElementById("email");
 import store from "./redux/store";
 import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
 import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
 import themeObject from "./util/theme";
 import { SET_AUTHENTICATED } from "./redux/types";
 import { logoutUser, getUserData } from "./redux/actions/userActions";
-// Components
+  /*if() {
-import AuthRoute from "./util/AuthRoute";
+    validEmail = true;
  }
  else {
    validEmail = false;
    alert("Email is invalid.");
  }*/
-// Pages
+  if(validEmail && validUsername && validPassword && passwordsMatch) {
-import home from "./pages/Home";
+    document.getElementById("submit").disabled = false;
-import signup from "./pages/Signup";
+  }
-import login from "./pages/Login";
+  else {
-import user from "./pages/user";
+    document.getElementById("submit").disabled = true;
-import logout from "./pages/Logout";
+  }
-import Delete from "./pages/Delete";
+}
 import writeMicroblog from "./Writing_Microblogs.js";
 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);
+const usernameBlur = () => {
  var username = document.getElementById("username");
-const token = localStorage.FBIdToken;
+  if(username.value.length >= 3 && username.value.length <= 50) {
-if (token) {
+    validUsername = true;
-  try {
+  }
-    const decodedToken = jwtDecode(token);
+  else {
-    if (decodedToken.exp * 1000 < Date.now()) {
+    validUsername = false;
-      store.dispatch(logoutUser());
+    alert("Username must be between 3 and 50 characters long.");
-      window.location.href = "/login";
+  }
-    } else {
+
-      store.dispatch({ type: SET_AUTHENTICATED });
+  if(validEmail && validUsername && validPassword && passwordsMatch) {
-      axios.defaults.headers.common["Authorization"] = token;
+    document.getElementById("submit").disabled = false;
-      store.dispatch(getUserData());
+  }
-    }
+  else {
-  } catch (invalidTokenError) {
+    document.getElementById("submit").disabled = true;
-    store.dispatch(logoutUser());
+  }
-    window.location.href = "/login";
+}
 const passwordBlur = () => {
  var password = document.getElementById("password");
  if(password.value.length >= 8 && password.value.length <= 20) {
    validPassword = true;
  }
  else {
    validPassword = false;
    alert("Password must be between 8 and 20 characters long.");
  }
  if(validEmail && validUsername && validPassword && passwordsMatch) {
    document.getElementById("submit").disabled = false;
  }
  else {
    document.getElementById("submit").disabled = true;
  }
 }
 const confirmPasswordBlur = () => {
  var password = document.getElementById("password");
  var confirmPassword = document.getElementById("confirmPassword");
  if(password.value === confirmPassword.value) {
    passwordsMatch = true;
  }
  else {
    passwordsMatch = false;
    alert("Passwords must match.");
  }
  if(validEmail && validUsername && validPassword && passwordsMatch) {
    document.getElementById("submit").disabled = false;
  }
  else {
    document.getElementById("submit").disabled = true;
  }
 }
 class App extends Component {
  render() {
    return (
-      <MuiThemeProvider theme={theme}>
+      <Router>
-        <Provider store={store}>
+        <div className="app">
-          <Router>
+          
-            <div className="container">
+          
              <Navbar />
            </div>
            <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} />
                <AuthRoute exact path="/login" component={login} />
                <AuthRoute exact path="/" component={home} />
-                <Route exact path="/logout" component={logout} />
+        
-                <Route exact path="/delete" component={Delete} />
+          
          <Route path="/" exact render={
            () => {
              return (
                <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>
-                <Route exact path="/home" component={home} />
+                  <br/><br/><br/><br/>
                <Route exact path="/user" component={user} />
                <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} />
+                  <div>                    
-              </Switch>
+                    <b>Join today or sign in if you already have an account.</b> 
-            </div>
+                    <br/><br/>
-          </Router>
+                    <button class="authButtons register"><a href="/register">Sign up</a></button> 
-        </Provider>
+                    <br/><br/>
-      </MuiThemeProvider>
+                    <button class="authButtons login"><a href="/login">Sign in</a></button>
                  </div>
                </div>
              )
            }
          }/>
          <Route path="/register" exact render={
            () => {
              return (
                <div>
                  <img src={logo} className="app-logo" alt="logo" />
                  <br/><br/>
                  <b>Create your account</b>
                  <br/><br/>
                  <input class="authInput" id="email" placeholder="Email" onBlur={() => emailBlur()}></input>
                  <br/><br/>
                  <input class="authInput" id="username" placeholder="Username" onBlur={() => usernameBlur()}></input>
                  <br/><br/>
                  <input class="authInput" id="password" placeholder="Password" onBlur={() => passwordBlur()}></input>
                  <br/><br/>
                  <input class="authInput" id="confirmPassword" placeholder="Confirm Password" onBlur={() => confirmPasswordBlur()}></input>
                  <br/><br/>
                  <button class="authButtons register" id="submit" onclick="" disabled>Sign up</button>
                </div>
              )
            }
          }/>
          <Route path="/login" exact render={
            () => {
              return (
                <div>
                  <img src={logo} className="app-logo" alt="logo" />
                  <br/><br/>
                  <b>Log in to Twistter</b>
                  <br/><br/>
                  <input class="authInput" placeholder="Username or email"></input>
                  <br/><br/>
                  <input class="authInput" placeholder="Password"></input>
                  <br/><br/>
                  <button class="authButtons register" onclick="">Sign in</button>
                </div>
              )
            }
          }/>
          <Route path="/home" exact render={
            () => {
              return (
                <Writing_Microblogs/>
              )
            }
          }/>
        </div>
      </Router>
    );
  }
 }
-export default App;
+export default App;
--- a/twistter-frontend/src/Userline.js
+++ b/twistter-frontend/src/Userline.js
@@ -1,64 +0,0 @@
 import React, { Component } from "react";
 // 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';
 // var moment = require('moment');
 class Userline extends Component {
    constructor(props)
    {
        super(props);
        this.state = {
            microBlogs : [],
        }
    }
     componentDidMount() {
         axios.get('/getallPostsforUser')
            .then(res => {
                const post = res.data;
                this.setState({microBlogs : post})
            })
    }
     render() {
         const sortedPosts = (this.state.microBlogs).sort((a,b) =>
             -a.createdAt.localeCompare(b.createdAt)
         )
        return (
            <div>
            <div style={{fontsize: "13px", textAlign: "left", marginLeft: "14px"}}>
                <p>Userline</p>
            </div>
            <Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign="left" padding="5px" flexWrap="wrap" flexDirection="row" >
                <div style={{flexWrap: "wrap", flex: "1", flexDirection: "row", wordBreak: "break-word"}}>
                <p>
                {sortedPosts.map((microBlog) => <p>Microblog Title: {microBlog.microBlogTitle}
                                                          <br></br>When post was created: {microBlog.createdAt.substring(0,10) + 
                                                          " " + microBlog.createdAt.substring(11,19)}
                                                          <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(", ")}               
                </p>)} 
                </p>
                </div>
            </Box>
            </div>
                )
        }
 }
 export default Userline;
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -1,195 +1,72 @@
 import React, { Component } from "react";
-// import { BrowserRouter as Router } from "react-router-dom";
+import { BrowserRouter as Router } from 'react-router-dom';
-// import Route from "react-router-dom/Route";
+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);
+    constructor(props) {
-    this.state = {
+        super(props);
-      value: "",
+        this.state = {
-      title: "",
+            value: '',
-      topics: "",
+            title: '',
-      characterCount: 250,
+            characterCount: 10
-      loading: false
+            
-    };
+        };
-    this.handleChange = this.handleChange.bind(this);
+        this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleChangeforPost = this.handleChangeforPost.bind(this);
+        this.handleChangeforPost = this.handleChangeforPost.bind(this);
-    this.handleChangeforTopics = this.handleChangeforTopics.bind(this);
+    }
  }
-  handleChange(event) {
+    handleChange(event) {
-    this.setState({ title: event.target.value });
+        this.setState( {title: event.target.value });
-  }
+    }
-  handleChangeforTopics(event) {
+    handleSubmit(event) {
-    this.setState({ topics: event.target.value });
+        alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
-  }
+        event.preventDefault();
    }
-  handleSubmit = (event) => {
+    handleChangeforPost(event) {
-    // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
+        this.setState({value: event.target.value })
-    const postData = {
+    }
      body: this.state.value,
      userImage: "bing-url",
      microBlogTitle: this.state.title,
      microBlogTopics: this.state.topics.split(", ")
    };
-    this.setState({
+    handleChangeforCharacterCount(event) {
-      loading: true
+        const charCount = event.target.value.length
-    })
+        const charRemaining = 10 - charCount
-    const headers = {
+        this.setState({characterCount: charRemaining })
-      headers: { "Content-Type": "application/json" }
+    }
    };
    let postPromise = axios
      .post("/putPost", postData, headers) // TODO: add topics
      .then(res => {
        // 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();
    // topicPromises.push(postPromise);
    Promise.all([postPromise])
      .then(() => {
        this.setState({ 
          value: "", 
          title: "", 
          characterCount: 250, 
          topics: "",
          loading: false
        });
      })
      .catch((error) => {
        console.log(error);
      })
  }
-  handleChangeforPost(event) {
+    render() {
        return (
            <div>
            <div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "30px" }}>         
             <form>
                    <input type="text" placeholder="Enter Microblog Title" value={this.state.title} onChange={this.handleChange} />
            </form>
             </div>
             <div style={{ width: "200px", marginLeft: "50px"}}>        
                <form onSubmit={this.handleSubmit}>
                    <textarea value={this.state.value} maxLength="10" placeholder= "Write Microblog here..." 
                        onChange = { (e) => { this.handleChangeforPost(e); this.handleChangeforCharacterCount(e) } } cols={40} rows={20} />      
                 <div style={{ fontSize: "14px", marginRight: "-100px"}} >
                    <p2>Characters Left: {this.state.characterCount}</p2>
                 </div>
                 <div style={{ marginRight: "-100px"  }}>        
                    <button onClick>Share Post</button> 
                 </div>
                </form>
             </div>
             </div>
        );
    }
    this.setState({ value: event.target.value });
  }
  handleChangeforCharacterCount(event) {
    const charCount = event.target.value.length;
    const charRemaining = 250 - charCount;
    this.setState({ characterCount: charRemaining });
  }
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.container}>
        <form noValidate className={classes.form}>
          <TextField
            id="title"
            name="title"
            label="Title"
            className={classes.textField}
            value={this.state.title}
            variant="outlined"
            onChange={this.handleChange}
            fullWidth
            autoComplete='off'
          />
          <TextField
            id="topics"
            name="topics"
            label="Topics"
            className={classes.textField}
            value={this.state.topics}
            variant="outlined"
            onChange={this.handleChangeforTopics}
            color="primary"
            fullWidth
            autoComplete='off'
          />
          <TextField
            id="content"
            name="content"
            label="Content"
            color="primary"
            className={classes.textField}
            value={this.state.value}
            helperText={`${this.state.characterCount} characters left`}
            multiline
            rows="9"
            variant="outlined"
            inputProps={{
              maxLength: 250
            }}
            onChange={(e) => {
              this.handleChangeforPost(e);
              this.handleChangeforCharacterCount(e);
            }}
            fullWidth
            autoComplete='off'
          />
          <Button
            className={classes.button}
            onClick={this.handleSubmit}
            disabled={this.state.loading}
            variant="outlined"
            color="primary"
            >
              Share Post
            {this.state.loading && <CircularProgress size={30} className={classes.progress} />}
          </Button>
        </form>
      </div>
    );
  }
 }
-export default withStyles(styles)(Writing_Microblogs);
+export default Writing_Microblogs;
--- a/twistter-frontend/src/components/layout/NavBar.js
+++ b/twistter-frontend/src/components/layout/NavBar.js
@@ -1,89 +0,0 @@
 /* eslint-disable */
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 // Material UI stuff
 import AppBar from "@material-ui/core/AppBar";
 import ToolBar from "@material-ui/core/Toolbar";
 import Button from "@material-ui/core/Button";
 import withStyles from "@material-ui/core/styles/withStyles";
 // Redux stuff
 import { logoutUser } from "../../redux/actions/userActions";
 import { connect } from "react-redux";
 const styles = {
  form: {
    textAlign: "center"
  },
  textField: {
    marginBottom: 30
  },
  pageTitle: {
    marginBottom: 40
  },
  button: {
    positon: "relative",
    marginBottom: 30
  },
  progress: {
    position: "absolute"
  }
 };
 export class Navbar extends Component {
  render() {
    const authenticated = this.props.user.authenticated;
    return (
      <AppBar>
        <ToolBar>
          <Button component={Link} to="/">
            Home
          </Button>
          {authenticated && (
            <Button component={Link} to="/user">
              Profile
            </Button>
          )}
          {authenticated && (
            <Button component={Link} to="/dm">
              DMs
            </Button>
          )}
          {!authenticated && (
            <Button component={Link} to="/login">
              Login
            </Button>
          )}
          {!authenticated && (
            <Button component={Link} to="/signup">
              Sign Up
            </Button>
          )}
          {authenticated && (
            <Button component={Link} to="/search">
              Search
            </Button>
          )}
          {authenticated && (
            <Button style={{position: "absolute", right: 30}} component={Link} to="/logout">
              Logout
            </Button>
          )}
        </ToolBar>
      </AppBar>
    );
  }
 }
 const mapStateToProps = state => ({
  user: state.user
 });
 Navbar.propTypes = {
  user: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired
 };
 export default connect(mapStateToProps)(withStyles(styles)(Navbar));
--- a/twistter-frontend/src/components/profile/Profile.js
+++ b/twistter-frontend/src/components/profile/Profile.js
@@ -1,48 +0,0 @@
 import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
 import axios from "axios";
 import { connect } from 'react-redux';
 //MUI
 import withStyles from "@material-ui/core/styles/withStyles";
 import Card from "@material-ui/core/CardMedia";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
 import { Paper } from "@material-ui/core";
 const styles = theme => ({
  ...theme
 });
 class Profile extends Component {
  state = {
    profile: null
  };
  componentDidMount() {
    axios
      .get("/user")
      .then(res => {
        console.log(res.data.userData.credentials.handle);
        this.setState({
          profile: res.data.userData.credentials.handle
        });
      })
      .catch(err => console.log(err));
  }
  render() {
    let profileMarkup = this.state.profile ? (
        <p>
        <Typography variant='h5'>{this.state.profile}</Typography>
        </p>) : <p>loading profile...</p>
    return profileMarkup;
  }
 }
 const mapStateToProps = state => ({
  user: state.user,
  classes: PropTypes.object.isRequired
 });
 export default connect(mapStateToProps)(withStyles(styles)(Profile));
--- a/twistter-frontend/src/components/topic/ChipsArray.js
+++ b/twistter-frontend/src/components/topic/ChipsArray.js
@@ -1,54 +0,0 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
 import Paper from '@material-ui/core/Paper';
 // TODO: fix the style
 const styles = makeStyles(theme => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    flexWrap: 'wrap',
    padding: theme.spacing(0.5),
  },
  chip: {
    margin: theme.spacing(0.5),
  },
 }));
 export default function ChipsArray() {
  const classes = useStyles();
  const [chipData, setChipData] = React.useState([
    { key: 0, label: 'Angular' },
    { key: 1, label: 'jQuery' },
    { key: 2, label: 'Polymer' },
    { key: 3, label: 'React' },
    { key: 4, label: 'Vue.js' },
  ]);
  const handleDelete = chipToDelete => () => {
    if (chipToDelete.label === 'React') {
      alert('Why would you want to delete React?! :)');
      return;
    }
    setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
  };
  return (
    <Paper className={classes.root}>
      {chipData.map(data => {
        return (
          <Chip
            key={data.key}
            label={data.label}
            onDelete={handleDelete(data)}
            className={classes.chip}
          />
        );
      })}
    </Paper>
  );
 }
--- a/twistter-frontend/src/images/no-img.png
+++ b/twistter-frontend/src/images/no-img.png
--- a/twistter-frontend/src/images/twistter-logo.png
+++ b/twistter-frontend/src/images/twistter-logo.png
--- a/twistter-frontend/src/index.css
+++ b/twistter-frontend/src/index.css
@@ -0,0 +1,5 @@
 body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
 }
--- a/twistter-frontend/src/index.js
+++ b/twistter-frontend/src/index.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import './index.css';
 ReactDOM.render(
  <App />,
  document.getElementById('root')
-);
+);
 serviceWorker.unregister();
--- a/twistter-frontend/src/pages/Delete.js
+++ b/twistter-frontend/src/pages/Delete.js
@@ -1,60 +0,0 @@
 /* eslint-disable */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 // Material UI stuff
 import Button from "@material-ui/core/Button";
 import withStyles from "@material-ui/core/styles/withStyles";
 // Redux stuff
 //import { logoutUser } from "../redux/actions/userActions";
 import { deleteUser } from "../redux/actions/userActions";
 import { connect } from "react-redux";
 const styles = {
  form: {
    textAlign: "center"
  },
  textField: {
    marginBottom: 30
  },
  pageTitle: {
    marginBottom: 40
  },
  button: {
    positon: "relative",
    marginBottom: 30
  },
  progress: {
    position: "absolute"
  }
 };
 export class Delete extends Component {
  componentDidMount() {
    //this.props.logoutUser();
    this.props.deleteUser();
    this.props.history.push('/');
  }
  render() {
    return null;
  }
 }
 const mapStateToProps = (state) => ({
  user: state.user
 });
 //const mapActionsToProps = { logoutUser };
 const mapActionsToProps = { deleteUser };
 Delete.propTypes = {
  //logoutUser: PropTypes.func.isRequired,
  deleteUser: PropTypes.func.isRequired,
  user: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired
 };
 export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Delete));
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -1,551 +0,0 @@
 /* eslint-disable */
 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 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";
 // 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() {
    this.setState({ loading: true });
    let userPromise = axios
      .get("/user")
      .then(res => {
        console.log(res.data.credentials.following);
        let list = [];
        res.data.credentials.following.forEach(element => {
          list.push(element.handle);
        });
        this.setState({
          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;
    }
    console.log(hiddenBool);
    let postMarkup = this.state.posts ? ( this.state.following === undefined || this.state.following === null ? <Typography>You aren't following anybody right now</Typography> :
      this.state.posts.map(post => !post.hidden && this.state.following && (this.state.following.includes(post.userHandle) || post.userHandle === "Admin") ? (
            <Card className={classes.card} key={post.postId}>
              <CardContent>
                <Typography>
                  {/* {
                    this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
                                          (<img src={noImage} height="50" width="50"/>)
                  } */}
                  {
                    post.profileImage ? (<img src={post.profileImage} height="50" width="50" />) : 
                                        (<img src={noImage} height="50" width="50"/>)
                  }
                </Typography>
                <Typography variant="h5"><b>{post.userHandle}</b></Typography>
                <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
                <br />
                <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
                <Typography variant="body2">{post.quoteBody}</Typography>
                <br />
                <Typography variant="body2">{post.body}</Typography>
                <br />
                <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics.join(", ")}</Typography>        
                <br />
                {!hiddenBool &&
                  <Button
                  onClick={this.flagPost}
                  data-key={post.postId}
                  variant = "contained"
                  color = "primary"
                >
                  Hide Post
                </Button>
                }
                <Typography id={post.postId} data-likes={post.likeCount} variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
                {/* <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like> */}
                <Button
                  onClick={this.handleClickLikeButton}
                  data-key={post.postId}
                  disabled={loading}
                  variant="outlined"
                  color="primary"
                >{
                  this.state.likes && this.state.likes.includes(post.postId) ? 'Unlike' : 'Like'
                  }</Button>
                <Quote microblog = {post.postId}></Quote> 
                {/* <button>Quote</button> */}
                {/* <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography> */}
              </CardContent>
            </Card>
        ) : (
              <p></p>
            )
    )
    ) : (
      <p>Loading post...</p>
    );
    return authenticated ? (
      this.state.loading ? (
        <CircularProgress
          size={60}
          style={{ marginTop: "300px" }}
        ></CircularProgress>
      ) : (
        <Grid container>
          <Grid item sm={4} xs={8}>
            <Writing_Microblogs />
          </Grid>
          <Grid item sm={4} xs={8}>
            {postMarkup}
          </Grid>
        </Grid>
      )
    ) : 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 />
        <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>
    );
  }
 }
 class Quote extends Component {
  constructor(props) {
    super(props);
    this.state = {
      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);
  }
  handleSubmitWithoutPost(event) {
    const post = {
      userImage: "bing-url"
    };
    const headers = {
      headers: { "Content-Type": "application/json" }
    };
    axios
      .post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
      .then(res => {
        console.log(res.data);
      })
      .catch(err => {
        console.error(err);
      });
    event.preventDefault();
  }
  handleOpenModal() {
    this.setState({ showModal: true });
  }
  handleCloseModal() {
    this.setState({ showModal: false, characterCount: 250, value: "" });
  }
  handleChangeforPost(event) {
    this.setState({ value: event.target.value });
  }
  handleChangeforCharacterCount(event) {
    const charCount = event.target.value.length;
    const charRemaining = 250 - charCount;
    this.setState({ characterCount: charRemaining });
  }
  handleSubmit(event) {
    const quotedPost = {
      quoteBody: this.state.value,
      userImage: "bing-url"
    };
    const headers = {
      headers: { "Content-Type": "application/json" }
    };
    axios
      .post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
      .then(res => {
        console.log(res.data);
      })
      .catch(err => {
        console.error(err);
      });
    event.preventDefault();
    this.setState({ showModal: false, characterCount: 250, value: "" });
  }
  render() {
    return (
      <div>
        <Button
          variant="outlined"
          color="primary"
          onClick={this.handleOpenModal}
        >
          Quote with Post
        </Button>
        <ReactModal
          isOpen={this.state.showModal}
          style={{
            content: {
              height: "50%",
              width: "25%",
              marginTop: "auto",
              marginLeft: "auto",
              marginRight: "auto",
              marginBottom: "auto"
            }
          }}
        >
          <div style={{ width: "200px", marginLeft: "50px" }}>
            <form style={{ width: "350px" }}>
              {/* <textarea
              value={this.state.value}
              required
              maxLength="250"
              placeholder="Write Quoted Post here..."
              onChange={e => {
                this.handleChangeforPost(e);
                this.handleChangeforCharacterCount(e);
              }}
              cols={40}
              rows={20}
            /> */}
              <TextField
                style={{ width: 300 }}
                value={this.state.value}
                label="Write Quoted Post here..."
                required
                multiline
                color="primary"
                rows="14"
                variant="outlined"
                inputProps={{
                  maxLength: 250
                }}
                onChange={e => {
                  this.handleChangeforPost(e);
                  this.handleChangeforCharacterCount(e);
                }}
                autoComplete="off"
              ></TextField>
              <div style={{ fontSize: "14px", marginRight: "-100px" }}>
                <p2>Characters Left: {this.state.characterCount}</p2>
              </div>
              <Button
                variant="outlined"
                color="primary"
                onClick={this.handleSubmit}
              >
                Share Quoted Post
              </Button>
              <Button
                variant="outlined"
                color="primary"
                onClick={this.handleCloseModal}
              >
                Cancel
              </Button>
            </form>
          </div>
        </ReactModal>
        <Button
          variant="outlined"
          color="primary"
          onClick={this.handleSubmitWithoutPost}
        >
          Quote without Post
        </Button>
      </div>
    );
  }
 }
 class Like extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: this.props.count
    };
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    this.setState({
      like:
        localStorage.getItem(this.props.microBlog + this.props.name) === "false"
    });
  }
  handleClick(){
    this.setState({
      like: !this.state.like
    });
    localStorage.setItem(
      this.props.microBlog + this.props.name,
      this.state.like.toString()
    );
    if (this.state.like == false) {
      this.setState(() => {
        return { num: this.state.num + 1 };
      });
      axios
        .get(`/like/${this.props.microBlog}`)
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });
    } else {
      this.setState(() => {
        return { num: this.state.num - 1 };
      });
      axios
        .get(`/unlike/${this.props.microBlog}`)
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
  /* componentDidMount() {
    axios.get(`/checkforLikePost/${this.props.microBlog}`)
    .then((res) => {
      this.setState({
        like2: res.data
      })
      console.log(res.data);
    })
    .catch((err) => {
      console.log(err)
    })
    if (this.state.like2 === this.state.like)
    {
      this.setState({
        like: false
      })
    }
  }  */
  render() {
    const label = this.state.like ? "Unlike" : "Like";
    return (
      <div>
        <Typography variant="body2" color={"textSecondary"}>
          Likes {this.state.num}
        </Typography>
        <button onClick={this.handleClick}>{label}</button>
      </div>
    );
  }
 }
 const mapStateToProps = state => ({
  user: state.user,
  UI: state.UI
 });
 const mapActionsToProps = {
  likePost,
  unlikePost,
  getLikes
 };
 Home.propTypes = {
  user: PropTypes.object.isRequired,
  likePost: PropTypes.func.isRequired,
  unlikePost: PropTypes.func.isRequired,
  getLikes: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired,
  UI: PropTypes.object.isRequired
 };
 Like.propTypes = {
  user: PropTypes.object.isRequired
 };
 Quote.propTypes = {
  user: PropTypes.object.isRequired
 };
 export default connect(
  mapStateToProps,
  mapActionsToProps
 )(withStyles(styles)(Home, Like, Quote));
--- a/twistter-frontend/src/pages/Login.js
+++ b/twistter-frontend/src/pages/Login.js
@@ -1,194 +0,0 @@
 /* eslint-disable */
 import React, { Component } from 'react';
 // import '../App.css';
 import PropTypes from 'prop-types';
 import logo from '../images/twistter-logo.png';
 // Material-UI stuff
 import Button from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
 // Redux stuff
 import { connect } from 'react-redux';
 import { loginUser } from '../redux/actions/userActions';
 import { fontFamily } from '@material-ui/system';
 //Theme
 const styles = {
  form: {
    textAlign: "center"
  },
  textField: {
    marginBottom: 20
  },
  pageTitle: {
    // marginTop: 20,
    marginBottom: 40
  },
  button: {
    positon: "relative",
    marginBottom: 30
  },
  progress: {
    position: "absolute"
  },
  p: {
    fontFamily: "cursive",
  }
 };
 export class Login extends Component {
  // componentDidMount() {
  //   axios
  //     .get("/getProfileInfo")
  //     .then((res) => {
  //       this.setState({
  //         firstName: res.data.firstName,
  //         lastName: res.data.lastName,
  //         email: res.data.email,
  //         handle: res.data.handle,
  //         bio: res.data.bio
  //       });
  //     })
  //     .catch((err) => {
  //       console.error(err);
  //     });
  // }
  // Constructor for the state
  constructor() {
    super();
    this.state = {
      email: "",
      password:"",
      errors: {}
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.UI.errors) {
      this.setState({ errors: nextProps.UI.errors });
    }
  }
  // Runs whenever the submit button is clicked.
  // Updates the database entry of the signed in user with the
  // data stored in the state.
  handleSubmit = (event) => {
    event.preventDefault();
    const loginData = {
      email: this.state.email,
      password: this.state.password,
    };
    this.props.loginUser(loginData, this.props.history);
  };
  // Updates the state whenever one of the textboxes changes.
  // The key is the name of the textbox and the value is the
  // value in the text box.
  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
      errors: {
        [event.target.name]: null
      }
    });
  };
  render() {
    const { classes, UI: { loading } } = this.props;
    const { errors } = this.state;
    return (
      <Grid container className={classes.form}>
        <Grid item sm />
        <Grid item sm>
        <img src={logo} className="app-logo" alt="logo" />
          <br></br>
          <Typography variant="h6" className={classes.pageTitle} fontFamily = "Georgia, serif">
            <b>Log in to Twistter</b>
            <br></br>
          </Typography>
          <br></br>
          <form noValidate onSubmit={this.handleSubmit}>
            <TextField
              id="email"
              name="email"
              label="Email or Username*"
              className={classes.textField}
              value={this.state.email}
              helperText={errors.email}
              error={errors.email ? true : false}
              variant="outlined"
              onChange={this.handleChange}
              fullWidth
              autoComplete='off'
            />
            <TextField
              id="password"
              name="password"
              label="Password*"
              className={classes.textField}
              value={this.state.password}
              helperText={errors.password}
              error={errors.password ? true : false}
              type="password"
              variant="outlined"
              onChange={this.handleChange}
              fullWidth
              autoComplete='off'
            />
            <Button
              type="submit"
              variant="contained"
              color="primary"
              className={classes.button}
              disabled={loading}
            >
              Login
              {loading && (
                <CircularProgress size={30} className={classes.progress} />
              )}
            </Button>
            {errors.general && (
              <Typography color="error">Invalid username/email or password</Typography>
            )}
          </form>
        </Grid>
        <Grid item sm />
      </Grid>
    );
  }
 }
 // Proptypes just confirms that all data in it exists and is of the type that it
 // is declared to be
 Login.propTypes = {
  classes: PropTypes.object.isRequired,
  loginUser: PropTypes.func.isRequired,
  user: PropTypes.object.isRequired,
  UI: PropTypes.object.isRequired
 };
 const mapStateToProps = (state) => ({
  user: state.user,
  UI: state.UI,
 });
 const mapActionsToProps = {
  loginUser
 }
 Login.propTypes = {
  classes: PropTypes.object.isRequired
 };
 // This mapStateToProps is just synchronizing the 'state' to 'this.props' so we can access it
 // The state contains info about the current logged in user
 export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Login));
--- a/twistter-frontend/src/pages/Logout.js
+++ b/twistter-frontend/src/pages/Logout.js
@@ -1,56 +0,0 @@
 /* eslint-disable */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 // Material UI stuff
 import Button from "@material-ui/core/Button";
 import withStyles from "@material-ui/core/styles/withStyles";
 // Redux stuff
 import { logoutUser } from "../redux/actions/userActions";
 import { connect } from "react-redux";
 const styles = {
  form: {
    textAlign: "center"
  },
  textField: {
    marginBottom: 30
  },
  pageTitle: {
    marginBottom: 40
  },
  button: {
    positon: "relative",
    marginBottom: 30
  },
  progress: {
    position: "absolute"
  }
 };
 export class Logout extends Component {
  componentDidMount() {
    this.props.logoutUser();
    this.props.history.push('/');
  }
  render() {
    return null;
  }
 }
 const mapStateToProps = (state) => ({
  user: state.user
 });
 const mapActionsToProps = { logoutUser };
 Logout.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  user: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired
 };
 export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Logout));
--- a/twistter-frontend/src/pages/Search.js
+++ b/twistter-frontend/src/pages/Search.js
@@ -1,130 +0,0 @@
 import React, { Component } from "react";
 // import props
 // 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 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 = {
    handles: [],
    // searchPhrase: null,
    searchResult: null,
    loading: false
  };
  componentDidMount() {
    this.setState({loading: true});
    axios.get("/getAllHandles")
    .then((res) => {
      this.setState({
        handles: res.data,
        loading: false
      }, () => {
        // console.log(res.data);
        fuse = new Fuse(this.state.handles, fuseOptions); // "list" is the item array
      })
    })
  }
  // 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({
      searchResult: parsed.length !== 0 ? parsed : "No Results"
    })
  }
  handleRedirect() {
    location.reload();
  }
  render() {
    let resultMarkup = this.state.searchResult && this.state.searchResult !== "No Results" ? (
      this.state.searchResult.map(res => 
        <Router key={res}>
          <div>
            <a href={`/user/${res}`}>
              {res}
            </a>
          </div>
        </Router>
      )
    ) 
      : 
    this.state.searchResult === "No Results" ?
      (
       <p> No results </p>
      )
        :
      (
        null
      )
    return (
      this.state.loading 
      ? 
        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> 
      : 
        <Grid>
          <Grid>
            <TextField
              id="standard-required"
              label="Username"
              margin="normal"
              // value={this.state.searchPhrase}
              onChange={this.handleChange}
            />
          </Grid>
          <Grid>
            {/* <Button color="primary" onClick={this.handleSearch}>
              Search
            </Button> */}
          </Grid>
          <Grid>{resultMarkup}</Grid>
        </Grid>
    );
  }
 }
 export default Search;
--- a/twistter-frontend/src/pages/Signup.js
+++ b/twistter-frontend/src/pages/Signup.js
@@ -1,218 +0,0 @@
 /* eslint-disable */
 import React, { Component } from 'react';
 // import '../App.css';
 import PropTypes from 'prop-types';
 import logo from '../images/twistter-logo.png';
 // Material-UI stuff
 import Button from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
 // Redux stuff
 import { connect } from 'react-redux';
 import { signupUser } from '../redux/actions/userActions';
 import { border } from '@material-ui/system';
 const styles = {
  form: {
    textAlign: "center"
  },
  textField: {
    marginBottom: 20,
    //border: "1px solid #234",
    display: "inline-block",
    boxSizing: "border-box",
  },
  pageTitle: {
    marginBottom: 40
  },
  button: {
    positon: "relative",
    marginBottom: 30
  },
  progress: {
    position: "absolute"
  },
  div: {
    borderRadius: "5px",
    backgroundColor: "grey",
    padding: "20px",
  },
  p: {
    fontFamily: "Segoe UI",
  }
 };
 export class Signup extends Component {
  // Constructor for the state
  constructor() {
    super();
    this.state = {
      handle: "",
      email: "",
      password:"",
      confirmPassword: "",
      errors: {}
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.UI.errors) {
      this.setState({ errors: nextProps.UI.errors });
    }
  }
  // Runs whenever the submit button is clicked.
  // Updates the database entry of the signed in user with the
  // data stored in the state.
  handleSubmit = (event) => {
    event.preventDefault();
    const signupData = {
      handle: this.state.handle,
      email: this.state.email,
      password: this.state.password,
      confirmPassword: this.state.confirmPassword
    };
    console.log(signupData)
    this.props.signupUser(signupData, this.props.history);
  };
  // Updates the state whenever one of the textboxes changes.
  // The key is the name of the textbox and the value is the
  // value in the text box.
  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
      errors: {
        [event.target.name]: null
      }
    });
  };
  render() {
    const { classes, UI: { loading } } = this.props;
    const { errors } = this.state;
    return (
      <Grid container className={classes.form}>
        <Grid item sm />
        <Grid item sm>
        <img src={logo} className="app-logo" alt="logo" />
          <br></br>
          <Typography variant="p" className={classes.pageTitle}>
            <b>Create a new account</b>
            <br></br>
          </Typography>
          <br></br>
          <form noValidate onSubmit={this.handleSubmit}>
          <TextField
              id="handle"
              name="handle"
              label="Username*"
              className={classes.textField}
              value={this.state.handle}
              helperText={errors.handle}
              error={errors.handle ? true : false}
              variant="outlined"
              onChange={this.handleChange}
              fullWidth
              autoComplete='off'
            />
            <TextField
              id="email"
              name="email"
              label="Email*"
              className={classes.textField}
              value={this.state.email}
              helperText={errors.email}
              error={errors.email ? true : false}
              variant="outlined"
              onChange={this.handleChange}
              fullWidth
              autoComplete='off'
            />
            <TextField
              id="password"
              name="password"
              label="Password*"
              className={classes.textField}
              value={this.state.password}
              helperText={errors.password}
              error={errors.password ? true : false}
              type="password"
              variant="outlined"
              onChange={this.handleChange}
              fullWidth
              autoComplete='off'
            />
            <TextField
              id="confirmPassword"
              name="confirmPassword"
              label="Confirm Password*"
              className={classes.textField}
              value={this.state.confirmPassword}
              helperText={errors.confirmPassword}
              error={errors.confirmPassword ? true : false}
              type="password"
              variant="outlined"
              onChange={this.handleChange}
              fullWidth
              autoComplete='off'
            />
            <br></br>
            <br></br>
            <Button
              type="submit"
              variant="contained"
              color="primary"
              className={classes.button}
              disabled={loading}
            >
              Sign Up
              {loading && (
                <CircularProgress size={30} className={classes.progress} />
              )}
            </Button>
            {errors.general && (
              <Typography color="error">Invalid username/email or password</Typography>
            )}
          </form>
        </Grid>
        <Grid item sm />
      </Grid>
    );
  }
 }
 // Proptypes just confirms that all data in it exists and is of the type that it
 // is declared to be
 Signup.propTypes = {
  classes: PropTypes.object.isRequired,
  signupUser: PropTypes.func.isRequired,
  user: PropTypes.object.isRequired,
  UI: PropTypes.object.isRequired
 };
 const mapStateToProps = (state) => ({
  user: state.user,
  UI: state.UI,
 });
 const mapActionsToProps = {
  signupUser
 }
 Signup.propTypes = {
  classes: PropTypes.object.isRequired
 };
 // This mapStateToProps is just synchronizing the 'state' to 'this.props' so we can access it
 // The state contains info about the current logged in user
 export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Signup));
--- a/twistter-frontend/src/pages/directMessages.js
+++ b/twistter-frontend/src/pages/directMessages.js
@@ -1,677 +0,0 @@
 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));
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -1,511 +0,0 @@
 import React, { Component } from "react";
 import { Link } from 'react-router-dom';
 import axios from "axios";
 import PropTypes from "prop-types";
 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 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: {
    textAlign: "center"
  },
  textField: {
    marginBottom: 30
  },
  pageTitle: {
    // marginTop: 20,
    marginBottom: 40
  },
  button: {
    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 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({
          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 ? res.data.bio : "",
          dmEnabled: res.data.dmEnabled === false ? false : true,
          pageLoading: false
        });
      })
      .catch((err) => {
        console.error(err);
        if (err.response.status === 403) {
          // This user is not logged in
          this.props.history.push('/');
        }
      });
  }
  // Constructor for the state
  constructor() {
    super();
    this.state = {
      imageUrl: "",
      firstName: "",
      lastName: "",
      email: "",
      handle: "",
      bio: "",
      dmEnabled: false,
      togglingDirectMessages: false,
      anchorEl: null,
      loading: false,
      pageLoading: false,
      errors: {}
    };
  }
  // Runs whenever the submit button is clicked.
  // Updates the database entry of the signed in user with the
  // data stored in the state.
  handleSubmit = (event) => {
    event.preventDefault();
    this.setState({
      loading: true
    });
    const newProfileData = {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      email: this.state.email,
      handle: this.state.handle,
      bio: this.state.bio
    };
    // Removes all keys from newProfileData that are empty, undefined, or null
    Object.keys(newProfileData).forEach(key => {
      if (newProfileData[key] === "" || newProfileData[key] === undefined || newProfileData[key] === null) {
        delete newProfileData[key];
      }
    })
    axios
      .post("/updateProfileInfo", newProfileData)
      .then((res) => {
        console.log(res);
        this.setState({
          loading: false
        });
        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
        });
      });
  };
  // Updates the state whenever one of the textboxes changes.
  // The key is the name of the textbox and the value is the
  // value in the text box.
  // Also sets errors to null of textboxes that have been edited
  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
      errors: {
        [event.target.name]: null
      }
    });
  };
  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 (
      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
                    id="firstName"
                    name="firstName"
                    label="First Name"
                    className={classes.textField}
                    value={this.state.firstName}
                    helperText={errors.firstName}
                    error={errors.firstName ? true : false}
                    variant="outlined"
                    onChange={this.handleChange}
                    fullWidth
                    autoComplete='off'
                  />
                </Grid>
                <Grid item sm>
                  <TextField
                    id="lastName"
                    name="lastName"
                    label="Last Name"
                    className={classes.textField}
                    value={this.state.lastName}
                    helperText={errors.lastname}
                    error={errors.lastName ? true : false}
                    variant="outlined"
                    onChange={this.handleChange}
                    fullWidth
                    autoComplete='off'
                  />
                </Grid>
              </Grid>
              <TextField
                id="email"
                name="email"
                label="Email*"
                className={classes.textField}
                value={this.state.email}
                disabled
                helperText="(disabled)"
                // INFO: These will be uncommented if changing emails is allowed
                // helperText={errors.email}
                // error={errors.email ? true : false}
                variant="outlined"
                onChange={this.handleChange}
                fullWidth
                autoComplete='off'
              />
              <TextField
                id="handle"
                name="handle"
                label="Handle*"
                className={classes.textField}
                value={"@" + this.state.handle}
                disabled
                helperText="(disabled)"
                // INFO: These will be uncommented if changing usernames is allowed
                // helperText={errors.handle}
                // error={errors.handle ? true : false}
                variant="outlined"
                onChange={this.handleChange}
                fullWidth
                autoComplete='off'
              />
              <TextField
                id="bio"
                name="bio"
                label="Bio"
                className={classes.textField}
                value={this.state.bio}
                helperText={errors.bio}
                error={errors.bio ? true : false}
                multiline
                rows="8"
                variant="outlined"
                onChange={this.handleChange}
                fullWidth
                autoComplete='off'
              />
              <FormControlLabel
                control={
                  <Switch
                    color="primary"
                    disabled={this.state.togglingDirectMessages} 
                    checked={this.state.dmEnabled} 
                    onChange={this.handleDMSwitch} 
                  />
                }
                label="Enable Direct Messages"
              />
              <br></br>
              <Button
                type="submit"
                variant="contained"
                color="primary"
                className={classes.button}
                disabled={loading}
                //component={ Link }
                //to='/user'
              >
                Submit
                {loading && (
                  <CircularProgress size={30} className={classes.progress} />
                )}
              </Button>
            </form>
          </Grid>
          <Grid item sm>
            <Button
              variant="outlined"
              color="secondary"
              className={classes.delete}
              onClick={this.handleOpenConfirmDelete}
            >
              Delete Account
            </Button>
          </Grid>
          <Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box>
          <Popover
              id={id}
              open={open}
              anchorEl={this.state.anchorEl}
              onClose={this.handleCloseConfirmDelete}
              anchorOrigin={{
                vertical: 'center',
                horizontal: 'center'
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'center'
              }}
              style={{
                marginTop: "-200px"
              }}
            >
              <Box
                style={{
                  height: 200,
                  width: 400
                }}
              >
                <Grid container direction="column" spacing={3}>
                  <Grid item>
                      <Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography>
                  </Grid>
                  <Grid item>
                    <Button 
                      color="secondary"
                      variant="contained"
                      component={ Link }
                      to='/delete'
                      style={{
                        marginBottom: "-40px",
                        marginLeft: 10,
                        width: 90
                      }}
                    >
                      Yes
                    </Button>
                    <Button 
                      color="primary"
                      variant="outlined"
                      onClick={this.handleCloseConfirmDelete}
                      style={{
                        marginBottom: "-40px",
                        marginLeft: 195
                      }}
                    >
                      Cancel
                    </Button>
                  </Grid>
                </Grid>
              </Box>
            </Popover>
        </Grid>
    );
  }
 }
 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 connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(editProfile));
--- a/twistter-frontend/src/pages/otherUser.js
+++ b/twistter-frontend/src/pages/otherUser.js
@@ -1,360 +0,0 @@
 /* eslint-disable */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import axios from "axios";
 //import '../App.css';
 // 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";
 import CardContent from "@material-ui/core/CardContent";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
 import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
 import AddCircle from "@material-ui/icons/AddCircle";
 import TextField from "@material-ui/core/TextField";
 import VerifiedIcon from "@material-ui/icons/CheckSharp";
 import DoneIcon from "@material-ui/icons/Done";
 import CircularProgress from "@material-ui/core/CircularProgress";
 // component
 import "../App.css";
 import noImage from "../images/no-img.png";
 import Writing_Microblogs from "../Writing_Microblogs";
 const MyChip = styled(Chip)({
  margin: 2,
  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 {
  constructor() {
    super();
    this.state = {
      profile: window.location.pathname.split("/").pop(),
      imageUrl: null,
      topics: null,
      user: null,
      following: null,
      posts: null,
      myTopics: null,
      followingList: null,
      loading: false
    };
  }
  handleSub = () => {
    if (this.state.following === true) {
      axios
        .post("/removeSub", {
          unfollow: this.state.profile
        })
        .then(res => {
          console.log("removed sub");
          this.setState({
            following: false,
            myTopics: []
          });
        })
        .catch(function(err) {
          console.log(err);
        });
    } else {
      axios
        .post("/addSubscription", {
          following: this.state.profile
        })
        .then(res => {
          console.log("adding sub");
          this.setState({
            following: true
          });
        })
        .catch(function(err) {
          console.log(err);
        });
    }
  };
  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
      })
      .then(res => {
        this.setState({
          imageUrl: res.data.userData.imageUrl,
          topics: res.data.userData.followedTopics
        });
      })
      .catch(err => console.log(err));
    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: 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() {
    const { classes } = this.props;
    let followMarkup = this.state.following ? (
      <Button variant="contained" color="primary" onClick={this.handleSub}>
        unfollow
      </Button>
    ) : (
      <Button variant="contained" color="primary" onClick={this.handleSub}>
        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.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>
    );
    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} */}
          {topicsMarkup}
          <br />
        </Grid>
        <Grid item sm={4} xs={8}>
          {postMarkup}
          <br />
        </Grid>
      </Grid>
    );
  }
 }
 const mapStateToProps = state => ({
  user: state.user
 });
 user.propTypes = {
  user: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired
 };
 export default connect(mapStateToProps)(withStyles(styles)(user));
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,349 +0,0 @@
 /* eslint-disable */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import axios from "axios";
 //import '../App.css';
 // Material-UI
 import withStyles from "@material-ui/core/styles/withStyles";
 import { makeStyles, styled } from "@material-ui/core/styles";
 import { Link } from "react-router-dom";
 import Card from "@material-ui/core/Card";
 import CardMedia from "@material-ui/core/CardMedia";
 import CardContent from "@material-ui/core/CardContent";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
 import AddCircle from "@material-ui/icons/AddCircle";
 import TextField from "@material-ui/core/TextField";
 import VerifiedIcon from "@material-ui/icons/CheckSharp";
 import Paper from "@material-ui/core/Paper";
 import GridList from "@material-ui/core/GridList";
 import GridListTile from "@material-ui/core/GridListTile";
 import GridListTileBar from "@material-ui/core/GridListTileBar";
 import Container from "@material-ui/core/Container";
 // component
 import "../App.css";
 import noImage from "../images/no-img.png";
 import Writing_Microblogs from "../Writing_Microblogs";
 const MyChip = styled(Chip)({
  margin: 2,
  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 {
  constructor() {
    super();
    this.state = {
      profile: null,
      imageUrl: null,
      topics: null,
      newTopic: "",
      loading: false
    };
  }
  handleDelete = topic => {
    console.log(topic);
    axios
      .post(`/deleteTopic`, {
        unfollow: topic
      })
      .then(() => {
        let tempTopics = this.state.topics;
        tempTopics.forEach((oldTopic, index) => {
          if (oldTopic === topic) {
            tempTopics.splice(index, 1);
          }
        });
        this.setState({
          topics: tempTopics
        });
      })
      .catch(function(err) {
        console.log(err);
      });
  };
  handleAddCircle = () => {
    axios
      .post("/putTopic", {
        following: this.state.newTopic
      })
      .then(() => {
        let tempTopics = this.state.topics;
        tempTopics.push(this.state.newTopic);
        this.setState({
          topics: tempTopics,
          newTopic: ""
        });
      })
      .catch(function(err) {
        console.log(err);
      });
  };
  handleChange(event) {
    this.setState({
      newTopic: event.target.value
    });
  }
  componentDidMount() {
    this.setState({loading: true})
    let userPromise = axios
      .get("/user")
      .then(res => {
        this.setState({
          profile: res.data.credentials.handle,
          imageUrl: res.data.credentials.imageUrl,
          verified: res.data.credentials.verified
            ? res.data.credentials.verified
            : false,
          topics: res.data.credentials.followedTopics
        });
      })
      .catch(err => console.log(err));
    let postsPromise = axios
      .get("/getallPostsforUser")
      .then(res => {
        // console.log(res.data);
        this.setState({
          posts: res.data
        });
      })
      .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() {
    const { classes } = this.props;
    let authenticated = this.props.user.authenticated;
    let profileMarkup = this.state.profile ? (
      <div>
        <Typography variant="h5" className={classes.username}>
          @{this.state.profile}{" "}
          {this.state.verified ? (
            <VerifiedIcon style={{ fill: "#1397D5" }} />
          ) : null}
        </Typography>
      </div>
    ) : (
      <p className={classes.username}>loading username...</p>
    );
    let topicsMarkup = this.state.topics ? (
      this.state.topics.map(
        topic => (
          <MyChip
            label={topic}
            key={topic}
            onDelete={key => this.handleDelete(topic)}
          />
        ) // console.log({ topic }.topic.id)
      )
    ) : (
      <p> loading topics...</p>
    );
    let imageMarkup = this.state.imageUrl ? (
      <img
        className={classes.profileImage}
        src={this.state.imageUrl}
        height="250"
        width="250"
      />
    ) : (
      <img
        className={classes.profileImage}
        src={noImage}
        height="250"
        width="250"
      />
    );
    let postMarkup = this.state.posts ? (
      this.state.posts.map(post => (
        <Card 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" />
              )}
            </Typography>
            <Typography variant="h6">
              <b>{post.userHandle}</b>
            </Typography>
            <Typography variant="body2" color={"textSecondary"}>
              {this.formatDate(post.createdAt) }
            </Typography>
            <br />
            <Typography variant="body1">
              <b>{post.microBlogTitle}</b>
            </Typography>
            <Typography variant="body2">{post.quoteBody}</Typography>
            <br />
            <Typography variant="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>My Posts</p>
    );
    // FIX: This needs to check if user's profile page being displayed
    // is the same as the user who is logged in
    // Can't check for that right now, because this page is always
    // showing the logged in users profile, instead of retreiving the
    // profile based on the URL entered
    let editButtonMarkup = true ? (
      <Link to="/user/edit">
        <Button className={classes.button} variant="outlined" color="primary">
          Edit Profile
        </Button>
      </Link>
    ) : null;
    let verifyButtonMarkup = this.state.profile === "Admin" ?
      <Link to="/verify">
        <Button className={classes.button} variant="outlined" color="primary">
          Verify Users
        </Button>
      </Link>
    :
      null
    return (
      this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
      <div>
        {/* <Paper className={classes.paper}> */}
        <Grid container direction="column">
          <Grid item>
            <Grid container>
              <Grid item sm>
                {editButtonMarkup}
                {verifyButtonMarkup}
              </Grid>
              <Grid item sm>
                {/* <Grid container direction="column"> */}
                {/* <Grid item sm> */}
                {imageMarkup}
                {profileMarkup}
                {/* </Grid> */}
                {/* <Grid item sm> */}
                {/* {postMarkup} */}
                {/* </Grid> */}
                {/* </Grid> */}
              </Grid>
              <Grid item sm>
                <Container className={classes.topicsContainer} maxWidth="xs">
                  {topicsMarkup}
                </Container>
                <TextField
                  id="newTopic"
                  label="new topic"
                  // defaultValue=""
                  margin="normal"
                  variant="outlined"
                  value={this.state.newTopic}
                  onChange={event => this.handleChange(event)}
                />
                <AddCircle
                  className={classes.addCircle}
                  color="primary"
                  // iconStyle={classes.addCircle}
                  clickable="true"
                  onClick={this.handleAddCircle}
                  cursor="pointer"
                />
              </Grid>
            </Grid>
          </Grid>
          <Grid item>
            <Grid container>
              <Grid item sm />
              <Grid item>{postMarkup}</Grid>
              <Grid item sm />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
  }
 }
 const mapStateToProps = state => ({
  user: state.user
 });
 user.propTypes = {
  user: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired
 };
 export default connect(mapStateToProps)(withStyles(styles)(user));
--- a/twistter-frontend/src/pages/verify.js
+++ b/twistter-frontend/src/pages/verify.js
@@ -1,153 +0,0 @@
 import React, { Component } from "react";
 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
 // Material-UI stuff
 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 TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
 const styles = {
  form: {
    textAlign: "center"
  },
  textField: {
    marginBottom: 30
  },
  pageTitle: {
    // marginTop: 20,
    marginBottom: 40
  },
  button: {
    positon: "relative",
    marginBottom: 10
  },
  progress: {
    position: "absolute"
  }
 };
 export class verify extends Component {
  // Constructor for the state
  constructor() {
    super();
    this.state = {
      handle: "",
      loading: false,
      errors: {}
    };
  }
 //   // Runs whenever the submit button is clicked.
  handleSubmit = (event) => {
    event.preventDefault();
    this.setState({
      loading: true
    });
    const verifyHandle = {
      user: this.state.handle
    };
    axios
      .post("/verifyUser", verifyHandle)
      .then((res) => {
        console.log(res);
        this.setState({
          loading: false
        });
        // this.props.history.push('/');
        // TODO: Need to redirect user to their profile page
      })
      .catch((err) => {
        console.log(err);
        this.setState({
          errors: err.response.data,
          loading: false
        });
      });
  };
  // Updates the state whenever one of the textboxes changes.
  // The key is the name of the textbox and the value is the
  // value in the text box.
  // Also sets errors to null of textboxes that have been edited
  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
      errors: {
        [event.target.name]: null
      }
    });
  };
  render() {
    const { classes } = this.props;
    const { loading } = this.state;
    return (
      <Grid container className={classes.form}>
        <Grid item sm />
        <Grid item sm>
          <Typography variant="h4" className={classes.pageTitle}>
            Verify Users
          </Typography>
          <form noValidate onSubmit={this.handleSubmit}>
            <TextField
              id="handle"
              name="handle"
              label="Username"
              className={classes.textField}
              value={this.state.handle}
              // helperText={errors.handle}
              // error={errors.handle ? true : false}
              variant="outlined"
              onChange={this.handleChange}
              fullWidth
            />
            <Grid container direction="column">
              <Grid item>
                <Button
                  type="submit"
                  variant="contained"
                  color="primary"
                  className={classes.button}
                  disabled={loading}
                >
                  Submit
                  {loading && (
                    <CircularProgress size={30} className={classes.progress} />
                  )}
                </Button>
              </Grid>
              <Grid item>
                <Button
                  variant="oulined"
                  color="primary"
                  // className={classes.button}
                  component={ Link }
                  to='/user'
                >
                  Back to Profile
                </Button>
              </Grid>
            </Grid>
          </form>
        </Grid>
        <Grid item sm />
      </Grid>
    );
  }
 }
 verify.propTypes = {
  classes: PropTypes.object.isRequired
 };
 export default withStyles(styles)(verify);
--- a/twistter-frontend/src/redux/actions/dataActions.js
+++ b/twistter-frontend/src/redux/actions/dataActions.js
@@ -1,147 +0,0 @@
 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});
        })
 }
--- a/twistter-frontend/src/redux/actions/userActions.js
+++ b/twistter-frontend/src/redux/actions/userActions.js
@@ -1,172 +0,0 @@
 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)
      .then((res) => {
        // Save the login token
        setAuthorizationHeader(res.data.token);
        dispatch(getUserData());
        // dispatch({ type: CLEAR_ERRORS })
        // Redirects to home page
        history.push('/home');
      })
      .catch((err) => {
        dispatch ({
            type: SET_ERRORS,
            payload: err.response.data,
        })
      });
 };
 // 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)
      .then((res) => {
        console.log(res);
        console.log(res.data);
        // Save the signup token
        setAuthorizationHeader(res.data.token);
        dispatch(getUserData());
        // dispatch({ type: CLEAR_ERRORS })
        // Redirects to home page
        history.push('/home');
      })
      .catch((err) => {
        dispatch ({
            type: SET_ERRORS,
            payload: err.response.data,
        })
      });
 };
 // 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")
    .then((res) => {
      console.log(res);
      console.log("User account successfully deleted.");
    }
    )
    .catch((err) => {
      dispatch ({
        type: SET_ERRORS,
        payload: err.response.data,
      })
    });
  localStorage.removeItem('FBIdToken');
  delete axios.defaults.headers.common['Authorization'];
  dispatch({ type: SET_UNAUTHENTICATED });
 }
 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);
    })
 }
--- a/twistter-frontend/src/redux/reducers/dataReducer.js
+++ b/twistter-frontend/src/redux/reducers/dataReducer.js
@@ -1,17 +0,0 @@
 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;
    }
 }
--- a/twistter-frontend/src/redux/reducers/uiReducer.js
+++ b/twistter-frontend/src/redux/reducers/uiReducer.js
@@ -1,73 +0,0 @@
 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
 };
 export default function(state = initialState, action) {
    switch(action.type) {
        case SET_ERRORS:
            return {
                ...state,
                loading: false,
                errors: action.payload
            };
        case CLEAR_ERRORS:
            return {
                ...state,
                loading: false,
                errors: null
            };
        case LOADING_UI:
            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;
    }
 }
--- a/twistter-frontend/src/redux/reducers/userReducer.js
+++ b/twistter-frontend/src/redux/reducers/userReducer.js
@@ -1,63 +0,0 @@
 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,
    credentials: {},
    likes: [],
    notifications: []
 };
 export default function(state = initialState, action) {
    switch(action.type) {
        case SET_AUTHENTICATED:
            return {
                ...state, 
                authenticated: true,
            };
        case SET_UNAUTHENTICATED:
            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;
    }
 }
--- a/twistter-frontend/src/redux/store.js
+++ b/twistter-frontend/src/redux/store.js
@@ -1,28 +0,0 @@
 import { createStore, combineReducers, applyMiddleware, compose } from "redux";
 import thunk from "redux-thunk";
 import userReducer from "./reducers/userReducer";
 import dataReducer from "./reducers/dataReducer";
 import uiReducer from "./reducers/uiReducer";
 const initialState = {};
 const middleWare = [thunk];
 const reducers = combineReducers({
  user: userReducer,
  data: dataReducer,
  UI: uiReducer
 });
 const store = createStore(
  reducers,
  initialState,
  compose(
    applyMiddleware(...middleWare),
    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f // Can be removed after debugging is finished
  )
 );
 export default store;
--- a/twistter-frontend/src/redux/types.js
+++ b/twistter-frontend/src/redux/types.js
@@ -1,24 +0,0 @@
 // User reducer types
 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';
--- a/twistter-frontend/src/serviceWorker.js
+++ b/twistter-frontend/src/serviceWorker.js
@@ -1,135 +0,0 @@
 // This optional code is used to register a service worker.
 // register() is not called by default.
 // This lets the app load faster on subsequent visits in production, and gives
 // it offline capabilities. However, it also means that developers (and users)
 // will only see deployed updates on subsequent visits to a page, after all the
 // existing tabs open on the page have been closed, since previously cached
 // resources are updated in the background.
 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://bit.ly/CRA-PWA
 const isLocalhost = Boolean(
    window.location.hostname === 'localhost' ||
      // [::1] is the IPv6 localhost address.
      window.location.hostname === '[::1]' ||
      // 127.0.0.1/8 is considered localhost for IPv4.
      window.location.hostname.match(
        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
      )
  );
  export function register(config) {
    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
      // The URL constructor is available in all browsers that support SW.
      const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
      if (publicUrl.origin !== window.location.origin) {
        // Our service worker won't work if PUBLIC_URL is on a different origin
        // from what our page is served on. This might happen if a CDN is used to
        // serve assets; see https://github.com/facebook/create-react-app/issues/2374
        return;
      }
      window.addEventListener('load', () => {
        const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
        if (isLocalhost) {
          // This is running on localhost. Let's check if a service worker still exists or not.
          checkValidServiceWorker(swUrl, config);
          // Add some additional logging to localhost, pointing developers to the
          // service worker/PWA documentation.
          navigator.serviceWorker.ready.then(() => {
            console.log(
              'This web app is being served cache-first by a service ' +
                'worker. To learn more, visit https://bit.ly/CRA-PWA'
            );
          });
        } else {
          // Is not localhost. Just register service worker
          registerValidSW(swUrl, config);
        }
      });
    }
  }
  function registerValidSW(swUrl, config) {
    navigator.serviceWorker
      .register(swUrl)
      .then(registration => {
        registration.onupdatefound = () => {
          const installingWorker = registration.installing;
          if (installingWorker == null) {
            return;
          }
          installingWorker.onstatechange = () => {
            if (installingWorker.state === 'installed') {
              if (navigator.serviceWorker.controller) {
                // At this point, the updated precached content has been fetched,
                // but the previous service worker will still serve the older
                // content until all client tabs are closed.
                console.log(
                  'New content is available and will be used when all ' +
                    'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
                );
                // Execute callback
                if (config && config.onUpdate) {
                  config.onUpdate(registration);
                }
              } else {
                // At this point, everything has been precached.
                // It's the perfect time to display a
                // "Content is cached for offline use." message.
                console.log('Content is cached for offline use.');
                // Execute callback
                if (config && config.onSuccess) {
                  config.onSuccess(registration);
                }
              }
            }
          };
        };
      })
      .catch(error => {
        console.error('Error during service worker registration:', error);
      });
  }
  function checkValidServiceWorker(swUrl, config) {
    // Check if the service worker can be found. If it can't reload the page.
    fetch(swUrl)
      .then(response => {
        // Ensure service worker exists, and that we really are getting a JS file.
        const contentType = response.headers.get('content-type');
        if (
          response.status === 404 ||
          (contentType != null && contentType.indexOf('javascript') === -1)
        ) {
          // No service worker found. Probably a different app. Reload the page.
          navigator.serviceWorker.ready.then(registration => {
            registration.unregister().then(() => {
              window.location.reload();
            });
          });
        } else {
          // Service worker found. Proceed as normal.
          registerValidSW(swUrl, config);
        }
      })
      .catch(() => {
        console.log(
          'No internet connection found. App is running in offline mode.'
        );
      });
  }
  export function unregister() {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.ready.then(registration => {
        registration.unregister();
      });
    }
  }
--- a/twistter-frontend/src/images/original.png
+++ b/twistter-frontend/src/images/original.png
--- a/twistter-frontend/src/util/AuthRoute.js
+++ b/twistter-frontend/src/util/AuthRoute.js
@@ -1,23 +0,0 @@
 import React from 'react';
 import { Route, Redirect } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 const AuthRoute = ({ component: Component, authenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      authenticated === true ? <Redirect to="/home" /> : <Component {...props} />
    }
  />
 );
 const mapStateToProps = (state) => ({
  authenticated: state.user.authenticated
 });
 AuthRoute.propTypes = {
  user: PropTypes.object
 };
 export default connect(mapStateToProps)(AuthRoute);
--- a/twistter-frontend/src/util/PostSkeleton.js
+++ b/twistter-frontend/src/util/PostSkeleton.js
@@ -1,77 +0,0 @@
 /* eslint-disable */
 import React, { Fragment } from 'react';
 import NoImg from '../images/no-img.png';
 import PropTypes from 'prop-types';
 // MUI
 import Card from '@material-ui/core/Card';
 import CardMedia from '@material-ui/core/CardMedia';
 import CardContent from '@material-ui/core/CardContent';
 import withStyles from '@material-ui/core/styles/withStyles';
 const styles = (theme) => ({
  ...theme,
  card: {
    display: 'flex',
    marginBottom: 20
  },
  cardContent: {
    width: '100%',
    flexDirection: 'column',
    padding: 25
  },
  cover: {
    minWidth: 200,
    objectFit: 'cover'
  },
  handle: {
    width: 60,
    height: 18,
    backgroundColor: theme.palette.primary.main,
    marginBottom: 7
  },
  date: {
    height: 14,
    width: 100,
    backgroundColor: 'rgba(0,0,0, 0.3)',
    marginBottom: 10
  },
  fullLine: {
    height: 15,
    width: '90%',
    backgroundColor: 'rgba(0,0,0, 0.6)',
    marginBottom: 10
  },
  halfLine: {
    height: 15,
    width: '50%',
    backgroundColor: 'rgba(0,0,0, 0.6)',
    marginBottom: 10
  }
 });
 const PostSkeleton = (props) => {
  const { classes } = props;
  const content = Array.from({ length: 5 }).map((item, index) => (
    <Card className={classes.card} key={index}>
      <CardMedia className={classes.cover} image={NoImg} />
      <CardContent className={classes.cardContent}>
        <div className={classes.handle} />
        <div className={classes.date} />
        <div className={classes.fullLine} />
        <div className={classes.fullLine} />
        <div className={classes.halfLine} />
      </CardContent>
    </Card>
  ));
  return <Fragment>{content}</Fragment>;
 };
 PostSkeleton.propTypes = {
  classes: PropTypes.object.isRequired
 };
 export default withStyles(styles)(PostSkeleton);
--- a/twistter-frontend/src/util/ProfileSkeleton.js
+++ b/twistter-frontend/src/util/ProfileSkeleton.js
@@ -1,64 +0,0 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from '@material-ui/core/styles/withStyles';
 import NoImg from '../images/no-img.png';
 // MUI
 import Paper from '@material-ui/core/Paper';
 // Icons
 import LocationOn from '@material-ui/icons/LocationOn';
 import LinkIcon from '@material-ui/icons/Link';
 import CalendarToday from '@material-ui/icons/CalendarToday';
 const styles = (theme) => ({
  ...theme,
  handle: {
    height: 20,
    backgroundColor: theme.palette.primary.main,
    width: 60,
    margin: '0 auto 7px auto'
  },
  fullLine: {
    height: 15,
    backgroundColor: 'rgba(0,0,0,0.6)',
    width: '100%',
    marginBottom: 10
  },
  halfLine: {
    height: 15,
    backgroundColor: 'rgba(0,0,0,0.6)',
    width: '50%',
    marginBottom: 10
  }
 });
 const ProfileSkeleton = (props) => {
  const { classes } = props;
  return (
    <Paper className={classes.paper}>
      <div className={classes.profile}>
        <div className="image-wrapper">
          <img src={NoImg} alt="profile" className="profile-image" />
        </div>
        <hr />
        <div className="profile-details">
          <div className={classes.handle} />
          <hr />
          <div className={classes.fullLine} />
          <div className={classes.fullLine} />
          <hr />
          <LocationOn color="primary" /> <span>Location</span>
          <hr />
          <LinkIcon color="primary" /> https://website.com
          <hr />
          <CalendarToday color="primary" /> Joined date
        </div>
      </div>
    </Paper>
  );
 };
 ProfileSkeleton.propTypes = {
  classes: PropTypes.object.isRequired
 };
 export default withStyles(styles)(ProfileSkeleton);
--- a/twistter-frontend/src/util/theme.js
+++ b/twistter-frontend/src/util/theme.js
@@ -1,103 +0,0 @@
 export default {
    palette: {
      primary: {
        light: '#1da1f2',
        main: '#1da1f2',
        dark: '#008394',
        contrastText: '#fff'
      },
      secondary: {
        light: '#ff6333',
        main: '#ff3d00',
        dark: '#b22a00',
        contrastText: '#fff'
      }
    },
    typography: {
      useNextVariants: true
    },
    form: {
      textAlign: 'center'
    },
    image: {
      margin: '20px auto 20px auto'
    },
    pageTitle: {
      margin: '10px auto 10px auto'
    },
    textField: {
      margin: '10px auto 10px auto'
    },
    button: {
      marginTop: 20,
      position: 'relative'
    },
    customError: {
      color: 'red',
      fontSize: '0.8rem',
      marginTop: 10
    },
    progress: {
      position: 'absolute'
    },
    invisibleSeparator: {
      border: 'none',
      margin: 4
    },
    visibleSeparator: {
      width: '100%',
      borderBottom: '1px solid rgba(0,0,0,0.1)',
      marginBottom: 20
    },
    paper: {
      padding: 10,
      display: 'flex',
      justifyContent: 'center',
      flexWrap: 'wrap'
    },
    chip: {
      margin: 0.5,
    },
    profile: {
      '& .image-wrapper': {
        textAlign: 'center',
        position: 'relative',
        '& button': {
          position: 'absolute',
          top: '80%',
          left: '70%'
        }
      },
      '& .profile-image': {
        width: 200,
        height: 200,
        objectFit: 'cover',
        maxWidth: '100%',
        borderRadius: '50%'
      },
      '& .profile-details': {
        textAlign: 'center',
        '& span, svg': {
          verticalAlign: 'middle'
        },
        '& a': {
          color: '#00bcd4'
        }
      },
      '& hr': {
        border: 'none',
        margin: '0 0 10px 0'
      },
      '& svg.button': {
        '&:hover': {
          cursor: 'pointer'
        }
      }
    },
    buttons: {
      textAlign: 'center',
      '& a': {
        margin: '20px 10px'
      }
    }
  };