add topics when publish new post

twistter-frontend/src/Writing_Microblogs.js

@@ -40,15 +40,28 @@ class Writing_Microblogs extends Component {
     };
 
     axios
-      .post("/putPost", postData, headers)
+      .post("/putPost", postData, headers) // TODO: add topics
       .then(res => {
-        alert("Post was shared successfully!");
+        // alert("Post was shared successfully!");
         console.log(res.data);
       })
       .catch(err => {
         alert("An error occured.");
         console.error(err);
       });
+    console.log(postData.microBlogTopics);
+    postData.microBlogTopics.forEach(topic => {
+      axios
+        .post("/putTopic", {
+          following: topic
+        })
+        .then(res => {
+          console.log(res.data);
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    });
     event.preventDefault();
     this.setState({ value: "", title: "", characterCount: 250, topics: "" });
   }

twistter-frontend/src/pages/Home.js

@@ -1,20 +1,20 @@
 /* eslint-disable */
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import axios from 'axios';
+import axios from "axios";
 
 // Material UI and React Router
-import Grid from '@material-ui/core/Grid';
+import Grid from "@material-ui/core/Grid";
-import Card from '@material-ui/core/Card';
+import Card from "@material-ui/core/Card";
-import CardContent from '@material-ui/core/CardContent';
+import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
 
 // component
-import '../App.css';
+import "../App.css";
-import logo from '../images/twistter-logo.png';
+import logo from "../images/twistter-logo.png";
-import noImage from '../images/no-img.png';
+import noImage from "../images/no-img.png";
-import Writing_Microblogs from '../Writing_Microblogs';
+import Writing_Microblogs from "../Writing_Microblogs";
 
 class Home extends Component {
   state = {};
@@ -26,7 +26,7 @@ class Home extends Component {
         console.log(res.data);
         this.setState({
           posts: res.data
-        })
+        });
       })
       .catch(err => console.log(err));
   }
@@ -35,31 +35,43 @@ class Home extends Component {
     let authenticated = this.props.user.authenticated;
 
     let postMarkup = this.state.posts ? (
-      this.state.posts.map(post => 
+      this.state.posts.map(post => (
         <Card>
           <CardContent>
             <Typography>
-              {
+              {this.state.imageUrl ? (
-                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                <img src={this.state.imageUrl} height="250" width="250" />
-                                      (<img src={noImage} 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>
-            <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="body1">
+              <b>{post.microBlogTitle}</b>
+            </Typography>
             <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} Comments {post.commentCount}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>
+              Likes {post.likeCount} Comments {post.commentCount}
+            </Typography>
           </CardContent>
         </Card>
-      )
+      ))
-    ) : (<p>My Posts</p>);
+    ) : (
+      <p>Loading post...</p>
+    );
 
-    return (
+    return authenticated ? (
-      authenticated ?
       <Grid container spacing={16}>
         <Grid item sm={4} xs={8}>
           <Writing_Microblogs />
@@ -68,21 +80,27 @@ class Home extends Component {
           {postMarkup}
         </Grid>
       </Grid>
-      :
+    ) : (
       <div>
         <div>
           <img src={logo} className="app-logo" alt="logo" />
-          <br/><br/>
+          <br />
+          <br />
           <b>Welcome to Twistter!</b>
-          <br/><br/>
+          <br />
+          <br />
           <b>See the most interesting topics people are following right now.</b>
         </div>
 
-        <br/><br/><br/><br/>
+        <br />
+        <br />
+        <br />
+        <br />
 
         <div>
           <b>Join today or sign in if you already have an account.</b>
-          <br/><br/>
+          <br />
+          <br />
           <form action="./signup">
             <button className="authButtons signup">Sign up</button>
           </form>
@@ -96,12 +114,12 @@ class Home extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   user: state.user
-})
+});
 
 Home.propTypes = {
   user: PropTypes.object.isRequired
-}
+};
 
 export default connect(mapStateToProps)(Home);