Changing writing microblogs to Material-UI

twistter-frontend/src/Writing_Microblogs.js

@@ -3,6 +3,29 @@ import { BrowserRouter as Router } from "react-router-dom";
 import Route from "react-router-dom/Route";
 import axios from "axios";
 
+// Material-UI
+import TextField from '@material-ui/core/TextField';
+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: 20
+  }
+  // TextField: {
+  //   marginBottom: "30px"
+  // }
+}
+
 class Writing_Microblogs extends Component {
   constructor(props) {
     super(props);
@@ -64,65 +87,147 @@ 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}>
+      //   <div className={classes.div}>
+      //     <form>
+      //       {/* <textarea
+      //         placeholder="Enter Microblog Title"
+      //         value={this.state.title}
+      //         required
+      //         onChange={this.handleChange}
+      //         cols={30}
+      //         rows={1}
+      //       /> */}
+      //       <TextField
+      //       id="title"
+      //       name="title"
+      //       label="Title"
+      //       // className={classes.textField}
+      //       value={this.state.title}
+      //       // helperText={errors.firstName}
+      //       // error={errors.firstName ? true : false}
+      //       variant="outlined"
+      //       onChange={this.handleChange}
+      //       fullWidth
+      //       />
+      //     </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} */}
+      //       <TextField
+      //         id="topics"
+      //         name="topics"
+      //         label="topics"
+      //         // className={classes.textField}
+      //         value={this.state.topics}
+      //         // helperText={errors.firstName}
+      //         // error={errors.firstName ? true : false}
+      //         variant="outlined"
+      //         onChange={this.handleChange}
+      //         fullWidth
+      //       />
+      //     </form>
+      //   </div>
 
-        <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={{ 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}
+      //       /> */}
+      //       <TextField
+      //         id="bio"
+      //         name="bio"
+      //         label="Bio"
+      //         className={classes.textField}
+      //         value={this.state.bio}
+      //         // helperText={errors.bio}
+      //         // error={errors.bio ? true : false}
+      //         multiline
+      //         rows="8"
+      //         variant="outlined"
+      //         onChange={this.handleChange}
+      //         fullWidth
+      //       />
+      //       <div style={{ fontSize: "14px", marginRight: "-100px" }}>
+      //         <p2>Characters Left: {this.state.characterCount}</p2>
+      //       </div>
+      //       <div style={{ marginRight: "-100px" }}>
+      //         {/* <button onClick>Share Post</button> */}
+      //         <Button
+      //         onClick
+      //         >
+      //           Share Post
+      //         </Button>
+      //       </div>
+      //     </form>
+      //   </div>
+      // </div>
+      <div className={classes.container}>
+        <form className={classes.form}>
+          <TextField
+          // style={{marginBottom: 20}}
+            id="title"
+            name="title"
+            label="Title"
+            className={classes.textField}
+            value={this.state.title}
+            // helperText={errors.firstName}
+            // error={errors.firstName ? true : false}
+            variant="outlined"
+            onChange={this.handleChange}
+            fullWidth
+          />
+
+          <TextField
+            id="topics"
+            name="topics"
+            label="topics"
+            className={classes.textField}
+            value={this.state.topics}
+            // helperText={errors.firstName}
+            // error={errors.firstName ? true : false}
+            variant="outlined"
+            onChange={this.handleChange}
+            fullWidth
+          />
+
+          <TextField
+            id="content"
+            name="content"
+            label="content"
+            className={classes.textField}
+            value={this.state.content}
+            // helperText={errors.bio}
+            // error={errors.bio ? true : false}
+            multiline
+            rows="8"
+            variant="outlined"
+            onChange={this.handleChange}
+            fullWidth
           />
-            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-              <p2>Characters Left: {this.state.characterCount}</p2>
-            </div>
-            <div style={{ marginRight: "-100px" }}>
-              <button onClick>Share Post</button>
-            </div>
         </form>
       </div>
-      </div>
     );
   }
 }
 
-export default Writing_Microblogs;
+// export default Writing_Microblogs;
+export default withStyles(styles)(Writing_Microblogs);

twistter-frontend/src/pages/Home.js

@@ -31,6 +31,11 @@ class Home extends Component {
       .catch(err => console.log(err));
   }
 
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
+  }
+
   render() {
     let authenticated = this.props.user.authenticated;
 
@@ -44,8 +49,8 @@ class Home extends Component {
                                       (<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="h5"><b>{post.userHandle}</b></Typography>
+            <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
             <br />
             <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
             <Typography variant="body2">{post.body}</Typography>

twistter-frontend/src/pages/user.js

@@ -97,6 +97,11 @@ class user extends Component {
       .catch(err => console.log(err));
   }
 
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
+  }
+
   render() {
     let authenticated = this.props.user.authenticated;
     let classes = this.props;
@@ -132,7 +137,7 @@ class user extends Component {
               }
             </Typography>
             <Typography variant="h7"><b>{post.userHandle}</b></Typography>
-            <Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
+            <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
             <br />
             <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
             <Typography variant="body2">{post.body}</Typography>