From ec041732d9bb57b85aab0c3150ed3fbacc561f7b Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Fri, 25 Oct 2019 23:14:25 -0400
Subject: [PATCH 1/3] reformat

---
 functions/handlers/topic.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js
index 498cd18..4d3dc3d 100644
--- a/functions/handlers/topic.js
+++ b/functions/handlers/topic.js
@@ -34,7 +34,6 @@ exports.getAllTopics = (req, res) => {
 };
 
 exports.deleteTopic = (req, res) => {
-    // TODO: handle add and delete by topic id
     const topic = db.doc(`/topics/${req.params.topicId}`);
     topic.get().then((doc) => {
         if (!doc.exists) {

From c356dd18fa3833d3148558bd9adf9f3d26e50fd6 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Sun, 27 Oct 2019 00:08:38 -0400
Subject: [PATCH 2/3] added UI allowing topic creation

---
 twistter-frontend/src/App.js        |  2 +-
 twistter-frontend/src/pages/user.js | 95 ++++++++++++++++-------------
 2 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index db0c81c..c413374 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -38,7 +38,7 @@ const token = localStorage.FBIdToken;
 if (token) {
   const decodedToken = jwtDecode(token);
   if (decodedToken.exp * 1000 < Date.now()) {
-    store.dispatch(logoutUser);
+    store.dispatch(logoutUser());
     window.location.href = "/login";
   } else {
     store.dispatch({ type: SET_AUTHENTICATED });
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 435c92c..01b0e59 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -6,66 +6,63 @@ import axios from 'axios';
 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 Paper from '@material-ui/core/Paper';
 import Typography from "@material-ui/core/Typography";
 import AddCircle from '@material-ui/icons/AddCircle';
+import TextField from '@material-ui/core/TextField';
 
 // component
-import Profile from '../components/profile/Profile';
 import Userline from '../Userline';
 import noImage from '../images/no-img.png';
 
-
-const PostCard = styled(Card)({
-  background: 'linear-gradient(45deg, #1da1f2 90%)',
-  border: 3,
-  borderRadius: 3,
-  height:325,
-  width: 345,
-  padding: '0 30px',
-});
-
 const MyChip = styled(Chip)({
   margin: 2,
   color: 'primary'
 });
 
-
-const styles = (theme) => ({
-  ...theme
-});
-
-const handleDelete = () => {
-  alert("Delete this topic!");
-}
-
-const handleAddCircle = () => {
-  alert("Add topic");
-}
-
 class user extends Component {  
   state = {
     profile: null,
-    topics: 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);
+    });
+  }
+
+  handleChange(event) {
+    this.setState({
+      newTopic: event.target.value
+    })
+  }
 
   componentDidMount() {
     axios
       .get("/user")
       .then(res => {
-        console.log(res.data.credentials.handle);
         this.setState({
-          profile: res.data.credentials.handle
+          profile: res.data.credentials.handle,
+          imageUrl: res.data.credentials.imageUrl
         });
       })
       .catch(err => console.log(err));
     axios
       .get("/getAllTopics")
       .then(res => {
-        console.log(res.data[1]);
         this.setState({
           topics: res.data
         })
@@ -83,22 +80,40 @@ class user extends Component {
     let topicsMarkup = this.state.topics ? (
       this.state.topics.map(topic => <MyChip 
         label={{topic}.topic.topic}
-        onDelete={handleDelete}/>)
+        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}/>);
+
     return (
       <Grid container spacing={16}>
         <Grid item sm={8} xs={12}>
           <p>Post</p>
         </Grid>
         <Grid item sm={4} xs={12}>
-          <img src={noImage}/>
+          {imageMarkup}
           {profileMarkup}
           {topicsMarkup}
-          <MyChip
-            icon={<AddCircle />}
+          <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={handleAddCircle}
+            onClick={this.handleAddCircle}
           />
         </Grid>
       </Grid>
@@ -106,12 +121,4 @@ class user extends Component {
   }
 }
 
-Userline.PropTypes = {
-  handle: PropTypes.object.isRequired
-};
-
-const mapStateToProps = (state) => ({
-  user: state.user
-});
-
 export default user;

From 1c81ae1663f2376446622ed90ea5a1cc5f041711 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Sun, 27 Oct 2019 00:09:17 -0400
Subject: [PATCH 3/3] show user's profile image

---
 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 01b0e59..27a0c94 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -85,7 +85,7 @@ class user extends Component {
     ) : (<p> loading topics...</p>);
 
     let imageMarkup = this.state.imageUrl ? (
-      <img 
+      <img
       src={this.state.imageUrl}
       height="250"
       width="250"