Merge branch 'master' into fix-warnings

twistter-frontend/src/Writing_Microblogs.js

@@ -3,6 +3,27 @@ import React, { Component } from "react";
 // import Route from "react-router-dom/Route";
 import axios from "axios";
 
+// Material-UI
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import withStyles from "@material-ui/styles/withStyles";
+
+const styles = {
+  container: {
+    position: "fixed"
+  },
+  form: {
+    width: "300px",
+    height: "50px",
+    marginTop: "180px",
+    marginLeft: "50px"
+  },
+  textField: {
+    marginBottom: 15
+  }
+}
+
 class Writing_Microblogs extends Component {
   constructor(props) {
     super(props);
@@ -27,7 +48,7 @@ class Writing_Microblogs extends Component {
     this.setState({ topics: event.target.value });
   }
 
-  handleSubmit(event) {
+  handleSubmit = (event) => {
     // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
     const postData = {
       body: this.state.value,
@@ -40,20 +61,34 @@ 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: "" });
   }
 
   handleChangeforPost(event) {
+
     this.setState({ value: event.target.value });
   }
 
@@ -64,65 +99,67 @@ class Writing_Microblogs extends Component {
   }
 
   render() {
+    const { classes } = this.props;
     return (
-      <div>
-        <div
-          style={{
-            width: "200px",
-            height: "50px",
-            marginTop: "180px",
-            marginLeft: "50px"
-          }}
-        >
-          <form>
-            <textarea
-              placeholder="Enter Microblog Title"
-              value={this.state.title}
-              required
-              onChange={this.handleChange}
-              cols={30}
-              rows={1}
-            />
-          </form>
-        </div>
-        <div style={{ width: "200px", height: "50px", marginLeft: "50px" }}>
-          <form>
-            <textarea
-              placeholder="Enter topics seperated by a comma"
-              value={this.state.topics}
-              required
-              onChange={this.handleChangeforTopics}
-              cols={40}
-              rows={1}
-            />
-          </form>
-        </div>
+      <div className={classes.container}>
+        <form noValidate className={classes.form}>
+          <TextField
+            id="title"
+            name="title"
+            label="Title"
+            className={classes.textField}
+            value={this.state.title}
+            variant="outlined"
+            onChange={this.handleChange}
+            fullWidth
+            autoComplete='off'
+          />
 
-        <div style={{ width: "200px", marginLeft: "50px" }}>
-          <form onSubmit={this.handleSubmit}>
-            <textarea
-              value={this.state.value}
-              required
-              maxLength="250"
-              placeholder="Write Microblog here..."
-              onChange={e => {
-                this.handleChangeforPost(e);
-                this.handleChangeforCharacterCount(e);
-              }}
-              cols={40}
-              rows={20}
-            />
-            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-              <p>Characters Left: {this.state.characterCount}</p>
-            </div>
-            <div style={{ marginRight: "-100px" }}>
-              <button onClick={this.handleSubmit}>Share Post</button>
-            </div>
-          </form>
-        </div>
+          <TextField
+            id="topics"
+            name="topics"
+            label="Topics"
+            className={classes.textField}
+            value={this.state.topics}
+            variant="outlined"
+            onChange={this.handleChangeforTopics}
+            color="primary"
+            fullWidth
+            autoComplete='off'
+          />
+          <TextField
+            id="content"
+            name="content"
+            label="Content"
+            color="primary"
+            className={classes.textField}
+            value={this.state.value}
+            helperText={`${this.state.characterCount} characters left`}
+            multiline
+            rows="9"
+            variant="outlined"
+            inputProps={{
+              maxLength: 250
+            }}
+            onChange={(e) => {
+              this.handleChangeforPost(e);
+              this.handleChangeforCharacterCount(e);
+            }}
+            fullWidth
+            autoComplete='off'
+          />
+          <Button
+            onClick={this.handleSubmit}
+            // disabled={loading}
+            variant="outlined"
+            color="primary"
+            >
+              Share Post
+          </Button>
+        </form>
       </div>
     );
   }
 }
 
-export default Writing_Microblogs;
+export default withStyles(styles)(Writing_Microblogs);