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 1/3] 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 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 2/3] 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 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 3/3] 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> */}