Writing_Microblogs to Material-UI and UI improvements

twistter-frontend/src/Writing_Microblogs.js

@@ -5,6 +5,7 @@ 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";
 
@@ -19,11 +20,8 @@ const styles = {
     marginLeft: "50px"
   },
   textField: {
-    marginBottom: 20
+    marginBottom: 15
   }
-  // TextField: {
-  //   marginBottom: "30px"
-  // }
 }
 
 class Writing_Microblogs extends Component {
@@ -50,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,
@@ -77,6 +75,7 @@ class Writing_Microblogs extends Component {
   }
 
   handleChangeforPost(event) {
+
     this.setState({ value: event.target.value });
   }
 
@@ -89,145 +88,66 @@ class Writing_Microblogs extends Component {
   render() {
     const { classes } = this.props;
     return (
-      // <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}
-      //       /> */}
-      //       <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}>
+        <form noValidate 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
+            autoComplete='off'
           />
 
           <TextField
             id="topics"
             name="topics"
-            label="topics"
+            label="Topics"
             className={classes.textField}
             value={this.state.topics}
-            // helperText={errors.firstName}
-            // error={errors.firstName ? true : false}
             variant="outlined"
-            onChange={this.handleChange}
+            onChange={this.handleChangeforTopics}
+            color="primary"
             fullWidth
+            autoComplete='off'
           />
 
           <TextField
             id="content"
             name="content"
-            label="content"
+            label="Content"
+            color="primary"
             className={classes.textField}
-            value={this.state.content}
-            // helperText={errors.bio}
-            // error={errors.bio ? true : false}
+            value={this.state.value}
+            helperText={`${this.state.characterCount} characters left`}
             multiline
-            rows="8"
+            rows="9"
             variant="outlined"
-            onChange={this.handleChange}
+            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);

twistter-frontend/src/pages/Home.js

@@ -45,7 +45,7 @@ class Home extends Component {
           <CardContent>
             <Typography>
               {
-                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
                                       (<img src={noImage} height="50" width="50"/>)
               }
             </Typography>

twistter-frontend/src/pages/Login.js

@@ -111,7 +111,7 @@ export class Login extends Component {
             <TextField
               id="email"
               name="email"
-              label="Email*"
+              label="Email or Username*"
               className={classes.textField}
               value={this.state.email}
               helperText={errors.email}
@@ -119,6 +119,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -132,6 +133,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <Button
               type="submit"

twistter-frontend/src/pages/Signup.js

@@ -107,6 +107,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="email"
@@ -119,6 +120,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -132,6 +134,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="confirmPassword"
@@ -145,6 +148,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <Button
               type="submit"

twistter-frontend/src/pages/user.js

@@ -132,7 +132,7 @@ class user extends Component {
           <CardContent>
             <Typography>
               {
-                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
                                       (<img src={noImage} height="50" width="50"/>)
               }
             </Typography>