display posts on other user's page

twistter-frontend/package.json

@@ -43,5 +43,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5001/twistter-e4649/us-central1/api"
+  "proxy": "http://localhost:5006/twistter-e4649/us-central1/api"
 }

twistter-frontend/src/pages/otherUser.js

@@ -7,6 +7,8 @@ import axios from "axios";
 
 // Material UI and React Router
 import { makeStyles, styled } from "@material-ui/core/styles";
+import withStyles from "@material-ui/core/styles/withStyles";
+
 import { Link } from "react-router-dom";
 import Card from "@material-ui/core/Card";
 import CardMedia from "@material-ui/core/CardMedia";
@@ -30,14 +32,52 @@ const MyChip = styled(Chip)({
   color: "primary"
 });
 
+const styles = {
+  button: {
+    positon: "relative",
+    float: "left",
+    marginLeft: 30,
+    marginTop: 20
+  },
+  paper: {
+    // marginLeft: "10%",
+    // marginRight: "10%"
+  },
+  card: {
+    marginBottom: 5
+  },
+  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: window.location.pathname.split("/").pop(),
-    imageUrl: null,
-    topics: null,
-    user: null,
-    following: null
-  };
+  constructor() {
+    super();
+    this.state = {
+      profile: window.location.pathname.split("/").pop(),
+      imageUrl: null,
+      topics: null,
+      user: null,
+      following: null,
+      posts: null
+    };
+  }
 
   handleSub = () => {
     if (this.state.following === true) {
@@ -92,34 +132,22 @@ class user extends Component {
         });
       })
       .catch(err => console.log(err));
+
+    axios
+      .post("/getOtherUsersPosts", {
+        handle: this.state.profile
+      })
+      .then(res => {
+        // console.log(res.data);
+        this.setState({
+          posts: res.data
+        });
+      })
+      .catch(err => console.log(err));
   }
 
   render() {
-    let profileMarkup = this.state.profile ? (
-      <div>
-        <Typography variant="h5">
-          @{this.state.profile}{" "}
-          {this.state.verified ? (
-            <VerifiedIcon style={{ fill: "#1397D5" }} />
-          ) : null}
-        </Typography>
-      </div>
-    ) : (
-      <p>loading username...</p>
-    );
-    let topicsMarkup = this.state.topics ? (
-      this.state.topics.map(
-        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
-      )
-    ) : (
-      <p> loading topics...</p>
-    );
-
-    let imageMarkup = this.state.imageUrl ? (
-      <img src={this.state.imageUrl} height="150" width="150" />
-    ) : (
-      <img src={noImage} height="150" width="150" />
-    );
+    const { classes } = this.props;
 
     let followMarkup = this.state.following ? (
       <Button variant="contained" color="primary" onClick={this.handleSub}>
@@ -130,18 +158,87 @@ class user extends Component {
         follow
       </Button>
     );
+    let profileMarkup = this.state.profile ? (
+      <div>
+        <Typography variant="h5">
+          @{this.state.profile}{" "}
+          {this.state.verified ? (
+            <VerifiedIcon style={{ fill: "#1397D5" }} />
+          ) : null}
+        </Typography>
+        {followMarkup}
+      </div>
+    ) : (
+      <p>loading username...</p>
+    );
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(
+        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
+      )
+    ) : (
+      <p> no topic yet</p>
+    );
 
-    console.log(this.state.following);
+    let imageMarkup = this.state.imageUrl ? (
+      <img src={this.state.imageUrl} height="150" width="150" />
+    ) : (
+      <img src={noImage} height="150" width="150" />
+    );
+
+    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.quoteBody}</Typography>
+
+            <br />
+            <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}
+            </Typography>
+          </CardContent>
+        </Card>
+      ))
+    ) : (
+      <p>Posts</p>
+    );
 
     return (
       <Grid container spacing={24}>
         <Grid item sm={4} xs={8}>
           {imageMarkup}
           {profileMarkup}
-          {followMarkup}
+          {/* {followMarkup} */}
           {topicsMarkup}
           <br />
         </Grid>
+        <Grid item sm={4} xs={8}>
+          {postMarkup}
+          <br />
+        </Grid>
       </Grid>
     );
   }
@@ -152,7 +249,8 @@ const mapStateToProps = state => ({
 });
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
 };
 
-export default connect(mapStateToProps)(user);
+export default connect(mapStateToProps)(withStyles(styles)(user));

twistter-frontend/src/pages/user.js

@@ -147,7 +147,7 @@ class user extends Component {
         // console.log(res.data);
         this.setState({
           posts: res.data
-        })
+        });
       })
       .catch(err => console.log(err));
   }
@@ -222,19 +222,22 @@ class user extends Component {
               {post.createdAt}
             </Typography>
 
-            
             <br />
             <Typography variant="body1">
               <b>{post.microBlogTitle}</b>
             </Typography>
             <Typography variant="body2">{post.quoteBody}</Typography>
-      
+
             <br />
             <Typography variant="body2">{post.body}</Typography>
             <br />
-            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <Typography variant="body2">
+              <b>Topics:</b> {post.microBlogTopics}
+            </Typography>
             <br />
-            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount}
+            </Typography>
           </CardContent>
         </Card>
       ))