Merge branch 'master' of https://github.com/ClaytonWWilson/CS307-Team24 into auth-backend-3

twistter-frontend/src/pages/editProfile.js

@@ -88,6 +88,14 @@ export class edit extends Component {
       handle: this.state.handle,
       bio: this.state.bio
     };
+    
+    // Removes all keys from newProfileData that are empty, undefined, or null
+    Object.keys(newProfileData).forEach(key => {
+      if (newProfileData[key] === "" || newProfileData[key] === undefined || newProfileData[key] === null) {
+        delete newProfileData[key];
+      }
+    })
+      
     axios
       .post("/updateProfileInfo", newProfileData)
       .then((res) => {

twistter-frontend/src/pages/user.js

@@ -1,49 +1,124 @@
 /* eslint-disable */
 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 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 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'
 });
 
-
-class user extends Component {
-  componentDidMount(){
-    //TODO: get user details
-    //TODO: get posts
+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);
+    });
   }
 
+  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>);
+    
+
+    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}/>);
+
     return (
       <Grid container spacing={16}>
         <Grid item sm={8} xs={12}>
           <p>Post</p>
         </Grid>
         <Grid item sm={4} xs={12}>
-          <PostCard>
-            <CardMedia image="./no-img-png" />
-            <CardContent>Username</CardContent>
-          </PostCard>
+          {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>
     );
   }
 }
 
-
-
 export default user;