Fixing up profile UI

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,
+	margin: 2,
-  color: 'primary'
+	color: 'primary'
 });
 
-class user extends Component {  
+class user extends Component {
-  state = {
+	state = {
-    profile: null,
+		profile: null,
-    imageUrl: null,
+		imageUrl: null,
-    topics: null,
+		topics: null,
-    newTopic: 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) {
+	handleDelete = (topic) => {
-    this.setState({
+		alert(`Delete topic: ${topic}!`);
-      newTopic: event.target.value
+	};
-    })
-  }
 
-  componentDidMount() {
+	handleAddCircle = () => {
-    axios
+		axios
-      .get("/user")
+			.post('/putTopic', {
-      .then(res => {
+				topic: this.state.newTopic
-        this.setState({
+			})
-          profile: res.data.credentials.handle,
+			.then(function() {
-          imageUrl: res.data.credentials.imageUrl
+				location.reload();
-        });
+			})
-      })
+			.catch(function(err) {
-      .catch(err => console.log(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 ? (
+	handleChange(event) {
-      this.state.topics.map(topic => <MyChip 
+		this.setState({
-        label={{topic}.topic.topic}
+			newTopic: event.target.value
-        key={{topic}.topic.topicId}
+		});
-        onDelete={ (topic) => this.handleDelete(topic)}/>)
+	}
-    ) : (<p> loading topics...</p>);
 
-    let imageMarkup = this.state.imageUrl ? (
+	componentDidMount() {
-      <img
+		axios
-      src={this.state.imageUrl}
+			.get('/user')
-      height="250"
+			.then((res) => {
-      width="250"
+				this.setState({
-      />
+					profile: res.data.credentials.handle,
-    ) : (<img src={noImage}/>);
+					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 (
+		let topicsMarkup = this.state.topics ? (
-      <Grid container spacing={16}>
+			this.state.topics.map((topic) => (
-        <Grid item sm={8} xs={12}>
+				<MyChip
-          <p>Post</p>
+					label={{ topic }.topic.topic}
-        </Grid>
+					key={{ topic }.topic.topicId}
-        <Grid item sm={4} xs={12}>
+					onDelete={(topic) => this.handleDelete(topic)}
-          {imageMarkup}
+				/>
-          {profileMarkup}
+			))
-          {topicsMarkup}
+		) : (
-          <TextField
+			<p> loading topics...</p>
-          id="newTopic"
+		);
-          label="new topic"
+
-          defaultValue=""
+		let imageMarkup = this.state.imageUrl ? (
-          margin="normal"
+			<img src={this.state.imageUrl} height="250" width="250" />
-          variant="outlined"
+		) : (
-          value={this.state.newTopic}
+			<img src={noImage} />
-          onChange={ (event) => this.handleChange(event)}
+		);
-          />
+
-          <AddCircle
+		// FIX: This needs to check if user's profile page being displayed
-            color="primary"
+		// is the same as the user who is logged in
-            clickable
+		// Can't check for that right now, because this page is always
-            onClick={this.handleAddCircle}
+		// showing the logged in users profile, instead of retreiving the
-          />
+		// profile based on the URL entered
-        </Grid>
+		let editButtonMarkup = true ? (
-      </Grid>
+			<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);