From 3da244905008c245d3989b4e195aae280befda76 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Thu, 21 Nov 2019 18:10:44 -0500
Subject: [PATCH] change topic display to user-specific topics

---
 twistter-frontend/src/pages/user.js | 515 ++++++++++++++--------------
 1 file changed, 261 insertions(+), 254 deletions(-)

diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 750fc0a..335b1cf 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,290 +1,297 @@
 /* eslint-disable */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import axios from 'axios';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+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 { Link } from 'react-router-dom';
-import Card from '@material-ui/core/Card';
-import CardMedia from '@material-ui/core/CardMedia';
-import CardContent from '@material-ui/core/CardContent';
-import Button from '@material-ui/core/Button';
-import Grid from '@material-ui/core/Grid';
+import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles, styled } from "@material-ui/core/styles";
+import { Link } from "react-router-dom";
+import Card from "@material-ui/core/Card";
+import CardMedia from "@material-ui/core/CardMedia";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";
 
-import Chip from '@material-ui/core/Chip';
-import Typography from '@material-ui/core/Typography';
-import AddCircle from '@material-ui/icons/AddCircle';
-import TextField from '@material-ui/core/TextField';
-import VerifiedIcon from '@material-ui/icons/CheckSharp';
-import Paper from '@material-ui/core/Paper';
-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';
+import Chip from "@material-ui/core/Chip";
+import Typography from "@material-ui/core/Typography";
+import AddCircle from "@material-ui/icons/AddCircle";
+import TextField from "@material-ui/core/TextField";
+import VerifiedIcon from "@material-ui/icons/CheckSharp";
+import Paper from "@material-ui/core/Paper";
+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 '../App.css';
-import noImage from '../images/no-img.png';
-import Writing_Microblogs from '../Writing_Microblogs';
+import "../App.css";
+import noImage from "../images/no-img.png";
+import Writing_Microblogs from "../Writing_Microblogs";
 
 const MyChip = styled(Chip)({
-	margin: 2,
-	color: 'primary'
+  margin: 2,
+  color: "primary"
 });
 
 const styles = {
-	button: {
-		positon: 'relative',
-		float: 'left',
-		marginLeft: 30,
-		marginTop: 20
-	},
-	paper: {
-		// marginLeft: "10%",
-		// marginRight: "10%"
-	},
-	card: {
-		marginBottom: 10
-	},
-	profileImage: {
-		marginTop: 20
-	},
-	topicsContainer: {
-		border: 'lightgray solid 1px',
-		marginTop: 20,
-		paddingTop: 10,
-		paddingBottom: 10,
-		height: 300
-	},
-	addCircle: {
-		width: 65,
-		height: 65,
-		marginTop: 10
-	},
-	username: {
-		marginBottom: 100
-	}
+  button: {
+    positon: "relative",
+    float: "left",
+    marginLeft: 30,
+    marginTop: 20
+  },
+  paper: {
+    // marginLeft: "10%",
+    // marginRight: "10%"
+  },
+  card: {
+    marginBottom: 10
+  },
+  profileImage: {
+    marginTop: 20
+  },
+  topicsContainer: {
+    border: "lightgray solid 1px",
+    marginTop: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+    height: 300
+  },
+  addCircle: {
+    width: 65,
+    height: 65,
+    marginTop: 10
+  },
+  username: {
+    marginBottom: 100
+  }
 };
 
 class user extends Component {
-	state = {
-		profile: null,
-		imageUrl: null,
-		topics: null,
-		newTopic: null
-	};
+  state = {
+    profile: null,
+    imageUrl: null,
+    topics: null,
+    newTopic: null
+  };
 
-	handleDelete = (topic) => {
-		axios
-			.delete(`/deleteTopic/${topic.id}`)
-			.then(function() {
-				location.reload();
-			})
-			.catch(function(err) {
-				console.log(err);
-			});
-	};
+  handleDelete = topic => {
+    axios
+      .delete(`/deleteTopic/${topic.id}`)
+      .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);
-			});
-	};
+  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,
-					verified: res.data.credentials.verified ? res.data.credentials.verified : false
-				});
-			})
-			.catch((err) => console.log(err));
+  componentDidMount() {
+    axios
+      .get("/user")
+      .then(res => {
+        this.setState({
+          profile: res.data.credentials.handle,
+          imageUrl: res.data.credentials.imageUrl,
+          verified: res.data.credentials.verified
+            ? res.data.credentials.verified
+            : false,
+          topics: res.data.credentials.followedTopics
+        });
+      })
+      .catch(err => console.log(err));
 
-		axios
-			.get('/getAllTopics')
-			.then((res) => {
-				this.setState({
-					topics: res.data
-				});
-			})
-			.catch((err) => console.log(err));
+    axios
+      .get("/getallPostsforUser")
+      .then(res => {
+        console.log(res.data);
+        this.setState({
+          posts: res.data
+        });
+      })
+      .catch(err => console.log(err));
+  }
 
-		axios
-			.get('/getallPostsforUser')
-			.then((res) => {
-				console.log(res.data);
-				this.setState({
-					posts: res.data
-				});
-			})
-			.catch((err) => console.log(err));
-	}
+  render() {
+    const { classes } = this.props;
+    let authenticated = this.props.user.authenticated;
 
-	render() {
-		const { classes } = this.props;
-		let authenticated = this.props.user.authenticated;
+    let profileMarkup = this.state.profile ? (
+      <div>
+        <Typography variant="h5" className={classes.username}>
+          @{this.state.profile}{" "}
+          {this.state.verified ? (
+            <VerifiedIcon style={{ fill: "#1397D5" }} />
+          ) : null}
+        </Typography>
+      </div>
+    ) : (
+      <p className={classes.username}>loading username...</p>
+    );
 
-		let profileMarkup = this.state.profile ? (
-			<div>
-				<Typography variant="h5" className={classes.username}>
-					@{this.state.profile} {this.state.verified ? <VerifiedIcon style={{ fill: '#1397D5' }} /> : null}
-				</Typography>
-			</div>
-		) : (
-			<p className={classes.username}>loading username...</p>
-		);
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(
+        topic => (
+          <MyChip
+            label={topic}
+            key={topic.id}
+            onDelete={key => this.handleDelete(topic)}
+          />
+        ) // console.log({ topic }.topic.id)
+      )
+    ) : (
+      <p> loading topics...</p>
+    );
 
-		let topicsMarkup = this.state.topics ? (
-			this.state.topics.map(
-				(topic) => (
-					<MyChip
-						label={{ topic }.topic.topic}
-						key={{ topic }.topic.id}
-						onDelete={(key) => this.handleDelete(topic)}
-					/>
-				) // console.log({ topic }.topic.id)
-			)
-		) : (
-			<p> loading topics...</p>
-		);
+    let imageMarkup = this.state.imageUrl ? (
+      <img
+        className={classes.profileImage}
+        src={this.state.imageUrl}
+        height="250"
+        width="250"
+      />
+    ) : (
+      <img
+        className={classes.profileImage}
+        src={noImage}
+        height="250"
+        width="250"
+      />
+    );
 
-		let imageMarkup = this.state.imageUrl ? (
-			<img className={classes.profileImage} src={this.state.imageUrl} height="250" width="250" />
-		) : (
-			<img className={classes.profileImage} src={noImage} height="250" width="250" />
-		);
+    let postMarkup = this.state.posts ? (
+      this.state.posts.map(post => (
+        <Card className={classes.card}>
+          <CardContent>
+            <Typography>
+              {this.state.imageUrl ? (
+                <img src={this.state.imageUrl} height="50" width="50" />
+              ) : (
+                <img src={noImage} height="50" width="50" />
+              )}
+            </Typography>
+            <Typography variant="h7">
+              <b>{post.userHandle}</b>
+            </Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              {post.createdAt}
+            </Typography>
+            <br />
+            <Typography variant="body1">
+              <b>{post.microBlogTitle}</b>
+            </Typography>
+            <Typography variant="body2">{post.body}</Typography>
+            <br />
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics}
+            </Typography>
+            <br />
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount} Comments {post.commentCount}
+            </Typography>
+          </CardContent>
+        </Card>
+      ))
+    ) : (
+      <p>My Posts</p>
+    );
 
-		let postMarkup = this.state.posts ? (
-			this.state.posts.map((post) => (
-				<Card className={classes.card}>
-					<CardContent>
-						<Typography>
-							{this.state.imageUrl ? (
-								<img src={this.state.imageUrl} height="50" width="50" />
-							) : (
-								<img src={noImage} height="50" width="50" />
-							)}
-						</Typography>
-						<Typography variant="h7">
-							<b>{post.userHandle}</b>
-						</Typography>
-						<Typography variant="body2" color={'textSecondary'}>
-							{post.createdAt}
-						</Typography>
-						<br />
-						<Typography variant="body1">
-							<b>{post.microBlogTitle}</b>
-						</Typography>
-						<Typography variant="body2">{post.body}</Typography>
-						<br />
-						<Typography variant="body2">
-							<b>Topics:</b> {post.microBlogTopics}
-						</Typography>
-						<br />
-						<Typography variant="body2" color={'textSecondary'}>
-							Likes {post.likeCount} Comments {post.commentCount}
-						</Typography>
-					</CardContent>
-				</Card>
-			))
-		) : (
-			<p>My Posts</p>
-		);
-
-		// 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 ? (
+    // 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 ? (
       <Link to="/edit">
-			<Button className={classes.button} variant="outlined" color="primary">
-				Edit Profile
-			</Button>
+        <Button className={classes.button} variant="outlined" color="primary">
+          Edit Profile
+        </Button>
       </Link>
-		) : null;
+    ) : null;
 
-		return (
-			<div>
-				{/* <Paper className={classes.paper}> */}
-				<Grid container direction="column">
-					<Grid item>
-						<Grid container>
-							<Grid item sm>
-								{editButtonMarkup}
-							</Grid>
-							<Grid item sm>
-								{/* <Grid container direction="column"> */}
-								{/* <Grid item sm> */}
-								{imageMarkup}
-								{profileMarkup}
-								{/* </Grid> */}
-								{/* <Grid item sm> */}
-								{/* {postMarkup} */}
-								{/* </Grid> */}
-								{/* </Grid> */}
-							</Grid>
-							<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>
-					</Grid>
-					<Grid item>
-						<Grid container>
-							<Grid item sm />
-							<Grid item>{postMarkup}</Grid>
-							<Grid item sm />
-						</Grid>
-					</Grid>
-				</Grid>
-			</div>
-		);
-	}
+    return (
+      <div>
+        {/* <Paper className={classes.paper}> */}
+        <Grid container direction="column">
+          <Grid item>
+            <Grid container>
+              <Grid item sm>
+                {editButtonMarkup}
+              </Grid>
+              <Grid item sm>
+                {/* <Grid container direction="column"> */}
+                {/* <Grid item sm> */}
+                {imageMarkup}
+                {profileMarkup}
+                {/* </Grid> */}
+                {/* <Grid item sm> */}
+                {/* {postMarkup} */}
+                {/* </Grid> */}
+                {/* </Grid> */}
+              </Grid>
+              <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>
+          </Grid>
+          <Grid item>
+            <Grid container>
+              <Grid item sm />
+              <Grid item>{postMarkup}</Grid>
+              <Grid item sm />
+            </Grid>
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
 }
 
-const mapStateToProps = (state) => ({
-	user: state.user
+const mapStateToProps = state => ({
+  user: state.user
 });
 
 user.propTypes = {
-	user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired
 };
 
 export default connect(mapStateToProps)(withStyles(styles)(user));