Merge branch 'master' into fix-warnings

functions/handlers/post.js

@@ -1,8 +1,7 @@
 /* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
-const admin = require('firebase-admin');
+const admin = require("firebase-admin");
-const { db } = require('../util/admin');
+const { db } = require("../util/admin");
-
 
 exports.putPost = (req, res) => {
   const newPost = {
@@ -14,25 +13,34 @@ exports.putPost = (req, res) => {
     createdAt: new Date().toISOString(),
     likeCount: 0,
     commentCount: 0,
-        microBlogTopics: req.body.microBlogTopics
+    microBlogTopics: req.body.microBlogTopics,
+    quoteBody: null
   };
 
-    admin.firestore().collection('posts').add(newPost)
+  admin
-    .then((doc) => {
+    .firestore()
-        doc.update({postId: doc.id})
+    .collection("posts")
+    .add(newPost)
+    .then(doc => {
+      doc.update({ postId: doc.id });
       const resPost = newPost;
       resPost.postId = doc.id;
       return res.status(200).json(resPost);
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
-        return res.status(500).json({ error: 'something went wrong'});
+      return res.status(500).json({ error: "something went wrong" });
     });
 };
 
 exports.getallPostsforUser = (req, res) => {
-    var post_query = admin.firestore().collection("posts").where("userHandle", "==", req.user.handle);
+  var post_query = admin
-    post_query.get()
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", req.user.handle);
+
+  post_query
+    .get()
     .then(function(myPosts) {
       let posts = [];
       myPosts.forEach(function(doc) {
@@ -40,17 +48,23 @@ exports.getallPostsforUser = (req, res) => {
       });
       return res.status(200).json(posts);
     })
-    // .then(function() {
+    .then(function() {
-    //     return res.status(200).json("Successfully retrieved all user's posts from database.");
+      return res
-    // })
+        .status(200)
+        .json("Successfully retrieved all user's posts from database.");
+    })
     .catch(function(err) {
-        return res.status(500).json(`Failed to retrieve user's posts from database.\n${err}`);
+      return res
+        .status(500)
+        .json("Failed to retrieve user's posts from database.", err);
     });
 };
 
 exports.getallPosts = (req, res) => {
+
   var post_query = admin.firestore().collection("posts");
-    post_query.get()
+  post_query
+    .get()
     .then(function(allPosts) {
       let posts = [];
       allPosts.forEach(function(doc) {
@@ -58,169 +72,263 @@ exports.getallPosts = (req, res) => {
       });
       return res.status(200).json(posts);
     })
-        // .then(function() {
+    .then(function() {
-        //     return res.status(200).json("Successfully retrieved every post from database.");
+      return res
-        // })
+        .status(200)
+        .json("Successfully retrieved every post from database.");
+    })
     .catch(function(err) {
-            return res.status(500).json(`Failed to retrieve posts from database.\n ${err}`);
+      return res
+        .status(500)
+        .json("Failed to retrieve posts from database.", err);
+    });
+};
+
+exports.getOtherUsersPosts = (req, res) => {
+  var post_query = admin
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", req.body.handle);
+
+  post_query
+    .get()
+    .then(function(myPosts) {
+      let posts = [];
+      myPosts.forEach(function(doc) {
+        posts.push(doc.data());
+      });
+      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').
+  const quoteDoc = admin
-    where('userHandle', '==', req.user.handle).
+    .firestore()
-    where('postId', '==', req.params.postId).limit(1);
+    .collection("quote")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
   const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
+  postDoc
-    .then((doc) => {
+    .get()
-        if(doc.exists) {
+    .then(doc => {
+      if (doc.exists) {
         quoteData = doc.data();
         return quoteDoc.get();
-        }
+      } else {
-        else
+        return res.status(404).json({ error: "Post not found" });
-        {
-            return res.status(404).json({error: 'Post not found'});
       }
     })
-    .then((data) => {
+    .then(data => {
-        if(data.empty) {
+      if (data.empty) {
-            return admin.firestore().collection('quote').add({
+        return admin
-                postId : req.params.postId,
+          .firestore()
-                userHandle : req.user.handle,
+          .collection("quote")
-                quotePost : req.body.quotePost
+          .add({
+            quoteId: req.params.postId,
+            userHandle: req.user.handle,
+            quoteBody: req.body.quoteBody
           })
           .then(() => {
-               return admin.firestore().collection('posts').add({
+            const post = {
-                   quoteData,
+              body: quoteData.body,
-                   quoteUser : req.user.handle,
+              userHandle: req.user.handle,
-                   quotePost : req.body.quotePost,
+              quoteBody: req.body.quoteBody,
-                   quotedAt : new Date().toISOString()
+              createdAt: new Date().toISOString(),
-
+              userImage: req.body.userImage,
-               })
+              likeCount: 0,
-            })
+              commentCount: 0,
-        }
+              userID: req.user.uid,
-        else {
+              microBlogTitle: quoteData.microBlogTitle,
-            return res.status(400).json({ error: 'Post has already been quoted.' });
+              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});
 
-    })
+    .catch(err => {
-
+      return res.status(500).json({ error: err });
-}
+    });
+};
 
 exports.quoteWithoutPost = (req, res) => {
   let quoteData;
-    const quoteDoc = admin.firestore().collection('quote').
+  const quoteDoc = admin
-    where('userHandle', '==', req.user.handle).
+    .firestore()
-    where('postId', '==', req.params.postId).limit(1);
+    .collection("quote")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
   const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
+  postDoc
-    .then((doc) => {
+    .get()
-        if(doc.exists) {
+    .then(doc => {
+      if (doc.exists) {
         quoteData = doc.data();
         return quoteDoc.get();
-        }
+      } else {
-        else
+        return res.status(404).json({ error: "Post not found" });
-        {
-            return res.status(404).json({error: 'Post not found'});
       }
     })
-    .then((data) => {
+    .then(data => {
-        if(data.empty) {
+      if (data.empty) {
-            return admin.firestore().collection('quote').add({
+        return admin
-                postId : req.params.postId,
+          .firestore()
-                userHandle : req.user.handle,
+          .collection("quote")
+          .add({
+            quoteId: req.params.postId,
+            userHandle: req.user.handle,
+            quoteBody: null
           })
           .then(() => {
-               return admin.firestore().collection('posts').add({
+            const post = {
-                   quoteData,
+              userHandle: req.user.handle,
-                   quoteUser : req.user.handle,
+              body: quoteData.body,
-                   quotedAt : new Date().toISOString()
+              quoteBody: null,
-
+              createdAt: new Date().toISOString(),
-               })
+              likeCount: 0,
-            })
+              commentCount: 0,
-        }
+              userID: req.user.uid,
-        else {
+              userImage: req.body.userImage,
-        return res.status(400).json({ error: 'Post has already been quoted.' });
+              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) => {
+    .catch(err => {
-        // return res.status(500).json({error: 'Something is wrong'});
+      return res.status(500).json({ error: "Something is wrong" });
-        return res.status(500).json({error: err});
+    });
-    })
+};
 
-}
+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);
+    }
+  });
+};
 
 exports.likePost = (req, res) => {
   let postData;
-    const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
+  const likeDoc = admin
-    .where('postId', '==', req.params.postId).limit(1);
+    .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()
+  postDoc
-    .then((doc) => {
+    .get()
-        if(doc.exists) {
+    .then(doc => {
+      if (doc.exists) {
         postData = doc.data();
         return likeDoc.get();
-        }
+      } else {
-        else
+        return res.status(404).json({ error: "Post not found" });
-        {
-            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(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})
+            return postDoc.update({ likeCount: postData.likeCount });
           })
           .then(() => {
             return res.status(200).json(postData);
-            })
+          });
       }
     })
-    .catch((err) => {
+    .catch(err => {
-        // return res.status(500).json({error: 'Something is wrong'});
+      return res.status(500).json({ error: "Something is wrong" });
-        return res.status(500).json({error: err});
+    });
-    })
+};
-
-}
 
 exports.unlikePost = (req, res) => {
-
   let postData;
-    const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
+  const likeDoc = admin
-    .where('postId', '==', req.params.postId).limit(1);
+    .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()
+  postDoc
-    .then((doc) => {
+    .get()
-        if(doc.exists) {
+    .then(doc => {
+      if (doc.exists) {
         postData = doc.data();
         return likeDoc.get();
-        }
+      } else {
-        else
+        return res.status(404).json({ error: "Post not found" });
-        {
-            return res.status(404).json({error: 'Post not found'});
       }
     })
-    .then((data) => {
+    .then(data => {
       return db
         .doc(`/likes/${data.docs[0].id}`)
         .delete()
@@ -231,15 +339,17 @@ exports.unlikePost = (req, res) => {
         .then(() => {
           res.status(200).json(postData);
         });
-          
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
-        return res.status(500).json({error: 'Something is wrong'});
+      return res.status(500).json({ error: "Something is wrong" });
-    })
+    });
-
+};
-}
 
 exports.getFilteredPosts = (req, res) => {
-    admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
+  admin
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", "new user")
+    .where("microBlogTopics", "==");
 };

functions/handlers/users.js

@@ -449,6 +449,24 @@ exports.getUserDetails = (req, res) => {
     });
 };
 
+exports.getAllHandles = (req, res) => {
+  var user_query = admin.firestore().collection("users");
+  user_query.get()
+  .then((allUsers) => {
+      let users = [];
+      allUsers.forEach((user) => {
+          users.push(user.data().handle);
+      });
+      return res.status(200).json(users);
+  })
+  .catch((err) => {
+    return res.status(500).json({
+      message:"Failed to retrieve posts from database.", 
+      error: err
+    });
+  });
+};
+
 exports.getAuthenticatedUser = (req, res) => {
   let credentials = {};
   db.doc(`/users/${req.user.handle}`)
@@ -567,12 +585,8 @@ exports.addSubscription = (req, res) => {
       .catch(err => {
         return res.status(500).json({ err });
       });
-    return res.status(500).json({ error: "shouldn't execute" });
+    return res.status(200).json({ message: "ok" });
-  })
+  });
-  .catch((err) => {
-    console.log(err);
-    return res.status(500).json({error: err});
-  })
 };
 
 exports.getSubs = (req, res) => {
@@ -611,10 +625,7 @@ exports.removeSub = (req, res) => {
       .catch(err => {
         return res.status(500).json({ err });
       });
-    return res.status(500).json({ error: "shouldn't execute" });
+
-  })
+    return res.status(200).json({ message: "ok" });
-  .catch((err) => {
+  });
-    console.log(err);
-    return res.status(500).json({error: err});
-  })
 };

functions/index.js

@@ -11,6 +11,7 @@ app.use(cors());
  *------------------------------------------------------------------*/
 const {
   getAuthenticatedUser,
+  getAllHandles,
   getUserDetails,
   getProfileInfo,
   login,
@@ -39,6 +40,10 @@ app.delete("/delete", fbAuth, deleteUser);
 
 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);
 
@@ -70,7 +75,17 @@ app.post("/removeSub", fbAuth, removeSub);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost, quoteWithPost, quoteWithoutPost} = require("./handlers/post");
+const {
+  getallPostsforUser,
+  getallPosts,
+  putPost,
+  likePost,
+  unlikePost,
+  quoteWithPost,
+  quoteWithoutPost,
+  checkforLikePost,
+  getOtherUsersPosts
+} = require("./handlers/post");
 
 app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
@@ -81,11 +96,12 @@ app.post("/putPost", fbAuth, putPost);
 
 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);
 
 /*------------------------------------------------------------------*
  *  handlers/topic.js                                                *

twistter-frontend/package.json

@@ -10,6 +10,7 @@
     "axios": "^0.19.0",
     "clsx": "^1.0.4",
     "create-react-app": "^3.1.2",
+    "fuse.js": "^3.4.6",
     "install": "^0.13.0",
     "jwt-decode": "^2.2.0",
     "node-pre-gyp": "^0.13.0",
@@ -42,5 +43,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5001/twistter-e4649/us-central1/api"
+  "proxy": "http://localhost:5006/twistter-e4649/us-central1/api"
 }

twistter-frontend/src/App.js

@@ -74,7 +74,7 @@ class App extends Component {
 
                 <Route exact path="/home" component={home} />
                 <Route exact path="/user" component={user} />
-                <Route exact path="/edit" component={editProfile} />
+                <Route exact path="/user/edit" component={editProfile} />
                 <Route exact path="/verify" component={verify} />
                 <Route exact path="/search" component={Search} />
                 <Route exact path="/user/:userhandle" component={otherUser} />

twistter-frontend/src/Writing_Microblogs.js

@@ -3,6 +3,27 @@ import React, { Component } from "react";
 // 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";
+
+const styles = {
+  container: {
+    position: "fixed"
+  },
+  form: {
+    width: "300px",
+    height: "50px",
+    marginTop: "180px",
+    marginLeft: "50px"
+  },
+  textField: {
+    marginBottom: 15
+  }
+}
+
 class Writing_Microblogs extends Component {
   constructor(props) {
     super(props);
@@ -27,7 +48,7 @@ class Writing_Microblogs extends Component {
     this.setState({ topics: event.target.value });
   }
 
-  handleSubmit(event) {
+  handleSubmit = (event) => {
     // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
     const postData = {
       body: this.state.value,
@@ -40,20 +61,34 @@ class Writing_Microblogs extends Component {
     };
 
     axios
-      .post("/putPost", postData, headers)
+      .post("/putPost", postData, headers) // TODO: add topics
       .then(res => {
-        alert("Post was shared successfully!");
+        // alert("Post was shared successfully!");
         console.log(res.data);
       })
       .catch(err => {
         alert("An error occured.");
         console.error(err);
       });
+    console.log(postData.microBlogTopics);
+    postData.microBlogTopics.forEach(topic => {
+      axios
+        .post("/putTopic", {
+          following: topic
+        })
+        .then(res => {
+          console.log(res.data);
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    });
     event.preventDefault();
     this.setState({ value: "", title: "", characterCount: 250, topics: "" });
   }
 
   handleChangeforPost(event) {
+
     this.setState({ value: event.target.value });
   }
 
@@ -64,65 +99,67 @@ class Writing_Microblogs extends Component {
   }
 
   render() {
+    const { classes } = this.props;
     return (
-      <div>
+      <div className={classes.container}>
-        <div
+        <form noValidate className={classes.form}>
-          style={{
+          <TextField
-            width: "200px",
+            id="title"
-            height: "50px",
+            name="title"
-            marginTop: "180px",
+            label="Title"
-            marginLeft: "50px"
+            className={classes.textField}
-          }}
-        >
-          <form>
-            <textarea
-              placeholder="Enter Microblog Title"
             value={this.state.title}
-              required
+            variant="outlined"
             onChange={this.handleChange}
-              cols={30}
+            fullWidth
-              rows={1}
+            autoComplete='off'
           />
-          </form>
-        </div>
-        <div style={{ width: "200px", height: "50px", marginLeft: "50px" }}>
-          <form>
-            <textarea
-              placeholder="Enter topics seperated by a comma"
-              value={this.state.topics}
-              required
-              onChange={this.handleChangeforTopics}
-              cols={40}
-              rows={1}
-            />
-          </form>
-        </div>
 
-        <div style={{ width: "200px", marginLeft: "50px" }}>
+          <TextField
-          <form onSubmit={this.handleSubmit}>
+            id="topics"
-            <textarea
+            name="topics"
+            label="Topics"
+            className={classes.textField}
+            value={this.state.topics}
+            variant="outlined"
+            onChange={this.handleChangeforTopics}
+            color="primary"
+            fullWidth
+            autoComplete='off'
+          />
+          <TextField
+            id="content"
+            name="content"
+            label="Content"
+            color="primary"
+            className={classes.textField}
             value={this.state.value}
-              required
+            helperText={`${this.state.characterCount} characters left`}
-              maxLength="250"
+            multiline
-              placeholder="Write Microblog here..."
+            rows="9"
-              onChange={e => {
+            variant="outlined"
+            inputProps={{
+              maxLength: 250
+            }}
+            onChange={(e) => {
               this.handleChangeforPost(e);
               this.handleChangeforCharacterCount(e);
             }}
-              cols={40}
+            fullWidth
-              rows={20}
+            autoComplete='off'
           />
-            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
+          <Button
-              <p>Characters Left: {this.state.characterCount}</p>
+            onClick={this.handleSubmit}
-            </div>
+            // disabled={loading}
-            <div style={{ marginRight: "-100px" }}>
+            variant="outlined"
-              <button onClick={this.handleSubmit}>Share Post</button>
+            color="primary"
-            </div>
+            >
+              Share Post
+          </Button>
         </form>
       </div>
-      </div>
     );
   }
 }
 
-export default Writing_Microblogs;
+export default withStyles(styles)(Writing_Microblogs);

twistter-frontend/src/pages/Home.js

@@ -1,14 +1,16 @@
 /* eslint-disable */
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import axios from 'axios';
+import axios from "axios";
 
 // Material UI and React Router
-import Grid from '@material-ui/core/Grid';
+import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from '@material-ui/core/Card';
+import Grid from "@material-ui/core/Grid";
-import CardContent from '@material-ui/core/CardContent';
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
+import withStyles from '@material-ui/styles/withStyles';
 
 // component
 import '../App.css';
@@ -18,6 +20,12 @@ import Writing_Microblogs from '../Writing_Microblogs';
 import ReactModal from 'react-modal';
 
 
+const styles = {
+  card: {
+    marginBottom: 5
+  }
+}
+
 class Home extends Component {
   state = {
     
@@ -31,44 +39,51 @@ class Home extends Component {
         // console.log(res.data);
         this.setState({
           posts: res.data
-        })
+        });
-        this.setState({posts: (this.state.posts).sort((a,b) =>
-          -a.createdAt.localeCompare(b.createdAt))
-        })
       })
       .catch(err => console.log(err));
   }
 
+  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;
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
-        <Card key={post.postId}>
+        <Card className={classes.card} key={post.postId}>
           <CardContent>
             <Typography>
               {
-                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                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="h5"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt.substring(0,10) + 
+            <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
-                                                          " " + post.createdAt.substring(11,19)}</Typography>
             <br />
             <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
+            <Typography variant="body2">{post.quoteBody}</Typography>
+            <br />
             <Typography variant="body2">{post.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics.join("," + " ")}</Typography>        
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>        
             <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
+            {/* <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography> */}
-            <Like microBlog = {post.postId}></Like>
+            <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like>
             <Quote microblog = {post.postId}></Quote>
           </CardContent>
         </Card>
       )
-    ) : (<p>My Posts</p>);
+    ) : (
+      <p>Loading post...</p>
+    );
 
     return (
       authenticated ?
@@ -80,7 +95,10 @@ class Home extends Component {
           {postMarkup}
         </Grid>
       </Grid> 
+     ) : loading ? 
+          (<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>)
         :
+          (
             <div>
               <div>
                 <img src={logo} className="app-logo" alt="logo" />
@@ -108,15 +126,6 @@ class Home extends Component {
   }
 }
 
-
-const mapStateToProps = (state) => ({
-  user: state.user
-})
-
-Home.propTypes = {
-  user: PropTypes.object.isRequired
-}
-
 class Quote extends Component {
   constructor(props) {
     super(props);
@@ -133,10 +142,14 @@ class Quote extends Component {
   }
 
   handleSubmitWithoutPost(event) {
+    const post = {
+      
+      userImage: "bing-url",
+    }
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
-    axios.post(`/quoteWithoutPost/${this.props.microblog}`, headers)
+    axios.post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
     .then((res) => {
       
       console.log(res.data);
@@ -168,7 +181,8 @@ class Quote extends Component {
 
   handleSubmit(event) {
     const quotedPost = {
-      quotePost: this.state.value,
+      quoteBody: this.state.value,
+      userImage: "bing-url",
     };
     const headers = {
       headers: { "Content-Type": "application/json" }
@@ -234,21 +248,35 @@ class Like extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      like: false
+         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);
@@ -259,6 +287,9 @@ class Like extends Component {
           }
           else
           {
+            this.setState(() => {
+              return {num: this.state.num - 1}
+           });
           axios.get(`/unlike/${this.props.microBlog}`)
                 .then((res) => {
                     console.log(res.data);
@@ -268,11 +299,36 @@ class Like extends Component {
                 })
             }
             
+            
   }
+
+  /* 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>
       )
@@ -280,4 +336,23 @@ class Like extends Component {
 
 }
 
-export default connect(mapStateToProps)(Home);
+const mapStateToProps = (state) => ({
+  user: state.user,
+  UI: state.UI
+});
+
+Home.propTypes = {
+  user: PropTypes.object.isRequired,
+  clases: PropTypes.object.isRequired,
+  UI: PropTypes.object.isRequired
+}
+
+Like.propTypes = {
+  user: PropTypes.object.isRequired
+}
+
+Quote.propTypes = {
+  user: PropTypes.object.isRequired
+}
+
+export default connect(mapStateToProps)(withStyles(styles)(Home, Like, Quote));

twistter-frontend/src/pages/Login.js

@@ -119,7 +119,7 @@ export class Login extends Component {
             <TextField
               id="email"
               name="email"
-              label="Email*"
+              label="Email or Username*"
               className={classes.textField}
               value={this.state.email}
               helperText={errors.email}
@@ -127,6 +127,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -140,6 +141,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <Button
               type="submit"

twistter-frontend/src/pages/Search.js

@@ -2,38 +2,75 @@ import React, { Component } from "react";
 // import props
 import { TextField, Button } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import Axios from "axios";
+import axios from "axios";
+import Fuse from "fuse.js";
 
 import { BrowserRouter as Router } from "react-router-dom";
 
+import CircularProgress from "@material-ui/core/CircularProgress";
+
+const fuseOptions = {
+  shouldSort: true,
+  threshold: 0.6,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: []
+};
+
+let fuse;
+
+
 export class Search extends Component {
   state = {
-    searchPhase: null,
+    handles: [],
-    searchResult: null
+    // searchPhrase: null,
+    searchResult: null,
+    loading: false
   };
 
-  handleSearch = () => {
+  componentDidMount() {
-    console.log(this.state.searchPhase);
+    this.setState({loading: true});
-    Axios.post("/getUserHandles", {
+    axios.get("/getAllHandles")
-      userHandle: this.state.searchPhase
+    .then((res) => {
-    })
-      .then(res => {
-        console.log(res);
-
       this.setState({
-          searchResult: res.data
+        handles: res.data,
-        });
+        loading: false
+      }, () => {
+        console.log(res.data);
+        fuse = new Fuse(this.state.handles, fuseOptions); // "list" is the item array
       })
-      .catch(err => {
+    })
-        console.log(err);
+  }
-      });
-  };
 
-  handleInput(event) {
+  // handleSearch = () => {
+  //   console.log(this.state.searchPhase);
+  //   axios.post("/getUserHandles", {
+  //     userHandle: this.state.searchPhase
+  //   })
+  //     .then(res => {
+  //       console.log(res);
+
+  //       this.setState({
+  //         searchResult: res.data
+  //       });
+  //     })
+  //     .catch(err => {
+  //       console.log(err);
+  //     });
+  // };
+
+  handleChange = (event) => {
+    let result = fuse.search(event.target.value);
+    let parsed = [];
+    result.forEach((res) => {
+      console.log(res)
+      parsed.push(this.state.handles[res])
+    })
     this.setState({
-      searchPhase: event.target.value
+      searchResult: parsed.length !== 0 ? parsed : "No Results"
-    });
+    })
-    console.log(this.state.searchPhase);
   }
 
   handleRedirect() {
@@ -41,35 +78,46 @@ export class Search extends Component {
   }
 
   render() {
-    let resultMarkup = this.state.searchResult ? (
+    let resultMarkup = this.state.searchResult && this.state.searchResult !== "No Results" ? (
+      this.state.searchResult.map(res => 
         <Router>
           <div>
-          <a href={`/user/${this.state.searchResult}`}>
+            <a href={`/user/${res}`}>
-            {this.state.searchResult}
+              {res}
             </a>
           </div>
         </Router>
-    ) : (
+      )
-      //   console.log(this.state.searchResult)
+    ) 
-      <p> No result </p>
+      : 
-    );
+    this.state.searchResult === "No Results" ?
+      (
+       <p> No results </p>
+      )
+        :
+      (
+        null
+      )
 
     return (
+      this.state.loading 
+      ? 
+        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> 
+      : 
         <Grid>
           <Grid>
             <TextField
               id="standard-required"
-            label="Search"
+              label="Username"
-            defaultValue="username"
               margin="normal"
-            value={this.state.searchPhase}
+              // value={this.state.searchPhrase}
-            onChange={event => this.handleInput(event)}
+              onChange={this.handleChange}
             />
           </Grid>
           <Grid>
-          <Button color="primary" onClick={this.handleSearch}>
+            {/* <Button color="primary" onClick={this.handleSearch}>
               Search
-          </Button>
+            </Button> */}
           </Grid>
           <Grid>{resultMarkup}</Grid>
         </Grid>

twistter-frontend/src/pages/Signup.js

@@ -122,6 +122,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="email"
@@ -134,6 +135,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -147,6 +149,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="confirmPassword"
@@ -160,6 +163,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <br></br>
             <br></br>

twistter-frontend/src/pages/editProfile.js

@@ -1,14 +1,14 @@
 import React, { Component } from "react";
+import { Link } from 'react-router-dom';
 import axios from "axios";
 import PropTypes from "prop-types";
-// TODO: Add a read-only '@' in the left side of the handle input
-// TODO: Add a cancel button, that takes the user back to their profile page
 
 // Material-UI stuff
+import Box from "@material-ui/core/Box"
 import Button from "@material-ui/core/Button";
-import { Link } from 'react-router-dom';
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
+import Popover from "@material-ui/core/Popover";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
@@ -28,16 +28,33 @@ const styles = {
     positon: "relative",
     marginBottom: 30
   },
+  back: {
+    float: "left",
+    marginLeft: 15
+  },
+  delete: {
+    float: "right",
+    marginRight: 15
+  },
   progress: {
     position: "absolute"
+  },
+  popoverBackground: {
+    marginTop: "-100px",
+    width: "calc(100vw)",
+    height: 'calc(100vh + 100px)',
+    backgroundColor: "gray",
+    position: "absolute",
+    opacity: "70%"
   }
 };
 
-export class edit extends Component {
+export class editProfile extends Component {
   // 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() {
+    this.setState({pageLoading: true})
     axios
       .get("/getProfileInfo")
       .then((res) => {
@@ -46,16 +63,15 @@ export class edit extends Component {
           lastName: res.data.lastName,
           email: res.data.email,
           handle: res.data.handle,
-          bio: res.data.bio
+          bio: res.data.bio,
+          pageLoading: false
         });
       })
       .catch((err) => {
         console.error(err);
         if (err.response.status === 403) {
-          alert("You are not logged in");
+          // This user is not logged in
-          // TODO: Redirect them, to the profile they are trying to edit
+          this.props.history.push('/');
-          // If they are on /itsjimmy/edit, they will be redirected to /itsjimmy
-          this.props.history.push('../');
         }
       });
   }
@@ -69,7 +85,9 @@ export class edit extends Component {
       email: "",
       handle: "",
       bio: "",
+      anchorEl: null,
       loading: false,
+      pageLoading: false,
       errors: {}
     };
   }
@@ -104,8 +122,7 @@ export class edit extends Component {
         this.setState({
           loading: false
         });
-        // this.props.history.push('/');
+        this.props.history.push('/user');
-        // TODO: Need to redirect user to their profile page
       })
       .catch((err) => {
         console.log(err);
@@ -129,13 +146,44 @@ export class edit extends Component {
     });
   };
 
+  handleOpenConfirmDelete = (event) => {
+		this.setState({
+      // anchorEl: event.currentTarget
+      anchorEl: document.getElementById("container-grid")
+		});
+	};
+
+	handleCloseConfirmDelete = () => {
+		this.setState({
+			anchorEl: null,
+            createDMUsername: ''
+		});
+	};
+
   render() {
     const { classes } = this.props;
     const { errors, loading } = this.state;
 
+    // Used for the delete button
+		const open = Boolean(this.state.anchorEl);
+		const id = open ? 'simple-popover' : undefined;
+
     return (
-      <Grid container className={classes.form}>
+      this.state.pageLoading ? 
-        <Grid item sm />
+        <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.back}
+              component={ Link }
+              to='/user'
+            >
+              Back to Profile
+            </Button>
+          </Grid>
           <Grid item sm>
             <Typography variant="h2" className={classes.pageTitle}>
               Edit Profile
@@ -154,6 +202,7 @@ export class edit extends Component {
                     variant="outlined"
                     onChange={this.handleChange}
                     fullWidth
+                    autoComplete='off'
                   />
                 </Grid>
                 <Grid item sm>
@@ -168,6 +217,7 @@ export class edit extends Component {
                     variant="outlined"
                     onChange={this.handleChange}
                     fullWidth
+                    autoComplete='off'
                   />
                 </Grid>
               </Grid>
@@ -185,13 +235,14 @@ export class edit extends Component {
                 variant="outlined"
                 onChange={this.handleChange}
                 fullWidth
+                autoComplete='off'
               />
               <TextField
                 id="handle"
                 name="handle"
                 label="Handle*"
                 className={classes.textField}
-              value={this.state.handle}
+                value={"@" + this.state.handle}
                 disabled
                 helperText="(disabled)"
                 // INFO: These will be uncommented if changing usernames is allowed
@@ -200,6 +251,7 @@ export class edit extends Component {
                 variant="outlined"
                 onChange={this.handleChange}
                 fullWidth
+                autoComplete='off'
               />
               <TextField
                 id="bio"
@@ -214,6 +266,7 @@ export class edit extends Component {
                 variant="outlined"
                 onChange={this.handleChange}
                 fullWidth
+                autoComplete='off'
               />
               <Button
                 type="submit"
@@ -229,36 +282,83 @@ export class edit extends Component {
                   <CircularProgress size={30} className={classes.progress} />
                 )}
               </Button>
-            <br />
+              
+            </form>
+          </Grid>
+          <Grid item sm>
             <Button
-              //variant="contained"
+              variant="outlined"
-              color="primary"
-              className={classes.button}
-              component={ Link }
-              to='/user'
-            >
-              Back to Profile
-            </Button>
-            <br />
-            <Button
-              variant="contained"
               color="secondary"
-              className={classes.button}
+              className={classes.delete}
-              component={ Link }
+              onClick={this.handleOpenConfirmDelete}
-              to='/delete'
             >
               Delete Account
             </Button>
-          </form>
           </Grid>
-        <Grid item sm />
+          <Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box>
+          <Popover
+              id={id}
+              open={open}
+              anchorEl={this.state.anchorEl}
+              onClose={this.handleCloseConfirmDelete}
+              anchorOrigin={{
+                vertical: 'center',
+                horizontal: 'center'
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center'
+              }}
+              style={{
+                marginTop: "-200px"
+              }}
+            >
+              <Box
+                style={{
+                  height: 200,
+                  width: 400
+                }}
+              >
+                <Grid container direction="column" spacing={3}>
+                  <Grid item>
+                      <Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography>
+                  </Grid>
+                  <Grid item>
+                    <Button 
+                      color="secondary"
+                      variant="contained"
+                      component={ Link }
+                      to='/delete'
+                      style={{
+                        marginBottom: "-40px",
+                        marginLeft: 10,
+                        width: 90
+                      }}
+                    >
+                      Yes
+                    </Button>
+                    <Button 
+                      color="primary"
+                      variant="outlined"
+                      onClick={this.handleCloseConfirmDelete}
+                      style={{
+                        marginBottom: "-40px",
+                        marginLeft: 195
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Popover>
         </Grid>
     );
   }
 }
 
-edit.propTypes = {
+editProfile.propTypes = {
   classes: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(edit);
+export default withStyles(styles)(editProfile);

twistter-frontend/src/pages/otherUser.js

@@ -7,6 +7,8 @@ import axios from "axios";
 
 // Material UI and React Router
 import { makeStyles, styled } from "@material-ui/core/styles";
+import withStyles from "@material-ui/core/styles/withStyles";
+
 import { Link } from "react-router-dom";
 import Card from "@material-ui/core/Card";
 import CardMedia from "@material-ui/core/CardMedia";
@@ -19,6 +21,7 @@ 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";
 
 // component
 import "../App.css";
@@ -30,14 +33,53 @@ const MyChip = styled(Chip)({
   color: "primary"
 });
 
+const styles = {
+  button: {
+    positon: "relative",
+    float: "left",
+    marginLeft: 30,
+    marginTop: 20
+  },
+  paper: {
+    // marginLeft: "10%",
+    // marginRight: "10%"
+  },
+  card: {
+    marginBottom: 5
+  },
+  profileImage: {
+    marginTop: 20
+  },
+  topicsContainer: {
+    border: "lightgray solid 1px",
+    marginTop: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+    height: 300
+  },
+  addCircle: {
+    width: 65,
+    height: 65,
+    marginTop: 10
+  },
+  username: {
+    marginBottom: 100
+  }
+};
+
 class user extends Component {
-  state = {
+  constructor() {
+    super();
+    this.state = {
       profile: window.location.pathname.split("/").pop(),
       imageUrl: null,
       topics: null,
       user: null,
-    following: null
+      following: null,
+      posts: null,
+      myTopics: null
     };
+  }
 
   handleSub = () => {
     if (this.state.following === true) {
@@ -88,38 +130,29 @@ class user extends Component {
       .get("/user")
       .then(res => {
         this.setState({
-          following: res.data.credentials.following.includes(this.state.profile)
+          following: res.data.credentials.following.includes(
+            this.state.profile
+          ),
+          myTopics: res.data.credentials.followedTopics
+        });
+      })
+      .catch(err => console.log(err));
+
+    axios
+      .post("/getOtherUsersPosts", {
+        handle: this.state.profile
+      })
+      .then(res => {
+        // console.log(res.data);
+        this.setState({
+          posts: res.data
         });
       })
       .catch(err => console.log(err));
   }
 
   render() {
-    let profileMarkup = this.state.profile ? (
+    const { classes } = this.props;
-      <div>
-        <Typography variant="h5">
-          @{this.state.profile}{" "}
-          {this.state.verified ? (
-            <VerifiedIcon style={{ fill: "#1397D5" }} />
-          ) : null}
-        </Typography>
-      </div>
-    ) : (
-      <p>loading username...</p>
-    );
-    let topicsMarkup = this.state.topics ? (
-      this.state.topics.map(
-        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
-      )
-    ) : (
-      <p> loading topics...</p>
-    );
-
-    let imageMarkup = this.state.imageUrl ? (
-      <img src={this.state.imageUrl} height="150" width="150" />
-    ) : (
-      <img src={noImage} height="150" width="150" />
-    );
 
     let followMarkup = this.state.following ? (
       <Button variant="contained" color="primary" onClick={this.handleSub}>
@@ -130,18 +163,109 @@ class user extends Component {
         follow
       </Button>
     );
+    let profileMarkup = this.state.profile ? (
+      <div>
+        <Typography variant="h5">
+          @{this.state.profile}{" "}
+          {this.state.verified ? (
+            <VerifiedIcon style={{ fill: "#1397D5" }} />
+          ) : null}
+        </Typography>
+        {followMarkup}
+      </div>
+    ) : (
+      <p>loading username...</p>
+    );
 
-    console.log(this.state.following);
+    console.log(this.state.topics);
+    console.log(this.state.myTopics);
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(
+        topic =>
+          this.state.myTopics ? (
+            this.state.myTopics.includes(topic) ? (
+              <MyChip
+                label={topic}
+                key={{ topic }.topic.id}
+                onDelete
+                deleteIcon={<DoneIcon />}
+              />
+            ) : (
+              <MyChip
+                label={topic}
+                key={{ topic }.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" />
+    );
+
+    let postMarkup = this.state.posts ? (
+      this.state.posts.map(post => (
+        <Card className={classes.card}>
+          <CardContent>
+            <Typography>
+              {this.state.imageUrl ? (
+                <img src={this.state.imageUrl} height="50" width="50" />
+              ) : (
+                <img src={noImage} height="50" width="50" />
+              )}
+            </Typography>
+            <Typography variant="h7">
+              <b>{post.userHandle}</b>
+            </Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              {post.createdAt}
+            </Typography>
+
+            <br />
+            <Typography variant="body1">
+              <b>{post.microBlogTitle}</b>
+            </Typography>
+            <Typography variant="body2">{post.quoteBody}</Typography>
+
+            <br />
+            <Typography variant="body2">{post.body}</Typography>
+            <br />
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics}
+            </Typography>
+            <br />
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount}
+            </Typography>
+          </CardContent>
+        </Card>
+      ))
+    ) : (
+      <p>Posts</p>
+    );
 
     return (
       <Grid container spacing={24}>
         <Grid item sm={4} xs={8}>
           {imageMarkup}
           {profileMarkup}
-          {followMarkup}
+          {/* {followMarkup} */}
           {topicsMarkup}
           <br />
         </Grid>
+        <Grid item sm={4} xs={8}>
+          {postMarkup}
+          <br />
+        </Grid>
       </Grid>
     );
   }
@@ -152,7 +276,8 @@ const mapStateToProps = state => ({
 });
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
 };
 
-export default connect(mapStateToProps)(user);
+export default connect(mapStateToProps)(withStyles(styles)(user));

twistter-frontend/src/pages/user.js

@@ -47,7 +47,7 @@ const styles = {
     // marginRight: "10%"
   },
   card: {
-    marginBottom: 10
+    marginBottom: 5
   },
   profileImage: {
     marginTop: 20
@@ -70,12 +70,15 @@ const styles = {
 };
 
 class user extends Component {
-  state = {
+  constructor() {
+    super();
+    this.state = {
       profile: null,
       imageUrl: null,
       topics: null,
       newTopic: null
     };
+  }
 
   handleDelete = topic => {
     console.log(topic);
@@ -83,8 +86,16 @@ class user extends Component {
       .post(`/deleteTopic`, {
         unfollow: topic
       })
-      .then(function() {
+      .then(() => {
-        location.reload();
+        let tempTopics = this.state.topics;
+        tempTopics.forEach((oldTopic, index) => {
+          if (oldTopic === topic) {
+            tempTopics.splice(index, 1);
+          }
+        });
+        this.setState({
+          topics: tempTopics
+        });
       })
       .catch(function(err) {
         console.log(err);
@@ -96,8 +107,13 @@ class user extends Component {
       .post("/putTopic", {
         following: this.state.newTopic
       })
-      .then(function() {
+      .then(() => {
-        location.reload();
+        let tempTopics = this.state.topics;
+        tempTopics.push(this.state.newTopic);
+        this.setState({
+          topics: tempTopics,
+          newTopic: ""
+        });
       })
       .catch(function(err) {
         console.log(err);
@@ -131,14 +147,16 @@ class user extends Component {
         // console.log(res.data);
         this.setState({
           posts: res.data
-        })
+        });
-        this.setState({posts: (this.state.posts).sort((a,b) =>
-          -a.createdAt.localeCompare(b.createdAt))
-        })
       })
       .catch(err => console.log(err));
   }
 
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
+  }
+
   render() {
     const { classes } = this.props;
     let authenticated = this.props.user.authenticated;
@@ -204,18 +222,22 @@ class user extends Component {
               {post.createdAt}
             </Typography>
 
-            <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt.substring(0,10) + 
-                                                          " " + post.createdAt.substring(11,19)}</Typography>
             <br />
             <Typography variant="body1">
               <b>{post.microBlogTitle}</b>
             </Typography>
+            <Typography variant="body2">{post.quoteBody}</Typography>
+
+            <br />
             <Typography variant="body2">{post.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics.join("," + " ")}</Typography>
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics}
+            </Typography>
             <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount}
+            </Typography>
           </CardContent>
         </Card>
       ))
@@ -229,7 +251,7 @@ class user extends Component {
     // showing the logged in users profile, instead of retreiving the
     // profile based on the URL entered
     let editButtonMarkup = true ? (
-      <Link to="/edit">
+      <Link to="/user/edit">
         <Button className={classes.button} variant="outlined" color="primary">
           Edit Profile
         </Button>
@@ -298,7 +320,8 @@ const mapStateToProps = state => ({
 });
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  clases: PropTypes.object.isRequired
 };
 
 export default connect(mapStateToProps)(withStyles(styles)(user));

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

@@ -21,6 +21,7 @@ export const getUserData = () => (dispatch) => {
                 type: SET_USER,
                 payload: res.data,
             })
+            dispatch({ type: CLEAR_ERRORS })
         })
         .catch((err) => console.error(err));
 }
@@ -33,7 +34,7 @@ export const loginUser = (loginData, history) => (dispatch) => {
         // Save the login token
         setAuthorizationHeader(res.data.token);
         dispatch(getUserData());
-        dispatch({ type: CLEAR_ERRORS })
+        // dispatch({ type: CLEAR_ERRORS })
         // Redirects to home page
         history.push('/home');
       })
@@ -55,7 +56,7 @@ export const signupUser = (newUserData, history) => (dispatch) => {
         // Save the signup token
         setAuthorizationHeader(res.data.token);
         dispatch(getUserData());
-        dispatch({ type: CLEAR_ERRORS })
+        // dispatch({ type: CLEAR_ERRORS })
         // Redirects to home page
         history.push('/home');
       })