From 13a140175989a26ea835d2de478cdb757cf5321c Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Sun, 27 Oct 2019 02:53:12 -0400
Subject: [PATCH 01/79] Reformat code

---
 functions/handlers/topic.js                 |  80 ++++----
 functions/index.js                          |   9 +-
 twistter-frontend/src/App.js                |  56 +++---
 twistter-frontend/src/Writing_Microblogs.js | 209 +++++++++++---------
 twistter-frontend/src/pages/user.js         | 128 ++++++------
 5 files changed, 258 insertions(+), 224 deletions(-)

diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js
index 4d3dc3d..c4d7b10 100644
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -1,52 +1,60 @@
 /* eslint-disable promise/always-return */
 const { admin, db } = require("../util/admin");
 exports.putTopic = (req, res) => {
+  const newTopic = {
+    topic: req.body.topic,
+    topicId: null
+  };
 
-    const newTopic = {
-        topic: req.body.topic
-    };
-
-    admin.firestore().collection('topics').add(newTopic)
-    .then((doc) => {
-        const resTopic = newTopic;
-        newTopic.topicId = doc.id;
-        return res.status(200).json(resTopic);
+  admin
+    .firestore()
+    .collection("topics")
+    .add(newTopic)
+    .then(doc => {
+      const resTopic = newTopic;
+      newTopic.topicId = doc.id;
+      return res.status(200).json(resTopic);
     })
-    .catch((err) => {
-        console.error(err);
-        return res.status(500).json({ error: 'something is wrong'});
+    .catch(err => {
+      console.error(err);
+      return res.status(500).json({ error: "something is wrong" });
     });
 };
 
 exports.getAllTopics = (req, res) => {
-    admin.firestore().collection('topics').get()
-    .then((data) => {
-        let topics = [];
-        data.forEach(function(doc) {
-            topics.push(doc.data());
-        });
-        return res.status(200).json(topics);
-    })
-    .catch((err) => {
-        console.error(err);
-        return res.status(500).json({error: 'Failed to fetch all topics.'})
+  admin
+    .firestore()
+    .collection("topics")
+    .get()
+    .then(data => {
+      let topics = [];
+      data.forEach(function(doc) {
+        topics.push(doc.data());
+      });
+      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) => {
-    const topic = db.doc(`/topics/${req.params.topicId}`);
-    topic.get().then((doc) => {
-        if (!doc.exists) {
-            return res.status(404).json({error: 'Topic not found'});
-        } else {
-            return topic.delete();
-        }
+  const topic = db.doc(`/topics/${req.params.topicId}`);
+  topic
+    .get()
+    .then(doc => {
+      if (!doc.exists) {
+        return res.status(404).json({ error: "Topic not found" });
+      } else {
+        return topic.delete();
+      }
     })
     .then(() => {
-        res.json({ message: 'Topic successfully deleted!'});
+      res.json({ message: "Topic successfully deleted!" });
     })
-    .catch((err) => {
-        console.error(err);
-        return res.status(500).json({error: 'Failed to delete topic.'})
-    })
-}
\ No newline at end of file
+    .catch(err => {
+      console.error(err);
+      return res.status(500).json({ error: "Failed to delete topic." });
+    });
+};
diff --git a/functions/index.js b/functions/index.js
index 3be20a4..981eabd 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -44,8 +44,7 @@ app.get("/user", fbAuth, getAuthenticatedUser);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, putPost 
-} = require("./handlers/post");
+const { getallPostsforUser, putPost } = require("./handlers/post");
 
 app.get("/getallPostsforUser", getallPostsforUser);
 
@@ -55,11 +54,7 @@ app.post("/putPost", fbAuth, putPost);
 /*------------------------------------------------------------------*
  *  handlers/topic.js                                                *
  *------------------------------------------------------------------*/
-const {
-  putTopic,
-  getAllTopics,
-  deleteTopic
-} = require("./handlers/topic");
+const { putTopic, getAllTopics, deleteTopic } = require("./handlers/topic");
 
 // add topic to database
 app.post("/putTopic", fbAuth, putTopic);
diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index c413374..992347d 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -10,27 +10,27 @@ import jwtDecode from "jwt-decode";
 // Redux
 import { Provider } from "react-redux";
 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';
+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
 import AuthRoute from "./util/AuthRoute";
 
-axios.defaults.baseURL = 'http://localhost:5006/twistter-e4649/us-central1/api';
+axios.defaults.baseURL = "http://localhost:5006/twistter-e4649/us-central1/api";
 
 // Pages
-import home from './pages/Home';
-import signup from './pages/Signup';
-import login from './pages/Login';
-import user from './pages/user';
-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 home from "./pages/Home";
+import signup from "./pages/Signup";
+import login from "./pages/Login";
+import user from "./pages/user";
+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";
 
 const theme = createMuiTheme(themeObject);
 
@@ -42,39 +42,37 @@ if (token) {
     window.location.href = "/login";
   } else {
     store.dispatch({ type: SET_AUTHENTICATED });
-    axios.defaults.headers.common['Authorization'] = token;
+    axios.defaults.headers.common["Authorization"] = token;
     store.dispatch(getUserData());
   }
 }
 
-
 class App extends Component {
   render() {
     return (
       <MuiThemeProvider theme={theme}>
         <Provider store={store}>
           <Router>
-            <div className='container' >
+            <div className="container">
               <Navbar />
             </div>
 
             <div className="app">
               <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} />
-              <Route exact path="/logout" component={logout} />
-              <Route exact path="/delete" component={Delete} />
+                {/* 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} />
+                <Route exact path="/logout" component={logout} />
+                <Route exact path="/delete" component={Delete} />
 
-              <Route exact path="/user" component={user} />
-              <Route exact path="/home" component={writeMicroblog} />
-              <Route exact path="/edit" component={editProfile} />
-              {/* <Route exact path="/user" component={userLine} /> */}
+                <Route exact path="/user" component={user} />
+                <Route exact path="/home" component={writeMicroblog} />
+                <Route exact path="/edit" component={editProfile} />
+                {/* <Route exact path="/user" component={userLine} /> */}
 
-              <AuthRoute exact path="/" component={home}/>
+                <AuthRoute exact path="/" component={home} />
               </Switch>
             </div>
-
           </Router>
         </Provider>
       </MuiThemeProvider>
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index b1570d8..8d3dced 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -1,108 +1,129 @@
 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 { BrowserRouter as Router } from "react-router-dom";
+import Route from "react-router-dom/Route";
+import axios from "axios";
 
 class Writing_Microblogs extends Component {
-    
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: '',
-            title: '',
-            topics: '',
-            characterCount: 250
-            
-        };
-        
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: "",
+      title: "",
+      topics: "",
+      characterCount: 250
+    };
 
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-        this.handleChangeforPost = this.handleChangeforPost.bind(this);
-        this.handleChangeforTopics = this.handleChangeforTopics.bind(this);
-        
-    }
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChangeforPost = this.handleChangeforPost.bind(this);
+    this.handleChangeforTopics = this.handleChangeforTopics.bind(this);
+  }
 
-    handleChange(event) {
-        this.setState( {title: event.target.value });
-    }
+  handleChange(event) {
+    this.setState({ title: event.target.value });
+  }
 
-    handleChangeforTopics(event) {
-        this.setState( {topics: event.target.value});
-    }
+  handleChangeforTopics(event) {
+    this.setState({ topics: event.target.value });
+  }
 
-    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,  
-            userHandle: "new user",
-            userImage: "bing-url",
-            microBlogTitle: this.state.title,
-            microBlogTopics: this.state.topics.split(', ')
-        }
-        const headers = {
-            headers: { 'Content-Type': 'application/json'}
-        }
-        
-        axios
-            .post('/putPost', postData, headers)
-            .then((res) =>{
-                alert('Post was shared successfully!')
-                console.log(res.data);
-            })
-            .catch((err) => {
-                alert('An error occured.');
-                console.error(err);
-            })
-        event.preventDefault();
-        this.setState({value: '', title: '',characterCount: 250, topics: ''})
-    }
+  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,
+      userHandle: "new user",
+      userImage: "bing-url",
+      microBlogTitle: this.state.title,
+      microBlogTopics: this.state.topics.split(", ")
+    };
+    const headers = {
+      headers: { "Content-Type": "application/json" }
+    };
 
-    handleChangeforPost(event) {
-        this.setState({value: event.target.value })
-    }
+    axios
+      .post("/putPost", postData, headers)
+      .then(res => {
+        alert("Post was shared successfully!");
+        console.log(res.data);
+      })
+      .catch(err => {
+        alert("An error occured.");
+        console.error(err);
+      });
+    event.preventDefault();
+    this.setState({ value: "", title: "", characterCount: 250, topics: "" });
+  }
 
-    handleChangeforCharacterCount(event) {
-        const charCount = event.target.value.length
-        const charRemaining = 250 - charCount
-        this.setState({characterCount: charRemaining })
-    
-    }
+  handleChangeforPost(event) {
+    this.setState({ value: event.target.value });
+  }
 
-    render() {
-        return (
-            <div>
-            <div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "50px" }}>         
-             <form>
-                    <textarea placeholder="Enter Microblog Title" value={this.state.title} required onChange={this.handleChange} cols={30} rows={1} />
+  handleChangeforCharacterCount(event) {
+    const charCount = event.target.value.length;
+    const charRemaining = 250 - charCount;
+    this.setState({ characterCount: charRemaining });
+  }
 
-            </form>
+  render() {
+    return (
+      <div>
+        <div
+          style={{
+            width: "200px",
+            height: "50px",
+            marginTop: "180px",
+            marginLeft: "50px"
+          }}
+        >
+          <form>
+            <textarea
+              placeholder="Enter Microblog Title"
+              value={this.state.title}
+              required
+              onChange={this.handleChange}
+              cols={30}
+              rows={1}
+            />
+          </form>
+        </div>
+        <div style={{ width: "200px", height: "50px", marginLeft: "50px" }}>
+          <form>
+            <textarea
+              placeholder="Enter topics seperated by a comma"
+              value={this.state.topics}
+              required
+              onChange={this.handleChangeforTopics}
+              cols={40}
+              rows={1}
+            />
+          </form>
+        </div>
+
+        <div style={{ width: "200px", marginLeft: "50px" }}>
+          <form onSubmit={this.handleSubmit}>
+            <textarea
+              value={this.state.value}
+              required
+              maxLength="250"
+              placeholder="Write Microblog here..."
+              onChange={e => {
+                this.handleChangeforPost(e);
+                this.handleChangeforCharacterCount(e);
+              }}
+              cols={40}
+              rows={20}
+            />
+            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
+              <p2>Characters Left: {this.state.characterCount}</p2>
             </div>
-            <div style={{ width: "200px", height: "50px", marginLeft: "50px"}} >         
-            <form>                    
-                <textarea placeholder="Enter topics seperated by a comma" value={this.state.topics} required onChange={this.handleChangeforTopics} cols={40} rows={1} />
-            </form>
-             </div>
-             
-             <div style={{ width: "200px", marginLeft: "50px"}}>        
-                <form onSubmit={this.handleSubmit}>
-                    <textarea value={this.state.value} required maxLength="250" placeholder= "Write Microblog here..." 
-                        onChange = { (e) => { this.handleChangeforPost(e); this.handleChangeforCharacterCount(e) } } cols={40} rows={20} />      
-                 <div style={{ fontSize: "14px", marginRight: "-100px"}} >
-                    <p2>Characters Left: {this.state.characterCount}</p2>
-                 </div>
-                 <div style={{ marginRight: "-100px"  }}>        
-                    <button onClick>Share Post</button> 
-                 </div>
-                </form>
-             </div>
-             </div>
-            
-        );
-    }
-
-
+            <div style={{ marginRight: "-100px" }}>
+              <button onClick>Share Post</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
 }
 
-export default Writing_Microblogs;
\ No newline at end of file
+export default Writing_Microblogs;
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 27a0c94..78f4126 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,53 +1,65 @@
 /* eslint-disable */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
 //import '../App.css';
-import { makeStyles, styled } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Card from '@material-ui/core/Card';
-import Chip from '@material-ui/core/Chip';
+import { makeStyles, styled } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Card from "@material-ui/core/Card";
+import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
-import AddCircle from '@material-ui/icons/AddCircle';
-import TextField from '@material-ui/core/TextField';
+import AddCircle from "@material-ui/icons/AddCircle";
+import TextField from "@material-ui/core/TextField";
 
 // component
-import Userline from '../Userline';
-import noImage from '../images/no-img.png';
+import Userline from "../Userline";
+import noImage from "../images/no-img.png";
 
 const MyChip = styled(Chip)({
   margin: 2,
-  color: 'primary'
+  color: "primary"
 });
 
-class user extends Component {  
+class user extends Component {
   state = {
     profile: null,
     imageUrl: null,
     topics: null,
-    newTopic: null
+    newTopic: null,
+    deleteTopic: null
   };
-  
-  handleDelete = (topic) => {
-    alert(`Delete topic: ${topic}!`);
-  }
-  
+
+  handleDelete = () => {
+    // axios
+    // .delete(`/deleteTopic/${topic}`)
+    // .then(
+    //   function (response) {
+    //     console.log(response);
+    //   }
+    // )
+    // .catch(function (err) {
+    //   console.log(err);
+    // });
+    alert(`Delete topic: ${this.state.deleteTopic}!`);
+  };
+
   handleAddCircle = () => {
-    axios.post('/putTopic', {
-      topic: this.state.newTopic
-    })
-    .then(function () {
-      location.reload();
-    })
-    .catch(function (err) {
-      console.log(err);
-    });
-  }
+    axios
+      .post("/putTopic", {
+        topic: this.state.newTopic
+      })
+      .then(function() {
+        location.reload();
+      })
+      .catch(function(err) {
+        console.log(err);
+      });
+  };
 
   handleChange(event) {
     this.setState({
       newTopic: event.target.value
-    })
+    });
   }
 
   componentDidMount() {
@@ -65,32 +77,36 @@ class user extends Component {
       .then(res => {
         this.setState({
           topics: res.data
-        })
+        });
       })
       .catch(err => console.log(err));
   }
   render() {
-    const classes = this.props;
     let profileMarkup = this.state.profile ? (
       <p>
-      <Typography variant='h5'>{this.state.profile}</Typography>
-      </p>) : (<p>loading username...</p>);
-    
+        <Typography variant="h5">{this.state.profile}</Typography>
+      </p>
+    ) : (
+      <p>loading username...</p>
+    );
 
     let topicsMarkup = this.state.topics ? (
-      this.state.topics.map(topic => <MyChip 
-        label={{topic}.topic.topic}
-        key={{topic}.topic.topicId}
-        onDelete={ (topic) => this.handleDelete(topic)}/>)
-    ) : (<p> loading topics...</p>);
+      this.state.topics.map(topic => (
+        <MyChip
+          label={{ topic }.topic.topic}
+          key={{ topic }.topic.topicId}
+          onDelete={this.handleDelete}
+        />
+      ))
+    ) : (
+      <p> loading topics...</p>
+    );
 
     let imageMarkup = this.state.imageUrl ? (
-      <img
-      src={this.state.imageUrl}
-      height="250"
-      width="250"
-      />
-    ) : (<img src={noImage}/>);
+      <img src={this.state.imageUrl} height="250" width="250" />
+    ) : (
+      <img src={noImage} />
+    );
 
     return (
       <Grid container spacing={16}>
@@ -102,19 +118,15 @@ class user extends Component {
           {profileMarkup}
           {topicsMarkup}
           <TextField
-          id="newTopic"
-          label="new topic"
-          defaultValue=""
-          margin="normal"
-          variant="outlined"
-          value={this.state.newTopic}
-          onChange={ (event) => this.handleChange(event)}
-          />
-          <AddCircle
-            color="primary"
-            clickable
-            onClick={this.handleAddCircle}
+            id="newTopic"
+            label="new topic"
+            defaultValue=""
+            margin="normal"
+            variant="outlined"
+            value={this.state.newTopic}
+            onChange={event => this.handleChange(event)}
           />
+          <AddCircle color="primary" clickable onClick={this.handleAddCircle} />
         </Grid>
       </Grid>
     );

From fd226b454ed759c34e37ae867f9d49cf3c3f276f Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Sun, 27 Oct 2019 14:46:31 -0400
Subject: [PATCH 02/79] Delete users fully works now

---
 functions/handlers/users.js           |  8 ++------
 functions/index.js                    |  2 +-
 twistter-frontend/src/pages/Delete.js | 12 ++++++++----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 7e4b018..cc54149 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -151,18 +151,14 @@ exports.deleteUser = (req, res) => {
   firebase.auth().onAuthStateChanged(function(user) {
     currentUser = user;
     if (currentUser) {
-      /*db.collection("users").doc(`${currentUser.handle}`).delete()
+      db.collection("users").doc(`${req.user.handle}`).delete()
       .then(function() {
         res.status(200).send("Removed user from database.");
         return;
       })
       .catch(function(err) {
         res.status(500).send("Failed to remove user from database.", err);
-      });*/
-
-      //let ref = db.collection('users');
-      //let userDoc = ref.where('userId', '==', currentUser.uid).get();
-      //userDoc.ref.delete();
+      });
 
       currentUser.delete()
       .then(function() {
diff --git a/functions/index.js b/functions/index.js
index 41a126c..45d181a 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -29,7 +29,7 @@ app.post("/signup", signup);
 app.post("/login", login);
 
 //Deletes user account
-app.delete("/delete", deleteUser);
+app.delete("/delete", fbAuth, deleteUser);
 
 app.get("/getUser/:handle", getUserDetails);
 
diff --git a/twistter-frontend/src/pages/Delete.js b/twistter-frontend/src/pages/Delete.js
index ab610b1..eafeecf 100644
--- a/twistter-frontend/src/pages/Delete.js
+++ b/twistter-frontend/src/pages/Delete.js
@@ -7,7 +7,8 @@ import Button from "@material-ui/core/Button";
 import withStyles from "@material-ui/core/styles/withStyles";
 
 // Redux stuff
-import { logoutUser } from "../redux/actions/userActions";
+//import { logoutUser } from "../redux/actions/userActions";
+import { deleteUser } from "../redux/actions/userActions";
 import { connect } from "react-redux";
 
 const styles = {
@@ -32,7 +33,8 @@ const styles = {
 export class Delete extends Component {
 
   componentDidMount() {
-    this.props.logoutUser();
+    //this.props.logoutUser();
+    this.props.deleteUser();
     this.props.history.push('/');
   }
 
@@ -45,10 +47,12 @@ const mapStateToProps = (state) => ({
   user: state.user
 });
 
-const mapActionsToProps = { logoutUser };
+//const mapActionsToProps = { logoutUser };
+const mapActionsToProps = { deleteUser };
 
 Delete.propTypes = {
-  logoutUser: PropTypes.func.isRequired,
+  //logoutUser: PropTypes.func.isRequired,
+  deleteUser: PropTypes.func.isRequired,
   user: PropTypes.object.isRequired,
   classes: PropTypes.object.isRequired
 };

From 5fa4caf0a34c4cbe9e5e910c7e6d5f5ae3d6bb7b Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Sun, 27 Oct 2019 17:47:04 -0400
Subject: [PATCH 03/79] Log in with username fully works now

---
 functions/handlers/users.js | 60 +++++++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index cc54149..87733bc 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -7,8 +7,6 @@ const { validateUpdateProfileInfo } = require("../util/validator");
 const firebase = require("firebase");
 firebase.initializeApp(config);
 
-var handle2Email = new Map();
-
 exports.signup = (req, res) => {
   const newUser = {
     email: req.body.email,
@@ -79,7 +77,6 @@ exports.signup = (req, res) => {
         createdAt: newUser.createdAt,
         userId
       };
-      handle2Email.set(userCred.handle, userCred.email);
       return db.doc(`/users/${newUser.handle}`).set(userCred);
     })
     .then(() => {
@@ -97,7 +94,6 @@ exports.signup = (req, res) => {
 exports.login = (req, res) => {
   const user = {
     email: req.body.email,
-    handle: req.body.handle,
     password: req.body.password
   };
 
@@ -106,25 +102,62 @@ exports.login = (req, res) => {
 
   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,}))$/;
 
-  // Email check
+  // Checks if email/username field is empty
   if (user.email.trim() === "") {
     errors.email = "Email must not be blank.";
   }
-  else if (!user.email.match(emailRegEx)) {
-    user.email = handle2Email.get(user.email);
-  }
 
-  // Password check
+  // Checks if password field is empty
   if (user.password.trim() === "") {
     errors.password = "Password must not be blank.";
   }
 
-  // Checking if any errors have been raised
+  // Checks if any of the above two errors were found
   if (Object.keys(errors).length > 0) {
     return res.status(400).json(errors);
   }
 
-  firebase
+  // Email/username field is username since it's not in email format
+  if (!user.email.match(emailRegEx)) {
+    var userDoc = db.collection("users").doc(`${user.email}`);
+    userDoc.get()
+    .then(function(doc) {
+        if (doc.exists) {
+          user.email = doc.data().email;
+        }
+        else {
+          res.status(500).send("No such doc");
+        }
+        return;
+    })
+    .then(function() {
+      firebase
+      .auth()
+      .signInWithEmailAndPassword(user.email, user.password)
+      .then((data) => {
+        return data.user.getIdToken();
+      })
+      .then((token) => {
+        return res.status(200).json({ token });
+      })
+      .catch((err) => {
+        console.error(err);
+        if (err.code === "auth/wrong-password" || err.code === "auth/invalid-email") {
+          return res
+                .status(403)
+                .json({ general: "Invalid credentials. Please try again." });
+        }
+        return res.status(500).json({ error: err.code });
+      });
+      return;
+    })
+    .catch(function(err) {
+      res.status(500).send(err);
+    });
+  }
+  // Email/username field is username
+  else {
+    firebase
     .auth()
     .signInWithEmailAndPassword(user.email, user.password)
     .then((data) => {
@@ -137,11 +170,12 @@ exports.login = (req, res) => {
       console.error(err);
       if (err.code === "auth/wrong-password" || err.code === "auth/invalid-email") {
         return res
-          .status(403)
-          .json({ general: "Invalid credentials. Please try again." });
+              .status(403)
+              .json({ general: "Invalid credentials. Please try again." });
       }
       return res.status(500).json({ error: err.code });
     });
+  }
 };
 
 //Deletes user account

From 657277bcad1c0893f8733620744ca96cf7773458 Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Sun, 27 Oct 2019 23:11:24 -0400
Subject: [PATCH 04/79] Username and user id now show in post data

---
 functions/handlers/post.js                    |  8 +-
 twistter-frontend/src/App.js                  |  1 -
 twistter-frontend/src/Writing_Microblogs.js   | 14 +--
 .../src/components/layout/NavBar.js           | 87 +++++++++----------
 4 files changed, 51 insertions(+), 59 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index e3d0c01..dc88e45 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -1,17 +1,17 @@
 /* eslint-disable promise/always-return */
 const admin = require('firebase-admin');
-exports.putPost = (req, res) => {
 
+exports.putPost = (req, res) => {
     const newPost = {
         body: req.body.body,
-        userHandle: req.body.userHandle,
+        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
-        
     };
 
     admin.firestore().collection('posts').add(newPost)
@@ -27,7 +27,7 @@ exports.putPost = (req, res) => {
 };
 
 exports.getallPostsforUser = (req, res) => {
-    admin.firestore().collection('posts').where('userHandle', '==', 'new user' ).get()
+    admin.firestore().collection('posts').where('userHandle', '==', req.userData.handle ).get()
     .then((data) => {
         let posts = [];
         data.forEach(function(doc) {
diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index b767156..d2b880c 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -67,7 +67,6 @@ class App extends Component {
               <Route exact path="/user" component={user} />
               <Route exact path="/home" component={writeMicroblog} />
               <Route exact path="/edit" component={editProfile} />
-              {/* <Route exact path="/user" component={userLine} /> */}
 
               <AuthRoute exact path="/" component={home}/>
               </Switch>
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index b1570d8..26f061d 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -5,7 +5,7 @@ import axios from 'axios';
 
 
 class Writing_Microblogs extends Component {
-    
+
     constructor(props) {
         super(props);
         this.state = {
@@ -15,13 +15,13 @@ class Writing_Microblogs extends Component {
             characterCount: 250
             
         };
-        
 
+        
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleChangeforPost = this.handleChangeforPost.bind(this);
         this.handleChangeforTopics = this.handleChangeforTopics.bind(this);
-        
+    
     }
 
     handleChange(event) {
@@ -33,10 +33,10 @@ class Writing_Microblogs extends Component {
     }
 
     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,  
-            userHandle: "new user",
+            body: this.state.value, 
+
             userImage: "bing-url",
             microBlogTitle: this.state.title,
             microBlogTopics: this.state.topics.split(', ')
@@ -102,7 +102,7 @@ class Writing_Microblogs extends Component {
         );
     }
 
-
+    
 }
 
 export default Writing_Microblogs;
\ No newline at end of file
diff --git a/twistter-frontend/src/components/layout/NavBar.js b/twistter-frontend/src/components/layout/NavBar.js
index 5f8d28d..f719ab8 100644
--- a/twistter-frontend/src/components/layout/NavBar.js
+++ b/twistter-frontend/src/components/layout/NavBar.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 // Material UI stuff
 import AppBar from '@material-ui/core/AppBar';
@@ -10,70 +10,63 @@ 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"
-//     }
-//   };
-
-
-
+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() {
+export class Navbar extends Component {
+    render() {
+        const authenticated = this.props.user.authenticated;
         return (
             <AppBar>
                 <ToolBar>
                     <Button component={ Link } to='/'>
                         Home
                     </Button>
-                    <Button component={ Link } to='/login'>
+                    {!authenticated && <Button component={ Link } to='/login'>
                         Login
-                    </Button>
-                    <Button component={ Link } to='/signup'>
+                    </Button>}
+                    {!authenticated && <Button component={ Link } to='/signup'>
                         Sign Up
-                    </Button>
-                    <Button component={ Link } to='/logout'>
+                    </Button>}
+                    {authenticated && <Button component={ Link } to='/logout'>
                         Logout
-                    </Button>
-                    <Button component={ Link } to='/delete'>
+                    </Button>}
+                    {authenticated && <Button component={ Link } to='/delete'>
                         Delete Account
-                    </Button>
+                    </Button>}
                 </ToolBar>
             </AppBar>
         )
     }
 }
 
-// const mapStateToProps = (state) => ({
-//     user: state.user
-// })
+const mapStateToProps = (state) => ({
+    user: state.user
+})
 
-// const mapActionsToProps = { logoutUser };
+Navbar.propTypes = {
+    user: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
+}
 
-// Navbar.propTypes = {
-//     logoutUser: PropTypes.func.isRequired,
-//     user: PropTypes.object.isRequired,
-//     classes: PropTypes.object.isRequired
-// }
+export default connect(mapStateToProps)(withStyles(styles)(Navbar));
 
-// export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Navbar));
-
-export default Navbar;
+// export default Navbar;

From 70a12dcca42a4b89c62b5718c25b11a6a5fb59ca Mon Sep 17 00:00:00 2001
From: shobhitm23 <smakhij@purdue.edu>
Date: Mon, 28 Oct 2019 00:21:29 -0400
Subject: [PATCH 05/79] Arrow-callback warning

---
 functions/handlers/post.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index c14c61c..2ae8d3c 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -1,3 +1,4 @@
+/* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
 const admin = require('firebase-admin');
 exports.putPost = (req, res) => {
@@ -41,3 +42,7 @@ exports.getallPostsforUser = (req, res) => {
         return res.status(500).json({error: 'Failed to fetch all posts written by specific user.'})
     })
 };
+
+exports.getFilteredPosts = (req, res) => {
+    admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
+};
\ No newline at end of file

From 9525ff7d0ababc8169dee2c5ac2a1d6b81635a63 Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Mon, 28 Oct 2019 17:57:03 -0400
Subject: [PATCH 06/79] Delete post works in Postman but not in actual database

---
 functions/handlers/users.js | 37 ++++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 87733bc..29e045b 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -168,7 +168,7 @@ exports.login = (req, res) => {
     })
     .catch((err) => {
       console.error(err);
-      if (err.code === "auth/wrong-password" || err.code === "auth/invalid-email") {
+      if (err.code === "auth/invalid-email" || err.code === "auth/wrong-password") {
         return res
               .status(403)
               .json({ general: "Invalid credentials. Please try again." });
@@ -181,27 +181,52 @@ exports.login = (req, res) => {
 //Deletes user account
 exports.deleteUser = (req, res) => {
   var currentUser;
-
   firebase.auth().onAuthStateChanged(function(user) {
     currentUser = user;
     if (currentUser) {
+      db.collection("posts").where("userId", "==", req.user.uid).get()
+      .then(function(userPosts) {
+        userPosts.forEach(function(post) {
+          post.delete()
+          .then(function() {
+            res.status(200).send("Successfully removed post from database.");
+            return;
+          })
+          .catch(function(err) {
+            res.status(500).send("Failed to removed post from database.", err);
+          });
+        });
+        return;
+      })
+      .then(function() {
+        res.status(200).send("Successfully removed all user's posts from database.");
+        return;
+      })
+      .catch(function(err) {
+        res.status(500).send("Failed to remove all user's posts from database.", err);
+      });
+
+
+
       db.collection("users").doc(`${req.user.handle}`).delete()
       .then(function() {
-        res.status(200).send("Removed user from database.");
+        res.status(200).send("Sucessfully removed user from database.");
         return;
       })
       .catch(function(err) {
         res.status(500).send("Failed to remove user from database.", err);
       });
 
+
+      
       currentUser.delete()
       .then(function() {
-        console.log("User successfully deleted.");
+        console.log("Successfully deleted user.");
         res.status(200).send("Deleted user.");
         return;
       })
       .catch(function(err) {
-        console.log("Error deleting user.", err);
+        console.log("Failed to delete user.", err);
         res.status(500).send("Failed to delete user.");
       });
     } 
@@ -228,8 +253,6 @@ exports.getProfileInfo = (req, res) => {
 
 // Updates the data in the database of the user who is currently logged in
 exports.updateProfileInfo = (req, res) => {
-  // TODO: Add functionality for adding/updating profile images
-
   // Data validation
   const { valid, errors, profileData } = validateUpdateProfileInfo(req.body);
   if (!valid) return res.status(400).json(errors);

From c482f567620aaf99de0906a543cd1b0b8b7939fc Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Mon, 28 Oct 2019 20:14:38 -0400
Subject: [PATCH 07/79] Invalid credential message displays after non-exisitng
 email is passed in

---
 functions/handlers/users.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 29e045b..6f2eac9 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -126,7 +126,7 @@ exports.login = (req, res) => {
           user.email = doc.data().email;
         }
         else {
-          res.status(500).send("No such doc");
+          return res.status(403).json({ general: "Invalid credentials. Please try again." });
         }
         return;
     })
@@ -142,17 +142,18 @@ exports.login = (req, res) => {
       })
       .catch((err) => {
         console.error(err);
-        if (err.code === "auth/wrong-password" || err.code === "auth/invalid-email") {
-          return res
-                .status(403)
-                .json({ general: "Invalid credentials. Please try again." });
+        if (err.code === "auth/user-not-found" || err.code === "auth/wrong-password") {
+          return res.status(403).json({ general: "Invalid credentials. Please try again." });
         }
         return res.status(500).json({ error: err.code });
       });
       return;
     })
     .catch(function(err) {
-      res.status(500).send(err);
+      if(!doc.exists) {
+        return res.status(403).json({ general: "Invalid credentials. Please try again." });
+      }
+      return res.status(500).send(err);
     });
   }
   // Email/username field is username
@@ -168,10 +169,8 @@ exports.login = (req, res) => {
     })
     .catch((err) => {
       console.error(err);
-      if (err.code === "auth/invalid-email" || err.code === "auth/wrong-password") {
-        return res
-              .status(403)
-              .json({ general: "Invalid credentials. Please try again." });
+      if (err.code === "auth/user-not-found" || err.code === "auth/wrong-password") {
+        return res.status(403).json({ general: "Invalid credentials. Please try again." });
       }
       return res.status(500).json({ error: err.code });
     });

From b20408c144082dfac6a648800a2f2b43f48c5ba1 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Mon, 28 Oct 2019 21:38:32 -0400
Subject: [PATCH 08/79] delete topic

---
 twistter-frontend/src/pages/user.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 78f4126..f4f325c 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -29,7 +29,7 @@ class user extends Component {
     deleteTopic: null
   };
 
-  handleDelete = () => {
+  handleDelete = event => {
     // axios
     // .delete(`/deleteTopic/${topic}`)
     // .then(
@@ -40,7 +40,7 @@ class user extends Component {
     // .catch(function (err) {
     //   console.log(err);
     // });
-    alert(`Delete topic: ${this.state.deleteTopic}!`);
+    console.log(event);
   };
 
   handleAddCircle = () => {

From 3d875e2bde289945a7cdfed3e15b6d12ab161262 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Mon, 28 Oct 2019 23:25:12 -0400
Subject: [PATCH 09/79] Fixing up profile UI

---
 twistter-frontend/src/pages/user.js | 274 ++++++++++++++++++----------
 1 file changed, 176 insertions(+), 98 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 27a0c94..d48279b 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -3,122 +3,200 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 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 Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import Chip from '@material-ui/core/Chip';
-import Typography from "@material-ui/core/Typography";
+import Typography from '@material-ui/core/Typography';
 import AddCircle from '@material-ui/icons/AddCircle';
 import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import GridListTileBar from '@material-ui/core/GridListTileBar';
 
 // component
 import Userline from '../Userline';
 import noImage from '../images/no-img.png';
+import Paper from '@material-ui/core/Paper';
+
+const styles = {
+	button: {
+		positon: 'relative',
+		float: 'left',
+		marginLeft: 30,
+		marginTop: 15
+	},
+	paper: {
+		// marginLeft: "10%",
+		// marginRight: "10%"
+	}
+};
 
 const MyChip = styled(Chip)({
-  margin: 2,
-  color: 'primary'
+	margin: 2,
+	color: 'primary'
 });
 
-class user extends Component {  
-  state = {
-    profile: null,
-    imageUrl: null,
-    topics: null,
-    newTopic: null
-  };
-  
-  handleDelete = (topic) => {
-    alert(`Delete topic: ${topic}!`);
-  }
-  
-  handleAddCircle = () => {
-    axios.post('/putTopic', {
-      topic: this.state.newTopic
-    })
-    .then(function () {
-      location.reload();
-    })
-    .catch(function (err) {
-      console.log(err);
-    });
-  }
+class user extends Component {
+	state = {
+		profile: null,
+		imageUrl: null,
+		topics: null,
+		newTopic: null
+	};
 
-  handleChange(event) {
-    this.setState({
-      newTopic: event.target.value
-    })
-  }
+	handleDelete = (topic) => {
+		alert(`Delete topic: ${topic}!`);
+	};
 
-  componentDidMount() {
-    axios
-      .get("/user")
-      .then(res => {
-        this.setState({
-          profile: res.data.credentials.handle,
-          imageUrl: res.data.credentials.imageUrl
-        });
-      })
-      .catch(err => console.log(err));
-    axios
-      .get("/getAllTopics")
-      .then(res => {
-        this.setState({
-          topics: res.data
-        })
-      })
-      .catch(err => console.log(err));
-  }
-  render() {
-    const classes = this.props;
-    let profileMarkup = this.state.profile ? (
-      <p>
-      <Typography variant='h5'>{this.state.profile}</Typography>
-      </p>) : (<p>loading username...</p>);
-    
+	handleAddCircle = () => {
+		axios
+			.post('/putTopic', {
+				topic: this.state.newTopic
+			})
+			.then(function() {
+				location.reload();
+			})
+			.catch(function(err) {
+				console.log(err);
+			});
+	};
 
-    let topicsMarkup = this.state.topics ? (
-      this.state.topics.map(topic => <MyChip 
-        label={{topic}.topic.topic}
-        key={{topic}.topic.topicId}
-        onDelete={ (topic) => this.handleDelete(topic)}/>)
-    ) : (<p> loading topics...</p>);
+	handleChange(event) {
+		this.setState({
+			newTopic: event.target.value
+		});
+	}
 
-    let imageMarkup = this.state.imageUrl ? (
-      <img
-      src={this.state.imageUrl}
-      height="250"
-      width="250"
-      />
-    ) : (<img src={noImage}/>);
+	componentDidMount() {
+		axios
+			.get('/user')
+			.then((res) => {
+				this.setState({
+					profile: res.data.credentials.handle,
+					imageUrl: res.data.credentials.imageUrl
+				});
+			})
+			.catch((err) => console.log(err));
+		axios
+			.get('/getAllTopics')
+			.then((res) => {
+				this.setState({
+					topics: res.data
+				});
+			})
+			.catch((err) => console.log(err));
+	}
+	render() {
+		const { classes } = this.props;
+		let profileMarkup = this.state.profile ? (
+			<p>
+				<Typography variant="h5">{this.state.profile}</Typography>
+			</p>
+		) : (
+			<p>loading username...</p>
+		);
 
-    return (
-      <Grid container spacing={16}>
-        <Grid item sm={8} xs={12}>
-          <p>Post</p>
-        </Grid>
-        <Grid item sm={4} xs={12}>
-          {imageMarkup}
-          {profileMarkup}
-          {topicsMarkup}
-          <TextField
-          id="newTopic"
-          label="new topic"
-          defaultValue=""
-          margin="normal"
-          variant="outlined"
-          value={this.state.newTopic}
-          onChange={ (event) => this.handleChange(event)}
-          />
-          <AddCircle
-            color="primary"
-            clickable
-            onClick={this.handleAddCircle}
-          />
-        </Grid>
-      </Grid>
-    );
-  }
+		let topicsMarkup = this.state.topics ? (
+			this.state.topics.map((topic) => (
+				<MyChip
+					label={{ topic }.topic.topic}
+					key={{ topic }.topic.topicId}
+					onDelete={(topic) => this.handleDelete(topic)}
+				/>
+			))
+		) : (
+			<p> loading topics...</p>
+		);
+
+		let imageMarkup = this.state.imageUrl ? (
+			<img src={this.state.imageUrl} height="250" width="250" />
+		) : (
+			<img src={noImage} />
+		);
+
+		// 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 ? (
+			<Button className={classes.button} variant="outlined" color="primary">
+				Edit Profile
+			</Button>
+		) : null;
+
+		return (
+			// <Grid container spacing={16}>
+			//   <Grid item sm={8} xs={12}>
+			//     <p>Posts go here</p>
+			//   </Grid>
+			//   <Grid item sm={4} xs={12}>
+			//     {editButtonMarkup}
+			//     {imageMarkup}
+			//     {profileMarkup}
+			//     {topicsMarkup}
+			//     <TextField
+			//     id="newTopic"
+			//     label="new topic"
+			//     defaultValue=""
+			//     margin="normal"
+			//     variant="outlined"
+			//     value={this.state.newTopic}
+			//     onChange={ (event) => this.handleChange(event)}
+			//     />
+			//     <AddCircle
+			//       color="primary"
+			//       clickable
+			//       onClick={this.handleAddCircle}
+			//     />
+			//   </Grid>
+			// </Grid>
+			<div>
+				{/* <Paper className={classes.paper}> */}
+
+				<Grid container>
+					<Grid item sm>
+						{editButtonMarkup}
+					</Grid>
+					<Grid item sm>
+						<Grid container direction="column">
+							<Grid item sm>
+								{imageMarkup}
+								{profileMarkup}
+								{topicsMarkup}
+								<TextField
+									id="newTopic"
+									label="new topic"
+									defaultValue=""
+									margin="normal"
+									variant="outlined"
+									value={this.state.newTopic}
+									onChange={(event) => this.handleChange(event)}
+								/>
+								<AddCircle color="primary" clickable onClick={this.handleAddCircle} />
+							</Grid>
+							<Grid item sm>
+								<p>posts here</p>
+							</Grid>
+						</Grid>
+					</Grid>
+					<Grid item sm />
+				</Grid>
+				{/* </Paper> */}
+
+				{/* <GridList>
+        <GridListTile key="subheader">
+          <p>Posts go here</p>
+        </GridListTile>
+      </GridList> */}
+			</div>
+		);
+	}
 }
 
-export default user;
+// export default user;
+export default withStyles(styles)(user);

From 42b73632c020eef37aae9b03790ef0b2e586f78e Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Tue, 29 Oct 2019 10:34:09 -0400
Subject: [PATCH 10/79] Delete user's posts fully works now

---
 functions/handlers/users.js | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 6f2eac9..3db62dc 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -183,7 +183,22 @@ exports.deleteUser = (req, res) => {
   firebase.auth().onAuthStateChanged(function(user) {
     currentUser = user;
     if (currentUser) {
-      db.collection("posts").where("userId", "==", req.user.uid).get()
+      var post_query = db.collection("posts").where("userHandle", "==", req.user.handle);
+      post_query.get()
+      .then(function(myPosts) {
+        myPosts.forEach(function(doc) {
+          doc.ref.delete();
+        });
+        return;
+      })
+      .then(function() {
+        res.status(200).send("Successfully removed all user's posts from database.");
+        return;
+      })
+      .catch(function(err) {
+        res.status(500).send("Failed to remove all user's posts from database.", err);
+      });
+      /*db.collection("posts").where("userHandle", "==", req.user.handle).get()
       .then(function(userPosts) {
         userPosts.forEach(function(post) {
           post.delete()
@@ -196,14 +211,7 @@ exports.deleteUser = (req, res) => {
           });
         });
         return;
-      })
-      .then(function() {
-        res.status(200).send("Successfully removed all user's posts from database.");
-        return;
-      })
-      .catch(function(err) {
-        res.status(500).send("Failed to remove all user's posts from database.", err);
-      });
+      })*/
 
 
 
@@ -221,7 +229,7 @@ exports.deleteUser = (req, res) => {
       currentUser.delete()
       .then(function() {
         console.log("Successfully deleted user.");
-        res.status(200).send("Deleted user.");
+        res.status(200).send("Sucessfully deleted user.");
         return;
       })
       .catch(function(err) {
@@ -230,8 +238,8 @@ exports.deleteUser = (req, res) => {
       });
     } 
     else {
-      console.log("Cannot get user.");
-      res.status(500).send("Cannot get user.");
+      console.log("Failed to deleter user or cannot get user.");
+      res.status(500).send("Failed to deleter user or cannot get user.");
     }
   });
 };

From 6db14e38683c18559a0d86462b8c285a1e10ec45 Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Tue, 29 Oct 2019 19:39:11 -0400
Subject: [PATCH 11/79] Improved the profile page format

---
 .../src/components/layout/NavBar.js           |  6 ++---
 twistter-frontend/src/pages/editProfile.js    | 23 +++++++++++++++++++
 twistter-frontend/src/pages/user.js           | 20 ++++++++++++----
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/twistter-frontend/src/components/layout/NavBar.js b/twistter-frontend/src/components/layout/NavBar.js
index 38434b5..0c5971f 100644
--- a/twistter-frontend/src/components/layout/NavBar.js
+++ b/twistter-frontend/src/components/layout/NavBar.js
@@ -41,6 +41,9 @@ export class Navbar extends Component {
                     <Button component={ Link } to='/'>
                         Home
                     </Button>
+                    {authenticated && <Button component={ Link } to='/user'>
+                        Profile
+                    </Button>}
                     {!authenticated && <Button component={ Link } to='/login'>
                         Login
                     </Button>}
@@ -50,9 +53,6 @@ export class Navbar extends Component {
                     {authenticated && <Button component={ Link } to='/logout'>
                         Logout
                     </Button>}
-                    {authenticated && <Button component={ Link } to='/delete'>
-                        Delete Account
-                    </Button>}
                 </ToolBar>
             </AppBar>
         )
diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index ff6f3f7..0a31271 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -6,6 +6,7 @@ import PropTypes from "prop-types";
 
 // 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";
@@ -220,12 +221,34 @@ export class edit extends Component {
               color="primary"
               className={classes.button}
               disabled={loading}
+              //component={ Link }
+              //to='/user'
             >
               Submit
               {loading && (
                 <CircularProgress size={30} className={classes.progress} />
               )}
             </Button>
+            <br />
+            <Button
+              //variant="contained"
+              color="primary"
+              className={classes.button}
+              component={ Link }
+              to='/user'
+            >
+              Back to Profile
+            </Button>
+            <br />
+            <Button
+              variant="contained"
+              color="secondary"
+              className={classes.button}
+              component={ Link }
+              to='/user'
+            >
+              Delete Account
+            </Button>
           </form>
         </Grid>
         <Grid item sm />
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 27a0c94..7633295 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -3,10 +3,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
 //import '../App.css';
+import { Link } from 'react-router-dom';
 import { makeStyles, styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import Chip from '@material-ui/core/Chip';
+import Button from '@material-ui/core/Button';
 import Typography from "@material-ui/core/Typography";
 import AddCircle from '@material-ui/icons/AddCircle';
 import TextField from '@material-ui/core/TextField';
@@ -14,6 +16,7 @@ import TextField from '@material-ui/core/TextField';
 // component
 import Userline from '../Userline';
 import noImage from '../images/no-img.png';
+import Writing_Microblogs from '../Writing_Microblogs';
 
 const MyChip = styled(Chip)({
   margin: 2,
@@ -71,6 +74,7 @@ class user extends Component {
   }
   render() {
     const classes = this.props;
+    //const authenticated = this.props.user.authenticated;
     let profileMarkup = this.state.profile ? (
       <p>
       <Typography variant='h5'>{this.state.profile}</Typography>
@@ -93,11 +97,8 @@ class user extends Component {
     ) : (<img src={noImage}/>);
 
     return (
-      <Grid container spacing={16}>
-        <Grid item sm={8} xs={12}>
-          <p>Post</p>
-        </Grid>
-        <Grid item sm={4} xs={12}>
+      <Grid container spacing={24}>
+        <Grid item sm={4} xs={8}>
           {imageMarkup}
           {profileMarkup}
           {topicsMarkup}
@@ -115,6 +116,15 @@ class user extends Component {
             clickable
             onClick={this.handleAddCircle}
           />
+          <br />
+          <Button component={ Link } to='/edit'>Edit Profile Info</Button>
+          {/*authenticated && <Button component={ Link } to='/edit'>Edit Profile Info</Button>*/}
+        </Grid>
+        <Grid item sm={4} xs={8}>
+          <Writing_Microblogs />
+        </Grid>
+        <Grid item sm={4} xs={8}>
+          <p>Post</p>
         </Grid>
       </Grid>
     );

From 8438ce27cf4648a8264e043c8e6dceb457dd0698 Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Tue, 29 Oct 2019 22:25:38 -0400
Subject: [PATCH 12/79] Get user's posts works now

---
 functions/handlers/post.js  | 16 ++++++++++------
 functions/handlers/users.js |  1 -
 functions/index.js          |  2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index dc88e45..83f9558 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -27,16 +27,20 @@ exports.putPost = (req, res) => {
 };
 
 exports.getallPostsforUser = (req, res) => {
-    admin.firestore().collection('posts').where('userHandle', '==', req.userData.handle ).get()
-    .then((data) => {
+    var post_query = admin.firestore().collection("posts").where("userHandle", "==", req.user.handle);
+    post_query.get()
+    .then(function(myPosts) {
         let posts = [];
-        data.forEach(function(doc) {
+        myPosts.forEach(function(doc) {
             posts.push(doc.data());
         });
         return res.status(200).json(posts);
     })
-    .catch((err) => {
-        console.error(err);
-        return res.status(500).json({error: 'Failed to fetch all posts written by specific user.'})
+    .then(function() {
+    res.status(200).send("Successfully retrieved all user's posts from database.");
+    return;
     })
+    .catch(function(err) {
+    res.status(500).send("Failed to retrieve all user's posts from database.", err);
+    });
 };
diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 203aa58..b455b02 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -1,5 +1,4 @@
 /* eslint-disable promise/catch-or-return */
-
 const { admin, db } = require("../util/admin");
 const config = require("../util/config");
 const { validateUpdateProfileInfo } = require("../util/validator");
diff --git a/functions/index.js b/functions/index.js
index 33ce166..dfb27f3 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -47,7 +47,7 @@ app.get("/user", fbAuth, getAuthenticatedUser);
 const { getallPostsforUser, putPost 
 } = require("./handlers/post");
 
-app.get("/getallPostsforUser", getallPostsforUser);
+app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
 // Adds one post to the database
 app.post("/putPost", fbAuth, putPost);

From 3c31db9bf57350bab96d9b61d6537a27dbe494c0 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 29 Oct 2019 23:02:36 -0400
Subject: [PATCH 13/79] Converted tabs back to spaces

---
 twistter-frontend/src/pages/user.js | 306 ++++++++++++++--------------
 1 file changed, 153 insertions(+), 153 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index d48279b..a91dffe 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -23,179 +23,179 @@ import noImage from '../images/no-img.png';
 import Paper from '@material-ui/core/Paper';
 
 const styles = {
-	button: {
-		positon: 'relative',
-		float: 'left',
-		marginLeft: 30,
-		marginTop: 15
-	},
-	paper: {
-		// marginLeft: "10%",
-		// marginRight: "10%"
-	}
+  button: {
+    positon: 'relative',
+    float: 'left',
+    marginLeft: 30,
+    marginTop: 15
+  },
+  paper: {
+    // marginLeft: "10%",
+    // marginRight: "10%"
+  }
 };
 
 const MyChip = styled(Chip)({
-	margin: 2,
-	color: 'primary'
+  margin: 2,
+  color: 'primary'
 });
 
 class user extends Component {
-	state = {
-		profile: null,
-		imageUrl: null,
-		topics: null,
-		newTopic: null
-	};
+  state = {
+    profile: null,
+    imageUrl: null,
+    topics: null,
+    newTopic: null
+  };
 
-	handleDelete = (topic) => {
-		alert(`Delete topic: ${topic}!`);
-	};
+  handleDelete = (topic) => {
+    alert(`Delete topic: ${topic}!`);
+  };
 
-	handleAddCircle = () => {
-		axios
-			.post('/putTopic', {
-				topic: this.state.newTopic
-			})
-			.then(function() {
-				location.reload();
-			})
-			.catch(function(err) {
-				console.log(err);
-			});
-	};
+  handleAddCircle = () => {
+    axios
+      .post('/putTopic', {
+        topic: this.state.newTopic
+      })
+      .then(function() {
+        location.reload();
+      })
+      .catch(function(err) {
+        console.log(err);
+      });
+  };
 
-	handleChange(event) {
-		this.setState({
-			newTopic: event.target.value
-		});
-	}
+  handleChange(event) {
+    this.setState({
+      newTopic: event.target.value
+    });
+  }
 
-	componentDidMount() {
-		axios
-			.get('/user')
-			.then((res) => {
-				this.setState({
-					profile: res.data.credentials.handle,
-					imageUrl: res.data.credentials.imageUrl
-				});
-			})
-			.catch((err) => console.log(err));
-		axios
-			.get('/getAllTopics')
-			.then((res) => {
-				this.setState({
-					topics: res.data
-				});
-			})
-			.catch((err) => console.log(err));
-	}
-	render() {
-		const { classes } = this.props;
-		let profileMarkup = this.state.profile ? (
-			<p>
-				<Typography variant="h5">{this.state.profile}</Typography>
-			</p>
-		) : (
-			<p>loading username...</p>
-		);
+  componentDidMount() {
+    axios
+      .get('/user')
+      .then((res) => {
+        this.setState({
+          profile: res.data.credentials.handle,
+          imageUrl: res.data.credentials.imageUrl
+        });
+      })
+      .catch((err) => console.log(err));
+    axios
+      .get('/getAllTopics')
+      .then((res) => {
+        this.setState({
+          topics: res.data
+        });
+      })
+      .catch((err) => console.log(err));
+  }
+  render() {
+    const { classes } = this.props;
+    let profileMarkup = this.state.profile ? (
+      <p>
+        <Typography variant="h5">{this.state.profile}</Typography>
+      </p>
+    ) : (
+      <p>loading username...</p>
+    );
 
-		let topicsMarkup = this.state.topics ? (
-			this.state.topics.map((topic) => (
-				<MyChip
-					label={{ topic }.topic.topic}
-					key={{ topic }.topic.topicId}
-					onDelete={(topic) => this.handleDelete(topic)}
-				/>
-			))
-		) : (
-			<p> loading topics...</p>
-		);
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map((topic) => (
+        <MyChip
+          label={{ topic }.topic.topic}
+          key={{ topic }.topic.topicId}
+          onDelete={(topic) => this.handleDelete(topic)}
+        />
+      ))
+    ) : (
+      <p> loading topics...</p>
+    );
 
-		let imageMarkup = this.state.imageUrl ? (
-			<img src={this.state.imageUrl} height="250" width="250" />
-		) : (
-			<img src={noImage} />
-		);
+    let imageMarkup = this.state.imageUrl ? (
+      <img src={this.state.imageUrl} height="250" width="250" />
+    ) : (
+      <img src={noImage} />
+    );
 
-		// 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 ? (
-			<Button className={classes.button} variant="outlined" color="primary">
-				Edit Profile
-			</Button>
-		) : null;
+    // 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 ? (
+      <Button className={classes.button} variant="outlined" color="primary">
+        Edit Profile
+      </Button>
+    ) : null;
 
-		return (
-			// <Grid container spacing={16}>
-			//   <Grid item sm={8} xs={12}>
-			//     <p>Posts go here</p>
-			//   </Grid>
-			//   <Grid item sm={4} xs={12}>
-			//     {editButtonMarkup}
-			//     {imageMarkup}
-			//     {profileMarkup}
-			//     {topicsMarkup}
-			//     <TextField
-			//     id="newTopic"
-			//     label="new topic"
-			//     defaultValue=""
-			//     margin="normal"
-			//     variant="outlined"
-			//     value={this.state.newTopic}
-			//     onChange={ (event) => this.handleChange(event)}
-			//     />
-			//     <AddCircle
-			//       color="primary"
-			//       clickable
-			//       onClick={this.handleAddCircle}
-			//     />
-			//   </Grid>
-			// </Grid>
-			<div>
-				{/* <Paper className={classes.paper}> */}
+    return (
+      // <Grid container spacing={16}>
+      //   <Grid item sm={8} xs={12}>
+      //     <p>Posts go here</p>
+      //   </Grid>
+      //   <Grid item sm={4} xs={12}>
+      //     {editButtonMarkup}
+      //     {imageMarkup}
+      //     {profileMarkup}
+      //     {topicsMarkup}
+      //     <TextField
+      //     id="newTopic"
+      //     label="new topic"
+      //     defaultValue=""
+      //     margin="normal"
+      //     variant="outlined"
+      //     value={this.state.newTopic}
+      //     onChange={ (event) => this.handleChange(event)}
+      //     />
+      //     <AddCircle
+      //       color="primary"
+      //       clickable
+      //       onClick={this.handleAddCircle}
+      //     />
+      //   </Grid>
+      // </Grid>
+      <div>
+        {/* <Paper className={classes.paper}> */}
 
-				<Grid container>
-					<Grid item sm>
-						{editButtonMarkup}
-					</Grid>
-					<Grid item sm>
-						<Grid container direction="column">
-							<Grid item sm>
-								{imageMarkup}
-								{profileMarkup}
-								{topicsMarkup}
-								<TextField
-									id="newTopic"
-									label="new topic"
-									defaultValue=""
-									margin="normal"
-									variant="outlined"
-									value={this.state.newTopic}
-									onChange={(event) => this.handleChange(event)}
-								/>
-								<AddCircle color="primary" clickable onClick={this.handleAddCircle} />
-							</Grid>
-							<Grid item sm>
-								<p>posts here</p>
-							</Grid>
-						</Grid>
-					</Grid>
-					<Grid item sm />
-				</Grid>
-				{/* </Paper> */}
+        <Grid container>
+          <Grid item sm>
+            {editButtonMarkup}
+          </Grid>
+          <Grid item sm>
+            <Grid container direction="column">
+              <Grid item sm>
+                {imageMarkup}
+                {profileMarkup}
+                {topicsMarkup}
+                <TextField
+                  id="newTopic"
+                  label="new topic"
+                  defaultValue=""
+                  margin="normal"
+                  variant="outlined"
+                  value={this.state.newTopic}
+                  onChange={(event) => this.handleChange(event)}
+                />
+                <AddCircle color="primary" clickable onClick={this.handleAddCircle} />
+              </Grid>
+              <Grid item sm>
+                <p>posts here</p>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item sm />
+        </Grid>
+        {/* </Paper> */}
 
-				{/* <GridList>
+        {/* <GridList>
         <GridListTile key="subheader">
           <p>Posts go here</p>
         </GridListTile>
       </GridList> */}
-			</div>
-		);
-	}
+      </div>
+    );
+  }
 }
 
 // export default user;

From cd19364efca57d24eb9840356418f80cad7b5dfa Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Wed, 30 Oct 2019 11:40:44 -0400
Subject: [PATCH 14/79] Can now display post body on profile page

---
 twistter-frontend/src/pages/user.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 7633295..af0243c 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -63,6 +63,7 @@ class user extends Component {
         });
       })
       .catch(err => console.log(err));
+
     axios
       .get("/getAllTopics")
       .then(res => {
@@ -71,16 +72,25 @@ class user extends Component {
         })
       })
       .catch(err => console.log(err));
+
+    axios
+      .get("/getallPostsforUser")
+      .then(res => {
+        console.log(res.data);
+        this.setState({
+          posts: res.data
+        })
+      })
+      .catch(err => console.log(err));
   }
+
   render() {
     const classes = this.props;
-    //const authenticated = this.props.user.authenticated;
     let profileMarkup = this.state.profile ? (
       <p>
       <Typography variant='h5'>{this.state.profile}</Typography>
       </p>) : (<p>loading username...</p>);
     
-
     let topicsMarkup = this.state.topics ? (
       this.state.topics.map(topic => <MyChip 
         label={{topic}.topic.topic}
@@ -96,6 +106,10 @@ class user extends Component {
       />
     ) : (<img src={noImage}/>);
 
+    let postMarkup = this.state.posts ? (
+      this.state.posts.map(post => <p>{post.body}</p>)
+    ) : (<p>My Posts</p>);
+
     return (
       <Grid container spacing={24}>
         <Grid item sm={4} xs={8}>
@@ -118,13 +132,12 @@ class user extends Component {
           />
           <br />
           <Button component={ Link } to='/edit'>Edit Profile Info</Button>
-          {/*authenticated && <Button component={ Link } to='/edit'>Edit Profile Info</Button>*/}
         </Grid>
         <Grid item sm={4} xs={8}>
           <Writing_Microblogs />
         </Grid>
         <Grid item sm={4} xs={8}>
-          <p>Post</p>
+          {postMarkup}
         </Grid>
       </Grid>
     );

From 1337071bec2a1c1f97652d23699b15f5a4f14c65 Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Wed, 30 Oct 2019 15:07:19 -0400
Subject: [PATCH 15/79] UI can now display all features of a post

---
 twistter-frontend/src/pages/user.js        | 12 +++++++-
 twistter-frontend/src/util/PostSkeleton.js | 36 ++++++++++------------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index af0243c..b9e7247 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -17,6 +17,7 @@ import TextField from '@material-ui/core/TextField';
 import Userline from '../Userline';
 import noImage from '../images/no-img.png';
 import Writing_Microblogs from '../Writing_Microblogs';
+import PostSkeleton from '../util/PostSkeleton';
 
 const MyChip = styled(Chip)({
   margin: 2,
@@ -107,7 +108,16 @@ class user extends Component {
     ) : (<img src={noImage}/>);
 
     let postMarkup = this.state.posts ? (
-      this.state.posts.map(post => <p>{post.body}</p>)
+      this.state.posts.map(post => 
+      <p>
+        {imageMarkup} <br />
+        {post.userHandle} <br />
+        {post.createdAt} <br />
+        {post.microBlogTitle} <br />
+        {post.body} <br />
+        {post.microBlogTopics} <br />
+        Likes {post.likeCount} Comments {post.commentCount} <br />
+      </p>)
     ) : (<p>My Posts</p>);
 
     return (
diff --git a/twistter-frontend/src/util/PostSkeleton.js b/twistter-frontend/src/util/PostSkeleton.js
index ff14e16..25cbac5 100644
--- a/twistter-frontend/src/util/PostSkeleton.js
+++ b/twistter-frontend/src/util/PostSkeleton.js
@@ -1,12 +1,12 @@
 /* eslint-disable */
-import React, { Fragment } from 'react';
+import React, { Component } 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 Typography from '@material-ui/core/Typography';
 import withStyles from '@material-ui/core/styles/withStyles';
 
 const styles = (theme) => ({
@@ -50,23 +50,20 @@ const styles = (theme) => ({
   }
 });
 
-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>;
+class PostSkeleton extends Component {
+  render() {
+    const { classes, post: { body, createdAt, userImage, userHandle, screamId, likeCount, commentCount } } = this.props;
+    return (
+      <Card>
+        <CardMedia image={userImage} />
+        <CardContent>
+          <Typography variant="h5">{userHandle}</Typography>
+          <Typography variant="body2" color="textSecondary">{createdAt}</Typography>
+          <Typography variant="body1">{body}</Typography>
+        </CardContent>
+      </Card>
+    );
+  };
 };
 
 PostSkeleton.propTypes = {
@@ -74,4 +71,3 @@ PostSkeleton.propTypes = {
 };
 
 export default withStyles(styles)(PostSkeleton);
-

From a61c296ddf1a2eeb6715ce8da1dff2135afc32f4 Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Wed, 30 Oct 2019 16:12:53 -0400
Subject: [PATCH 16/79] Made the posts look prettier

---
 twistter-frontend/src/pages/user.js        | 47 +++++++++++++---------
 twistter-frontend/src/util/PostSkeleton.js | 36 +++++++++--------
 2 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index b9e7247..75f1703 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -7,6 +7,8 @@ import { Link } from 'react-router-dom';
 import { makeStyles, styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
 import Chip from '@material-ui/core/Chip';
 import Button from '@material-ui/core/Button';
 import Typography from "@material-ui/core/Typography";
@@ -17,7 +19,6 @@ import TextField from '@material-ui/core/TextField';
 import Userline from '../Userline';
 import noImage from '../images/no-img.png';
 import Writing_Microblogs from '../Writing_Microblogs';
-import PostSkeleton from '../util/PostSkeleton';
 
 const MyChip = styled(Chip)({
   margin: 2,
@@ -99,25 +100,31 @@ class user extends Component {
         onDelete={ (topic) => this.handleDelete(topic)}/>)
     ) : (<p> loading topics...</p>);
 
-    let imageMarkup = this.state.imageUrl ? (
-      <img
-      src={this.state.imageUrl}
-      height="250"
-      width="250"
-      />
-    ) : (<img src={noImage}/>);
+    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 => 
-      <p>
-        {imageMarkup} <br />
-        {post.userHandle} <br />
-        {post.createdAt} <br />
-        {post.microBlogTitle} <br />
-        {post.body} <br />
-        {post.microBlogTopics} <br />
-        Likes {post.likeCount} Comments {post.commentCount} <br />
-      </p>)
+        <Card>
+          <CardContent>
+            <Typography>
+              {
+                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                                      (<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.body}</Typography>
+            <br />
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <br />
+            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
+          </CardContent>
+        </Card>
+      )
     ) : (<p>My Posts</p>);
 
     return (
@@ -133,7 +140,7 @@ class user extends Component {
           margin="normal"
           variant="outlined"
           value={this.state.newTopic}
-          onChange={ (event) => this.handleChange(event)}
+          onChange={(event) => this.handleChange(event)}
           />
           <AddCircle
             color="primary"
@@ -144,10 +151,10 @@ class user extends Component {
           <Button component={ Link } to='/edit'>Edit Profile Info</Button>
         </Grid>
         <Grid item sm={4} xs={8}>
-          <Writing_Microblogs />
+          {postMarkup}
         </Grid>
         <Grid item sm={4} xs={8}>
-          {postMarkup}
+          <Writing_Microblogs />
         </Grid>
       </Grid>
     );
diff --git a/twistter-frontend/src/util/PostSkeleton.js b/twistter-frontend/src/util/PostSkeleton.js
index 25cbac5..ff14e16 100644
--- a/twistter-frontend/src/util/PostSkeleton.js
+++ b/twistter-frontend/src/util/PostSkeleton.js
@@ -1,12 +1,12 @@
 /* eslint-disable */
-import React, { Component } from 'react';
+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 Typography from '@material-ui/core/Typography';
+
 import withStyles from '@material-ui/core/styles/withStyles';
 
 const styles = (theme) => ({
@@ -50,20 +50,23 @@ const styles = (theme) => ({
   }
 });
 
-class PostSkeleton extends Component {
-  render() {
-    const { classes, post: { body, createdAt, userImage, userHandle, screamId, likeCount, commentCount } } = this.props;
-    return (
-      <Card>
-        <CardMedia image={userImage} />
-        <CardContent>
-          <Typography variant="h5">{userHandle}</Typography>
-          <Typography variant="body2" color="textSecondary">{createdAt}</Typography>
-          <Typography variant="body1">{body}</Typography>
-        </CardContent>
-      </Card>
-    );
-  };
+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 = {
@@ -71,3 +74,4 @@ PostSkeleton.propTypes = {
 };
 
 export default withStyles(styles)(PostSkeleton);
+

From 26afabe7095377dbd3e15fee3e2d7623e090c694 Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Wed, 30 Oct 2019 18:04:35 -0400
Subject: [PATCH 17/79] All posts from db can now show on home page timeline

---
 functions/handlers/post.js                    | 23 +++++-
 functions/index.js                            |  5 +-
 twistter-frontend/src/App.js                  | 19 ++---
 .../src/components/layout/NavBar.js           |  6 +-
 twistter-frontend/src/pages/Home.js           | 78 ++++++++++++++++++-
 twistter-frontend/src/pages/user.js           | 21 +++--
 6 files changed, 123 insertions(+), 29 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 83f9558..48fbbcc 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -22,7 +22,7 @@ exports.putPost = (req, res) => {
     })
     .catch((err) => {
         console.error(err);
-        return res.status(500).json({ error: 'something is wrong'});
+        return res.status(500).json({ error: 'something went wrong'});
     });
 };
 
@@ -41,6 +41,25 @@ exports.getallPostsforUser = (req, res) => {
     return;
     })
     .catch(function(err) {
-    res.status(500).send("Failed to retrieve all user's posts from database.", err);
+    res.status(500).send("Failed to retrieve user's posts from database.", err);
+    });
+};
+
+exports.getallPosts = (req, res) => {
+    var post_query = admin.firestore().collection("posts");
+    post_query.get()
+    .then(function(allPosts) {
+        let posts = [];
+        allPosts.forEach(function(doc) {
+            posts.push(doc.data());
+        });
+        return res.status(200).json(posts);
+    })
+    .then(function() {
+    res.status(200).send("Successfully retrieved every post from database.");
+    return;
+    })
+    .catch(function(err) {
+    res.status(500).send("Failed to retrieve posts from database.", err);
     });
 };
diff --git a/functions/index.js b/functions/index.js
index dfb27f3..12bb46d 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -44,11 +44,12 @@ app.get("/user", fbAuth, getAuthenticatedUser);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, putPost 
-} = require("./handlers/post");
+const { getallPostsforUser, getallPosts, putPost } = require("./handlers/post");
 
 app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
+app.get("/getallPosts", getallPosts);
+
 // Adds one post to the database
 app.post("/putPost", fbAuth, putPost);
 
diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index 0420d45..d3a3163 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -63,23 +63,20 @@ class App extends Component {
             <div className='container' >
               <Navbar />
             </div>
-
             <div className="app">
               <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} />
-              <Route exact path="/logout" component={logout} />
-              <Route exact path="/delete" component={Delete} />
+                <AuthRoute exact path="/signup" component={signup} />
+                <AuthRoute exact path="/login" component={login} />
+                <AuthRoute exact path="/" component={home}/>
 
-              <Route exact path="/user" component={user} />
-              <Route exact path="/home" component={writeMicroblog} />
-              <Route exact path="/edit" component={editProfile} />
+                <Route exact path="/logout" component={logout} />
+                <Route exact path="/delete" component={Delete} />
 
-              <AuthRoute exact path="/" component={home}/>
+                <Route exact path="/home" component={home} />
+                <Route exact path="/user" component={user} />
+                <Route exact path="/edit" component={editProfile} />
               </Switch>
             </div>
-
           </Router>
         </Provider>
       </MuiThemeProvider>
diff --git a/twistter-frontend/src/components/layout/NavBar.js b/twistter-frontend/src/components/layout/NavBar.js
index 0c5971f..9c720b0 100644
--- a/twistter-frontend/src/components/layout/NavBar.js
+++ b/twistter-frontend/src/components/layout/NavBar.js
@@ -10,7 +10,7 @@ import Button from '@material-ui/core/Button';
 import withStyles from "@material-ui/core/styles/withStyles";
 
 // Redux stuff
-// import { logoutUser } from '../../redux/actions/userActions';
+import { logoutUser } from '../../redux/actions/userActions';
 import { connect } from 'react-redux';
 
 const styles = {
@@ -63,13 +63,9 @@ const mapStateToProps = (state) => ({
     user: state.user
 })
 
-// const mapActionsToProps = { logoutUser };
-
 Navbar.propTypes = {
     user: PropTypes.object.isRequired,
     classes: PropTypes.object.isRequired
 }
 
 export default connect(mapStateToProps)(withStyles(styles)(Navbar));
-
-// export default Navbar;
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index e0eae74..cee0a93 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -1,12 +1,74 @@
+/* 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 Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from "@material-ui/core/Typography";
+
+// component
 import '../App.css';
-
 import logo from '../images/twistter-logo.png';
-
+import noImage from '../images/no-img.png';
+import Writing_Microblogs from '../Writing_Microblogs';
 
 class Home extends Component {
+  state = {};
+
+  componentDidMount() {
+    axios
+      .get("/getallPosts")
+      .then(res => {
+        console.log(res.data);
+        this.setState({
+          posts: res.data
+        })
+      })
+      .catch(err => console.log(err));
+  }
+
   render() {
+    let authenticated = this.props.user.authenticated;
+
+    let postMarkup = this.state.posts ? (
+      this.state.posts.map(post => 
+        <Card>
+          <CardContent>
+            <Typography>
+              {
+                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                                      (<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.body}</Typography>
+            <br />
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <br />
+            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
+          </CardContent>
+        </Card>
+      )
+    ) : (<p>My Posts</p>);
+
     return (
+      authenticated ?
+      <Grid container spacing={16}>
+        <Grid item sm={4} xs={8}>
+          <Writing_Microblogs />
+        </Grid>
+        <Grid item sm={4} xs={8}>
+          {postMarkup}
+        </Grid>
+      </Grid> 
+      :
       <div>
         <div>
           <img src={logo} className="app-logo" alt="logo" />
@@ -31,7 +93,15 @@ class Home extends Component {
         </div>
       </div>
     );
-    }
   }
+}
 
-export default Home;
\ No newline at end of file
+const mapStateToProps = (state) => ({
+  user: state.user
+})
+
+Home.propTypes = {
+  user: PropTypes.object.isRequired
+}
+
+export default connect(mapStateToProps)(Home);
\ No newline at end of file
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 75f1703..76589f6 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,8 +1,10 @@
 /* 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 { Link } from 'react-router-dom';
 import { makeStyles, styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
@@ -16,7 +18,7 @@ import AddCircle from '@material-ui/icons/AddCircle';
 import TextField from '@material-ui/core/TextField';
 
 // component
-import Userline from '../Userline';
+import '../App.css';
 import noImage from '../images/no-img.png';
 import Writing_Microblogs from '../Writing_Microblogs';
 
@@ -87,7 +89,8 @@ class user extends Component {
   }
 
   render() {
-    const classes = this.props;
+    let authenticated = this.props.user.authenticated;
+    let classes = this.props;
     let profileMarkup = this.state.profile ? (
       <p>
       <Typography variant='h5'>{this.state.profile}</Typography>
@@ -148,7 +151,7 @@ class user extends Component {
             onClick={this.handleAddCircle}
           />
           <br />
-          <Button component={ Link } to='/edit'>Edit Profile Info</Button>
+          {authenticated && <Button component={ Link } to='/edit'>Edit Profile Info</Button>}
         </Grid>
         <Grid item sm={4} xs={8}>
           {postMarkup}
@@ -161,4 +164,12 @@ class user extends Component {
   }
 }
 
-export default user;
+const mapStateToProps = (state) => ({
+  user: state.user
+})
+
+user.propTypes = {
+  user: PropTypes.object.isRequired
+}
+
+export default connect(mapStateToProps)(user);

From da14700987170801aded9338c31216c5bb0620fd Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Wed, 30 Oct 2019 18:15:01 -0400
Subject: [PATCH 18/79] Fixed a small bug with the Delete Account button

---
 twistter-frontend/src/pages/editProfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index 0a31271..7272e76 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -245,7 +245,7 @@ export class edit extends Component {
               color="secondary"
               className={classes.button}
               component={ Link }
-              to='/user'
+              to='/delete'
             >
               Delete Account
             </Button>

From ca1d86acf11c60825e453642fc71ab6bfa6630fc Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Thu, 31 Oct 2019 13:56:40 -0400
Subject: [PATCH 19/79] Users can be verified and have a check mark displayed
 on their profiles

---
 functions/handlers/users.js         |  3 ++-
 twistter-frontend/src/pages/user.js | 11 +++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 203aa58..1ff9298 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -76,7 +76,8 @@ exports.signup = (req, res) => {
         handle: newUser.handle,
         createdAt: newUser.createdAt,
         userId,
-        followedTopics: []
+        followedTopics: [],
+        verified: false
       };
       return db.doc(`/users/${newUser.handle}`).set(userCred);
     })
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 27a0c94..ef764b3 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -10,6 +10,8 @@ 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';
+
 
 // component
 import Userline from '../Userline';
@@ -56,7 +58,8 @@ class user extends Component {
       .then(res => {
         this.setState({
           profile: res.data.credentials.handle,
-          imageUrl: res.data.credentials.imageUrl
+          imageUrl: res.data.credentials.imageUrl,
+          verified: res.data.credentials.verified ? res.data.credentials.verified : false
         });
       })
       .catch(err => console.log(err));
@@ -72,9 +75,9 @@ class user extends Component {
   render() {
     const classes = this.props;
     let profileMarkup = this.state.profile ? (
-      <p>
-      <Typography variant='h5'>{this.state.profile}</Typography>
-      </p>) : (<p>loading username...</p>);
+      <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 ? (

From 50bc73870b7a5bc527123061da8363e6ec88834c Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Thu, 31 Oct 2019 14:32:54 -0400
Subject: [PATCH 20/79] delete topic fully works

---
 functions/handlers/topic.js         | 21 +++++----
 twistter-frontend/src/pages/user.js | 71 +++++++++++++++--------------
 2 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js
index c4d7b10..7a84488 100644
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -1,9 +1,8 @@
-/* eslint-disable promise/always-return */
+/* eslint-disable promise/always-return */
 const { admin, db } = require("../util/admin");
 exports.putTopic = (req, res) => {
   const newTopic = {
-    topic: req.body.topic,
-    topicId: null
+    topic: req.body.topic
   };
 
   admin
@@ -12,12 +11,11 @@ exports.putTopic = (req, res) => {
     .add(newTopic)
     .then(doc => {
       const resTopic = newTopic;
-      newTopic.topicId = doc.id;
       return res.status(200).json(resTopic);
     })
     .catch(err => {
       console.error(err);
-      return res.status(500).json({ error: "something is wrong" });
+      return res.status(500).json({ error: "something is wrong" });
     });
 };
 
@@ -29,13 +27,16 @@ exports.getAllTopics = (req, res) => {
     .then(data => {
       let topics = [];
       data.forEach(function(doc) {
-        topics.push(doc.data());
+        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." });
+      return res.status(500).json({ error: "Failed to fetch all topics." });
     });
 };
 
@@ -45,16 +46,16 @@ exports.deleteTopic = (req, res) => {
     .get()
     .then(doc => {
       if (!doc.exists) {
-        return res.status(404).json({ error: "Topic not found" });
+        return res.status(404).json({ error: "Topic not found" });
       } else {
         return topic.delete();
       }
     })
     .then(() => {
-      res.json({ message: "Topic successfully deleted!" });
+      res.json({ message: "Topic successfully deleted!" });
     })
     .catch(err => {
       console.error(err);
-      return res.status(500).json({ error: "Failed to delete topic." });
+      return res.status(500).json({ error: "Failed to delete topic." });
     });
 };
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index f4f325c..1096fa4 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,8 +1,8 @@
-/* eslint-disable */
+/* eslint-disable */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import axios from "axios";
-//import '../App.css';
+//import '../App.css';
 import { makeStyles, styled } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import Card from "@material-ui/core/Card";
@@ -11,8 +11,7 @@ import Typography from "@material-ui/core/Typography";
 import AddCircle from "@material-ui/icons/AddCircle";
 import TextField from "@material-ui/core/TextField";
 
-// component
-import Userline from "../Userline";
+// component
 import noImage from "../images/no-img.png";
 
 const MyChip = styled(Chip)({
@@ -25,22 +24,18 @@ class user extends Component {
     profile: null,
     imageUrl: null,
     topics: null,
-    newTopic: null,
-    deleteTopic: null
+    newTopic: null
   };
 
-  handleDelete = event => {
-    // axios
-    // .delete(`/deleteTopic/${topic}`)
-    // .then(
-    //   function (response) {
-    //     console.log(response);
-    //   }
-    // )
-    // .catch(function (err) {
-    //   console.log(err);
-    // });
-    console.log(event);
+  handleDelete = topic => {
+    axios
+      .delete(`/deleteTopic/${topic.id}`)
+      .then(function() {
+        location.reload();
+      })
+      .catch(function(err) {
+        console.log(err);
+      });
   };
 
   handleAddCircle = () => {
@@ -84,22 +79,25 @@ class user extends Component {
   render() {
     let profileMarkup = this.state.profile ? (
       <p>
-        <Typography variant="h5">{this.state.profile}</Typography>
+                <Typography variant="h5">{this.state.profile}</Typography>
+              
       </p>
     ) : (
-      <p>loading username...</p>
+      <p>loading username...</p>
     );
 
     let topicsMarkup = this.state.topics ? (
-      this.state.topics.map(topic => (
-        <MyChip
-          label={{ topic }.topic.topic}
-          key={{ topic }.topic.topicId}
-          onDelete={this.handleDelete}
-        />
-      ))
+      this.state.topics.map(
+        topic => (
+          <MyChip
+            label={{ topic }.topic.topic}
+            key={{ topic }.topic.id}
+            onDelete={key => this.handleDelete(topic)}
+          />
+        ) // console.log({ topic }.topic.id)
+      )
     ) : (
-      <p> loading topics...</p>
+      <p> loading topics...</p>
     );
 
     let imageMarkup = this.state.imageUrl ? (
@@ -110,24 +108,31 @@ class user extends Component {
 
     return (
       <Grid container spacing={16}>
+                
         <Grid item sm={8} xs={12}>
-          <p>Post</p>
+                    <p>Post</p>
+                  
         </Grid>
+                
         <Grid item sm={4} xs={12}>
-          {imageMarkup}
-          {profileMarkup}
-          {topicsMarkup}
+                    {imageMarkup}
+                    {profileMarkup}
+                    {topicsMarkup}
+                    
           <TextField
             id="newTopic"
-            label="new topic"
+            label="new topic"
             defaultValue=""
             margin="normal"
             variant="outlined"
             value={this.state.newTopic}
             onChange={event => this.handleChange(event)}
           />
+                    
           <AddCircle color="primary" clickable onClick={this.handleAddCircle} />
+                  
         </Grid>
+              
       </Grid>
     );
   }

From 35e5cf8e9d8eb2a00eb47f4b5dcb15112fa1af6f Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Thu, 31 Oct 2019 15:11:16 -0400
Subject: [PATCH 21/79] revert changes that I f ed up

---
 twistter-frontend/src/Writing_Microblogs.js | 72 +++++----------------
 1 file changed, 17 insertions(+), 55 deletions(-)

diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index dd84d46..9cac7b7 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -4,28 +4,29 @@ import Route from "react-router-dom/Route";
 import axios from "axios";
 
 class Writing_Microblogs extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: '',
-            title: '',
-            topics: '',
-            characterCount: 250
-            
-        };
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: "",
+      title: "",
+      topics: "",
+      characterCount: 250
+    };
 
-        
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-        this.handleChangeforPost = this.handleChangeforPost.bind(this);
-        this.handleChangeforTopics = this.handleChangeforTopics.bind(this);
-    
-    }
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChangeforPost = this.handleChangeforPost.bind(this);
+    this.handleChangeforTopics = this.handleChangeforTopics.bind(this);
+  }
 
   handleChange(event) {
     this.setState({ title: event.target.value });
   }
 
+  handleChangeforTopics(event) {
+    this.setState({ topics: event.target.value });
+  }
+
   handleSubmit(event) {
     // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
     const postData = {
@@ -37,45 +38,6 @@ class Writing_Microblogs extends Component {
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
-    
-    handleSubmit(event) {
-
-        const postData = {
-            body: this.state.value,  
-            userImage: "bing-url",
-            microBlogTitle: this.state.title,
-            microBlogTopics: this.state.topics.split(', ')
-        }
-        const headers = {
-            headers: { 'Content-Type': 'application/json'}
-        }
-        
-        axios
-            .post("/putPost", postData, headers)
-            .then((res) =>{
-                alert('Post was shared successfully!')
-                console.log(res.data);
-            })
-            .catch((err) => {
-                alert('An error occured.');
-                console.error(err);
-            })
-        event.preventDefault();
-        this.setState({value: '', title: '',characterCount: 250, topics: ''})
-    }
-  
-  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,
-      userHandle: "new user",
-      userImage: "bing-url",
-      microBlogTitle: this.state.title,
-      microBlogTopics: this.state.topics.split(", ")
-    };
-    const headers = {
-      headers: { "Content-Type": "application/json" }
-    };
 
     axios
       .post("/putPost", postData, headers)

From 325d37f0de4bf8f8824fc57f0669e3952fab00e5 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Thu, 31 Oct 2019 15:12:22 -0400
Subject: [PATCH 22/79] Back-end for verifying users

---
 functions/handlers/users.js | 52 +++++++++++++++++++++++++++++++++++++
 functions/index.js          | 12 ++++++++-
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 1ff9298..e1f58fe 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -308,4 +308,56 @@ exports.getAuthenticatedUser = (req, res) => {
     });
 };
 
+// Verifies the user sent to the request
+// Must be run by the Admin user
+exports.verifyUser = (req, res) => {
+  if (req.userData.handle !== "Admin") {
+    return res.status(403).json({error: "This must be done as Admin"});
+  }
 
+  db.doc(`/users/${req.body.user}`)
+    .get()
+    .then((doc) => {
+      if (doc.exists) {
+        let verifiedUser = doc.data();
+        verifiedUser.verified = true;
+        return db.doc(`/users/${req.body.user}`).set(verifiedUser, {merge: true});
+      } else {
+        return res.status(400).json({error: `User ${req.body.user} was not found`});
+      }
+    })
+    .then(() => {
+      return res.status(201).json({message: `${req.body.user} is now verified`});
+    })
+    .catch((err) => {
+      console.error(err);
+      return res.status(500).json({error: err.code});
+    });
+}
+
+// Unverifies the user sent to the request
+// Must be run by admin
+exports.unverifyUser = (req, res) => {
+  if (req.userData.handle !== "Admin") {
+    return res.status(403).json({error: "This must be done as Admin"});
+  }
+
+  db.doc(`/users/${req.body.user}`)
+    .get()
+    .then((doc) => {
+      if (doc.exists) {
+        let unverifiedUser = doc.data();
+        unverifiedUser.verified = false;
+        return db.doc(`/users/${req.body.user}`).set(unverifiedUser, {merge: true});
+      } else {
+        return res.status(400).json({error: `User ${req.body.user} was not found`});
+      }
+    })
+    .then(() => {
+      return res.status(201).json({message: `${req.body.user} is no longer verified`});
+    })
+    .catch((err) => {
+      console.error(err);
+      return res.status(500).json({error: err.code});
+    });
+}
\ No newline at end of file
diff --git a/functions/index.js b/functions/index.js
index 33ce166..59bc8db 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -16,7 +16,9 @@ const {
   login,
   signup,
   deleteUser,
-  updateProfileInfo
+  updateProfileInfo,
+  verifyUser,
+  unverifyUser
 } = require("./handlers/users");
 
 // Adds a user to the database and registers them in firebase with
@@ -41,6 +43,14 @@ app.post("/updateProfileInfo", fbAuth, updateProfileInfo);
 
 app.get("/user", fbAuth, getAuthenticatedUser);
 
+// 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);
+
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/

From 112988c8fb1dbc556b18dc5219ef7334a57724fb Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Thu, 31 Oct 2019 15:46:33 -0400
Subject: [PATCH 23/79] Add '@' to profile handle

---
 twistter-frontend/src/pages/user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index ef764b3..824412e 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -76,7 +76,7 @@ class user extends Component {
     const classes = this.props;
     let profileMarkup = this.state.profile ? (
       <div>
-        <Typography variant='h5'>{this.state.profile} {this.state.verified ? (<VerifiedIcon style={{fill: "#1397D5"}}/>): (null)}</Typography>
+        <Typography variant='h5'>@{this.state.profile} {this.state.verified ? (<VerifiedIcon style={{fill: "#1397D5"}}/>): (null)}</Typography>
       </div>) : (<p>loading username...</p>);
     
 

From 1842eef2f8177b15bd9870c98dc0352e3ef1f92c Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Thu, 31 Oct 2019 16:54:34 -0400
Subject: [PATCH 24/79] added search page

---
 functions/handlers/topic.js           |   3 +-
 functions/handlers/users.js           | 249 +++++++++++++++-----------
 functions/index.js                    |   6 +-
 twistter-frontend/src/App.js          |   2 +
 twistter-frontend/src/pages/Search.js |  74 ++++++++
 5 files changed, 224 insertions(+), 110 deletions(-)
 create mode 100644 twistter-frontend/src/pages/Search.js

diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js
index 7a84488..a55f748 100644
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -1,4 +1,3 @@
-/* eslint-disable promise/always-return */
 const { admin, db } = require("../util/admin");
 exports.putTopic = (req, res) => {
   const newTopic = {
@@ -52,7 +51,7 @@ exports.deleteTopic = (req, res) => {
       }
     })
     .then(() => {
-      res.json({ message: "Topic successfully deleted!" });
+      return res.json({ message: "Topic successfully deleted!" });
     })
     .catch(err => {
       console.error(err);
diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 203aa58..32ad816 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -55,7 +55,7 @@ exports.signup = (req, res) => {
 
   db.doc(`/users/${newUser.handle}`)
     .get()
-    .then((doc) => {
+    .then(doc => {
       if (doc.exists) {
         return res
           .status(400)
@@ -65,11 +65,11 @@ exports.signup = (req, res) => {
         .auth()
         .createUserWithEmailAndPassword(newUser.email, newUser.password);
     })
-    .then((data) => {
+    .then(data => {
       userId = data.user.uid;
       return data.user.getIdToken();
     })
-    .then((idToken) => {
+    .then(idToken => {
       token = idToken;
       const userCred = {
         email: newUser.email,
@@ -83,7 +83,7 @@ exports.signup = (req, res) => {
     .then(() => {
       return res.status(201).json({ token });
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
       if (err.code === "auth/email-already-in-use") {
         return res.status(500).json({ email: "This email is already taken." });
@@ -121,62 +121,76 @@ exports.login = (req, res) => {
   // Email/username field is username since it's not in email format
   if (!user.email.match(emailRegEx)) {
     var userDoc = db.collection("users").doc(`${user.email}`);
-    userDoc.get()
-    .then(function(doc) {
+    userDoc
+      .get()
+      .then(function(doc) {
         if (doc.exists) {
           user.email = doc.data().email;
-        }
-        else {
-          return res.status(403).json({ general: "Invalid credentials. Please try again." });
+        } else {
+          return res
+            .status(403)
+            .json({ general: "Invalid credentials. Please try again." });
         }
         return;
-    })
-    .then(function() {
-      firebase
-      .auth()
-      .signInWithEmailAndPassword(user.email, user.password)
-      .then((data) => {
-        return data.user.getIdToken();
       })
-      .then((token) => {
-        return res.status(200).json({ token });
+      .then(function() {
+        firebase
+          .auth()
+          .signInWithEmailAndPassword(user.email, user.password)
+          .then(data => {
+            return data.user.getIdToken();
+          })
+          .then(token => {
+            return res.status(200).json({ token });
+          })
+          .catch(err => {
+            console.error(err);
+            if (
+              err.code === "auth/user-not-found" ||
+              err.code === "auth/invalid-email" ||
+              err.code === "auth/wrong-password"
+            ) {
+              return res
+                .status(403)
+                .json({ general: "Invalid credentials. Please try again." });
+            }
+            return res.status(500).json({ error: err.code });
+          });
+        return;
       })
-      .catch((err) => {
-        console.error(err);
-        if (err.code === "auth/user-not-found" || err.code === "auth/invalid-email" || err.code === "auth/wrong-password") {
-          return res.status(403).json({ general: "Invalid credentials. Please try again." });
+      .catch(function(err) {
+        if (!doc.exists) {
+          return res
+            .status(403)
+            .json({ general: "Invalid credentials. Please try again." });
         }
-        return res.status(500).json({ error: err.code });
+        return res.status(500).send(err);
       });
-      return;
-    })
-    .catch(function(err) {
-      if(!doc.exists) {
-        return res.status(403).json({ general: "Invalid credentials. Please try again." });
-      }
-      return res.status(500).send(err);
-    });
   }
   // Email/username field is username
   else {
     firebase
-    .auth()
-    .signInWithEmailAndPassword(user.email, user.password)
-    .then((data) => {
-      return data.user.getIdToken();
-    })
-    .then((token) => {
-      return res.status(200).json({ token });
-    })
-    .catch((err) => {
-      console.error(err);
-      if (err.code === "auth/user-not-found" || err.code === "auth/invalid-email" || err.code === "auth/wrong-password") {
-        return res
-              .status(403)
-              .json({ general: "Invalid credentials. Please try again." });
-      }
-      return res.status(500).json({ error: err.code });
-    });
+      .auth()
+      .signInWithEmailAndPassword(user.email, user.password)
+      .then(data => {
+        return data.user.getIdToken();
+      })
+      .then(token => {
+        return res.status(200).json({ token });
+      })
+      .catch(err => {
+        console.error(err);
+        if (
+          err.code === "auth/user-not-found" ||
+          err.code === "auth/invalid-email" ||
+          err.code === "auth/wrong-password"
+        ) {
+          return res
+            .status(403)
+            .json({ general: "Invalid credentials. Please try again." });
+        }
+        return res.status(500).json({ error: err.code });
+      });
   }
 };
 
@@ -186,47 +200,52 @@ exports.deleteUser = (req, res) => {
   firebase.auth().onAuthStateChanged(function(user) {
     currentUser = user;
     if (currentUser) {
-      var post_query = db.collection("posts").where("userHandle", "==", req.user.handle);
-      post_query.get()
-      .then(function(myPosts) {
-        myPosts.forEach(function(doc) {
-          doc.ref.delete();
+      var post_query = db
+        .collection("posts")
+        .where("userHandle", "==", req.user.handle);
+      post_query
+        .get()
+        .then(function(myPosts) {
+          myPosts.forEach(function(doc) {
+            doc.ref.delete();
+          });
+          return;
+        })
+        .then(function() {
+          res
+            .status(200)
+            .send("Successfully removed all user's posts from database.");
+          return;
+        })
+        .catch(function(err) {
+          res
+            .status(500)
+            .send("Failed to remove all user's posts from database.", err);
         });
-        return;
-      })
-      .then(function() {
-        res.status(200).send("Successfully removed all user's posts from database.");
-        return;
-      })
-      .catch(function(err) {
-        res.status(500).send("Failed to remove all user's posts from database.", err);
-      });
 
+      db.collection("users")
+        .doc(`${req.user.handle}`)
+        .delete()
+        .then(function() {
+          res.status(200).send("Sucessfully removed user from database.");
+          return;
+        })
+        .catch(function(err) {
+          res.status(500).send("Failed to remove user from database.", err);
+        });
 
-
-      db.collection("users").doc(`${req.user.handle}`).delete()
-      .then(function() {
-        res.status(200).send("Sucessfully removed user from database.");
-        return;
-      })
-      .catch(function(err) {
-        res.status(500).send("Failed to remove user from database.", err);
-      });
-
-
-      
-      currentUser.delete()
-      .then(function() {
-        console.log("Successfully deleted user.");
-        res.status(200).send("Sucessfully deleted user.");
-        return;
-      })
-      .catch(function(err) {
-        console.log("Failed to delete user.", err);
-        res.status(500).send("Failed to delete user.");
-      });
-    } 
-    else {
+      currentUser
+        .delete()
+        .then(function() {
+          console.log("Successfully deleted user.");
+          res.status(200).send("Sucessfully deleted user.");
+          return;
+        })
+        .catch(function(err) {
+          console.log("Failed to delete user.", err);
+          res.status(500).send("Failed to delete user.");
+        });
+    } else {
       console.log("Failed to deleter user or cannot get user.");
       res.status(500).send("Failed to deleter user or cannot get user.");
     }
@@ -238,10 +257,10 @@ exports.getProfileInfo = (req, res) => {
   db.collection("users")
     .doc(req.user.handle)
     .get()
-    .then((data) => {
+    .then(data => {
       return res.status(200).json(data.data());
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
       return res.status(500).json(err);
     });
@@ -259,13 +278,11 @@ exports.updateProfileInfo = (req, res) => {
     .set(profileData, { merge: true })
     .then(() => {
       console.log(`${req.user.handle}'s profile info has been updated.`);
-      return res
-        .status(201)
-        .json({
-          general: `${req.user.handle}'s profile info has been updated.`
-        });
+      return res.status(201).json({
+        general: `${req.user.handle}'s profile info has been updated.`
+      });
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
       return res.status(500).json({
         error: "Error updating profile data"
@@ -277,14 +294,15 @@ exports.getUserDetails = (req, res) => {
   let userData = {};
   db.doc(`/users/${req.body.handle}`)
     .get()
-    .then((doc) => {
+    .then(doc => {
       if (doc.exists) {
         userData = doc.data();
-        return res.status(200).json({userData});
-    } else {
-      return res.status(400).json({error: "User not found."})
-    }})
-    .catch((err) => {
+        return res.status(200).json({ userData });
+      } else {
+        return res.status(400).json({ error: "User not found." });
+      }
+    })
+    .catch(err => {
       console.error(err);
       return res.status(500).json({ error: err.code });
     });
@@ -294,17 +312,34 @@ exports.getAuthenticatedUser = (req, res) => {
   let credentials = {};
   db.doc(`/users/${req.user.handle}`)
     .get()
-    .then((doc) => {
+    .then(doc => {
       if (doc.exists) {
         credentials = doc.data();
-        return res.status(200).json({credentials});
-    } else {
-      return res.status(400).json({error: "User not found."})
-    }})
-    .catch((err) => {
+        return res.status(200).json({ credentials });
+      } else {
+        return res.status(400).json({ error: "User not found." });
+      }
+    })
+    .catch(err => {
       console.error(err);
       return res.status(500).json({ error: err.code });
     });
 };
 
-
+exports.getUserHandles = (req, res) => {
+  admin
+    .firestore()
+    .collection("users")
+    .get()
+    .then(data => {
+      let users = [];
+      data.forEach(function(doc) {
+        users.push(doc.data().handle);
+      });
+      return res.status(200).json(users);
+    })
+    .catch(err => {
+      console.error(err);
+      return res.status(500).json({ error: "Failed to get all user handles." });
+    });
+};
diff --git a/functions/index.js b/functions/index.js
index f00a361..3a158c1 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -16,7 +16,8 @@ const {
   login,
   signup,
   deleteUser,
-  updateProfileInfo
+  updateProfileInfo,
+  getUserHandles
 } = require("./handlers/users");
 
 // Adds a user to the database and registers them in firebase with
@@ -41,6 +42,9 @@ app.post("/updateProfileInfo", fbAuth, updateProfileInfo);
 
 app.get("/user", fbAuth, getAuthenticatedUser);
 
+// get user handles with search phase
+app.get("/getUserHandles", fbAuth, getUserHandles);
+
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index d90e90f..80d2e73 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -31,6 +31,7 @@ import Delete from "./pages/Delete";
 import writeMicroblog from "./Writing_Microblogs.js";
 import editProfile from "./pages/editProfile";
 import userLine from "./Userline.js";
+import Search from "./pages/Search.js";
 
 const theme = createMuiTheme(themeObject);
 
@@ -72,6 +73,7 @@ class App extends Component {
                 <Route exact path="/user" component={user} />
                 <Route exact path="/home" component={writeMicroblog} />
                 <Route exact path="/edit" component={editProfile} />
+                <Route exact path="/search" component={Search} />
 
                 <AuthRoute exact path="/" component={home} />
               </Switch>
diff --git a/twistter-frontend/src/pages/Search.js b/twistter-frontend/src/pages/Search.js
new file mode 100644
index 0000000..657a654
--- /dev/null
+++ b/twistter-frontend/src/pages/Search.js
@@ -0,0 +1,74 @@
+import React, { Component } from "react";
+// import props
+import { TextField, Paper } from "@material-ui/core";
+import Grid from "@material-ui/core/Grid";
+import Axios from "axios";
+import user from "./user.js";
+
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link,
+  useRouteMatch
+} from "react-router-dom";
+
+export class Search extends Component {
+  state = {
+    searchPhase: null,
+    searchResult: null
+  };
+
+  handleSearch(event) {
+    Axios.get("/getUserHandles").then(res => {
+      this.setState({
+        searchResult: res.data
+      });
+    });
+    console.log(this.state.searchPhase);
+  }
+
+  handleInput(event) {
+    this.setState({
+      searchPhase: event.target.value
+    });
+    this.handleSearch();
+  }
+
+  handleRedirect() {
+    location.reload();
+  }
+
+  render() {
+    let resultMarkup = this.state.searchResult ? (
+      this.state.searchResult.map(result => (
+        <Router>
+          <div>
+            <Link to={`/user`}>{result}</Link>
+          </div>
+        </Router>
+      ))
+    ) : (
+      //   console.log(this.state.searchResult)
+      <p> searching... </p>
+    );
+
+    return (
+      <Grid>
+        <Grid>
+          <TextField
+            id="standard-required"
+            label="Search"
+            defaultValue="username"
+            margin="normal"
+            value={this.state.searchPhase}
+            onChange={event => this.handleInput(event)}
+          />
+        </Grid>
+        <Grid>{resultMarkup}</Grid>
+      </Grid>
+    );
+  }
+}
+
+export default Search;

From e8e69cec31c4bd2bc2c3a990a16c73a4c8132d6b Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Fri, 1 Nov 2019 00:26:01 -0400
Subject: [PATCH 25/79] Delete removes all data now

---
 functions/handlers/users.js | 113 +++++++++++++++++++++---------------
 1 file changed, 67 insertions(+), 46 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index b455b02..672bacd 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -70,12 +70,14 @@ exports.signup = (req, res) => {
     })
     .then((idToken) => {
       token = idToken;
+      const defaultImageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/no-img.png?alt=media`;
       const userCred = {
         email: newUser.email,
         handle: newUser.handle,
         createdAt: newUser.createdAt,
         userId,
-        followedTopics: []
+        followedTopics: [],
+        imageUrl: defaultImageUrl
       };
       return db.doc(`/users/${newUser.handle}`).set(userCred);
     })
@@ -179,57 +181,76 @@ exports.login = (req, res) => {
   }
 };
 
-//Deletes user account
+//Deletes user account and all associated data
 exports.deleteUser = (req, res) => {
-  var currentUser;
-  firebase.auth().onAuthStateChanged(function(user) {
-    currentUser = user;
-    if (currentUser) {
-      var post_query = db.collection("posts").where("userHandle", "==", req.user.handle);
-      post_query.get()
-      .then(function(myPosts) {
-        myPosts.forEach(function(doc) {
-          doc.ref.delete();
-        });
-        return;
+  // Get the profile image filename
+  // `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`
+  const imageFileName = req.userData.imageUrl.split('/o/')[1].split('?alt=')[0];
+  const userId = req.userData.userId;
+  let errors = {};
+
+  function thenFunction(data) {
+    console.log(`${data} data for ${req.userData.handle} has been deleted.`);
+  }
+
+  function catchFunction(data, err) {
+    console.error(err);
+    error[data] = err;
+  }
+
+  // Deletes user from authentication
+  let auth = admin.auth().deleteUser(userId);
+
+  // Deletes database data
+  let data = db.collection("users").doc(`${req.user.handle}`).delete();
+
+  // Deletes any custom profile image
+  let image;
+  if (imageFileName !== 'no-img.png') {
+    image = admin.storage().bucket().file(imageFileName).delete()
+  } else {
+    image = Promise.resolve();
+  }
+
+  // Deletes all users posts
+  let posts = db.collection("posts")
+    .where("userHandle", "==", req.user.handle)
+    .get()
+    .then((query) => {
+      query.forEach((snap) => {
+        snap.ref.delete();
       })
-      .then(function() {
-        res.status(200).send("Successfully removed all user's posts from database.");
-        return;
-      })
-      .catch(function(err) {
-        res.status(500).send("Failed to remove all user's posts from database.", err);
-      });
+    })
+
+  let promises = [
+    auth
+      .then(thenFunction('auth'))
+      .catch((err) => catchFunction('auth', err)), 
+    data
+      .then(thenFunction('data'))
+      .catch((err) => catchFunction('data', err)),
+    image
+      .then(thenFunction('image'))
+      .catch((err) => catchFunction('image', err)),
+    posts
+      .then(thenFunction('posts'))
+      .catch((err) => catchFunction('image', err))
+  ];
 
 
+  // Wait for all promises to resolve
+  let waitPromise = Promise.all(promises);
 
-      db.collection("users").doc(`${req.user.handle}`).delete()
-      .then(function() {
-        res.status(200).send("Sucessfully removed user from database.");
-        return;
-      })
-      .catch(function(err) {
-        res.status(500).send("Failed to remove user from database.", err);
-      });
-
-
-      
-      currentUser.delete()
-      .then(function() {
-        console.log("Successfully deleted user.");
-        res.status(200).send("Sucessfully deleted user.");
-        return;
-      })
-      .catch(function(err) {
-        console.log("Failed to delete user.", err);
-        res.status(500).send("Failed to delete user.");
-      });
-    } 
-    else {
-      console.log("Failed to deleter user or cannot get user.");
-      res.status(500).send("Failed to deleter user or cannot get user.");
+  waitPromise.then(() => {
+    if (Object.keys(errors) > 0) {
+      return res.status(500).json(errors);
+    } else {
+      return res.status(200).json({message: `All data for ${req.userData.handle} has been deleted.`});
     }
-  });
+  })
+  .catch((err) => {
+    return res.status(500).json({error: err});
+  })
 };
 
 // Returns all data in the database for the user who is currently signed in

From 1e4b2d16ef335e378440126d70641c95668a51a9 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Fri, 1 Nov 2019 00:29:22 -0400
Subject: [PATCH 26/79] Fix edge case

---
 functions/handlers/users.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 672bacd..91860f5 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -185,7 +185,11 @@ exports.login = (req, res) => {
 exports.deleteUser = (req, res) => {
   // Get the profile image filename
   // `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`
-  const imageFileName = req.userData.imageUrl.split('/o/')[1].split('?alt=')[0];
+  const imageFileName;
+  req.userData.imageUrl ? 
+  imageFileName = req.userData.imageUrl.split('/o/')[1].split('?alt=')[0] : 
+  imageFileName = 'no-img.png'
+  
   const userId = req.userData.userId;
   let errors = {};
 
@@ -195,7 +199,7 @@ exports.deleteUser = (req, res) => {
 
   function catchFunction(data, err) {
     console.error(err);
-    error[data] = err;
+    errors[data] = err;
   }
 
   // Deletes user from authentication

From f1e436220580f715c386e9a86db4b0253528382e Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Fri, 1 Nov 2019 00:37:49 -0400
Subject: [PATCH 27/79] Change imageFileName from const to let

---
 functions/handlers/users.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 91860f5..1314d8b 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -185,7 +185,7 @@ exports.login = (req, res) => {
 exports.deleteUser = (req, res) => {
   // Get the profile image filename
   // `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`
-  const imageFileName;
+  let imageFileName;
   req.userData.imageUrl ? 
   imageFileName = req.userData.imageUrl.split('/o/')[1].split('?alt=')[0] : 
   imageFileName = 'no-img.png'

From 3fa4cd70337cb7c96fded9ac25d8807a5643fb51 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Fri, 1 Nov 2019 13:02:37 -0400
Subject: [PATCH 28/79] Changing writing microblogs to Material-UI

---
 twistter-frontend/src/Writing_Microblogs.js | 215 +++++++++++++++-----
 twistter-frontend/src/pages/Home.js         |   9 +-
 twistter-frontend/src/pages/user.js         |   7 +-
 3 files changed, 173 insertions(+), 58 deletions(-)

diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index 9cac7b7..e800d56 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -3,6 +3,29 @@ import { BrowserRouter as Router } from "react-router-dom";
 import Route from "react-router-dom/Route";
 import axios from "axios";
 
+// Material-UI
+import TextField from '@material-ui/core/TextField';
+import 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: 20
+  }
+  // TextField: {
+  //   marginBottom: "30px"
+  // }
+}
+
 class Writing_Microblogs extends Component {
   constructor(props) {
     super(props);
@@ -64,65 +87,147 @@ class Writing_Microblogs extends Component {
   }
 
   render() {
+    const { classes } = this.props;
     return (
-      <div>
-        <div
-          style={{
-            width: "200px",
-            height: "50px",
-            marginTop: "180px",
-            marginLeft: "50px"
-          }}
-        >
-          <form>
-            <textarea
-              placeholder="Enter Microblog Title"
-              value={this.state.title}
-              required
-              onChange={this.handleChange}
-              cols={30}
-              rows={1}
-            />
-          </form>
-        </div>
-        <div style={{ width: "200px", height: "50px", marginLeft: "50px" }}>
-          <form>
-            <textarea
-              placeholder="Enter topics seperated by a comma"
-              value={this.state.topics}
-              required
-              onChange={this.handleChangeforTopics}
-              cols={40}
-              rows={1}
-            />
-          </form>
-        </div>
+      // <div className={classes.container}>
+      //   <div className={classes.div}>
+      //     <form>
+      //       {/* <textarea
+      //         placeholder="Enter Microblog Title"
+      //         value={this.state.title}
+      //         required
+      //         onChange={this.handleChange}
+      //         cols={30}
+      //         rows={1}
+      //       /> */}
+      //       <TextField
+      //       id="title"
+      //       name="title"
+      //       label="Title"
+      //       // className={classes.textField}
+      //       value={this.state.title}
+      //       // helperText={errors.firstName}
+      //       // error={errors.firstName ? true : false}
+      //       variant="outlined"
+      //       onChange={this.handleChange}
+      //       fullWidth
+      //       />
+      //     </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} */}
+      //       <TextField
+      //         id="topics"
+      //         name="topics"
+      //         label="topics"
+      //         // className={classes.textField}
+      //         value={this.state.topics}
+      //         // helperText={errors.firstName}
+      //         // error={errors.firstName ? true : false}
+      //         variant="outlined"
+      //         onChange={this.handleChange}
+      //         fullWidth
+      //       />
+      //     </form>
+      //   </div>
 
-        <div style={{ width: "200px", marginLeft: "50px" }}>
-          <form onSubmit={this.handleSubmit}>
-            <textarea
-              value={this.state.value}
-              required
-              maxLength="250"
-              placeholder="Write Microblog here..."
-              onChange={e => {
-                this.handleChangeforPost(e);
-                this.handleChangeforCharacterCount(e);
-              }}
-              cols={40}
-              rows={20}
-            />
-            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-              <p2>Characters Left: {this.state.characterCount}</p2>
-            </div>
-            <div style={{ marginRight: "-100px" }}>
-              <button onClick>Share Post</button>
-            </div>
-          </form>
-        </div>
+      //   <div style={{ width: "200px", marginLeft: "50px" }}>
+      //     <form onSubmit={this.handleSubmit}>
+      //       {/* <textarea
+      //         value={this.state.value}
+      //         required
+      //         maxLength="250"
+      //         placeholder="Write Microblog here..."
+      //         onChange={e => {
+      //           this.handleChangeforPost(e);
+      //           this.handleChangeforCharacterCount(e);
+      //         }}
+      //         cols={40}
+      //         rows={20}
+      //       /> */}
+      //       <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
+      //       />
+      //       <div style={{ fontSize: "14px", marginRight: "-100px" }}>
+      //         <p2>Characters Left: {this.state.characterCount}</p2>
+      //       </div>
+      //       <div style={{ marginRight: "-100px" }}>
+      //         {/* <button onClick>Share Post</button> */}
+      //         <Button
+      //         onClick
+      //         >
+      //           Share Post
+      //         </Button>
+      //       </div>
+      //     </form>
+      //   </div>
+      // </div>
+      <div className={classes.container}>
+        <form className={classes.form}>
+          <TextField
+          // style={{marginBottom: 20}}
+            id="title"
+            name="title"
+            label="Title"
+            className={classes.textField}
+            value={this.state.title}
+            // helperText={errors.firstName}
+            // error={errors.firstName ? true : false}
+            variant="outlined"
+            onChange={this.handleChange}
+            fullWidth
+          />
+
+          <TextField
+            id="topics"
+            name="topics"
+            label="topics"
+            className={classes.textField}
+            value={this.state.topics}
+            // helperText={errors.firstName}
+            // error={errors.firstName ? true : false}
+            variant="outlined"
+            onChange={this.handleChange}
+            fullWidth
+          />
+
+          <TextField
+            id="content"
+            name="content"
+            label="content"
+            className={classes.textField}
+            value={this.state.content}
+            // helperText={errors.bio}
+            // error={errors.bio ? true : false}
+            multiline
+            rows="8"
+            variant="outlined"
+            onChange={this.handleChange}
+            fullWidth
+          />
+        </form>
       </div>
     );
   }
 }
 
-export default Writing_Microblogs;
+// export default Writing_Microblogs;
+export default withStyles(styles)(Writing_Microblogs);
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index cee0a93..e331479 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -31,6 +31,11 @@ class Home extends Component {
       .catch(err => console.log(err));
   }
 
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
+  }
+
   render() {
     let authenticated = this.props.user.authenticated;
 
@@ -44,8 +49,8 @@ class Home extends Component {
                                       (<img src={noImage} height="50" width="50"/>)
               }
             </Typography>
-            <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt}</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.body}</Typography>
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 9f5f656..acb11ae 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -97,6 +97,11 @@ class user extends Component {
       .catch(err => console.log(err));
   }
 
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
+  }
+
   render() {
     let authenticated = this.props.user.authenticated;
     let classes = this.props;
@@ -132,7 +137,7 @@ class user extends Component {
               }
             </Typography>
             <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
             <br />
             <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
             <Typography variant="body2">{post.body}</Typography>

From d6876eab0b259a9b66c1661a47f131b55ba2d3e5 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Fri, 1 Nov 2019 14:28:49 -0400
Subject: [PATCH 29/79] Fix .then() must return

---
 functions/handlers/users.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 8250f17..fc08972 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -237,7 +237,8 @@ exports.deleteUser = (req, res) => {
     .then((query) => {
       query.forEach((snap) => {
         snap.ref.delete();
-      })
+      });
+      return;
     })
 
   let promises = [

From d3bfd8b5f315d1a099d814d8d744962fdf46494d Mon Sep 17 00:00:00 2001
From: shobhitm23 <smakhij@purdue.edu>
Date: Fri, 1 Nov 2019 15:36:22 -0400
Subject: [PATCH 30/79] Fixing UI

---
 twistter-frontend/src/pages/Login.js  | 14 +++++++++++---
 twistter-frontend/src/pages/Signup.js | 23 ++++++++++++++++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/twistter-frontend/src/pages/Login.js b/twistter-frontend/src/pages/Login.js
index ef7e5c4..336255a 100644
--- a/twistter-frontend/src/pages/Login.js
+++ b/twistter-frontend/src/pages/Login.js
@@ -16,13 +16,15 @@ 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: 30
+    marginBottom: 20
   },
   pageTitle: {
     // marginTop: 20,
@@ -34,6 +36,9 @@ const styles = {
   },
   progress: {
     position: "absolute"
+  },
+  p: {
+    fontFamily: "cursive",
   }
 };
 
@@ -104,9 +109,12 @@ export class Login extends Component {
         <Grid item sm />
         <Grid item sm>
         <img src={logo} className="app-logo" alt="logo" />
-          <Typography variant="h2" className={classes.pageTitle}>
-            Log in to Twistter
+          <br></br>
+          <Typography variant="p" 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"
diff --git a/twistter-frontend/src/pages/Signup.js b/twistter-frontend/src/pages/Signup.js
index 91e4e52..99afab3 100644
--- a/twistter-frontend/src/pages/Signup.js
+++ b/twistter-frontend/src/pages/Signup.js
@@ -16,13 +16,17 @@ 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: 30
+    marginBottom: 20,
+    //border: "1px solid #234",
+    display: "inline-block",
+    boxSizing: "border-box",
   },
   pageTitle: {
     marginBottom: 40
@@ -33,6 +37,14 @@ const styles = {
   },
   progress: {
     position: "absolute"
+  },
+  div: {
+    borderRadius: "5px",
+    backgroundColor: "grey",
+    padding: "20px",
+  },
+  p: {
+    fontFamily: "Segoe UI",
   }
 };
 
@@ -92,9 +104,12 @@ export class Signup extends Component {
         <Grid item sm />
         <Grid item sm>
         <img src={logo} className="app-logo" alt="logo" />
-          <Typography variant="h2" className={classes.pageTitle}>
-            Create a new account
+          <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"
@@ -146,6 +161,8 @@ export class Signup extends Component {
               onChange={this.handleChange}
               fullWidth
             />
+            <br></br>
+            <br></br>
             <Button
               type="submit"
               variant="contained"

From b01aa92f96b2f7d9c5d60e2850eee4b54cad5dee Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Fri, 1 Nov 2019 15:39:08 -0400
Subject: [PATCH 31/79] Add post id

---
 functions/handlers/post.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 2be5bda..a57cfe1 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -17,6 +17,7 @@ exports.putPost = (req, res) => {
 
     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);
@@ -67,4 +68,4 @@ exports.getallPosts = (req, res) => {
 
 exports.getFilteredPosts = (req, res) => {
     admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
-};
\ No newline at end of file
+};

From 97bc9c4fb1912169b0cf524177b0ead5355018dc Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Fri, 1 Nov 2019 16:11:02 -0400
Subject: [PATCH 32/79] Verify users front-end

---
 functions/handlers/users.js           |   3 +-
 twistter-frontend/src/App.js          |   2 +
 twistter-frontend/src/pages/user.js   |  32 +++++-
 twistter-frontend/src/pages/verify.js | 153 ++++++++++++++++++++++++++
 4 files changed, 188 insertions(+), 2 deletions(-)
 create mode 100644 twistter-frontend/src/pages/verify.js

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 1e9ecf0..a3cea0d 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -238,7 +238,8 @@ exports.deleteUser = (req, res) => {
     .then((query) => {
       query.forEach((snap) => {
         snap.ref.delete();
-      })
+      });
+      return;
     })
 
   let promises = [
diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index 71c16a2..aeec8ee 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -31,6 +31,7 @@ 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";
 
 const theme = createMuiTheme(themeObject);
@@ -76,6 +77,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="/verify" component={verify}/>
                 <Route exact path="/search" component={Search} />
 
                 <AuthRoute exact path="/" component={home} />
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 63a418a..3340b47 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -102,6 +102,7 @@ class user extends Component {
   render() {
     let authenticated = this.props.user.authenticated;
     let classes = this.props;
+
     let profileMarkup = this.state.profile ? (
       <div>
         <Typography variant='h5'>@{this.state.profile} {this.state.verified ? (<VerifiedIcon style={{fill: "#1397D5"}}/>): (null)}</Typography>
@@ -169,7 +170,36 @@ class user extends Component {
             onClick={this.handleAddCircle}
           />
           <br />
-          {authenticated && <Button component={ Link } to='/edit'>Edit Profile Info</Button>}
+          <Grid container direction="column">
+            <Grid item>
+              {
+                authenticated && 
+                <Button 
+                style={{width:150, marginBottom: 10, marginTop: 5}}
+                component={ Link } 
+                to='/edit' 
+                variant="outlined" 
+                color="primary"
+                >
+                  Edit Profile
+                </Button>}
+            </Grid>
+            <Grid item>
+              {
+                authenticated && 
+                this.state.profile === 'Admin' && 
+                <Button
+                style={{width:150}}
+                component={ Link } 
+                variant="outlined" 
+                color="primary"
+                
+                to='/verify'
+                >
+                  Verify Users
+                </Button>}
+            </Grid>
+          </Grid>
         </Grid>
         <Grid item sm={4} xs={8}>
           {postMarkup}
diff --git a/twistter-frontend/src/pages/verify.js b/twistter-frontend/src/pages/verify.js
new file mode 100644
index 0000000..b0c6583
--- /dev/null
+++ b/twistter-frontend/src/pages/verify.js
@@ -0,0 +1,153 @@
+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 { errors, 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);

From 903ea356627853b0101d76d82aab3197e0ff8bb7 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Fri, 1 Nov 2019 16:19:54 -0400
Subject: [PATCH 33/79] Fix indents

---
 twistter-frontend/src/pages/verify.js | 48 +++++++++++++--------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/twistter-frontend/src/pages/verify.js b/twistter-frontend/src/pages/verify.js
index b0c6583..e36a317 100644
--- a/twistter-frontend/src/pages/verify.js
+++ b/twistter-frontend/src/pages/verify.js
@@ -113,30 +113,30 @@ export class verify extends Component {
             />
             <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>
+                <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>

From 2bd1c08c2c499db3fc0726dcf09c67de5f4efc16 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Sun, 3 Nov 2019 15:17:14 -0500
Subject: [PATCH 34/79] Writing_Microblogs to Material-UI and UI improvements

---
 twistter-frontend/src/Writing_Microblogs.js | 142 +++++---------------
 twistter-frontend/src/pages/Home.js         |   2 +-
 twistter-frontend/src/pages/Login.js        |   4 +-
 twistter-frontend/src/pages/Signup.js       |   4 +
 twistter-frontend/src/pages/user.js         |   2 +-
 5 files changed, 40 insertions(+), 114 deletions(-)

diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index e800d56..040875a 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -5,6 +5,7 @@ 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";
 
@@ -19,11 +20,8 @@ const styles = {
     marginLeft: "50px"
   },
   textField: {
-    marginBottom: 20
+    marginBottom: 15
   }
-  // TextField: {
-  //   marginBottom: "30px"
-  // }
 }
 
 class Writing_Microblogs extends Component {
@@ -50,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,
@@ -77,6 +75,7 @@ class Writing_Microblogs extends Component {
   }
 
   handleChangeforPost(event) {
+
     this.setState({ value: event.target.value });
   }
 
@@ -89,145 +88,66 @@ class Writing_Microblogs extends Component {
   render() {
     const { classes } = this.props;
     return (
-      // <div className={classes.container}>
-      //   <div className={classes.div}>
-      //     <form>
-      //       {/* <textarea
-      //         placeholder="Enter Microblog Title"
-      //         value={this.state.title}
-      //         required
-      //         onChange={this.handleChange}
-      //         cols={30}
-      //         rows={1}
-      //       /> */}
-      //       <TextField
-      //       id="title"
-      //       name="title"
-      //       label="Title"
-      //       // className={classes.textField}
-      //       value={this.state.title}
-      //       // helperText={errors.firstName}
-      //       // error={errors.firstName ? true : false}
-      //       variant="outlined"
-      //       onChange={this.handleChange}
-      //       fullWidth
-      //       />
-      //     </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} */}
-      //       <TextField
-      //         id="topics"
-      //         name="topics"
-      //         label="topics"
-      //         // className={classes.textField}
-      //         value={this.state.topics}
-      //         // helperText={errors.firstName}
-      //         // error={errors.firstName ? true : false}
-      //         variant="outlined"
-      //         onChange={this.handleChange}
-      //         fullWidth
-      //       />
-      //     </form>
-      //   </div>
-
-      //   <div style={{ width: "200px", marginLeft: "50px" }}>
-      //     <form onSubmit={this.handleSubmit}>
-      //       {/* <textarea
-      //         value={this.state.value}
-      //         required
-      //         maxLength="250"
-      //         placeholder="Write Microblog here..."
-      //         onChange={e => {
-      //           this.handleChangeforPost(e);
-      //           this.handleChangeforCharacterCount(e);
-      //         }}
-      //         cols={40}
-      //         rows={20}
-      //       /> */}
-      //       <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
-      //       />
-      //       <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-      //         <p2>Characters Left: {this.state.characterCount}</p2>
-      //       </div>
-      //       <div style={{ marginRight: "-100px" }}>
-      //         {/* <button onClick>Share Post</button> */}
-      //         <Button
-      //         onClick
-      //         >
-      //           Share Post
-      //         </Button>
-      //       </div>
-      //     </form>
-      //   </div>
-      // </div>
       <div className={classes.container}>
-        <form className={classes.form}>
+        <form noValidate className={classes.form}>
           <TextField
-          // style={{marginBottom: 20}}
             id="title"
             name="title"
             label="Title"
             className={classes.textField}
             value={this.state.title}
-            // helperText={errors.firstName}
-            // error={errors.firstName ? true : false}
             variant="outlined"
             onChange={this.handleChange}
             fullWidth
+            autoComplete='off'
           />
 
           <TextField
             id="topics"
             name="topics"
-            label="topics"
+            label="Topics"
             className={classes.textField}
             value={this.state.topics}
-            // helperText={errors.firstName}
-            // error={errors.firstName ? true : false}
             variant="outlined"
-            onChange={this.handleChange}
+            onChange={this.handleChangeforTopics}
+            color="primary"
             fullWidth
+            autoComplete='off'
           />
 
           <TextField
             id="content"
             name="content"
-            label="content"
+            label="Content"
+            color="primary"
             className={classes.textField}
-            value={this.state.content}
-            // helperText={errors.bio}
-            // error={errors.bio ? true : false}
+            value={this.state.value}
+            helperText={`${this.state.characterCount} characters left`}
             multiline
-            rows="8"
+            rows="9"
             variant="outlined"
-            onChange={this.handleChange}
+            inputProps={{
+              maxLength: 250
+            }}
+            onChange={(e) => {
+              this.handleChangeforPost(e);
+              this.handleChangeforCharacterCount(e);
+            }}
             fullWidth
+            autoComplete='off'
           />
+          <Button
+            onClick={this.handleSubmit}
+            // disabled={loading}
+            variant="outlined"
+            color="primary"
+            >
+              Share Post
+          </Button>
         </form>
       </div>
     );
   }
 }
 
-// export default Writing_Microblogs;
 export default withStyles(styles)(Writing_Microblogs);
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index e331479..c5ddc43 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -45,7 +45,7 @@ class Home extends Component {
           <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>
diff --git a/twistter-frontend/src/pages/Login.js b/twistter-frontend/src/pages/Login.js
index ef7e5c4..aee2452 100644
--- a/twistter-frontend/src/pages/Login.js
+++ b/twistter-frontend/src/pages/Login.js
@@ -111,7 +111,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}
@@ -119,6 +119,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -132,6 +133,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <Button
               type="submit"
diff --git a/twistter-frontend/src/pages/Signup.js b/twistter-frontend/src/pages/Signup.js
index 91e4e52..81ed7af 100644
--- a/twistter-frontend/src/pages/Signup.js
+++ b/twistter-frontend/src/pages/Signup.js
@@ -107,6 +107,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="email"
@@ -119,6 +120,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -132,6 +134,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="confirmPassword"
@@ -145,6 +148,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <Button
               type="submit"
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index acb11ae..490c222 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -132,7 +132,7 @@ class user extends Component {
           <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>

From 38df4ef08769afd4c38801c07d6bac3dd7db161b Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Sun, 3 Nov 2019 15:29:39 -0500
Subject: [PATCH 35/79] Added styles and spaced cards

---
 twistter-frontend/src/pages/Home.js | 16 ++++++++++++----
 twistter-frontend/src/pages/user.js | 16 ++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index c5ddc43..37cebf9 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -9,6 +9,7 @@ import Grid from '@material-ui/core/Grid';
 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';
@@ -16,6 +17,12 @@ import logo from '../images/twistter-logo.png';
 import noImage from '../images/no-img.png';
 import Writing_Microblogs from '../Writing_Microblogs';
 
+const styles = {
+  card: {
+    marginBottom: 5
+  }
+}
+
 class Home extends Component {
   state = {};
 
@@ -38,10 +45,10 @@ class Home extends Component {
 
   render() {
     let authenticated = this.props.user.authenticated;
-
+    let {classes} = this.props;
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
-        <Card>
+        <Card className={classes.card}>
           <CardContent>
             <Typography>
               {
@@ -106,7 +113,8 @@ const mapStateToProps = (state) => ({
 })
 
 Home.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  clases: PropTypes.object.isRequired
 }
 
-export default connect(mapStateToProps)(Home);
\ No newline at end of file
+export default connect(mapStateToProps)(withStyles(styles)(Home));
\ No newline at end of file
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 490c222..355ba3e 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -13,6 +13,7 @@ import CardMedia from '@material-ui/core/CardMedia';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import Grid from "@material-ui/core/Grid";
+import withStyles from '@material-ui/styles/withStyles';
 
 import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
@@ -28,6 +29,12 @@ const MyChip = styled(Chip)({
   color: "primary"
 });
 
+const styles = {
+  card: {
+    marginBottom: 5
+  }
+}
+
 class user extends Component {
   state = {
     profile: null,
@@ -104,7 +111,7 @@ class user extends Component {
 
   render() {
     let authenticated = this.props.user.authenticated;
-    let classes = this.props;
+    let {classes} = this.props;
     let profileMarkup = this.state.profile ? (
       <p>
       <Typography variant='h5'>{this.state.profile}</Typography>
@@ -128,7 +135,7 @@ class user extends Component {
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
-        <Card>
+        <Card className={classes.card}>
           <CardContent>
             <Typography>
               {
@@ -190,7 +197,8 @@ const mapStateToProps = (state) => ({
 })
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  clases: PropTypes.object.isRequired
 }
 
-export default connect(mapStateToProps)(user);
+export default connect(mapStateToProps)(withStyles(styles)(user));

From bbbfc4b750cc47e94642aaecee8a8a9434972de8 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Sun, 3 Nov 2019 21:10:57 -0500
Subject: [PATCH 36/79] Editprofile move button positions

---
 twistter-frontend/src/pages/editProfile.js | 58 ++++++++++++++--------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index 7272e76..d90b601 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -28,6 +28,14 @@ const styles = {
     positon: "relative",
     marginBottom: 30
   },
+  back: {
+    float: "left",
+    marginLeft: 15
+  },
+  delete: {
+    float: "right",
+    marginRight: 15
+  },
   progress: {
     position: "absolute"
   }
@@ -135,7 +143,17 @@ export class edit extends Component {
 
     return (
       <Grid container className={classes.form}>
-        <Grid item sm />
+        <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 +172,7 @@ export class edit extends Component {
                   variant="outlined"
                   onChange={this.handleChange}
                   fullWidth
+                  autoComplete='off'
                 />
               </Grid>
               <Grid item sm>
@@ -168,6 +187,7 @@ export class edit extends Component {
                   variant="outlined"
                   onChange={this.handleChange}
                   fullWidth
+                  autoComplete='off'
                 />
               </Grid>
             </Grid>
@@ -185,6 +205,7 @@ export class edit extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="handle"
@@ -200,6 +221,7 @@ export class edit extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="bio"
@@ -214,6 +236,7 @@ export class edit extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <Button
               type="submit"
@@ -229,29 +252,20 @@ export class edit extends Component {
                 <CircularProgress size={30} className={classes.progress} />
               )}
             </Button>
-            <br />
-            <Button
-              //variant="contained"
-              color="primary"
-              className={classes.button}
-              component={ Link }
-              to='/user'
-            >
-              Back to Profile
-            </Button>
-            <br />
-            <Button
-              variant="contained"
-              color="secondary"
-              className={classes.button}
-              component={ Link }
-              to='/delete'
-            >
-              Delete Account
-            </Button>
+            
           </form>
         </Grid>
-        <Grid item sm />
+        <Grid item sm>
+        <Button
+          variant="outlined"
+          color="secondary"
+          className={classes.delete}
+          component={ Link }
+          to='/delete'
+        >
+          Delete Account
+        </Button>
+        </Grid>
       </Grid>
     );
   }

From 7476833f0a61ec6e316da03e03c8b9157b7094d4 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 5 Nov 2019 16:32:16 -0500
Subject: [PATCH 37/79] Main layout of profile page

---
 twistter-frontend/src/pages/user.js | 81 +++++++++++++++--------------
 1 file changed, 41 insertions(+), 40 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index a91dffe..ec3fe4f 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -16,6 +16,7 @@ import Button from '@material-ui/core/Button';
 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 Userline from '../Userline';
@@ -27,11 +28,26 @@ const styles = {
     positon: 'relative',
     float: 'left',
     marginLeft: 30,
-    marginTop: 15
+    marginTop: 20
   },
   paper: {
     // marginLeft: "10%",
     // marginRight: "10%"
+  },
+  profileImage: {
+    marginTop: 20
+  },
+  topicsContainer: {
+    border: "lightgray solid 1px",
+    marginTop: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+    height: 300
+  },
+  addCircle: {
+    width: 65,
+    height: 65,
+    marginTop: 10
   }
 };
 
@@ -113,9 +129,9 @@ class user extends Component {
     );
 
     let imageMarkup = this.state.imageUrl ? (
-      <img src={this.state.imageUrl} height="250" width="250" />
+      <img className={classes.profileImage} src={this.state.imageUrl} height="250" width="250" />
     ) : (
-      <img src={noImage} />
+      <img className={classes.profileImage} src={noImage} />
     );
 
     // FIX: This needs to check if user's profile page being displayed
@@ -130,31 +146,6 @@ class user extends Component {
     ) : null;
 
     return (
-      // <Grid container spacing={16}>
-      //   <Grid item sm={8} xs={12}>
-      //     <p>Posts go here</p>
-      //   </Grid>
-      //   <Grid item sm={4} xs={12}>
-      //     {editButtonMarkup}
-      //     {imageMarkup}
-      //     {profileMarkup}
-      //     {topicsMarkup}
-      //     <TextField
-      //     id="newTopic"
-      //     label="new topic"
-      //     defaultValue=""
-      //     margin="normal"
-      //     variant="outlined"
-      //     value={this.state.newTopic}
-      //     onChange={ (event) => this.handleChange(event)}
-      //     />
-      //     <AddCircle
-      //       color="primary"
-      //       clickable
-      //       onClick={this.handleAddCircle}
-      //     />
-      //   </Grid>
-      // </Grid>
       <div>
         {/* <Paper className={classes.paper}> */}
 
@@ -167,24 +158,34 @@ class user extends Component {
               <Grid item sm>
                 {imageMarkup}
                 {profileMarkup}
-                {topicsMarkup}
-                <TextField
-                  id="newTopic"
-                  label="new topic"
-                  defaultValue=""
-                  margin="normal"
-                  variant="outlined"
-                  value={this.state.newTopic}
-                  onChange={(event) => this.handleChange(event)}
-                />
-                <AddCircle color="primary" clickable onClick={this.handleAddCircle} />
               </Grid>
               <Grid item sm>
                 <p>posts here</p>
               </Grid>
             </Grid>
           </Grid>
-          <Grid item sm />
+          <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
+              onClick={this.handleAddCircle} />
+          </Grid>
         </Grid>
         {/* </Paper> */}
 

From 7cc8a3f11f2885c0776463cf21587176c165e880 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Mon, 28 Oct 2019 23:25:12 -0400
Subject: [PATCH 38/79] Fixing up profile UI

---
 twistter-frontend/src/pages/user.js | 188 ++++++++++++++++++----------
 1 file changed, 125 insertions(+), 63 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 3340b47..c877e06 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -19,16 +19,36 @@ 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 withStyles from '@material-ui/core/styles/withStyles';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import GridListTileBar from '@material-ui/core/GridListTileBar';
+import Paper from '@material-ui/core/Paper';
+
 
 // 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: 15
+	},
+	paper: {
+		// marginLeft: "10%",
+		// marginRight: "10%"
+	}
+};
+
 class user extends Component {
   state = {
     profile: null,
@@ -70,18 +90,18 @@ class user extends Component {
   componentDidMount() {
     axios
       .get("/user")
-      .then(res => {
+      .then((res) => {
         this.setState({
           profile: res.data.credentials.handle,
           imageUrl: res.data.credentials.imageUrl,
           verified: res.data.credentials.verified ? res.data.credentials.verified : false
         });
       })
-      .catch(err => console.log(err));
+      .catch((err) => console.log(err));
 
     axios
       .get("/getAllTopics")
-      .then(res => {
+      .then((res) => {
         this.setState({
           topics: res.data
         });
@@ -100,8 +120,8 @@ class user extends Component {
   }
 
   render() {
+    const { classes } = this.props;
     let authenticated = this.props.user.authenticated;
-    let classes = this.props;
 
     let profileMarkup = this.state.profile ? (
       <div>
@@ -149,66 +169,108 @@ class user extends Component {
       )
     ) : (<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 ? (
+			<Button className={classes.button} variant="outlined" color="primary">
+				Edit Profile
+			</Button>
+		) : null;
+
     return (
-      <Grid container spacing={24}>
-        <Grid item sm={4} xs={8}>
-          {imageMarkup}
-          {profileMarkup}
-          {topicsMarkup}
-          <TextField
-          id="newTopic"
-          label="new topic"
-          defaultValue=""
-          margin="normal"
-          variant="outlined"
-          value={this.state.newTopic}
-          onChange={(event) => this.handleChange(event)}
-          />
-          <AddCircle
-            color="primary"
-            clickable
-            onClick={this.handleAddCircle}
-          />
-          <br />
-          <Grid container direction="column">
-            <Grid item>
-              {
-                authenticated && 
-                <Button 
-                style={{width:150, marginBottom: 10, marginTop: 5}}
-                component={ Link } 
-                to='/edit' 
-                variant="outlined" 
-                color="primary"
-                >
-                  Edit Profile
-                </Button>}
-            </Grid>
-            <Grid item>
-              {
-                authenticated && 
-                this.state.profile === 'Admin' && 
-                <Button
-                style={{width:150}}
-                component={ Link } 
-                variant="outlined" 
-                color="primary"
+      // <Grid container spacing={24}>
+      //   <Grid item sm={4} xs={8}>
+      //     {imageMarkup}
+      //     {profileMarkup}
+      //     {topicsMarkup}
+      //     <TextField
+      //     id="newTopic"
+      //     label="new topic"
+      //     defaultValue=""
+      //     margin="normal"
+      //     variant="outlined"
+      //     value={this.state.newTopic}
+      //     onChange={(event) => this.handleChange(event)}
+      //     />
+      //     <AddCircle
+      //       color="primary"
+      //       clickable
+      //       onClick={this.handleAddCircle}
+      //     />
+      //     <br />
+      //     <Grid container direction="column">
+      //       <Grid item>
+      //         {
+      //           authenticated && 
+      //           <Button 
+      //           style={{width:150, marginBottom: 10, marginTop: 5}}
+      //           component={ Link } 
+      //           to='/edit' 
+      //           variant="outlined" 
+      //           color="primary"
+      //           >
+      //             Edit Profile
+      //           </Button>}
+      //       </Grid>
+      //       <Grid item>
+      //         {
+      //           authenticated && 
+      //           this.state.profile === 'Admin' && 
+      //           <Button
+      //           style={{width:150}}
+      //           component={ Link } 
+      //           variant="outlined" 
+      //           color="primary"
                 
-                to='/verify'
-                >
-                  Verify Users
-                </Button>}
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid item sm={4} xs={8}>
-          {postMarkup}
-        </Grid>
-        <Grid item sm={4} xs={8}>
-          <Writing_Microblogs />
-        </Grid>
-              
-      </Grid>
+      //           to='/verify'
+      //           >
+      //             Verify Users
+      //           </Button>}
+      //       </Grid>
+      //     </Grid>
+      //   </Grid>
+      //   <Grid item sm={4} xs={8}>
+      //     {postMarkup}
+      //   </Grid>
+      //   <Grid item sm={4} xs={8}>
+      //     <Writing_Microblogs />
+      //   </Grid>
+      //         
+      // </Grid>
+
+      <div>
+				<Grid container>
+					<Grid item sm>
+						{editButtonMarkup}
+					</Grid>
+					<Grid item sm>
+						<Grid container direction="column">
+							<Grid item sm>
+								{imageMarkup}
+								{profileMarkup}
+								{topicsMarkup}
+								<TextField
+									id="newTopic"
+									label="new topic"
+									defaultValue=""
+									margin="normal"
+									variant="outlined"
+									value={this.state.newTopic}
+									onChange={(event) => this.handleChange(event)}
+								/>
+								<AddCircle color="primary" clickable onClick={this.handleAddCircle} />
+							</Grid>
+							<Grid item sm>
+								<p>posts here</p>
+							</Grid>
+						</Grid>
+					</Grid>
+					<Grid item sm />
+				</Grid>
+			</div>
     );
   }
 }
@@ -221,4 +283,4 @@ user.propTypes = {
   user: PropTypes.object.isRequired
 }
 
-export default connect(mapStateToProps)(user);
+export default connect(mapStateToProps)(withStyles(styles)(user));

From 947e5b01a409effca105abbf9d4ff5348eca47e0 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 29 Oct 2019 23:02:36 -0400
Subject: [PATCH 39/79] Converted tabs back to spaces

---
 twistter-frontend/src/pages/user.js | 139 ++++++++--------------------
 1 file changed, 41 insertions(+), 98 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index c877e06..763d31f 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -37,16 +37,16 @@ const MyChip = styled(Chip)({
 });
 
 const styles = {
-	button: {
-		positon: 'relative',
-		float: 'left',
-		marginLeft: 30,
-		marginTop: 15
-	},
-	paper: {
-		// marginLeft: "10%",
-		// marginRight: "10%"
-	}
+  button: {
+    positon: 'relative',
+    float: 'left',
+    marginLeft: 30,
+    marginTop: 15
+  },
+  paper: {
+    // marginLeft: "10%",
+    // marginRight: "10%"
+  }
 };
 
 class user extends Component {
@@ -181,96 +181,39 @@ class user extends Component {
 		) : null;
 
     return (
-      // <Grid container spacing={24}>
-      //   <Grid item sm={4} xs={8}>
-      //     {imageMarkup}
-      //     {profileMarkup}
-      //     {topicsMarkup}
-      //     <TextField
-      //     id="newTopic"
-      //     label="new topic"
-      //     defaultValue=""
-      //     margin="normal"
-      //     variant="outlined"
-      //     value={this.state.newTopic}
-      //     onChange={(event) => this.handleChange(event)}
-      //     />
-      //     <AddCircle
-      //       color="primary"
-      //       clickable
-      //       onClick={this.handleAddCircle}
-      //     />
-      //     <br />
-      //     <Grid container direction="column">
-      //       <Grid item>
-      //         {
-      //           authenticated && 
-      //           <Button 
-      //           style={{width:150, marginBottom: 10, marginTop: 5}}
-      //           component={ Link } 
-      //           to='/edit' 
-      //           variant="outlined" 
-      //           color="primary"
-      //           >
-      //             Edit Profile
-      //           </Button>}
-      //       </Grid>
-      //       <Grid item>
-      //         {
-      //           authenticated && 
-      //           this.state.profile === 'Admin' && 
-      //           <Button
-      //           style={{width:150}}
-      //           component={ Link } 
-      //           variant="outlined" 
-      //           color="primary"
-                
-      //           to='/verify'
-      //           >
-      //             Verify Users
-      //           </Button>}
-      //       </Grid>
-      //     </Grid>
-      //   </Grid>
-      //   <Grid item sm={4} xs={8}>
-      //     {postMarkup}
-      //   </Grid>
-      //   <Grid item sm={4} xs={8}>
-      //     <Writing_Microblogs />
-      //   </Grid>
-      //         
-      // </Grid>
 
       <div>
-				<Grid container>
-					<Grid item sm>
-						{editButtonMarkup}
-					</Grid>
-					<Grid item sm>
-						<Grid container direction="column">
-							<Grid item sm>
-								{imageMarkup}
-								{profileMarkup}
-								{topicsMarkup}
-								<TextField
-									id="newTopic"
-									label="new topic"
-									defaultValue=""
-									margin="normal"
-									variant="outlined"
-									value={this.state.newTopic}
-									onChange={(event) => this.handleChange(event)}
-								/>
-								<AddCircle color="primary" clickable onClick={this.handleAddCircle} />
-							</Grid>
-							<Grid item sm>
-								<p>posts here</p>
-							</Grid>
-						</Grid>
-					</Grid>
-					<Grid item sm />
-				</Grid>
-			</div>
+        {/* <Paper className={classes.paper}> */}
+
+        <Grid container>
+          <Grid item sm>
+            {editButtonMarkup}
+          </Grid>
+          <Grid item sm>
+            <Grid container direction="column">
+              <Grid item sm>
+                {imageMarkup}
+                {profileMarkup}
+                {topicsMarkup}
+                <TextField
+                  id="newTopic"
+                  label="new topic"
+                  defaultValue=""
+                  margin="normal"
+                  variant="outlined"
+                  value={this.state.newTopic}
+                  onChange={(event) => this.handleChange(event)}
+                />
+                <AddCircle color="primary" clickable onClick={this.handleAddCircle} />
+              </Grid>
+              <Grid item sm>
+                {postMarkup}
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item sm />
+        </Grid>
+      </div>
     );
   }
 }

From 80670d054e2216b13ad96c9dc3e5b1a31a11ae55 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 5 Nov 2019 16:32:16 -0500
Subject: [PATCH 40/79] Main layout of profile page

---
 twistter-frontend/src/pages/user.js | 56 ++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 763d31f..82add8f 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -24,7 +24,7 @@ import GridList from '@material-ui/core/GridList';
 import GridListTile from '@material-ui/core/GridListTile';
 import GridListTileBar from '@material-ui/core/GridListTileBar';
 import Paper from '@material-ui/core/Paper';
-
+import Container from '@material-ui/core/Container';
 
 // component
 import '../App.css';
@@ -41,11 +41,26 @@ const styles = {
     positon: 'relative',
     float: 'left',
     marginLeft: 30,
-    marginTop: 15
+    marginTop: 20
   },
   paper: {
     // marginLeft: "10%",
     // marginRight: "10%"
+  },
+  profileImage: {
+    marginTop: 20
+  },
+  topicsContainer: {
+    border: "lightgray solid 1px",
+    marginTop: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+    height: 300
+  },
+  addCircle: {
+    width: 65,
+    height: 65,
+    marginTop: 10
   }
 };
 
@@ -151,7 +166,7 @@ class user extends Component {
           <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>
@@ -181,7 +196,6 @@ class user extends Component {
 		) : null;
 
     return (
-
       <div>
         {/* <Paper className={classes.paper}> */}
 
@@ -194,24 +208,34 @@ class user extends Component {
               <Grid item sm>
                 {imageMarkup}
                 {profileMarkup}
-                {topicsMarkup}
-                <TextField
-                  id="newTopic"
-                  label="new topic"
-                  defaultValue=""
-                  margin="normal"
-                  variant="outlined"
-                  value={this.state.newTopic}
-                  onChange={(event) => this.handleChange(event)}
-                />
-                <AddCircle color="primary" clickable onClick={this.handleAddCircle} />
               </Grid>
               <Grid item sm>
                 {postMarkup}
               </Grid>
             </Grid>
           </Grid>
-          <Grid item sm />
+          <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
+              onClick={this.handleAddCircle} />
+          </Grid>
         </Grid>
       </div>
     );

From 6149e15b359a6593859425a7c7675e30b0201357 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 5 Nov 2019 17:35:16 -0500
Subject: [PATCH 41/79] Profile page kinda works on mobile

---
 twistter-frontend/src/pages/user.js | 416 +++++++++++++++-------------
 1 file changed, 226 insertions(+), 190 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 82add8f..8733ae9 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -6,16 +6,16 @@ import axios from 'axios';
 //import '../App.css';
 
 // Material UI and React Router
-import { makeStyles, styled } from "@material-ui/core/styles";
+import { makeStyles, styled } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
-import Card from "@material-ui/core/Card";
+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 Grid from '@material-ui/core/Grid';
 
-import Chip from "@material-ui/core/Chip";
-import Typography from "@material-ui/core/Typography";
+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';
@@ -32,159 +32,186 @@ import noImage from '../images/no-img.png';
 import Writing_Microblogs from '../Writing_Microblogs';
 
 const MyChip = styled(Chip)({
-  margin: 2,
-  color: "primary"
+	margin: 2,
+	color: 'primary'
 });
 
 const styles = {
-  button: {
-    positon: 'relative',
-    float: 'left',
-    marginLeft: 30,
-    marginTop: 20
-  },
-  paper: {
-    // marginLeft: "10%",
-    // marginRight: "10%"
-  },
-  profileImage: {
-    marginTop: 20
-  },
-  topicsContainer: {
-    border: "lightgray solid 1px",
-    marginTop: 20,
-    paddingTop: 10,
-    paddingBottom: 10,
-    height: 300
-  },
-  addCircle: {
-    width: 65,
-    height: 65,
-    marginTop: 10
-  }
+	button: {
+		positon: 'relative',
+		float: 'left',
+		marginLeft: 30,
+		marginTop: 20
+	},
+	paper: {
+		// marginLeft: "10%",
+		// marginRight: "10%"
+	},
+	card: {
+		marginBottom: 10
+	},
+	profileImage: {
+		marginTop: 20
+	},
+	topicsContainer: {
+		border: 'lightgray solid 1px',
+		marginTop: 20,
+		paddingTop: 10,
+		paddingBottom: 10,
+		height: 300
+	},
+	addCircle: {
+		width: 65,
+		height: 65,
+		marginTop: 10
+	},
+	username: {
+		marginBottom: 100
+	}
 };
 
 class user extends Component {
-  state = {
-    profile: null,
-    imageUrl: null,
-    topics: null,
-    newTopic: null
-  };
+	state = {
+		profile: null,
+		imageUrl: null,
+		topics: null,
+		newTopic: null
+	};
 
-  handleDelete = topic => {
-    axios
-      .delete(`/deleteTopic/${topic.id}`)
-      .then(function() {
-        location.reload();
-      })
-      .catch(function(err) {
-        console.log(err);
-      });
-  };
+	handleDelete = (topic) => {
+		axios
+			.delete(`/deleteTopic/${topic.id}`)
+			.then(function() {
+				location.reload();
+			})
+			.catch(function(err) {
+				console.log(err);
+			});
+	};
 
-  handleAddCircle = () => {
-    axios
-      .post("/putTopic", {
-        topic: this.state.newTopic
-      })
-      .then(function() {
-        location.reload();
-      })
-      .catch(function(err) {
-        console.log(err);
-      });
-  };
+	handleAddCircle = () => {
+		axios
+			.post('/putTopic', {
+				topic: this.state.newTopic
+			})
+			.then(function() {
+				location.reload();
+			})
+			.catch(function(err) {
+				console.log(err);
+			});
+	};
 
-  handleChange(event) {
-    this.setState({
-      newTopic: event.target.value
-    });
-  }
+	handleChange(event) {
+		this.setState({
+			newTopic: event.target.value
+		});
+	}
 
-  componentDidMount() {
-    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
-        });
-      })
-      .catch((err) => console.log(err));
+	componentDidMount() {
+		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
+				});
+			})
+			.catch((err) => console.log(err));
 
-    axios
-      .get("/getAllTopics")
-      .then((res) => {
-        this.setState({
-          topics: res.data
-        });
-      })
-      .catch(err => console.log(err));
+		axios
+			.get('/getAllTopics')
+			.then((res) => {
+				this.setState({
+					topics: res.data
+				});
+			})
+			.catch((err) => console.log(err));
 
-    axios
-      .get("/getallPostsforUser")
-      .then(res => {
-        console.log(res.data);
-        this.setState({
-          posts: res.data
-        })
-      })
-      .catch(err => console.log(err));
-  }
+		axios
+			.get('/getallPostsforUser')
+			.then((res) => {
+				console.log(res.data);
+				this.setState({
+					posts: res.data
+				});
+			})
+			.catch((err) => console.log(err));
+	}
 
-  render() {
-    const { classes } = this.props;
-    let authenticated = this.props.user.authenticated;
+	render() {
+		const { classes } = this.props;
+		let authenticated = this.props.user.authenticated;
 
-    let profileMarkup = this.state.profile ? (
-      <div>
-        <Typography variant='h5'>@{this.state.profile} {this.state.verified ? (<VerifiedIcon style={{fill: "#1397D5"}}/>): (null)}</Typography>
-      </div>) : (<p>loading username...</p>);
-    
-    let topicsMarkup = this.state.topics ? (
-      this.state.topics.map(
-        topic => (
-          <MyChip
-            label={{ topic }.topic.topic}
-            key={{ topic }.topic.id}
-            onDelete={key => this.handleDelete(topic)}
-          />
-        ) // console.log({ topic }.topic.id)
-      )
-    ) : (
-      <p> loading topics...</p>
-    );
+		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 imageMarkup = this.state.imageUrl ? (<img src={this.state.imageUrl} height="150" width="150" />) : 
-                                            (<img src={noImage} height="150" width="150"/>);
+		let topicsMarkup = this.state.topics ? (
+			this.state.topics.map(
+				(topic) => (
+					<MyChip
+						label={{ topic }.topic.topic}
+						key={{ topic }.topic.id}
+						onDelete={(key) => this.handleDelete(topic)}
+					/>
+				) // console.log({ topic }.topic.id)
+			)
+		) : (
+			<p> loading topics...</p>
+		);
 
-    let postMarkup = this.state.posts ? (
-      this.state.posts.map(post => 
-        <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.body}</Typography>
-            <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
-            <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
-          </CardContent>
-        </Card>
-      )
-    ) : (<p>My Posts</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" />
+		);
 
-    // FIX: This needs to check if user's profile page being displayed
+		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.body}</Typography>
+						<br />
+						<Typography variant="body2">
+							<b>Topics:</b> {post.microBlogTopics}
+						</Typography>
+						<br />
+						<Typography variant="body2" color={'textSecondary'}>
+							Likes {post.likeCount} Comments {post.commentCount}
+						</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
@@ -195,59 +222,68 @@ class user extends Component {
 			</Button>
 		) : null;
 
-    return (
-      <div>
-        {/* <Paper className={classes.paper}> */}
-
-        <Grid container>
-          <Grid item sm>
-            {editButtonMarkup}
-          </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
-              onClick={this.handleAddCircle} />
-          </Grid>
-        </Grid>
-      </div>
-    );
-  }
+		return (
+			<div>
+				{/* <Paper className={classes.paper}> */}
+				<Grid container direction="column">
+					<Grid item>
+						<Grid container>
+							<Grid item sm>
+								{editButtonMarkup}
+							</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
+									onClick={this.handleAddCircle}
+								/>
+							</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: state.user
+});
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
-}
+	user: PropTypes.object.isRequired
+};
 
 export default connect(mapStateToProps)(withStyles(styles)(user));

From 9372a092add73cbc6bc1b42f5bc1af49ececf5b7 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 5 Nov 2019 17:43:19 -0500
Subject: [PATCH 42/79] Fix edit profile button link

---
 twistter-frontend/src/pages/user.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 139a1a4..750fc0a 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -216,9 +216,11 @@ 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">
 			<Button className={classes.button} variant="outlined" color="primary">
 				Edit Profile
 			</Button>
+      </Link>
 		) : null;
 
 		return (

From 1d26eb97adf2d84225ba2effecb449196bc89b6c Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Fri, 15 Nov 2019 17:47:47 -0500
Subject: [PATCH 43/79] Added function to follow and unfollow users

---
 functions/handlers/users.js | 174 +++++++++++++++++++++++++-----------
 functions/index.js          |  14 ++-
 2 files changed, 137 insertions(+), 51 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index a3cea0d..2fdcd51 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -201,10 +201,10 @@ exports.deleteUser = (req, res) => {
   // Get the profile image filename
   // `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`
   let imageFileName;
-  req.userData.imageUrl ? 
-  imageFileName = req.userData.imageUrl.split('/o/')[1].split('?alt=')[0] : 
-  imageFileName = 'no-img.png'
-  
+  req.userData.imageUrl
+    ? (imageFileName = req.userData.imageUrl.split("/o/")[1].split("?alt=")[0])
+    : (imageFileName = "no-img.png");
+
   const userId = req.userData.userId;
   let errors = {};
 
@@ -221,56 +221,58 @@ exports.deleteUser = (req, res) => {
   let auth = admin.auth().deleteUser(userId);
 
   // Deletes database data
-  let data = db.collection("users").doc(`${req.user.handle}`).delete();
+  let data = db
+    .collection("users")
+    .doc(`${req.user.handle}`)
+    .delete();
 
   // Deletes any custom profile image
   let image;
-  if (imageFileName !== 'no-img.png') {
-    image = admin.storage().bucket().file(imageFileName).delete()
+  if (imageFileName !== "no-img.png") {
+    image = admin
+      .storage()
+      .bucket()
+      .file(imageFileName)
+      .delete();
   } else {
     image = Promise.resolve();
   }
 
   // Deletes all users posts
-  let posts = db.collection("posts")
+  let posts = db
+    .collection("posts")
     .where("userHandle", "==", req.user.handle)
     .get()
-    .then((query) => {
-      query.forEach((snap) => {
+    .then(query => {
+      query.forEach(snap => {
         snap.ref.delete();
       });
       return;
-    })
+    });
 
   let promises = [
-    auth
-      .then(thenFunction('auth'))
-      .catch((err) => catchFunction('auth', err)), 
-    data
-      .then(thenFunction('data'))
-      .catch((err) => catchFunction('data', err)),
-    image
-      .then(thenFunction('image'))
-      .catch((err) => catchFunction('image', err)),
-    posts
-      .then(thenFunction('posts'))
-      .catch((err) => catchFunction('image', err))
+    auth.then(thenFunction("auth")).catch(err => catchFunction("auth", err)),
+    data.then(thenFunction("data")).catch(err => catchFunction("data", err)),
+    image.then(thenFunction("image")).catch(err => catchFunction("image", err)),
+    posts.then(thenFunction("posts")).catch(err => catchFunction("image", err))
   ];
 
-
   // Wait for all promises to resolve
   let waitPromise = Promise.all(promises);
 
-  waitPromise.then(() => {
-    if (Object.keys(errors) > 0) {
-      return res.status(500).json(errors);
-    } else {
-      return res.status(200).json({message: `All data for ${req.userData.handle} has been deleted.`});
-    }
-  })
-  .catch((err) => {
-    return res.status(500).json({error: err});
-  })
+  waitPromise
+    .then(() => {
+      if (Object.keys(errors) > 0) {
+        return res.status(500).json(errors);
+      } else {
+        return res.status(200).json({
+          message: `All data for ${req.userData.handle} has been deleted.`
+        });
+      }
+    })
+    .catch(err => {
+      return res.status(500).json({ error: err });
+    });
 };
 
 // Returns all data in the database for the user who is currently signed in
@@ -351,55 +353,67 @@ exports.getAuthenticatedUser = (req, res) => {
 // Must be run by the Admin user
 exports.verifyUser = (req, res) => {
   if (req.userData.handle !== "Admin") {
-    return res.status(403).json({error: "This must be done as Admin"});
+    return res.status(403).json({ error: "This must be done as Admin" });
   }
 
   db.doc(`/users/${req.body.user}`)
     .get()
-    .then((doc) => {
+    .then(doc => {
       if (doc.exists) {
         let verifiedUser = doc.data();
         verifiedUser.verified = true;
-        return db.doc(`/users/${req.body.user}`).set(verifiedUser, {merge: true});
+        return db
+          .doc(`/users/${req.body.user}`)
+          .set(verifiedUser, { merge: true });
       } else {
-        return res.status(400).json({error: `User ${req.body.user} was not found`});
+        return res
+          .status(400)
+          .json({ error: `User ${req.body.user} was not found` });
       }
     })
     .then(() => {
-      return res.status(201).json({message: `${req.body.user} is now verified`});
+      return res
+        .status(201)
+        .json({ message: `${req.body.user} is now verified` });
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
-      return res.status(500).json({error: err.code});
+      return res.status(500).json({ error: err.code });
     });
-}
+};
 
 // Unverifies the user sent to the request
 // Must be run by admin
 exports.unverifyUser = (req, res) => {
   if (req.userData.handle !== "Admin") {
-    return res.status(403).json({error: "This must be done as Admin"});
+    return res.status(403).json({ error: "This must be done as Admin" });
   }
 
   db.doc(`/users/${req.body.user}`)
     .get()
-    .then((doc) => {
+    .then(doc => {
       if (doc.exists) {
         let unverifiedUser = doc.data();
         unverifiedUser.verified = false;
-        return db.doc(`/users/${req.body.user}`).set(unverifiedUser, {merge: true});
+        return db
+          .doc(`/users/${req.body.user}`)
+          .set(unverifiedUser, { merge: true });
       } else {
-        return res.status(400).json({error: `User ${req.body.user} was not found`});
+        return res
+          .status(400)
+          .json({ error: `User ${req.body.user} was not found` });
       }
     })
     .then(() => {
-      return res.status(201).json({message: `${req.body.user} is no longer verified`});
+      return res
+        .status(201)
+        .json({ message: `${req.body.user} is no longer verified` });
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
-      return res.status(500).json({error: err.code});
+      return res.status(500).json({ error: err.code });
     });
-}
+};
 exports.getUserHandles = (req, res) => {
   admin
     .firestore()
@@ -417,3 +431,63 @@ exports.getUserHandles = (req, res) => {
       return res.status(500).json({ error: "Failed to get all user handles." });
     });
 };
+
+exports.addSubscription = (req, res) => {
+  let new_following = [];
+  let userRef = db.doc(`/users/${req.userData.handle}`);
+  userRef.get().then(doc => {
+    new_following = doc.data().following;
+    new_following.push(req.body.following);
+
+    // add stuff
+    userRef
+      .set({ following: new_following }, { merge: true })
+      .then(doc => {
+        return res
+          .status(201)
+          .json({ message: `Following ${req.body.following}` });
+      })
+      .catch(err => {
+        return res.status(500).json({ err });
+      });
+  });
+};
+
+exports.getSubs = (req, res) => {
+  let data = [];
+  db.doc(`/users/${req.userData.handle}`)
+    .get()
+    .then(doc => {
+      data = doc.data().following;
+      return res.status(200).json({ data });
+    })
+    .catch(err => {
+      return res.status(500).json({ err });
+    });
+};
+
+exports.removeSub = (req, res) => {
+  let new_following = [];
+  let userRef = db.doc(`/users/${req.userData.handle}`);
+  userRef.get().then(doc => {
+    new_following = doc.data().following;
+    // remove username from array
+    new_following.forEach(function(follower, index) {
+      if (follower === `${req.body.unfollow}`) {
+        new_following.splice(index, 1);
+      }
+    });
+
+    // update database
+    userRef
+      .set({ following: 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 });
+      });
+  });
+};
diff --git a/functions/index.js b/functions/index.js
index f05c7b8..86231d0 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -19,7 +19,10 @@ const {
   updateProfileInfo,
   verifyUser,
   unverifyUser,
-  getUserHandles
+  getUserHandles,
+  addSubscription,
+  getSubs,
+  removeSub
 } = require("./handlers/users");
 
 // Adds a user to the database and registers them in firebase with
@@ -55,6 +58,15 @@ app.post("/unverifyUser", fbAuth, unverifyUser);
 // get user handles with search phase
 app.get("/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.delete("/removeSub", fbAuth, removeSub);
+
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/

From c8aa1fd050753fed297c6a0a61dc3993bf1236b8 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Tue, 19 Nov 2019 13:57:24 -0500
Subject: [PATCH 44/79] Added page to display other users' profile

---
 twistter-frontend/src/App.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index aeec8ee..9e29d2e 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -19,8 +19,6 @@ import { logoutUser, getUserData } from "./redux/actions/userActions";
 // Components
 import AuthRoute from "./util/AuthRoute";
 
-// axios.defaults.baseURL = 'http://localhost:5006/twistter-e4649/us-central1/api';
-
 // Pages
 import home from "./pages/Home";
 import signup from "./pages/Signup";
@@ -33,6 +31,7 @@ import editProfile from "./pages/editProfile";
 import userLine from "./Userline.js";
 import verify from "./pages/verify";
 import Search from "./pages/Search.js";
+import otherUser from "./pages/otherUser";
 
 const theme = createMuiTheme(themeObject);
 
@@ -65,11 +64,10 @@ class App extends Component {
             </div>
             <div className="app">
               <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}/>
+                <AuthRoute exact path="/" component={home} />
 
                 <Route exact path="/logout" component={logout} />
                 <Route exact path="/delete" component={Delete} />
@@ -77,11 +75,11 @@ 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="/verify" component={verify}/>
+                <Route exact path="/verify" component={verify} />
                 <Route exact path="/search" component={Search} />
+                <Route exact path="/user/:userhandle" component={otherUser} />
 
                 <AuthRoute exact path="/" component={home} />
-
               </Switch>
             </div>
           </Router>

From 42c53fdbc4ad9b0817c49ab8221e7044d63c7ff1 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Tue, 19 Nov 2019 15:56:39 -0500
Subject: [PATCH 45/79] Add profile image, topics for other user page

---
 functions/handlers/topic.js              |  13 +++
 functions/index.js                       |  12 +-
 twistter-frontend/src/pages/otherUser.js | 138 +++++++++++++++++++++++
 3 files changed, 161 insertions(+), 2 deletions(-)
 create mode 100644 twistter-frontend/src/pages/otherUser.js

diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js
index a55f748..bb5b9f1 100644
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -58,3 +58,16 @@ exports.deleteTopic = (req, res) => {
       return res.status(500).json({ error: "Failed to delete topic." });
     });
 };
+
+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 });
+    });
+};
diff --git a/functions/index.js b/functions/index.js
index 86231d0..bf18777 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -37,7 +37,7 @@ app.post("/login", login);
 //Deletes user account
 app.delete("/delete", fbAuth, deleteUser);
 
-app.get("/getUser", fbAuth, getUserDetails);
+app.post("/getUserDetails", fbAuth, getUserDetails);
 
 // Returns all profile data of the currently logged in user
 app.get("/getProfileInfo", fbAuth, getProfileInfo);
@@ -82,7 +82,12 @@ app.post("/putPost", fbAuth, putPost);
 /*------------------------------------------------------------------*
  *  handlers/topic.js                                                *
  *------------------------------------------------------------------*/
-const { putTopic, getAllTopics, deleteTopic } = require("./handlers/topic");
+const {
+  putTopic,
+  getAllTopics,
+  deleteTopic,
+  getUserTopics
+} = require("./handlers/topic");
 
 // add topic to database
 app.post("/putTopic", fbAuth, putTopic);
@@ -93,4 +98,7 @@ app.get("/getAllTopics", fbAuth, getAllTopics);
 // delete a specific topic
 app.delete("/deleteTopic/:topicId", fbAuth, deleteTopic);
 
+// get topic for this user
+app.post("/getUserTopics", fbAuth, getUserTopics);
+
 exports.api = functions.https.onRequest(app);
diff --git a/twistter-frontend/src/pages/otherUser.js b/twistter-frontend/src/pages/otherUser.js
new file mode 100644
index 0000000..5a1aa21
--- /dev/null
+++ b/twistter-frontend/src/pages/otherUser.js
@@ -0,0 +1,138 @@
+/* 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 { 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";
+
+// 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"
+});
+
+class user extends Component {
+  state = {
+    profile: window.location.pathname.split("/").pop(),
+    imageUrl: null,
+    topics: null,
+    following: null // boolean value
+  };
+
+  componentDidMount() {
+    console.log(this.state.profile);
+    axios
+      .post("/getUserDetails", {
+        handle: this.state.profile
+      })
+      .then(res => {
+        console.log(res.data.userData);
+        this.setState({
+          imageUrl: res.data.userData.imageUrl,
+          topics: res.data.userData.followedTopics
+        });
+      })
+      .catch(err => console.log(err));
+
+    axios
+      .get("/getallPostsforUser")
+      .then(res => {
+        console.log(res.data);
+        this.setState({
+          posts: res.data
+        });
+      })
+      .catch(err => console.log(err));
+  }
+
+  render() {
+    let authenticated = this.props.user.authenticated;
+    let classes = this.props;
+
+    let profileMarkup = this.state.profile ? (
+      <div>
+        <Typography variant="h5">
+          @{this.state.profile}{" "}
+          {this.state.verified ? (
+            <VerifiedIcon style={{ fill: "#1397D5" }} />
+          ) : null}
+        </Typography>
+      </div>
+    ) : (
+      <p>loading username...</p>
+    );
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(
+        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
+      )
+    ) : (
+      <p> loading topics...</p>
+    );
+
+    let imageMarkup = this.state.imageUrl ? (
+      <img src={this.state.imageUrl} height="150" width="150" />
+    ) : (
+      <img src={noImage} height="150" width="150" />
+    );
+
+    let postMarkup = this.state.posts ? (
+      this.state.posts.map(post => (
+        <Card>
+          <CardContent>
+            <Typography>
+              {this.state.imageUrl ? (
+                <img src={this.state.imageUrl} height="250" width="250" />
+              ) : (
+                <img src={noImage} height="50" width="50" />
+              )}
+            </Typography>
+          </CardContent>
+        </Card>
+      ))
+    ) : (
+      <p>My Posts</p>
+    );
+
+    return (
+      <Grid container spacing={24}>
+        <Grid item sm={4} xs={8}>
+          {imageMarkup}
+          {profileMarkup}
+          {topicsMarkup}
+          <br />
+        </Grid>
+        <Grid item sm={4} xs={8}>
+          {postMarkup}
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  user: state.user
+});
+
+user.propTypes = {
+  user: PropTypes.object.isRequired
+};
+
+export default connect(mapStateToProps)(user);

From 2de3da928abf8b414f4ffb216f41622e2328cbe8 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Tue, 19 Nov 2019 19:03:28 -0500
Subject: [PATCH 46/79] added UI for follow and unfollow other user

---
 functions/handlers/users.js              |  2 +
 functions/index.js                       |  2 +-
 twistter-frontend/src/pages/otherUser.js | 74 +++++++++++++++---------
 3 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 2fdcd51..84463c2 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -450,6 +450,7 @@ exports.addSubscription = (req, res) => {
       .catch(err => {
         return res.status(500).json({ err });
       });
+    return res.status(500).json({ error: "shouldn't execute" });
   });
 };
 
@@ -489,5 +490,6 @@ exports.removeSub = (req, res) => {
       .catch(err => {
         return res.status(500).json({ err });
       });
+    return res.status(500).json({ error: "shouldn't execute" });
   });
 };
diff --git a/functions/index.js b/functions/index.js
index bf18777..eb87142 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -65,7 +65,7 @@ app.get("/getSubs", fbAuth, getSubs);
 app.post("/addSubscription", fbAuth, addSubscription);
 
 // remove one subscription
-app.delete("/removeSub", fbAuth, removeSub);
+app.post("/removeSub", fbAuth, removeSub);
 
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
diff --git a/twistter-frontend/src/pages/otherUser.js b/twistter-frontend/src/pages/otherUser.js
index 5a1aa21..f128f72 100644
--- a/twistter-frontend/src/pages/otherUser.js
+++ b/twistter-frontend/src/pages/otherUser.js
@@ -24,6 +24,7 @@ import VerifiedIcon from "@material-ui/icons/CheckSharp";
 import "../App.css";
 import noImage from "../images/no-img.png";
 import Writing_Microblogs from "../Writing_Microblogs";
+
 const MyChip = styled(Chip)({
   margin: 2,
   color: "primary"
@@ -34,17 +35,48 @@ class user extends Component {
     profile: window.location.pathname.split("/").pop(),
     imageUrl: null,
     topics: null,
-    following: null // boolean value
+    user: null,
+    following: null
+  };
+
+  handleSub = () => {
+    if (this.state.following === true) {
+      axios
+        .post("/removeSub", {
+          unfollow: this.state.profile
+        })
+        .then(res => {
+          console.log("removed sub");
+          this.setState({
+            following: false
+          });
+        })
+        .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);
+        });
+    }
   };
 
   componentDidMount() {
-    console.log(this.state.profile);
     axios
       .post("/getUserDetails", {
         handle: this.state.profile
       })
       .then(res => {
-        console.log(res.data.userData);
         this.setState({
           imageUrl: res.data.userData.imageUrl,
           topics: res.data.userData.followedTopics
@@ -53,20 +85,16 @@ class user extends Component {
       .catch(err => console.log(err));
 
     axios
-      .get("/getallPostsforUser")
+      .get("/user")
       .then(res => {
-        console.log(res.data);
         this.setState({
-          posts: res.data
+          following: res.data.credentials.following.includes(this.state.profile)
         });
       })
       .catch(err => console.log(err));
   }
 
   render() {
-    let authenticated = this.props.user.authenticated;
-    let classes = this.props;
-
     let profileMarkup = this.state.profile ? (
       <div>
         <Typography variant="h5">
@@ -93,35 +121,27 @@ class user extends Component {
       <img src={noImage} height="150" width="150" />
     );
 
-    let postMarkup = this.state.posts ? (
-      this.state.posts.map(post => (
-        <Card>
-          <CardContent>
-            <Typography>
-              {this.state.imageUrl ? (
-                <img src={this.state.imageUrl} height="250" width="250" />
-              ) : (
-                <img src={noImage} height="50" width="50" />
-              )}
-            </Typography>
-          </CardContent>
-        </Card>
-      ))
+    let followMarkup = this.state.following ? (
+      <Button variant="contained" color="primary" onClick={this.handleSub}>
+        unfollow
+      </Button>
     ) : (
-      <p>My Posts</p>
+      <Button variant="contained" color="primary" onClick={this.handleSub}>
+        follow
+      </Button>
     );
 
+    console.log(this.state.following);
+
     return (
       <Grid container spacing={24}>
         <Grid item sm={4} xs={8}>
           {imageMarkup}
           {profileMarkup}
+          {followMarkup}
           {topicsMarkup}
           <br />
         </Grid>
-        <Grid item sm={4} xs={8}>
-          {postMarkup}
-        </Grid>
       </Grid>
     );
   }

From 1ccc195036b3b41f60503af8f604b82601544dd9 Mon Sep 17 00:00:00 2001
From: Aditya Sankaran <aditya.sankaran99@gmail.com>
Date: Tue, 19 Nov 2019 21:09:07 -0500
Subject: [PATCH 47/79] liking and unliking work

---
 functions/handlers/post.js          | 93 +++++++++++++++++++++++++++--
 functions/index.js                  |  5 +-
 twistter-frontend/package.json      |  2 +-
 twistter-frontend/src/pages/Home.js | 63 ++++++++++++++++++-
 4 files changed, 152 insertions(+), 11 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index a57cfe1..b431e0a 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -1,6 +1,8 @@
 /* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
 const admin = require('firebase-admin');
+const { db } = require('../util/admin');
+
 
 exports.putPost = (req, res) => {
     const newPost = {
@@ -39,11 +41,11 @@ exports.getallPostsforUser = (req, res) => {
         return res.status(200).json(posts);
     })
     .then(function() {
-    res.status(200).send("Successfully retrieved all user's posts from database.");
-    return;
+    return res.status(200).json("Successfully retrieved all user's posts from database.");
+    
     })
     .catch(function(err) {
-    res.status(500).send("Failed to retrieve user's posts from database.", err);
+    return res.status(500).json("Failed to retrieve user's posts from database.", err);
     });
 };
 
@@ -58,14 +60,93 @@ exports.getallPosts = (req, res) => {
         return res.status(200).json(posts);
     })
     .then(function() {
-    res.status(200).send("Successfully retrieved every post from database.");
-    return;
+    return res.status(200).json("Successfully retrieved every post from database.");
     })
     .catch(function(err) {
-    res.status(500).send("Failed to retrieve posts from database.", err);
+    return res.status(500).json("Failed to retrieve posts from database.", err);
     });
 };
 
+exports.likePost = (req, res) => {
+    let postData;
+    const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
+    .where('postId', '==', req.params.postId).limit(1);
+
+    const postDoc = db.doc(`/posts/${req.params.postId}`);
+
+    postDoc.get()
+    .then((doc) => {
+        if(doc.exists) {
+            postData = doc.data();
+            return likeDoc.get();
+        }
+        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) => {
+
+    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.getFilteredPosts = (req, res) => {
     admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
 };
diff --git a/functions/index.js b/functions/index.js
index f05c7b8..2dd66ae 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -58,7 +58,7 @@ app.get("/getUserHandles", fbAuth, getUserHandles);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, getallPosts, putPost } = require("./handlers/post");
+const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost} = require("./handlers/post");
 
 app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
@@ -67,6 +67,9 @@ app.get("/getallPosts", getallPosts);
 // Adds one post to the database
 app.post("/putPost", fbAuth, putPost);
 
+app.get("/like/:postId", fbAuth, likePost);
+app.get("/unlike/:postId", fbAuth, unlikePost);
+
 /*------------------------------------------------------------------*
  *  handlers/topic.js                                                *
  *------------------------------------------------------------------*/
diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index f7dd12f..a0cec16 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -41,5 +41,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
+  "proxy": "http://localhost:5001/twistter-e4649/us-central1/api"
 }
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index cee0a93..fb28409 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -17,7 +17,10 @@ import noImage from '../images/no-img.png';
 import Writing_Microblogs from '../Writing_Microblogs';
 
 class Home extends Component {
-  state = {};
+  state = {
+    
+  };
+
 
   componentDidMount() {
     axios
@@ -31,8 +34,9 @@ class Home extends Component {
       .catch(err => console.log(err));
   }
 
+  
   render() {
-    let authenticated = this.props.user.authenticated;
+     let authenticated = this.props.user.authenticated;
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
@@ -50,9 +54,10 @@ class Home extends Component {
             <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
             <Typography variant="body2">{post.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>        
             <br />
             <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
+            <Like microBlog = {post.postId}></Like>
           </CardContent>
         </Card>
       )
@@ -96,6 +101,7 @@ class Home extends Component {
   }
 }
 
+
 const mapStateToProps = (state) => ({
   user: state.user
 })
@@ -104,4 +110,55 @@ Home.propTypes = {
   user: PropTypes.object.isRequired
 }
 
+class Like extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      like: false
+    }
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(){
+    
+    this.setState({
+      like: !this.state.like
+    }); 
+
+    if(this.state.like == false)
+          {
+
+            axios.get(`/like/${this.props.microBlog}`)
+            .then((res) => {
+                console.log(res.data);
+            })
+            .catch((err) => {
+              console.log(err);
+            })
+          }
+          else
+          {
+          axios.get(`/unlike/${this.props.microBlog}`)
+                .then((res) => {
+                    console.log(res.data);
+                })
+                .catch((err) => {
+                  console.log(err);
+                })
+            }
+  
+  }
+    render() {
+      const label = this.state.like ? 'Unlike' : 'Like'
+      return(
+        <div>
+          <button onClick={this.handleClick}>{label}</button>
+        </div>
+      )
+    }
+
+}
+
 export default connect(mapStateToProps)(Home);
\ No newline at end of file

From 81749c19ce9593230c80023c189a03c963845c5e Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Tue, 19 Nov 2019 22:30:15 -0500
Subject: [PATCH 48/79] completed search page and redirect to user profile page

---
 functions/handlers/users.js                   |  17 ++-
 functions/index.js                            |   2 +-
 .../src/components/layout/NavBar.js           | 125 ++++++++++--------
 twistter-frontend/src/pages/Search.js         |  56 ++++----
 4 files changed, 109 insertions(+), 91 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 84463c2..283b97b 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -415,16 +415,15 @@ exports.unverifyUser = (req, res) => {
     });
 };
 exports.getUserHandles = (req, res) => {
-  admin
-    .firestore()
-    .collection("users")
+  db.doc(`/users/${req.body.userHandle}`)
     .get()
-    .then(data => {
-      let users = [];
-      data.forEach(function(doc) {
-        users.push(doc.data().handle);
-      });
-      return res.status(200).json(users);
+    .then(doc => {
+      if (doc.exists) {
+        let userHandle = doc.data().handle;
+        return res.status(200).json(userHandle);
+      } else {
+        return res.status(404).json({ error: "user not found" });
+      }
     })
     .catch(err => {
       console.error(err);
diff --git a/functions/index.js b/functions/index.js
index eb87142..df44c82 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -56,7 +56,7 @@ app.post("/verifyUser", fbAuth, verifyUser);
 app.post("/unverifyUser", fbAuth, unverifyUser);
 
 // get user handles with search phase
-app.get("/getUserHandles", fbAuth, getUserHandles);
+app.post("/getUserHandles", fbAuth, getUserHandles);
 
 // get user's subscription
 app.get("/getSubs", fbAuth, getSubs);
diff --git a/twistter-frontend/src/components/layout/NavBar.js b/twistter-frontend/src/components/layout/NavBar.js
index 9c720b0..f1e1b4a 100644
--- a/twistter-frontend/src/components/layout/NavBar.js
+++ b/twistter-frontend/src/components/layout/NavBar.js
@@ -1,71 +1,84 @@
 /* eslint-disable */
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
+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 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';
+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"
-    }
-  };
-  
+  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='/login'>
-                        Login
-                    </Button>}
-                    {!authenticated && <Button component={ Link } to='/signup'>
-                        Sign Up
-                    </Button>}
-                    {authenticated && <Button component={ Link } to='/logout'>
-                        Logout
-                    </Button>}
-                </ToolBar>
-            </AppBar>
-        )
-    }
+  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="/login">
+              Login
+            </Button>
+          )}
+          {!authenticated && (
+            <Button component={Link} to="/signup">
+              Sign Up
+            </Button>
+          )}
+          {authenticated && (
+            <Button component={Link} to="/search">
+              Search
+            </Button>
+          )}
+          {authenticated && (
+            <Button component={Link} to="/logout">
+              Logout
+            </Button>
+          )}
+        </ToolBar>
+      </AppBar>
+    );
+  }
 }
 
-const mapStateToProps = (state) => ({
-    user: state.user
-})
+const mapStateToProps = state => ({
+  user: state.user
+});
 
 Navbar.propTypes = {
-    user: PropTypes.object.isRequired,
-    classes: PropTypes.object.isRequired
-}
+  user: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
+};
 
 export default connect(mapStateToProps)(withStyles(styles)(Navbar));
diff --git a/twistter-frontend/src/pages/Search.js b/twistter-frontend/src/pages/Search.js
index 657a654..14cbc52 100644
--- a/twistter-frontend/src/pages/Search.js
+++ b/twistter-frontend/src/pages/Search.js
@@ -1,17 +1,10 @@
 import React, { Component } from "react";
 // import props
-import { TextField, Paper } from "@material-ui/core";
+import { TextField, Button } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import Axios from "axios";
-import user from "./user.js";
 
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Link,
-  useRouteMatch
-} from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 
 export class Search extends Component {
   state = {
@@ -19,20 +12,28 @@ export class Search extends Component {
     searchResult: null
   };
 
-  handleSearch(event) {
-    Axios.get("/getUserHandles").then(res => {
-      this.setState({
-        searchResult: res.data
-      });
-    });
+  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);
+      });
+  };
 
   handleInput(event) {
     this.setState({
       searchPhase: event.target.value
     });
-    this.handleSearch();
+    console.log(this.state.searchPhase);
   }
 
   handleRedirect() {
@@ -41,16 +42,16 @@ export class Search extends Component {
 
   render() {
     let resultMarkup = this.state.searchResult ? (
-      this.state.searchResult.map(result => (
-        <Router>
-          <div>
-            <Link to={`/user`}>{result}</Link>
-          </div>
-        </Router>
-      ))
+      <Router>
+        <div>
+          <a href={`/user/${this.state.searchResult}`}>
+            {this.state.searchResult}
+          </a>
+        </div>
+      </Router>
     ) : (
       //   console.log(this.state.searchResult)
-      <p> searching... </p>
+      <p> No result </p>
     );
 
     return (
@@ -65,6 +66,11 @@ export class Search extends Component {
             onChange={event => this.handleInput(event)}
           />
         </Grid>
+        <Grid>
+          <Button color="primary" onClick={this.handleSearch}>
+            Search
+          </Button>
+        </Grid>
         <Grid>{resultMarkup}</Grid>
       </Grid>
     );

From e8110d643feaae370be1bef3e4f8f4c61abf6752 Mon Sep 17 00:00:00 2001
From: Aditya Sankaran <aditya.sankaran99@gmail.com>
Date: Thu, 21 Nov 2019 15:42:43 -0500
Subject: [PATCH 49/79] finished quoting microblogs

---
 functions/handlers/post.js          |  97 ++++++++++++++++++++++-
 functions/index.js                  |   7 +-
 twistter-frontend/src/pages/Home.js | 115 ++++++++++++++++++++++++++++
 3 files changed, 217 insertions(+), 2 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index b431e0a..407a85c 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -67,6 +67,102 @@ exports.getallPosts = (req, res) => {
     });
 };
 
+exports.quoteWithPost = (req, res) => {
+
+    let quoteData;
+    const quoteDoc = admin.firestore().collection('quote').
+    where('userHandle', '==', req.user.handle).
+    where('postId', '==', req.params.postId).limit(1);
+
+    const 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({
+                postId : req.params.postId,
+                userHandle : req.user.handle,
+                quotePost : req.body.quotePost
+            })
+            .then(() => {
+               return admin.firestore().collection('posts').add({
+                   quoteData,
+                   quoteUser : req.user.handle,
+                   quotePost : req.body.quotePost,
+                   quotedAt : new Date().toISOString()
+
+               })
+            })
+        }
+        else {
+            console.log("Post has already been quoted.");
+            return res.status(400).json({ error: 'Post has already been quoted.' });
+          }
+    })
+    .catch((err) => {
+        return res.status(500).json({error: 'Something is wrong'});
+
+    })
+
+}
+
+exports.quoteWithoutPost = (req, res) => {
+    let quoteData;
+    const quoteDoc = admin.firestore().collection('quote').
+    where('userHandle', '==', req.user.handle).
+    where('postId', '==', req.params.postId).limit(1);
+
+    const 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({
+                postId : req.params.postId,
+                userHandle : req.user.handle,
+            })
+            .then(() => {
+               return admin.firestore().collection('posts').add({
+                   quoteData,
+                   quoteUser : req.user.handle,
+                   quotedAt : new Date().toISOString()
+
+               })
+            })
+        }
+        else {
+            console.log("Post has already been quoted.");
+        return res.status(400).json({ error: 'Post has already been quoted.' });
+      }
+    })
+    .catch((err) => {
+        return res.status(500).json({error: 'Something is wrong'});
+
+    })
+
+}
+
+
 exports.likePost = (req, res) => {
     let postData;
     const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
@@ -146,7 +242,6 @@ exports.unlikePost = (req, res) => {
 
 }
 
-
 exports.getFilteredPosts = (req, res) => {
     admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
 };
diff --git a/functions/index.js b/functions/index.js
index 2dd66ae..cdea2d1 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -58,7 +58,7 @@ app.get("/getUserHandles", fbAuth, getUserHandles);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost} = require("./handlers/post");
+const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost, quoteWithPost, quoteWithoutPost} = require("./handlers/post");
 
 app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
@@ -70,6 +70,11 @@ app.post("/putPost", fbAuth, putPost);
 app.get("/like/:postId", fbAuth, likePost);
 app.get("/unlike/:postId", fbAuth, unlikePost);
 
+app.post("/quoteWithPost/:postId", fbAuth, quoteWithPost);
+app.post("/quoteWithoutPost/:postId", fbAuth, quoteWithoutPost);
+
+
+
 /*------------------------------------------------------------------*
  *  handlers/topic.js                                                *
  *------------------------------------------------------------------*/
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index fb28409..ff90580 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -15,6 +15,8 @@ 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';
+
 
 class Home extends Component {
   state = {
@@ -58,6 +60,7 @@ class Home extends Component {
             <br />
             <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
             <Like microBlog = {post.postId}></Like>
+            <Quote microblog = {post.postId}></Quote>
           </CardContent>
         </Card>
       )
@@ -110,6 +113,118 @@ Home.propTypes = {
   user: PropTypes.object.isRequired
 }
 
+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 headers = {
+      headers: { "Content-Type": "application/json" }
+    };
+    axios.post(`/quoteWithoutPost/${this.props.microblog}`, headers)
+    .then((res) => {
+      
+      console.log(res.data);
+    })
+    .catch(err => {
+    
+      console.error(err);
+    });
+    event.preventDefault();
+  }
+
+  handleOpenModal() {
+    this.setState({ showModal: true });
+  }
+  
+  handleCloseModal() {
+    this.setState({ showModal: false });
+  }
+
+  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 = {
+      quotePost: this.state.value,
+    };
+    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 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>
+            <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}
+            />
+            
+            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
+              <p2>Characters Left: {this.state.characterCount}</p2>
+            </div>
+              <button onClick={this.handleSubmit}>Share Quoted Post</button>
+        
+          <button onClick={this.handleCloseModal}>Cancel</button>
+
+          </form>
+        </div>
+          
+          
+        </ReactModal>
+        <button onClick={this.handleSubmitWithoutPost}>Quote without Post</button>
+
+      </div>
+    )
+  }
+}
+
 class Like extends Component {
 
   constructor(props) {

From 3da244905008c245d3989b4e195aae280befda76 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Thu, 21 Nov 2019 18:10:44 -0500
Subject: [PATCH 50/79] change topic display to user-specific topics

---
 twistter-frontend/src/pages/user.js | 515 ++++++++++++++--------------
 1 file changed, 261 insertions(+), 254 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 750fc0a..335b1cf 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,290 +1,297 @@
 /* eslint-disable */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import axios from 'axios';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import axios from "axios";
 //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 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 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';
+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';
+import "../App.css";
+import noImage from "../images/no-img.png";
+import Writing_Microblogs from "../Writing_Microblogs";
 
 const MyChip = styled(Chip)({
-	margin: 2,
-	color: 'primary'
+  margin: 2,
+  color: "primary"
 });
 
 const styles = {
-	button: {
-		positon: 'relative',
-		float: 'left',
-		marginLeft: 30,
-		marginTop: 20
-	},
-	paper: {
-		// marginLeft: "10%",
-		// marginRight: "10%"
-	},
-	card: {
-		marginBottom: 10
-	},
-	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
-	}
+  button: {
+    positon: "relative",
+    float: "left",
+    marginLeft: 30,
+    marginTop: 20
+  },
+  paper: {
+    // marginLeft: "10%",
+    // marginRight: "10%"
+  },
+  card: {
+    marginBottom: 10
+  },
+  profileImage: {
+    marginTop: 20
+  },
+  topicsContainer: {
+    border: "lightgray solid 1px",
+    marginTop: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+    height: 300
+  },
+  addCircle: {
+    width: 65,
+    height: 65,
+    marginTop: 10
+  },
+  username: {
+    marginBottom: 100
+  }
 };
 
 class user extends Component {
-	state = {
-		profile: null,
-		imageUrl: null,
-		topics: null,
-		newTopic: null
-	};
+  state = {
+    profile: null,
+    imageUrl: null,
+    topics: null,
+    newTopic: null
+  };
 
-	handleDelete = (topic) => {
-		axios
-			.delete(`/deleteTopic/${topic.id}`)
-			.then(function() {
-				location.reload();
-			})
-			.catch(function(err) {
-				console.log(err);
-			});
-	};
+  handleDelete = topic => {
+    axios
+      .delete(`/deleteTopic/${topic.id}`)
+      .then(function() {
+        location.reload();
+      })
+      .catch(function(err) {
+        console.log(err);
+      });
+  };
 
-	handleAddCircle = () => {
-		axios
-			.post('/putTopic', {
-				topic: this.state.newTopic
-			})
-			.then(function() {
-				location.reload();
-			})
-			.catch(function(err) {
-				console.log(err);
-			});
-	};
+  handleAddCircle = () => {
+    axios
+      .post("/putTopic", {
+        topic: this.state.newTopic
+      })
+      .then(function() {
+        location.reload();
+      })
+      .catch(function(err) {
+        console.log(err);
+      });
+  };
 
-	handleChange(event) {
-		this.setState({
-			newTopic: event.target.value
-		});
-	}
+  handleChange(event) {
+    this.setState({
+      newTopic: event.target.value
+    });
+  }
 
-	componentDidMount() {
-		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
-				});
-			})
-			.catch((err) => console.log(err));
+  componentDidMount() {
+    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));
 
-		axios
-			.get('/getAllTopics')
-			.then((res) => {
-				this.setState({
-					topics: res.data
-				});
-			})
-			.catch((err) => console.log(err));
+    axios
+      .get("/getallPostsforUser")
+      .then(res => {
+        console.log(res.data);
+        this.setState({
+          posts: res.data
+        });
+      })
+      .catch(err => console.log(err));
+  }
 
-		axios
-			.get('/getallPostsforUser')
-			.then((res) => {
-				console.log(res.data);
-				this.setState({
-					posts: res.data
-				});
-			})
-			.catch((err) => console.log(err));
-	}
+  render() {
+    const { classes } = this.props;
+    let authenticated = this.props.user.authenticated;
 
-	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 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.id}
+            onDelete={key => this.handleDelete(topic)}
+          />
+        ) // console.log({ topic }.topic.id)
+      )
+    ) : (
+      <p> loading topics...</p>
+    );
 
-		let topicsMarkup = this.state.topics ? (
-			this.state.topics.map(
-				(topic) => (
-					<MyChip
-						label={{ topic }.topic.topic}
-						key={{ topic }.topic.id}
-						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 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}>
+          <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.body}</Typography>
+            <br />
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics}
+            </Typography>
+            <br />
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount} Comments {post.commentCount}
+            </Typography>
+          </CardContent>
+        </Card>
+      ))
+    ) : (
+      <p>My Posts</p>
+    );
 
-		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.body}</Typography>
-						<br />
-						<Typography variant="body2">
-							<b>Topics:</b> {post.microBlogTopics}
-						</Typography>
-						<br />
-						<Typography variant="body2" color={'textSecondary'}>
-							Likes {post.likeCount} Comments {post.commentCount}
-						</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 ? (
+    // 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="/edit">
-			<Button className={classes.button} variant="outlined" color="primary">
-				Edit Profile
-			</Button>
+        <Button className={classes.button} variant="outlined" color="primary">
+          Edit Profile
+        </Button>
       </Link>
-		) : null;
+    ) : null;
 
-		return (
-			<div>
-				{/* <Paper className={classes.paper}> */}
-				<Grid container direction="column">
-					<Grid item>
-						<Grid container>
-							<Grid item sm>
-								{editButtonMarkup}
-							</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
-									onClick={this.handleAddCircle}
-								/>
-							</Grid>
-						</Grid>
-					</Grid>
-					<Grid item>
-						<Grid container>
-							<Grid item sm />
-							<Grid item>{postMarkup}</Grid>
-							<Grid item sm />
-						</Grid>
-					</Grid>
-				</Grid>
-			</div>
-		);
-	}
+    return (
+      <div>
+        {/* <Paper className={classes.paper}> */}
+        <Grid container direction="column">
+          <Grid item>
+            <Grid container>
+              <Grid item sm>
+                {editButtonMarkup}
+              </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
+                  onClick={this.handleAddCircle}
+                />
+              </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
+const mapStateToProps = state => ({
+  user: state.user
 });
 
 user.propTypes = {
-	user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired
 };
 
 export default connect(mapStateToProps)(withStyles(styles)(user));

From 7976110e2b5faddb9c87bfc01d8e18532fa5c89d Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Thu, 21 Nov 2019 19:59:04 -0500
Subject: [PATCH 51/79] modified function to add/delete topic only from user

---
 functions/handlers/topic.js | 89 ++++++++++++++++++++++++-------------
 functions/index.js          |  2 +-
 2 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js
index bb5b9f1..c2d2a57 100644
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -1,21 +1,24 @@
 const { admin, db } = require("../util/admin");
 exports.putTopic = (req, res) => {
-  const newTopic = {
-    topic: req.body.topic
-  };
+  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);
 
-  admin
-    .firestore()
-    .collection("topics")
-    .add(newTopic)
-    .then(doc => {
-      const resTopic = newTopic;
-      return res.status(200).json(resTopic);
-    })
-    .catch(err => {
-      console.error(err);
-      return res.status(500).json({ error: "something is wrong" });
-    });
+    // 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" });
+  });
 };
 
 exports.getAllTopics = (req, res) => {
@@ -40,25 +43,51 @@ exports.getAllTopics = (req, res) => {
 };
 
 exports.deleteTopic = (req, res) => {
-  const topic = db.doc(`/topics/${req.params.topicId}`);
-  topic
-    .get()
-    .then(doc => {
-      if (!doc.exists) {
-        return res.status(404).json({ error: "Topic not found" });
-      } else {
-        return topic.delete();
+  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.topic}`) {
+        new_following.splice(index, 1);
       }
-    })
-    .then(() => {
-      return res.json({ message: "Topic successfully deleted!" });
-    })
-    .catch(err => {
-      console.error(err);
-      return res.status(500).json({ error: "Failed to delete topic." });
     });
+
+    // 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" });
+  });
 };
 
+// const topic = db.doc(`/topics/${req.params.topicId}`);
+// topic
+//   .get()
+//   .then(doc => {
+//     if (!doc.exists) {
+//       return res.status(404).json({ error: "Topic not found" });
+//     } else {
+//       return topic.delete();
+//     }
+//   })
+//   .then(() => {
+//     return res.json({ message: "Topic successfully deleted!" });
+//   })
+//   .catch(err => {
+//     console.error(err);
+//     return res.status(500).json({ error: "Failed to delete topic." });
+//   });
+// };
+
 exports.getUserTopics = (req, res) => {
   let data = [];
   db.doc(`/users/${req.body.handle}`)
diff --git a/functions/index.js b/functions/index.js
index df44c82..4626e47 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -96,7 +96,7 @@ app.post("/putTopic", fbAuth, putTopic);
 app.get("/getAllTopics", fbAuth, getAllTopics);
 
 // delete a specific topic
-app.delete("/deleteTopic/:topicId", fbAuth, deleteTopic);
+app.post("/deleteTopic", fbAuth, deleteTopic);
 
 // get topic for this user
 app.post("/getUserTopics", fbAuth, getUserTopics);

From 4e817c96475c22e9fd0a0bb2d4dd4d5c53d9c3e4 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Thu, 21 Nov 2019 20:09:47 -0500
Subject: [PATCH 52/79] integrated backend change, added pointer cursor

---
 functions/handlers/topic.js         |  2 +-
 twistter-frontend/src/pages/user.js | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js
index c2d2a57..bd7b437 100644
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -49,7 +49,7 @@ exports.deleteTopic = (req, res) => {
     new_following = doc.data().followedTopics;
     // remove username from array
     new_following.forEach(function(follower, index) {
-      if (follower === `${req.body.topic}`) {
+      if (follower === `${req.body.unfollow}`) {
         new_following.splice(index, 1);
       }
     });
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 335b1cf..9896f7d 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -78,8 +78,11 @@ class user extends Component {
   };
 
   handleDelete = topic => {
+    console.log(topic);
     axios
-      .delete(`/deleteTopic/${topic.id}`)
+      .post(`/deleteTopic`, {
+        unfollow: topic
+      })
       .then(function() {
         location.reload();
       })
@@ -91,7 +94,7 @@ class user extends Component {
   handleAddCircle = () => {
     axios
       .post("/putTopic", {
-        topic: this.state.newTopic
+        following: this.state.newTopic
       })
       .then(function() {
         location.reload();
@@ -125,7 +128,7 @@ class user extends Component {
     axios
       .get("/getallPostsforUser")
       .then(res => {
-        console.log(res.data);
+        // console.log(res.data);
         this.setState({
           posts: res.data
         });
@@ -269,6 +272,7 @@ class user extends Component {
                   // iconStyle={classes.addCircle}
                   clickable
                   onClick={this.handleAddCircle}
+                  cursor="pointer"
                 />
               </Grid>
             </Grid>

From 6a78d74930df4bae17894caa8d6ee0477429ba1f Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Thu, 21 Nov 2019 20:20:54 -0500
Subject: [PATCH 53/79] simplified backend get/remove topic function

---
 functions/handlers/topic.js | 103 ++++++++++++++++--------------------
 1 file changed, 47 insertions(+), 56 deletions(-)

diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js
index bd7b437..88e014e 100644
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -2,23 +2,28 @@ 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);
+  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" });
-  });
+      // 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.getAllTopics = (req, res) => {
@@ -45,48 +50,34 @@ exports.getAllTopics = (req, res) => {
 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 });
+  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);
+        }
       });
-    return res.status(200).json({ message: "ok" });
-  });
-};
 
-// const topic = db.doc(`/topics/${req.params.topicId}`);
-// topic
-//   .get()
-//   .then(doc => {
-//     if (!doc.exists) {
-//       return res.status(404).json({ error: "Topic not found" });
-//     } else {
-//       return topic.delete();
-//     }
-//   })
-//   .then(() => {
-//     return res.json({ message: "Topic successfully deleted!" });
-//   })
-//   .catch(err => {
-//     console.error(err);
-//     return res.status(500).json({ error: "Failed to delete topic." });
-//   });
-// };
+      // 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 = [];

From 9fff6ed81ca45be6e69d103fe57821dc725d8bb7 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Fri, 22 Nov 2019 18:23:49 -0500
Subject: [PATCH 54/79] changed status code for follow/unfollow

---
 functions/handlers/users.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 283b97b..5350d19 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -449,7 +449,7 @@ 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" });
   });
 };
 
@@ -489,6 +489,6 @@ 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" });
   });
 };

From 38143778174bc88acadc7d57248b2dfda76c9c0d Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Mon, 25 Nov 2019 13:55:03 -0500
Subject: [PATCH 55/79] Display loading icon when the user logs in or signs up

---
 twistter-frontend/src/pages/Home.js           | 54 ++++++++++---------
 .../src/redux/actions/userActions.js          |  5 +-
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index cee0a93..5454973 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -8,6 +8,7 @@ import axios from 'axios';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import Typography from "@material-ui/core/Typography";
 
 // component
@@ -32,6 +33,7 @@ class Home extends Component {
   }
 
   render() {
+    const { UI:{ loading } } = this.props;
     let authenticated = this.props.user.authenticated;
 
     let postMarkup = this.state.posts ? (
@@ -68,40 +70,44 @@ class Home extends Component {
           {postMarkup}
         </Grid>
       </Grid> 
-      :
-      <div>
-        <div>
-          <img src={logo} className="app-logo" alt="logo" />
-          <br/><br/>
-          <b>Welcome to Twistter!</b> 
-          <br/><br/>
-          <b>See the most interesting topics people are following right now.</b> 
-        </div>
+      : loading ? 
+          <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
+        :
+          <div>
+            <div>
+              <img src={logo} className="app-logo" alt="logo" />
+              <br/><br/>
+              <b>Welcome to Twistter!</b> 
+              <br/><br/>
+              <b>See the most interesting topics people are following right now.</b> 
+            </div>
 
-        <br/><br/><br/><br/>
+            <br/><br/><br/><br/>
 
-        <div>                    
-          <b>Join today or sign in if you already have an account.</b> 
-          <br/><br/>
-          <form action="./signup">
-            <button className="authButtons signup">Sign up</button> 
-          </form>
-          <br/>
-          <form action="./login">
-            <button className="authButtons login">Sign in</button>
-          </form>
-        </div>
-      </div>
+            <div>                    
+              <b>Join today or sign in if you already have an account.</b> 
+              <br/><br/>
+              <form action="./signup">
+                <button className="authButtons signup">Sign up</button> 
+              </form>
+              <br/>
+              <form action="./login">
+                <button className="authButtons login">Sign in</button>
+              </form>
+            </div>
+          </div>
     );
   }
 }
 
 const mapStateToProps = (state) => ({
-  user: state.user
+  user: state.user,
+  UI: state.UI
 })
 
 Home.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  UI: PropTypes.object.isRequired
 }
 
 export default connect(mapStateToProps)(Home);
\ No newline at end of file
diff --git a/twistter-frontend/src/redux/actions/userActions.js b/twistter-frontend/src/redux/actions/userActions.js
index 5993804..7fc6cbf 100644
--- a/twistter-frontend/src/redux/actions/userActions.js
+++ b/twistter-frontend/src/redux/actions/userActions.js
@@ -9,6 +9,7 @@ export const getUserData = () => (dispatch) => {
                 type: SET_USER,
                 payload: res.data,
             })
+            dispatch({ type: CLEAR_ERRORS })
         })
         .catch((err) => console.error(err));
 }
@@ -21,7 +22,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');
       })
@@ -43,7 +44,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');
       })

From c34f06f130c15c400a0cba1b14a07021d7e52776 Mon Sep 17 00:00:00 2001
From: Aditya Sankaran <aditya.sankaran99@gmail.com>
Date: Wed, 27 Nov 2019 20:57:42 -0500
Subject: [PATCH 56/79] formatted feed and userline

---
 functions/handlers/post.js          |  4 +---
 twistter-frontend/src/pages/Home.js | 10 +++++++---
 twistter-frontend/src/pages/user.js | 14 ++++++++++----
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 407a85c..2ccdc8e 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -105,12 +105,11 @@ exports.quoteWithPost = (req, res) => {
             })
         }
         else {
-            console.log("Post has already been quoted.");
             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});
 
     })
 
@@ -151,7 +150,6 @@ exports.quoteWithoutPost = (req, res) => {
             })
         }
         else {
-            console.log("Post has already been quoted.");
         return res.status(400).json({ error: 'Post has already been quoted.' });
       }
     })
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index ff90580..fd288c0 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -32,6 +32,9 @@ class Home extends Component {
         this.setState({
           posts: res.data
         })
+        this.setState({posts: (this.state.posts).sort((a,b) =>
+          -a.createdAt.localeCompare(b.createdAt))
+        })
       })
       .catch(err => console.log(err));
   }
@@ -51,14 +54,15 @@ class Home extends Component {
               }
             </Typography>
             <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt}</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.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>        
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics.join("," + " ")}</Typography>        
             <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
             <Like microBlog = {post.postId}></Like>
             <Quote microblog = {post.postId}></Quote>
           </CardContent>
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 3340b47..cada325 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -95,6 +95,9 @@ class user extends Component {
         this.setState({
           posts: res.data
         })
+        this.setState({posts: (this.state.posts).sort((a,b) =>
+          -a.createdAt.localeCompare(b.createdAt))
+        })
       })
       .catch(err => console.log(err));
   }
@@ -124,7 +127,9 @@ class user extends Component {
 
     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>
@@ -136,14 +141,15 @@ class user extends Component {
               }
             </Typography>
             <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt}</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.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics.join("," + " ")}</Typography>
             <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
           </CardContent>
         </Card>
       )

From b83eb0c897b7119b77788fdbfc86fa7ccc6a9834 Mon Sep 17 00:00:00 2001
From: Aditya Sankaran <aditya.sankaran99@gmail.com>
Date: Fri, 29 Nov 2019 20:18:51 -0500
Subject: [PATCH 57/79] saved states of post for each user

---
 functions/handlers/post.js          | 19 +++++++++++++
 functions/index.js                  |  3 +-
 twistter-frontend/src/pages/Home.js | 44 +++++++++++++++++++++--------
 twistter-frontend/src/pages/user.js |  8 ++----
 4 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 2ccdc8e..8ef48c9 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -160,6 +160,24 @@ exports.quoteWithoutPost = (req, res) => {
 
 }
 
+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;
@@ -201,6 +219,7 @@ exports.likePost = (req, res) => {
 
 }
 
+
 exports.unlikePost = (req, res) => {
 
     let postData;
diff --git a/functions/index.js b/functions/index.js
index f4ab762..ee203eb 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -70,7 +70,7 @@ 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} = require("./handlers/post");
 
 app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
@@ -81,6 +81,7 @@ 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);
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index fd288c0..22f6ce2 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -32,9 +32,6 @@ class Home extends Component {
         this.setState({
           posts: res.data
         })
-        this.setState({posts: (this.state.posts).sort((a,b) =>
-          -a.createdAt.localeCompare(b.createdAt))
-        })
       })
       .catch(err => console.log(err));
   }
@@ -54,16 +51,15 @@ class Home extends Component {
               }
             </Typography>
             <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt.substring(0,10) + 
-                                                          " " + post.createdAt.substring(11,19)}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
             <br />
             <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
             <Typography variant="body2">{post.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics.join("," + " ")}</Typography>        
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>        
             <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
-            <Like microBlog = {post.postId}></Like>
+            {/* <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography> */}
+            <Like microBlog = {post.postId} count = {post.likeCount}></Like>
             <Quote microblog = {post.postId}></Quote>
           </CardContent>
         </Card>
@@ -234,7 +230,7 @@ class Like extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      like: false
+         
     }
 
     this.handleClick = this.handleClick.bind(this);
@@ -267,17 +263,43 @@ class Like extends Component {
                   console.log(err);
                 })
             }
-  
+            
+            
   }
+
+  componentDidMount() {
+    axios.get(`/checkforLikePost/${this.props.microBlog}`)
+    .then((res) => {
+      this.setState({
+        like: res.data
+      })
+      console.log(res.data);
+    })
+    .catch((err) => {
+      console.log(err)
+    })
+  }
+  
     render() {
+      
       const label = this.state.like ? 'Unlike' : 'Like'
       return(
         <div>
+          <Typography variant="body2" color={"textSecondary"}>Likes {this.props.count}</Typography>
           <button onClick={this.handleClick}>{label}</button>
         </div>
       )
     }
 
 }
+Quote.propTypes = {
+  user: PropTypes.object.isRequired
+}
 
-export default connect(mapStateToProps)(Home);
\ No newline at end of file
+Like.propTypes = {
+  user: PropTypes.object.isRequired
+}
+
+
+
+export default connect(mapStateToProps)(Home, Quote, Like);
\ No newline at end of file
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 0a11258..7e6f14a 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -132,9 +132,6 @@ class user extends Component {
         this.setState({
           posts: res.data
         })
-        this.setState({posts: (this.state.posts).sort((a,b) =>
-          -a.createdAt.localeCompare(b.createdAt))
-        })
       })
       .catch(err => console.log(err));
   }
@@ -205,15 +202,14 @@ class user extends Component {
             </Typography>
 
             <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt.substring(0,10) + 
-                                                          " " + post.createdAt.substring(11,19)}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
             <br />
             <Typography variant="body1">
               <b>{post.microBlogTitle}</b>
             </Typography>
             <Typography variant="body2">{post.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics.join("," + " ")}</Typography>
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
             <br />
             <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
           </CardContent>

From a36212c23dce37362a2425ab727281c255a945f2 Mon Sep 17 00:00:00 2001
From: Aditya Sankaran <aditya.sankaran99@gmail.com>
Date: Sat, 30 Nov 2019 12:16:30 -0500
Subject: [PATCH 58/79] quoting mblogs userline

---
 functions/handlers/post.js | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 8ef48c9..e84df15 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -32,6 +32,7 @@ exports.putPost = (req, res) => {
 
 exports.getallPostsforUser = (req, res) => {
     var post_query = admin.firestore().collection("posts").where("userHandle", "==", req.user.handle);
+
     post_query.get()
     .then(function(myPosts) {
         let posts = [];
@@ -92,15 +93,21 @@ exports.quoteWithPost = (req, res) => {
             return admin.firestore().collection('quote').add({
                 postId : req.params.postId,
                 userHandle : req.user.handle,
-                quotePost : req.body.quotePost
+                body : req.body.body
             })
             .then(() => {
                return admin.firestore().collection('posts').add({
-                   quoteData,
-                   quoteUser : req.user.handle,
-                   quotePost : req.body.quotePost,
-                   quotedAt : new Date().toISOString()
-
+                   
+                   userHandle : req.user.handle,
+                   body: req.body.body,
+                   createdAt : new Date().toISOString(),
+                   userImage: req.body.userImage,
+                   likeCount: 0,
+                   commentCount: 0,
+                   userID: req.user.uid,
+                   microBlogTitle: quoteData.microBlogTitle,
+                   microBlogTopics: quoteData.microBlogTopics,
+                   postId: req.params.postId
                })
             })
         }
@@ -139,12 +146,20 @@ exports.quoteWithoutPost = (req, res) => {
             return admin.firestore().collection('quote').add({
                 postId : req.params.postId,
                 userHandle : req.user.handle,
+                body: null
             })
             .then(() => {
                return admin.firestore().collection('posts').add({
-                   quoteData,
-                   quoteUser : req.user.handle,
-                   quotedAt : new Date().toISOString()
+                userHandle : req.user.handle,
+                body: null,
+                createdAt : new Date().toISOString(),
+                likeCount: 0,
+                commentCount: 0,
+                userID: req.user.uid,
+                userImage: req.body.userImage,
+                microBlogTitle: quoteData.microBlogTitle,
+                microBlogTopics: quoteData.microBlogTopics,
+                postId: req.params.postId
 
                })
             })

From ca7f793d4cd7da0e7e1fb0549caa328845cfc695 Mon Sep 17 00:00:00 2001
From: Aditya Sankaran <aditya.sankaran99@gmail.com>
Date: Sat, 30 Nov 2019 16:50:20 -0500
Subject: [PATCH 59/79] likeCount updating auto

---
 twistter-frontend/src/pages/Home.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index 22f6ce2..1c49b7f 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -129,10 +129,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);
@@ -164,7 +168,8 @@ class Quote extends Component {
 
   handleSubmit(event) {
     const quotedPost = {
-      quotePost: this.state.value,
+      body: this.state.value,
+      userImage: "bing-url",
     };
     const headers = {
       headers: { "Content-Type": "application/json" }
@@ -230,7 +235,8 @@ class Like extends Component {
   constructor(props) {
     super(props)
     this.state = {
-         
+         num : this.props.count,
+         like: false
     }
 
     this.handleClick = this.handleClick.bind(this);
@@ -244,7 +250,9 @@ class Like extends Component {
 
     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);
@@ -255,6 +263,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);
@@ -267,7 +278,7 @@ class Like extends Component {
             
   }
 
-  componentDidMount() {
+  /* componentDidMount() {
     axios.get(`/checkforLikePost/${this.props.microBlog}`)
     .then((res) => {
       this.setState({
@@ -278,14 +289,14 @@ class Like extends Component {
     .catch((err) => {
       console.log(err)
     })
-  }
+  } */
   
     render() {
       
       const label = this.state.like ? 'Unlike' : 'Like'
       return(
         <div>
-          <Typography variant="body2" color={"textSecondary"}>Likes {this.props.count}</Typography>
+          <Typography variant="body2" color={"textSecondary"}>Likes {this.state.num}</Typography>
           <button onClick={this.handleClick}>{label}</button>
         </div>
       )

From 54cd1c44a7f08e570dd5868d22f279cd9982adb7 Mon Sep 17 00:00:00 2001
From: Aditya Sankaran <aditya.sankaran99@gmail.com>
Date: Sat, 30 Nov 2019 18:11:33 -0500
Subject: [PATCH 60/79] edited userline database function

---
 functions/handlers/post.js          | 44 ++++++++++++++++++++---------
 twistter-frontend/src/pages/Home.js |  2 +-
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index e84df15..af1b854 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -14,7 +14,8 @@ 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)
@@ -91,15 +92,15 @@ exports.quoteWithPost = (req, res) => {
     .then((data) => {
         if(data.empty) {
             return admin.firestore().collection('quote').add({
-                postId : req.params.postId,
+                quoteId : req.params.postId,
                 userHandle : req.user.handle,
-                body : req.body.body
+                quoteBody : req.body.quoteBody
             })
             .then(() => {
-               return admin.firestore().collection('posts').add({
-                   
+                const post = {
+                   body: quoteData.body,
                    userHandle : req.user.handle,
-                   body: req.body.body,
+                   quoteBody: req.body.quoteBody,
                    createdAt : new Date().toISOString(),
                    userImage: req.body.userImage,
                    likeCount: 0,
@@ -107,7 +108,14 @@ exports.quoteWithPost = (req, res) => {
                    userID: req.user.uid,
                    microBlogTitle: quoteData.microBlogTitle,
                    microBlogTopics: quoteData.microBlogTopics,
-                   postId: req.params.postId
+                   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);
                })
             })
         }
@@ -144,14 +152,15 @@ exports.quoteWithoutPost = (req, res) => {
     .then((data) => {
         if(data.empty) {
             return admin.firestore().collection('quote').add({
-                postId : req.params.postId,
+                quoteId : req.params.postId,
                 userHandle : req.user.handle,
-                body: null
+                quoteBody: null
             })
             .then(() => {
-               return admin.firestore().collection('posts').add({
+                const post = {
                 userHandle : req.user.handle,
-                body: null,
+                body: quoteData.body,
+                quoteBody: null,
                 createdAt : new Date().toISOString(),
                 likeCount: 0,
                 commentCount: 0,
@@ -159,9 +168,18 @@ exports.quoteWithoutPost = (req, res) => {
                 userImage: req.body.userImage,
                 microBlogTitle: quoteData.microBlogTitle,
                 microBlogTopics: quoteData.microBlogTopics,
-                postId: req.params.postId
-
+                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 {
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index 1c49b7f..cc7c15a 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -168,7 +168,7 @@ class Quote extends Component {
 
   handleSubmit(event) {
     const quotedPost = {
-      body: this.state.value,
+      quoteBody: this.state.value,
       userImage: "bing-url",
     };
     const headers = {

From 07a8f0b7bb66f3c0a745c97d943bbb9fb7cae749 Mon Sep 17 00:00:00 2001
From: Aditya Sankaran <aditya.sankaran99@gmail.com>
Date: Sat, 30 Nov 2019 18:23:46 -0500
Subject: [PATCH 61/79] userline frontend shows quoted posts

---
 twistter-frontend/src/pages/Home.js | 2 ++
 twistter-frontend/src/pages/user.js | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index cc7c15a..84763b9 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -54,6 +54,8 @@ class Home extends Component {
             <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>        
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 7e6f14a..309fa0a 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -201,12 +201,13 @@ class user extends Component {
               {post.createdAt}
             </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>

From 6e8b7f410ac3e73ff5bff9987bb86767f2b0a51b Mon Sep 17 00:00:00 2001
From: Aditya Sankaran <aditya.sankaran99@gmail.com>
Date: Sun, 1 Dec 2019 15:55:53 -0500
Subject: [PATCH 62/79] saved liked posts

---
 twistter-frontend/src/pages/Home.js | 52 +++++++++++++++++++----------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index 84763b9..0602a3a 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -39,7 +39,7 @@ class Home extends Component {
   
   render() {
      let authenticated = this.props.user.authenticated;
-
+     let username = this.props.user.credentials.handle;
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
         <Card>
@@ -61,7 +61,7 @@ class Home extends Component {
             <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>        
             <br />
             {/* <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography> */}
-            <Like microBlog = {post.postId} count = {post.likeCount}></Like>
+            <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like>
             <Quote microblog = {post.postId}></Quote>
           </CardContent>
         </Card>
@@ -107,14 +107,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);
@@ -238,17 +230,28 @@ class Like extends Component {
     super(props)
     this.state = {
          num : this.props.count,
-         like: false
+
     }
 
     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)
           {
@@ -284,19 +287,27 @@ class Like extends Component {
     axios.get(`/checkforLikePost/${this.props.microBlog}`)
     .then((res) => {
       this.setState({
-        like: res.data
+        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>
@@ -305,7 +316,12 @@ class Like extends Component {
     }
 
 }
-Quote.propTypes = {
+
+const mapStateToProps = (state) => ({
+  user: state.user
+})
+
+Home.propTypes = {
   user: PropTypes.object.isRequired
 }
 
@@ -313,6 +329,8 @@ Like.propTypes = {
   user: PropTypes.object.isRequired
 }
 
+Quote.propTypes = {
+  user: PropTypes.object.isRequired
+}
 
-
-export default connect(mapStateToProps)(Home, Quote, Like);
\ No newline at end of file
+export default connect(mapStateToProps)(Home, Like, Quote);
\ No newline at end of file

From 445c8b39deeebfd91bc0e77ca3fb9947ac364c67 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Mon, 2 Dec 2019 00:00:25 -0500
Subject: [PATCH 63/79] allow delete without refreshing page

---
 twistter-frontend/src/pages/user.js | 36 +++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 9896f7d..4d71e98 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -70,12 +70,15 @@ const styles = {
 };
 
 class user extends Component {
-  state = {
-    profile: null,
-    imageUrl: null,
-    topics: null,
-    newTopic: null
-  };
+  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() {
-        location.reload();
+      .then(() => {
+        let tempTopics = this.state.topics;
+        tempTopics.forEach((oldTopic, index) => {
+          if (oldTopic === topic) {
+            tempTopics.splice(index, 1);
+          }
+        });
+        this.setState({
+          topics: tempTopics
+        });
       })
       .catch(function(err) {
         console.log(err);
@@ -96,8 +107,13 @@ class user extends Component {
       .post("/putTopic", {
         following: this.state.newTopic
       })
-      .then(function() {
-        location.reload();
+      .then(() => {
+        let tempTopics = this.state.topics;
+        tempTopics.push(this.state.newTopic);
+        this.setState({
+          topics: tempTopics,
+          newTopic: ""
+        });
       })
       .catch(function(err) {
         console.log(err);

From cff0fd4e05197d71ea3c804c26579aa37102c470 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Mon, 2 Dec 2019 15:46:13 -0500
Subject: [PATCH 64/79] DMs are deleted when the delete function runs

---
 functions/handlers/users.js    | 118 +++++++++++++++++++++++++++++++--
 twistter-frontend/package.json |   1 +
 2 files changed, 114 insertions(+), 5 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 283b97b..a4aea57 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -209,7 +209,7 @@ exports.deleteUser = (req, res) => {
   let errors = {};
 
   function thenFunction(data) {
-    console.log(`${data} data for ${req.userData.handle} has been deleted.`);
+    console.log(`${data} for ${req.userData.handle} has been deleted.`);
   }
 
   function catchFunction(data, err) {
@@ -217,14 +217,122 @@ exports.deleteUser = (req, res) => {
     errors[data] = err;
   }
 
+  function deleteDirectMessages() {
+    return new Promise((resolve, reject) => {
+      const deleteUsername = req.userData.handle;
+      db.doc(`/users/${deleteUsername}`)
+      .get()
+      .then((deleteUserDocSnap) => {
+        const dms = deleteUserDocSnap.data().dms;
+        const dmRecipients = deleteUserDocSnap.data().dmRecipients;
+      
+        if (!dms) {
+          resolve();
+          return;
+        }
+
+        // Iterate over the list of users who this person has DM'd
+        let otherUsersPromises = [];
+
+        // Resolve if they don't have a dmRecipients list
+        if (dmRecipients === undefined || dmRecipients === null || dmRecipients.length === 0) {
+          resolve();
+          return;
+        }
+        dmRecipients.forEach((dmRecipient) => {
+          otherUsersPromises.push(
+            // Get each users data
+            db.doc(`/users/${dmRecipient}`).get()
+              .then((otherUserDocSnap) => {
+                // Get the index of deleteUsername so that we can remove the dangling
+                // reference to the DM document
+                let otherUserDMRecipients = otherUserDocSnap.data().dmRecipients;
+                let otherUserDMs = otherUserDocSnap.data().dms;
+                let index = -1;
+                otherUserDMRecipients.forEach((dmRecip, i) => {
+                  if (dmRecip === deleteUsername) {
+                    index = i;
+                  }
+                })
+
+                if (index !== -1) {
+                  // Remove deleteUsername from their dmRecipients list
+                  otherUserDMRecipients.splice(index, 1);
+
+                  // Remove the DM channel with deleteUsername
+                  otherUserDMs.splice(index, 1);
+
+                  // Update the users data
+                  return otherUserDocSnap.ref.update({
+                    dmRecipients: otherUserDMRecipients,
+                    dms: otherUserDMs
+                  });
+                }
+                
+              })
+          )
+        })
+
+        // Wait for the removal of DM data stored on other users to be deleted
+        Promise.all(otherUsersPromises)
+          .then(() => {
+            // Iterate through DM references and delete them from the dm collection
+            let dmRefsPromises = [];
+            dms.forEach((dmRef) => {
+              // Create a delete queue
+              let batch = db.batch();
+              dmRefsPromises.push(
+                // Add the messages to the delete queue
+                db.collection(`/dm/${dmRef.id}/messages`).listDocuments()
+                  .then((docs) => {
+                    console.log("second")
+                    console.log(docs);
+                    docs.map((doc) => {
+                      batch.delete(doc);
+                    })
+                    
+                    // Add the doc that the DM is stored in to the delete queue
+                    batch.delete(dmRef);
+
+                    // Commit the writes
+                    return batch.commit();
+                  })
+              )
+            })
+
+            return Promise.all(dmRefsPromises);
+          })
+          .then(() => {
+            resolve();
+          })
+          .catch((err) => {
+            console.log("error " + err);
+            reject(err);
+          })
+      })
+    })
+  }
+
   // Deletes user from authentication
   let auth = admin.auth().deleteUser(userId);
 
   // Deletes database data
-  let data = db
-    .collection("users")
-    .doc(`${req.user.handle}`)
-    .delete();
+  let data = new Promise((resolve, reject) => {
+    deleteDirectMessages()
+      .then(() => {
+        return db
+          .collection("users")
+          .doc(`${req.user.handle}`)
+          .delete()
+      })
+      .then(() => {
+        resolve();
+      })
+      .catch((err) => {
+        console.log(err);
+        reject(err);
+      })
+  })
 
   // Deletes any custom profile image
   let image;
diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index a0cec16..2fc8943 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -15,6 +15,7 @@
     "node-pre-gyp": "^0.13.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-modal": "^3.11.1",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.1.0",
     "react-scripts": "0.9.5",

From 7c7256acbdd4d012e528077f3e9e6b9572223beb Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Mon, 2 Dec 2019 15:47:26 -0500
Subject: [PATCH 65/79] Fixed having multiple return statements in post.js

---
 functions/handlers/post.js | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 2ccdc8e..440031a 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -40,31 +40,30 @@ exports.getallPostsforUser = (req, res) => {
         });
         return res.status(200).json(posts);
     })
-    .then(function() {
-    return res.status(200).json("Successfully retrieved all user's posts from database.");
-    
-    })
+    // .then(function() {
+    //     return res.status(200).json("Successfully retrieved all user's posts from database.");
+    // })
     .catch(function(err) {
-    return res.status(500).json("Failed to retrieve user's posts from database.", err);
+        return res.status(500).json(`Failed to retrieve user's posts from database.\n${err}`);
     });
 };
 
 exports.getallPosts = (req, res) => {
     var post_query = admin.firestore().collection("posts");
     post_query.get()
-    .then(function(allPosts) {
-        let posts = [];
-        allPosts.forEach(function(doc) {
-            posts.push(doc.data());
+        .then(function(allPosts) {
+            let posts = [];
+            allPosts.forEach(function(doc) {
+                posts.push(doc.data());
+            });
+            return res.status(200).json(posts);
+        })
+        // .then(function() {
+        //     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(200).json(posts);
-    })
-    .then(function() {
-    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.", err);
-    });
 };
 
 exports.quoteWithPost = (req, res) => {

From 8244631d4dfa3c33fbbeb1c64f568db08aefc73c Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Mon, 2 Dec 2019 16:40:22 -0500
Subject: [PATCH 66/79] Fix some code after merge

---
 twistter-frontend/src/pages/Home.js |  3 +--
 twistter-frontend/src/pages/user.js | 16 +---------------
 2 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index ab1cc71..72c5c5a 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -348,5 +348,4 @@ Quote.propTypes = {
   user: PropTypes.object.isRequired
 }
 
-// export default connect(mapStateToProps)(withStyles(styles)(Home));
-export default connect(mapStateToProps)(Home, Like, Quote);
+export default connect(mapStateToProps)(withStyles(styles)(Home, Like, Quote));
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index f9b443a..97258b0 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -13,7 +13,6 @@ 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 withStyles from '@material-ui/styles/withStyles';
 
 import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
@@ -48,7 +47,7 @@ const styles = {
     // marginRight: "10%"
   },
   card: {
-    marginBottom: 10
+    marginBottom: 5
   },
   profileImage: {
     marginTop: 20
@@ -161,7 +160,6 @@ class user extends Component {
   render() {
     const { classes } = this.props;
     let authenticated = this.props.user.authenticated;
-    let {classes} = this.props;
 
     let profileMarkup = this.state.profile ? (
       <div>
@@ -207,18 +205,6 @@ class user extends Component {
     );
 
     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"}>{this.formatDate(post.createdAt)}</Typography>
-
       this.state.posts.map(post => (
         <Card className={classes.card}>
           <CardContent>

From f0ddaa30b1b6753e295298ea46c81e3b9e6f1dcf Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Mon, 2 Dec 2019 18:31:33 -0500
Subject: [PATCH 67/79] add topics when publish new post

---
 twistter-frontend/src/Writing_Microblogs.js |  17 +++-
 twistter-frontend/src/pages/Home.js         | 102 ++++++++++++--------
 2 files changed, 75 insertions(+), 44 deletions(-)

diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index 9cac7b7..4d7484d 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -40,15 +40,28 @@ 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: "" });
   }
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index cee0a93..956ccf0 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -1,20 +1,20 @@
 /* eslint-disable */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import axios from 'axios';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import axios from "axios";
 
 // Material UI and React Router
-import Grid from '@material-ui/core/Grid';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
+import Grid from "@material-ui/core/Grid";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
 
 // component
-import '../App.css';
-import logo from '../images/twistter-logo.png';
-import noImage from '../images/no-img.png';
-import Writing_Microblogs from '../Writing_Microblogs';
+import "../App.css";
+import logo from "../images/twistter-logo.png";
+import noImage from "../images/no-img.png";
+import Writing_Microblogs from "../Writing_Microblogs";
 
 class Home extends Component {
   state = {};
@@ -26,7 +26,7 @@ class Home extends Component {
         console.log(res.data);
         this.setState({
           posts: res.data
-        })
+        });
       })
       .catch(err => console.log(err));
   }
@@ -35,31 +35,43 @@ class Home extends Component {
     let authenticated = this.props.user.authenticated;
 
     let postMarkup = this.state.posts ? (
-      this.state.posts.map(post => 
+      this.state.posts.map(post => (
         <Card>
           <CardContent>
             <Typography>
-              {
-                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
-                                      (<img src={noImage} height="50" width="50"/>)
-              }
+              {this.state.imageUrl ? (
+                <img src={this.state.imageUrl} height="250" width="250" />
+              ) : (
+                <img src={noImage} height="50" width="50" />
+              )}
+            </Typography>
+            <Typography variant="h7">
+              <b>{post.userHandle}</b>
+            </Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              {post.createdAt}
             </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="body1">
+              <b>{post.microBlogTitle}</b>
+            </Typography>
             <Typography variant="body2">{post.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics}
+            </Typography>
             <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount} Comments {post.commentCount}
+            </Typography>
           </CardContent>
         </Card>
-      )
-    ) : (<p>My Posts</p>);
+      ))
+    ) : (
+      <p>Loading post...</p>
+    );
 
-    return (
-      authenticated ?
+    return authenticated ? (
       <Grid container spacing={16}>
         <Grid item sm={4} xs={8}>
           <Writing_Microblogs />
@@ -67,26 +79,32 @@ class Home extends Component {
         <Grid item sm={4} xs={8}>
           {postMarkup}
         </Grid>
-      </Grid> 
-      :
+      </Grid>
+    ) : (
       <div>
         <div>
           <img src={logo} className="app-logo" alt="logo" />
-          <br/><br/>
-          <b>Welcome to Twistter!</b> 
-          <br/><br/>
-          <b>See the most interesting topics people are following right now.</b> 
+          <br />
+          <br />
+          <b>Welcome to Twistter!</b>
+          <br />
+          <br />
+          <b>See the most interesting topics people are following right now.</b>
         </div>
 
-        <br/><br/><br/><br/>
+        <br />
+        <br />
+        <br />
+        <br />
 
-        <div>                    
-          <b>Join today or sign in if you already have an account.</b> 
-          <br/><br/>
+        <div>
+          <b>Join today or sign in if you already have an account.</b>
+          <br />
+          <br />
           <form action="./signup">
-            <button className="authButtons signup">Sign up</button> 
+            <button className="authButtons signup">Sign up</button>
           </form>
-          <br/>
+          <br />
           <form action="./login">
             <button className="authButtons login">Sign in</button>
           </form>
@@ -96,12 +114,12 @@ class Home extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   user: state.user
-})
+});
 
 Home.propTypes = {
   user: PropTypes.object.isRequired
-}
+};
 
-export default connect(mapStateToProps)(Home);
\ No newline at end of file
+export default connect(mapStateToProps)(Home);

From 1a02b53d0f1c1618f57bad9930721c75ad44a561 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 00:54:06 -0500
Subject: [PATCH 68/79] Improved speed of search and made it fuzzy search

---
 functions/handlers/users.js           |  18 ++++
 functions/index.js                    |   5 +
 twistter-frontend/package.json        |   2 +
 twistter-frontend/src/pages/Search.js | 148 +++++++++++++++++---------
 4 files changed, 123 insertions(+), 50 deletions(-)

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 5350d19..3430fff 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -331,6 +331,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}`)
diff --git a/functions/index.js b/functions/index.js
index ee203eb..eab8aa9 100644
--- a/functions/index.js
+++ b/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);
 
diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index a0cec16..52e50f3 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -10,11 +10,13 @@
     "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",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-modal": "^3.11.1",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.1.0",
     "react-scripts": "0.9.5",
diff --git a/twistter-frontend/src/pages/Search.js b/twistter-frontend/src/pages/Search.js
index 14cbc52..c8409f5 100644
--- a/twistter-frontend/src/pages/Search.js
+++ b/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,
-    searchResult: null
+    handles: [],
+    // searchPhrase: null,
+    searchResult: null,
+    loading: false
   };
 
-  handleSearch = () => {
-    console.log(this.state.searchPhase);
-    Axios.post("/getUserHandles", {
-      userHandle: this.state.searchPhase
-    })
-      .then(res => {
-        console.log(res);
-
-        this.setState({
-          searchResult: res.data
-        });
+  componentDidMount() {
+    this.setState({loading: true});
+    axios.get("/getAllHandles")
+    .then((res) => {
+      this.setState({
+        handles: res.data,
+        loading: false
+      }, () => {
+        console.log(res.data);
+        fuse = new Fuse(this.state.handles, fuseOptions); // "list" is the item array
       })
-      .catch(err => {
-        console.log(err);
-      });
-  };
+    })
+  }
 
-  handleInput(event) {
+  // handleSearch = () => {
+  //   console.log(this.state.searchPhase);
+  //   axios.post("/getUserHandles", {
+  //     userHandle: this.state.searchPhase
+  //   })
+  //     .then(res => {
+  //       console.log(res);
+
+  //       this.setState({
+  //         searchResult: res.data
+  //       });
+  //     })
+  //     .catch(err => {
+  //       console.log(err);
+  //     });
+  // };
+
+  handleChange = (event) => {
+    let result = fuse.search(event.target.value);
+    let parsed = [];
+    result.forEach((res) => {
+      console.log(res)
+      parsed.push(this.state.handles[res])
+    })
     this.setState({
-      searchPhase: event.target.value
-    });
-    console.log(this.state.searchPhase);
+      searchResult: parsed.length !== 0 ? parsed : "No Results"
+    })
   }
 
   handleRedirect() {
@@ -41,38 +78,49 @@ export class Search extends Component {
   }
 
   render() {
-    let resultMarkup = this.state.searchResult ? (
-      <Router>
-        <div>
-          <a href={`/user/${this.state.searchResult}`}>
-            {this.state.searchResult}
-          </a>
-        </div>
-      </Router>
-    ) : (
-      //   console.log(this.state.searchResult)
-      <p> No result </p>
-    );
+    let resultMarkup = this.state.searchResult && this.state.searchResult !== "No Results" ? (
+      this.state.searchResult.map(res => 
+        <Router>
+          <div>
+            <a href={`/user/${res}`}>
+              {res}
+            </a>
+          </div>
+        </Router>
+      )
+    ) 
+      : 
+    this.state.searchResult === "No Results" ?
+      (
+       <p> No results </p>
+      )
+        :
+      (
+        null
+      )
 
     return (
-      <Grid>
+      this.state.loading 
+      ? 
+        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> 
+      : 
         <Grid>
-          <TextField
-            id="standard-required"
-            label="Search"
-            defaultValue="username"
-            margin="normal"
-            value={this.state.searchPhase}
-            onChange={event => this.handleInput(event)}
-          />
+          <Grid>
+            <TextField
+              id="standard-required"
+              label="Username"
+              margin="normal"
+              // value={this.state.searchPhrase}
+              onChange={this.handleChange}
+            />
+          </Grid>
+          <Grid>
+            {/* <Button color="primary" onClick={this.handleSearch}>
+              Search
+            </Button> */}
+          </Grid>
+          <Grid>{resultMarkup}</Grid>
         </Grid>
-        <Grid>
-          <Button color="primary" onClick={this.handleSearch}>
-            Search
-          </Button>
-        </Grid>
-        <Grid>{resultMarkup}</Grid>
-      </Grid>
     );
   }
 }

From 1a6aae654520540285e2b06e21414d4837605f06 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 13:33:48 -0500
Subject: [PATCH 69/79] Fixed mismatched parenthesis

---
 twistter-frontend/src/pages/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index c787276..74ecddc 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -78,7 +78,7 @@ class Home extends Component {
             <Quote microblog = {post.postId}></Quote>
           </CardContent>
         </Card>
-      ))
+      )
     ) : (
       <p>Loading post...</p>
     );

From f0c4a2974f610db2c257091f9f4c4877ffda7647 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 13:49:37 -0500
Subject: [PATCH 70/79] Fix mismatched parenthesis

---
 twistter-frontend/src/pages/Home.js | 43 +++++++++++++++--------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index fb1bb5e..9fd7767 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -94,32 +94,33 @@ class Home extends Component {
           {postMarkup}
         </Grid>
       </Grid> 
-      : loading ? 
-          <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
+     ) : 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>
+              <div>
+                <img src={logo} className="app-logo" alt="logo" />
+                <br/><br/>
+                <b>Welcome to Twistter!</b> 
+                <br/><br/>
+                <b>See the most interesting topics people are following right now.</b> 
+              </div>
 
-            <br/><br/><br/><br/>
+              <br/><br/><br/><br/>
 
-            <div>                    
-              <b>Join today or sign in if you already have an account.</b> 
-              <br/><br/>
-              <form action="./signup">
-                <button className="authButtons signup">Sign up</button> 
-              </form>
-              <br/>
-              <form action="./login">
-                <button className="authButtons login">Sign in</button>
-              </form>
+              <div>                    
+                <b>Join today or sign in if you already have an account.</b> 
+                <br/><br/>
+                <form action="./signup">
+                  <button className="authButtons signup">Sign up</button> 
+                </form>
+                <br/>
+                <form action="./login">
+                  <button className="authButtons login">Sign in</button>
+                </form>
+              </div>
             </div>
-          </div>
     );
   }
 }

From 49a4d55f1e808c1857b93dc0ff844f9ff5bead16 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 14:04:40 -0500
Subject: [PATCH 71/79] Rename edit class to editProfile to be more descriptive

---
 twistter-frontend/src/pages/editProfile.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index d90b601..703fa67 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -41,7 +41,7 @@ const styles = {
   }
 };
 
-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.
@@ -271,8 +271,8 @@ export class edit extends Component {
   }
 }
 
-edit.propTypes = {
+editProfile.propTypes = {
   classes: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(edit);
+export default withStyles(styles)(editProfile);

From 825c126c6c12df2d75a0d302704777fd97f53598 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 16:26:16 -0500
Subject: [PATCH 72/79] Delete asks you to confirm

---
 twistter-frontend/src/pages/editProfile.js | 107 ++++++++++++++++++---
 1 file changed, 96 insertions(+), 11 deletions(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index 703fa67..539fc8b 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -1,14 +1,16 @@
 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";
@@ -38,6 +40,14 @@ const styles = {
   },
   progress: {
     position: "absolute"
+  },
+  popoverBackground: {
+    marginTop: "-100px",
+    width: "calc(100vw)",
+    height: 'calc(100vh + 100px)',
+    backgroundColor: "gray",
+    position: "absolute",
+    opacity: "70%"
   }
 };
 
@@ -77,6 +87,7 @@ export class editProfile extends Component {
       email: "",
       handle: "",
       bio: "",
+      anchorEl: null,
       loading: false,
       errors: {}
     };
@@ -137,12 +148,30 @@ export class editProfile 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}>
+      <Grid container className={classes.form} id="container-grid">
         <Grid item sm >
           <Button
             variant="outlined"
@@ -256,16 +285,72 @@ export class editProfile extends Component {
           </form>
         </Grid>
         <Grid item sm>
-        <Button
-          variant="outlined"
-          color="secondary"
-          className={classes.delete}
-          component={ Link }
-          to='/delete'
-        >
-          Delete Account
-        </Button>
+          <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>
     );
   }

From a4cce0b75ec3a616641ecf8b073b52b7d69c2b58 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 16:26:54 -0500
Subject: [PATCH 73/79] Circular progress when the editProfile page is loading

---
 twistter-frontend/src/pages/editProfile.js | 354 +++++++++++----------
 1 file changed, 180 insertions(+), 174 deletions(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index 539fc8b..df947fb 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -56,6 +56,7 @@ export class editProfile extends Component {
   // 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) => {
@@ -64,7 +65,8 @@ export class editProfile 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) => {
@@ -89,6 +91,7 @@ export class editProfile extends Component {
       bio: "",
       anchorEl: null,
       loading: false,
+      pageLoading: false,
       errors: {}
     };
   }
@@ -171,187 +174,190 @@ export class editProfile extends Component {
 		const id = open ? 'simple-popover' : undefined;
 
     return (
-      <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
-          </Typography>
-          <form noValidate onSubmit={this.handleSubmit}>
-            <Grid container className={classes.form} spacing={4}>
-              <Grid item sm>
-                <TextField
-                  id="firstName"
-                  name="firstName"
-                  label="First Name"
-                  className={classes.textField}
-                  value={this.state.firstName}
-                  helperText={errors.firstName}
-                  error={errors.firstName ? true : false}
-                  variant="outlined"
-                  onChange={this.handleChange}
-                  fullWidth
-                  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'
-            />
+      this.state.pageLoading ? 
+        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
+      :
+        <Grid container className={classes.form} id="container-grid">
+          <Grid item sm >
             <Button
-              type="submit"
-              variant="contained"
+              variant="outlined"
               color="primary"
-              className={classes.button}
-              disabled={loading}
-              //component={ Link }
-              //to='/user'
+              className={classes.back}
+              component={ Link }
+              to='/user'
             >
-              Submit
-              {loading && (
-                <CircularProgress size={30} className={classes.progress} />
-              )}
+              Back to Profile
             </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
+          </Grid>
+          <Grid item sm>
+            <Typography variant="h2" className={classes.pageTitle}>
+              Edit Profile
+            </Typography>
+            <form noValidate onSubmit={this.handleSubmit}>
+              <Grid container className={classes.form} spacing={4}>
+                <Grid item sm>
+                  <TextField
+                    id="firstName"
+                    name="firstName"
+                    label="First Name"
+                    className={classes.textField}
+                    value={this.state.firstName}
+                    helperText={errors.firstName}
+                    error={errors.firstName ? true : false}
+                    variant="outlined"
+                    onChange={this.handleChange}
+                    fullWidth
+                    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'
+              />
+              <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={{
-                height: 200,
-                width: 400
+                marginTop: "-200px"
               }}
             >
-              <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>
+              <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>
-                <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>
+              </Box>
+            </Popover>
+        </Grid>
     );
   }
 }

From 5b5e78514244f539f2279f22590e6d20bb846c20 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 16:37:04 -0500
Subject: [PATCH 74/79] Changed the path of the editProfile page

---
 twistter-frontend/src/App.js               |  2 +-
 twistter-frontend/src/pages/editProfile.js | 10 +++-------
 twistter-frontend/src/pages/user.js        |  2 +-
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index 9e29d2e..1ed56dc 100644
--- a/twistter-frontend/src/App.js
+++ b/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} />
diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index df947fb..fae7f27 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -3,7 +3,6 @@ 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"
@@ -72,10 +71,8 @@ export class editProfile extends Component {
       .catch((err) => {
         console.error(err);
         if (err.response.status === 403) {
-          alert("You are not logged in");
-          // TODO: Redirect them, to the profile they are trying to edit
-          // If they are on /itsjimmy/edit, they will be redirected to /itsjimmy
-          this.props.history.push('../');
+          // This user is not logged in
+          this.props.history.push('/');
         }
       });
   }
@@ -126,8 +123,7 @@ export class editProfile extends Component {
         this.setState({
           loading: false
         });
-        // this.props.history.push('/');
-        // TODO: Need to redirect user to their profile page
+        this.props.history.push('/user');
       })
       .catch((err) => {
         console.log(err);
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 97258b0..379cb56 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -248,7 +248,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>

From 2d426840c0d86bd3b57f24e04eb7dfead76c8126 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 16:37:57 -0500
Subject: [PATCH 75/79] Add @ next to handle on editProfile

---
 twistter-frontend/src/pages/editProfile.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index fae7f27..b4f7c2e 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -2,7 +2,6 @@ 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
 
 // Material-UI stuff
 import Box from "@material-ui/core/Box"
@@ -243,7 +242,7 @@ export class editProfile extends Component {
                 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

From 56e836451d228f4a73ee2e04109978893503c49c Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Tue, 3 Dec 2019 18:11:10 -0500
Subject: [PATCH 76/79] display posts on other user's page

---
 functions/handlers/post.js               | 543 +++++++++++++----------
 functions/index.js                       |  14 +-
 twistter-frontend/package.json           |   2 +-
 twistter-frontend/src/pages/otherUser.js | 170 +++++--
 twistter-frontend/src/pages/user.js      |  13 +-
 5 files changed, 454 insertions(+), 288 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index af1b854..91190ec 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -1,297 +1,352 @@
 /* eslint-disable prefer-arrow-callback */
 /* eslint-disable promise/always-return */
-const admin = require('firebase-admin');
-const { db } = require('../util/admin');
-
+const admin = require("firebase-admin");
+const { 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
-    };
+  const newPost = {
+    body: req.body.body,
+    userHandle: req.user.handle,
+    userImage: req.body.userImage,
+    userID: req.user.uid,
+    microBlogTitle: req.body.microBlogTitle,
+    createdAt: new Date().toISOString(),
+    likeCount: 0,
+    commentCount: 0,
+    microBlogTopics: req.body.microBlogTopics,
+    quoteBody: null
+  };
 
-    admin.firestore().collection('posts').add(newPost)
-    .then((doc) => {
-        doc.update({postId: doc.id})
-        const resPost = newPost;
-        resPost.postId = doc.id;
-        return res.status(200).json(resPost);
+  admin
+    .firestore()
+    .collection("posts")
+    .add(newPost)
+    .then(doc => {
+      doc.update({ postId: doc.id });
+      const resPost = newPost;
+      resPost.postId = doc.id;
+      return res.status(200).json(resPost);
     })
-    .catch((err) => {
-        console.error(err);
-        return res.status(500).json({ error: 'something went wrong'});
+    .catch(err => {
+      console.error(err);
+      return res.status(500).json({ error: "something went wrong" });
     });
 };
 
 exports.getallPostsforUser = (req, res) => {
-    var post_query = admin.firestore().collection("posts").where("userHandle", "==", req.user.handle);
+  var post_query = admin
+    .firestore()
+    .collection("posts")
+    .where("userHandle", "==", req.user.handle);
 
-    post_query.get()
+  post_query
+    .get()
     .then(function(myPosts) {
-        let posts = [];
-        myPosts.forEach(function(doc) {
-            posts.push(doc.data());
-        });
-        return res.status(200).json(posts);
+      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.");
-    
+      return res
+        .status(200)
+        .json("Successfully retrieved all user's posts from database.");
     })
     .catch(function(err) {
-    return res.status(500).json("Failed to retrieve user's posts from database.", err);
+      return res
+        .status(500)
+        .json("Failed to retrieve user's posts from database.", err);
     });
 };
 
 exports.getallPosts = (req, res) => {
-    var post_query = admin.firestore().collection("posts");
-    post_query.get()
+  var post_query = admin.firestore().collection("posts");
+  post_query
+    .get()
     .then(function(allPosts) {
-        let posts = [];
-        allPosts.forEach(function(doc) {
-            posts.push(doc.data());
-        });
-        return res.status(200).json(posts);
+      let posts = [];
+      allPosts.forEach(function(doc) {
+        posts.push(doc.data());
+      });
+      return res.status(200).json(posts);
     })
     .then(function() {
-    return res.status(200).json("Successfully retrieved every post from database.");
+      return res
+        .status(200)
+        .json("Successfully retrieved every post from database.");
     })
     .catch(function(err) {
-    return res.status(500).json("Failed to retrieve posts from database.", err);
+      return res
+        .status(500)
+        .json("Failed to retrieve 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")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
-    let quoteData;
-    const quoteDoc = admin.firestore().collection('quote').
-    where('userHandle', '==', req.user.handle).
-    where('postId', '==', req.params.postId).limit(1);
+  const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    const postDoc = db.doc(`/posts/${req.params.postId}`);
-
-    postDoc.get()
-    .then((doc) => {
-        if(doc.exists) {
-            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('postId', '==', 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.' });
+  postDoc
+    .get()
+    .then(doc => {
+      if (doc.exists) {
+        quoteData = doc.data();
+        return quoteDoc.get();
+      } else {
+        return res.status(404).json({ error: "Post not found" });
       }
     })
-    .catch((err) => {
-        return res.status(500).json({error: 'Something is wrong'});
-
+    .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("postId", "==", 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" });
+    });
+};
 
 exports.checkforLikePost = (req, res) => {
-    const likedPostDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
-    .where('postId', '==', req.params.postId).limit(1);
-    let result;
+  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);
-        }
-    })
-}
+  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)
-    .where('postId', '==', req.params.postId).limit(1);
+  let postData;
+  const likeDoc = admin
+    .firestore()
+    .collection("likes")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
-    const postDoc = db.doc(`/posts/${req.params.postId}`);
+  const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    postDoc.get()
-    .then((doc) => {
-        if(doc.exists) {
-            postData = doc.data();
-            return likeDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
-        }
+  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);
-            })
-        }
+    .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'});
-    })
-
-}
-
+    .catch(err => {
+      return res.status(500).json({ error: "Something is wrong" });
+    });
+};
 
 exports.unlikePost = (req, res) => {
+  let postData;
+  const likeDoc = admin
+    .firestore()
+    .collection("likes")
+    .where("userHandle", "==", req.user.handle)
+    .where("postId", "==", req.params.postId)
+    .limit(1);
 
-    let postData;
-    const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
-    .where('postId', '==', req.params.postId).limit(1);
+  const postDoc = db.doc(`/posts/${req.params.postId}`);
 
-    const postDoc = db.doc(`/posts/${req.params.postId}`);
-
-    postDoc.get()
-    .then((doc) => {
-        if(doc.exists) {
-            postData = doc.data();
-            return likeDoc.get();
-        }
-        else
-        {
-            return res.status(404).json({error: 'Post not found'});
-        }
+  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);
-              });
-          
+    .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'});
-    })
-
-}
+    .catch(err => {
+      console.error(err);
+      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", "==");
 };
diff --git a/functions/index.js b/functions/index.js
index eab8aa9..41cc61a 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -75,7 +75,17 @@ app.post("/removeSub", fbAuth, removeSub);
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
  *------------------------------------------------------------------*/
-const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost, quoteWithPost, quoteWithoutPost, checkforLikePost} = require("./handlers/post");
+const {
+  getallPostsforUser,
+  getallPosts,
+  putPost,
+  likePost,
+  unlikePost,
+  quoteWithPost,
+  quoteWithoutPost,
+  checkforLikePost,
+  getOtherUsersPosts
+} = require("./handlers/post");
 
 app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
 
@@ -91,7 +101,7 @@ 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                                                *
diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index 52e50f3..75afcb0 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -43,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"
 }
diff --git a/twistter-frontend/src/pages/otherUser.js b/twistter-frontend/src/pages/otherUser.js
index f128f72..d173936 100644
--- a/twistter-frontend/src/pages/otherUser.js
+++ b/twistter-frontend/src/pages/otherUser.js
@@ -7,6 +7,8 @@ import axios from "axios";
 
 // Material UI and React Router
 import { makeStyles, styled } from "@material-ui/core/styles";
+import withStyles from "@material-ui/core/styles/withStyles";
+
 import { Link } from "react-router-dom";
 import Card from "@material-ui/core/Card";
 import CardMedia from "@material-ui/core/CardMedia";
@@ -30,14 +32,52 @@ const MyChip = styled(Chip)({
   color: "primary"
 });
 
+const styles = {
+  button: {
+    positon: "relative",
+    float: "left",
+    marginLeft: 30,
+    marginTop: 20
+  },
+  paper: {
+    // marginLeft: "10%",
+    // marginRight: "10%"
+  },
+  card: {
+    marginBottom: 5
+  },
+  profileImage: {
+    marginTop: 20
+  },
+  topicsContainer: {
+    border: "lightgray solid 1px",
+    marginTop: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+    height: 300
+  },
+  addCircle: {
+    width: 65,
+    height: 65,
+    marginTop: 10
+  },
+  username: {
+    marginBottom: 100
+  }
+};
+
 class user extends Component {
-  state = {
-    profile: window.location.pathname.split("/").pop(),
-    imageUrl: null,
-    topics: null,
-    user: null,
-    following: null
-  };
+  constructor() {
+    super();
+    this.state = {
+      profile: window.location.pathname.split("/").pop(),
+      imageUrl: null,
+      topics: null,
+      user: null,
+      following: null,
+      posts: null
+    };
+  }
 
   handleSub = () => {
     if (this.state.following === true) {
@@ -92,34 +132,22 @@ class user extends Component {
         });
       })
       .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 ? (
-      <div>
-        <Typography variant="h5">
-          @{this.state.profile}{" "}
-          {this.state.verified ? (
-            <VerifiedIcon style={{ fill: "#1397D5" }} />
-          ) : null}
-        </Typography>
-      </div>
-    ) : (
-      <p>loading username...</p>
-    );
-    let topicsMarkup = this.state.topics ? (
-      this.state.topics.map(
-        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
-      )
-    ) : (
-      <p> loading topics...</p>
-    );
-
-    let imageMarkup = this.state.imageUrl ? (
-      <img src={this.state.imageUrl} height="150" width="150" />
-    ) : (
-      <img src={noImage} height="150" width="150" />
-    );
+    const { classes } = this.props;
 
     let followMarkup = this.state.following ? (
       <Button variant="contained" color="primary" onClick={this.handleSub}>
@@ -130,18 +158,87 @@ 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>
+    );
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(
+        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
+      )
+    ) : (
+      <p> no topic yet</p>
+    );
 
-    console.log(this.state.following);
+    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 +249,8 @@ const mapStateToProps = state => ({
 });
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
 };
 
-export default connect(mapStateToProps)(user);
+export default connect(mapStateToProps)(withStyles(styles)(user));
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 97258b0..0c3ac24 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -147,7 +147,7 @@ class user extends Component {
         // console.log(res.data);
         this.setState({
           posts: res.data
-        })
+        });
       })
       .catch(err => console.log(err));
   }
@@ -222,19 +222,22 @@ class user extends Component {
               {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>
+            <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>
       ))

From 7141bf9000e51d20baa9a789d7033e752ccd5a4a Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Tue, 3 Dec 2019 19:15:23 -0500
Subject: [PATCH 77/79] changed color if user is following the same topic

---
 twistter-frontend/src/pages/otherUser.js | 33 +++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/twistter-frontend/src/pages/otherUser.js b/twistter-frontend/src/pages/otherUser.js
index d173936..a7b4935 100644
--- a/twistter-frontend/src/pages/otherUser.js
+++ b/twistter-frontend/src/pages/otherUser.js
@@ -21,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";
@@ -75,7 +76,8 @@ class user extends Component {
       topics: null,
       user: null,
       following: null,
-      posts: null
+      posts: null,
+      myTopics: null
     };
   }
 
@@ -128,7 +130,10 @@ 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));
@@ -171,9 +176,31 @@ class user extends Component {
     ) : (
       <p>loading username...</p>
     );
+
+    console.log(this.state.topics);
+    console.log(this.state.myTopics);
     let topicsMarkup = this.state.topics ? (
       this.state.topics.map(
-        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
+        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>

From 72d099e05ec01772114216e4f6ce3a23b57c2340 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 20:26:31 -0500
Subject: [PATCH 78/79] Fixing errors and warnings

---
 functions/handlers/post.js                    |  7 +++---
 functions/handlers/users.js                   | 24 ++++++++++++++++---
 twistter-frontend/src/Userline.js             | 12 +++++-----
 twistter-frontend/src/Writing_Microblogs.js   |  8 +++----
 twistter-frontend/src/pages/Home.js           |  8 +++----
 twistter-frontend/src/pages/Login.js          |  2 +-
 twistter-frontend/src/pages/verify.js         |  2 +-
 .../src/redux/actions/userActions.js          | 20 ++++++++++------
 .../src/redux/reducers/userReducer.js         |  9 ++++++-
 9 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 440031a..292fa47 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -153,8 +153,8 @@ exports.quoteWithoutPost = (req, res) => {
       }
     })
     .catch((err) => {
-        return res.status(500).json({error: 'Something is wrong'});
-
+        // return res.status(500).json({error: 'Something is wrong'});
+        return res.status(500).json({error: err});
     })
 
 }
@@ -195,7 +195,8 @@ exports.likePost = (req, res) => {
         }
     })
     .catch((err) => {
-        return res.status(500).json({error: 'Something is wrong'});
+        // return res.status(500).json({error: 'Something is wrong'});
+        return res.status(500).json({error: err});
     })
 
 }
diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index a4aea57..88fb87c 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -1,4 +1,5 @@
-/* eslint-disable promise/catch-or-return */
+/* eslint-disable promise/always-return */
+
 const { admin, db } = require("../util/admin");
 const config = require("../util/config");
 const { validateUpdateProfileInfo } = require("../util/validator");
@@ -304,12 +305,19 @@ exports.deleteUser = (req, res) => {
           })
           .then(() => {
             resolve();
+            return;
           })
           .catch((err) => {
             console.log("error " + err);
             reject(err);
+            return;
           })
       })
+      .catch((err) => {
+        console.log(err);
+        return res.status(500).json({error: err});
+      })
+
     })
   }
 
@@ -327,10 +335,12 @@ exports.deleteUser = (req, res) => {
       })
       .then(() => {
         resolve();
+        return;
       })
       .catch((err) => {
         console.log(err);
         reject(err);
+        return;
       })
   })
 
@@ -558,7 +568,11 @@ exports.addSubscription = (req, res) => {
         return res.status(500).json({ err });
       });
     return res.status(500).json({ error: "shouldn't execute" });
-  });
+  })
+  .catch((err) => {
+    console.log(err);
+    return res.status(500).json({error: err});
+  })
 };
 
 exports.getSubs = (req, res) => {
@@ -598,5 +612,9 @@ exports.removeSub = (req, res) => {
         return res.status(500).json({ err });
       });
     return res.status(500).json({ error: "shouldn't execute" });
-  });
+  })
+  .catch((err) => {
+    console.log(err);
+    return res.status(500).json({error: err});
+  })
 };
diff --git a/twistter-frontend/src/Userline.js b/twistter-frontend/src/Userline.js
index 8c95620..6c61d6d 100644
--- a/twistter-frontend/src/Userline.js
+++ b/twistter-frontend/src/Userline.js
@@ -1,10 +1,10 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router } from 'react-router-dom';
-import Route from 'react-router-dom/Route';
+// import { BrowserRouter as Router } from 'react-router-dom';
+// import Route from 'react-router-dom/Route';
 import axios from 'axios';
 import Box from '@material-ui/core/Box'
-import {borders} from '@material-ui/system';
-import { sizing } from '@material-ui/system';
+// import {borders} from '@material-ui/system';
+// import { sizing } from '@material-ui/system';
 // var moment = require('moment');
 
 
@@ -41,7 +41,7 @@ class Userline extends Component {
             <div style={{fontsize: "13px", textAlign: "left", marginLeft: "14px"}}>
                 <p>Userline</p>
             </div>
-            <Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign= "left" padding="5px" flexWrap= "wrap" flexDirection= "row" >
+            <Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign="left" padding="5px" flexWrap="wrap" flexDirection="row" >
                 <div style={{flexWrap: "wrap", flex: "1", flexDirection: "row", wordBreak: "break-word"}}>
                 <p>
                 {sortedPosts.map((microBlog) => <p>Microblog Title: {microBlog.microBlogTitle}
@@ -50,7 +50,7 @@ class Userline extends Component {
                                                           <br></br>Number of comments: {microBlog.commentCount}
                                                           <br></br>Number of likes: {microBlog.likeCount}
                                                           <br></br>Body of post: {microBlog.body}
-                                                          <br></br>Tagged topics: {microBlog.microBlogTopics.join("," + " ")}               
+                                                          <br></br>Tagged topics: {microBlog.microBlogTopics.join(", ")}               
                 </p>)} 
                 </p>
                 </div>
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index 9cac7b7..e6f42a8 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import Route from "react-router-dom/Route";
+// import { BrowserRouter as Router } from "react-router-dom";
+// import Route from "react-router-dom/Route";
 import axios from "axios";
 
 class Writing_Microblogs extends Component {
@@ -113,10 +113,10 @@ class Writing_Microblogs extends Component {
               rows={20}
             />
             <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-              <p2>Characters Left: {this.state.characterCount}</p2>
+              <p>Characters Left: {this.state.characterCount}</p>
             </div>
             <div style={{ marginRight: "-100px" }}>
-              <button onClick>Share Post</button>
+              <button onClick={this.handleSubmit}>Share Post</button>
             </div>
           </form>
         </div>
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index fd288c0..da382e9 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -28,7 +28,7 @@ class Home extends Component {
     axios
       .get("/getallPosts")
       .then(res => {
-        console.log(res.data);
+        // console.log(res.data);
         this.setState({
           posts: res.data
         })
@@ -45,7 +45,7 @@ class Home extends Component {
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
-        <Card>
+        <Card key={post.postId}>
           <CardContent>
             <Typography>
               {
@@ -53,7 +53,7 @@ class Home extends Component {
                                       (<img src={noImage} height="50" width="50"/>)
               }
             </Typography>
-            <Typography variant="h7"><b>{post.userHandle}</b></Typography>
+            <Typography variant="h6"><b>{post.userHandle}</b></Typography>
             <Typography variant="body2" color={"textSecondary"}>{post.createdAt.substring(0,10) + 
                                                           " " + post.createdAt.substring(11,19)}</Typography>
             <br />
@@ -72,7 +72,7 @@ class Home extends Component {
 
     return (
       authenticated ?
-      <Grid container spacing={16}>
+      <Grid container>
         <Grid item sm={4} xs={8}>
           <Writing_Microblogs />
         </Grid>
diff --git a/twistter-frontend/src/pages/Login.js b/twistter-frontend/src/pages/Login.js
index 336255a..43279fa 100644
--- a/twistter-frontend/src/pages/Login.js
+++ b/twistter-frontend/src/pages/Login.js
@@ -110,7 +110,7 @@ export class Login extends Component {
         <Grid item sm>
         <img src={logo} className="app-logo" alt="logo" />
           <br></br>
-          <Typography variant="p" className={classes.pageTitle} fontFamily = "Georgia, serif">
+          <Typography variant="h6" className={classes.pageTitle} fontFamily = "Georgia, serif">
             <b>Log in to Twistter</b>
             <br></br>
           </Typography>
diff --git a/twistter-frontend/src/pages/verify.js b/twistter-frontend/src/pages/verify.js
index e36a317..88a804e 100644
--- a/twistter-frontend/src/pages/verify.js
+++ b/twistter-frontend/src/pages/verify.js
@@ -89,7 +89,7 @@ export class verify extends Component {
 
   render() {
     const { classes } = this.props;
-    const { errors, loading } = this.state;
+    const { loading } = this.state;
 
     return (
       <Grid container className={classes.form}>
diff --git a/twistter-frontend/src/redux/actions/userActions.js b/twistter-frontend/src/redux/actions/userActions.js
index 5993804..eae7a00 100644
--- a/twistter-frontend/src/redux/actions/userActions.js
+++ b/twistter-frontend/src/redux/actions/userActions.js
@@ -1,6 +1,18 @@
-import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
+import {
+  SET_USER, 
+  SET_ERRORS, 
+  CLEAR_ERRORS, 
+  LOADING_UI, 
+  // SET_AUTHENTICATED, 
+  SET_UNAUTHENTICATED
+} from '../types';
 import axios from 'axios';
 
+const setAuthorizationHeader = (token) => {
+  const FBIdToken = `Bearer ${token}`;
+  localStorage.setItem('FBIdToken', FBIdToken);
+  axios.defaults.headers.common['Authorization'] = FBIdToken;
+}
 
 export const getUserData = () => (dispatch) => {
     axios.get('/user')
@@ -80,9 +92,3 @@ export const deleteUser = () => (dispatch) => {
   delete axios.defaults.headers.common['Authorization'];
   dispatch({ type: SET_UNAUTHENTICATED });
 }
-
-const setAuthorizationHeader = (token) => {
-    const FBIdToken = `Bearer ${token}`;
-    localStorage.setItem('FBIdToken', FBIdToken);
-    axios.defaults.headers.common['Authorization'] = FBIdToken;
-}
\ No newline at end of file
diff --git a/twistter-frontend/src/redux/reducers/userReducer.js b/twistter-frontend/src/redux/reducers/userReducer.js
index 7a29e90..e26509a 100644
--- a/twistter-frontend/src/redux/reducers/userReducer.js
+++ b/twistter-frontend/src/redux/reducers/userReducer.js
@@ -1,4 +1,11 @@
-import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
+import {
+    SET_USER,
+    // SET_ERRORS, 
+    // CLEAR_ERRORS, 
+    // LOADING_UI, 
+    SET_AUTHENTICATED, 
+    SET_UNAUTHENTICATED
+} from '../types';
 
 const initialState = {
     authenticated: false,

From fd1718a1f4fc988ac4d391d8a6abde91282e7f53 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 20:54:54 -0500
Subject: [PATCH 79/79] Fixing more errors

---
 twistter-frontend/package.json              |  2 +-
 twistter-frontend/src/Writing_Microblogs.js |  2 +-
 twistter-frontend/src/pages/Home.js         |  6 +++---
 twistter-frontend/src/pages/Search.js       |  9 +++++----
 twistter-frontend/src/pages/user.js         | 14 +++++++-------
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index 75afcb0..52e50f3 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -43,5 +43,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5006/twistter-e4649/us-central1/api"
+  "proxy": "http://localhost:5001/twistter-e4649/us-central1/api"
 }
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index e983690..70b67d0 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -5,7 +5,7 @@ import axios from "axios";
 
 // Material-UI
 import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
+// import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import withStyles from "@material-ui/styles/withStyles";
 
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index 9fffb4c..7b1ba6d 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -86,7 +86,7 @@ class Home extends Component {
     );
 
     return (
-      authenticated ?
+      authenticated ? (
       <Grid container>
         <Grid item sm={4} xs={8}>
           <Writing_Microblogs />
@@ -122,7 +122,7 @@ class Home extends Component {
                 </form>
               </div>
             </div>
-    );
+    ));
   }
 }
 
@@ -343,7 +343,7 @@ const mapStateToProps = (state) => ({
 
 Home.propTypes = {
   user: PropTypes.object.isRequired,
-  clases: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired,
   UI: PropTypes.object.isRequired
 }
 
diff --git a/twistter-frontend/src/pages/Search.js b/twistter-frontend/src/pages/Search.js
index c8409f5..c6b9e70 100644
--- a/twistter-frontend/src/pages/Search.js
+++ b/twistter-frontend/src/pages/Search.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 // import props
-import { TextField, Button } from "@material-ui/core";
+// import { TextField, Button } from "@material-ui/core";
+import TextField from "@material-ui/core/TextField"
 import Grid from "@material-ui/core/Grid";
 import axios from "axios";
 import Fuse from "fuse.js";
@@ -38,7 +39,7 @@ export class Search extends Component {
         handles: res.data,
         loading: false
       }, () => {
-        console.log(res.data);
+        // console.log(res.data);
         fuse = new Fuse(this.state.handles, fuseOptions); // "list" is the item array
       })
     })
@@ -65,7 +66,7 @@ export class Search extends Component {
     let result = fuse.search(event.target.value);
     let parsed = [];
     result.forEach((res) => {
-      console.log(res)
+      // console.log(res)
       parsed.push(this.state.handles[res])
     })
     this.setState({
@@ -80,7 +81,7 @@ export class Search extends Component {
   render() {
     let resultMarkup = this.state.searchResult && this.state.searchResult !== "No Results" ? (
       this.state.searchResult.map(res => 
-        <Router>
+        <Router key={res}>
           <div>
             <a href={`/user/${res}`}>
               {res}
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 7a8f929..6a189b6 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -76,7 +76,7 @@ class user extends Component {
       profile: null,
       imageUrl: null,
       topics: null,
-      newTopic: null
+      newTopic: ""
     };
   }
 
@@ -179,7 +179,7 @@ class user extends Component {
         topic => (
           <MyChip
             label={topic}
-            key={topic.id}
+            key={topic}
             onDelete={key => this.handleDelete(topic)}
           />
         ) // console.log({ topic }.topic.id)
@@ -206,7 +206,7 @@ class user extends Component {
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => (
-        <Card className={classes.card}>
+        <Card className={classes.card} key={post.postId}>
           <CardContent>
             <Typography>
               {this.state.imageUrl ? (
@@ -215,7 +215,7 @@ class user extends Component {
                 <img src={noImage} height="50" width="50" />
               )}
             </Typography>
-            <Typography variant="h7">
+            <Typography variant="h6">
               <b>{post.userHandle}</b>
             </Typography>
             <Typography variant="body2" color={"textSecondary"}>
@@ -285,7 +285,7 @@ class user extends Component {
                 <TextField
                   id="newTopic"
                   label="new topic"
-                  defaultValue=""
+                  // defaultValue=""
                   margin="normal"
                   variant="outlined"
                   value={this.state.newTopic}
@@ -295,7 +295,7 @@ class user extends Component {
                   className={classes.addCircle}
                   color="primary"
                   // iconStyle={classes.addCircle}
-                  clickable
+                  clickable="true"
                   onClick={this.handleAddCircle}
                   cursor="pointer"
                 />
@@ -321,7 +321,7 @@ const mapStateToProps = state => ({
 
 user.propTypes = {
   user: PropTypes.object.isRequired,
-  clases: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired
 };
 
 export default connect(mapStateToProps)(withStyles(styles)(user));