added UI allowing topic creation

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 });

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
+          <TextField
-            icon={<AddCircle />}
+          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;