Edit Profile front-end finished and connected to back-end

twistter-frontend/src/pages/edit.js

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import axios from "axios";
 import PropTypes from "prop-types";
+// TODO: Add a read-only '@' in the left side of the handle input
+// TODO: Add a cancel button, that takes the user back to their profile page
 
 // Material-UI stuff
 import TextField from "@material-ui/core/TextField";
@@ -8,6 +10,8 @@ import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
 import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
+import CircularProgress from '@material-ui/core/CircularProgress';
+
 const styles = {
   form: {
     textAlign: "center"
@@ -18,16 +22,13 @@ const styles = {
   pageTitle: {
     marginTop: 40,
     marginBottom: 40
+  },
+  button: {
+    positon: 'relative',
+  },
+  progress: {
+    position: 'absolute',
   }
-  // firstName: {
-  //     marginRight: 10,
-  // },
-  // lastname: {
-  //     marginLeft: 10,
-  // }
-  // name: {
-  //     width: '40%'
-  // }
 };
 
 // const classes = useStyles();
@@ -45,14 +46,7 @@ export class edit extends Component {
   componentDidMount() {
     axios
       .get("/getProfileInfo")
-      .then(res => {
-        // console.log(res.data);
-        // this.state.firstName = res.data.firstName;
-        // this.state.lastName = res.data.lastName;
-        // this.state.email = res.data.email;
-        // this.state.handle = res.data.handle;
-        // this.state.bio = res.data.bio;
-        // this.state.valid = true;
+      .then((res) => {
         this.setState({
           firstName: res.data.firstName,
           lastName: res.data.lastName,
@@ -61,7 +55,7 @@ export class edit extends Component {
           bio: res.data.bio
         });
       })
-      .catch(err => {
+      .catch((err) => {
         console.error(err);
       });
   }
@@ -82,49 +76,45 @@ export class edit extends Component {
   handleSubmit = (event) => {
     event.preventDefault();
     this.setState({
-        loading: true,
+      loading: true
     });
     const newProfileData = {
       firstName: this.state.firstName,
       lastName: this.state.lastName,
       email: this.state.email,
       handle: this.state.handle,
-        bio: this.state.bio,
-    }
-    axios.post('updateProfileInfo', newProfileData)
+      bio: this.state.bio
+    };
+    axios
+      .post("/updateProfileInfo", newProfileData)
       .then((res) => {
         this.setState({
-                loading: false,
+          loading: false
         });
         // this.props.history.push('/');
+        // TODO: Need to redirect user to their profile page
       })
       .catch((err) => {
         this.setState({
           errors: err.response.data,
-                loading: false,
+          loading: false
+        });
       });
-        })
   };
 
   handleChange = (event) => {
     this.setState({
-      [event.target.name]: event.target.value
+      [event.target.name]: event.target.value,
+      errors: {
+        [event.target.name]: null,
+      }
     });
   };
 
   render() {
     const { classes } = this.props;
     const { errors, loading } = this.state;
-    // let editProfileMarkup = this.state.profileData ? (
-    //     // this.state.profileData.map(profileData => <p>{profileData}</p>)
-    //     <div>
 
-    //         <p>{this.state.profileData.firstName}</p>
-    //         <p>{this.state.profileData.lastName}</p>
-    //         <p>{this.state.profileData.email}</p>
-    //         <p>{this.state.profileData.bio}</p>
-    //     </div>
-    // ) : <p>Loading...</p>
     return (
       <Grid container className={classes.form}>
         <Grid item sm />
@@ -141,6 +131,8 @@ export class edit extends Component {
                   label="First Name"
                   className={classes.textField}
                   value={this.state.firstName}
+                  helperText={errors.firstName}
+                  error={errors.firstName ? true : false}
                   variant="outlined"
                   onChange={this.handleChange}
                   fullWidth
@@ -153,6 +145,8 @@ export class edit extends Component {
                   label="Last Name"
                   className={classes.textField}
                   value={this.state.lastName}
+                  helperText={errors.lastname}
+                  error={errors.lastName ? true : false}
                   variant="outlined"
                   onChange={this.handleChange}
                   fullWidth
@@ -162,11 +156,13 @@ export class edit extends Component {
             <TextField
               id="email"
               name="email"
-              label="Email"
+              label="Email*"
               className={classes.textField}
               value={this.state.email}
               disabled
               helperText="(disabled)"
+              // helperText={errors.email}
+              // error={errors.email ? true : false}
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
@@ -174,11 +170,13 @@ export class edit extends Component {
             <TextField
               id="handle"
               name="handle"
-              label="Handle"
+              label="Handle*"
               className={classes.textField}
               value={this.state.handle}
               disabled
               helperText="(disabled)"
+              // helperText={errors.handle}
+              // error={errors.handle ? true : false}
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
@@ -189,6 +187,8 @@ export class edit extends Component {
               label="Bio"
               className={classes.textField}
               value={this.state.bio}
+              helperText={errors.bio}
+              error={errors.bio ? true : false}
               multiline
               rows="8"
               variant="outlined"
@@ -200,8 +200,12 @@ export class edit extends Component {
               variant="contained"
               color="primary"
               className={classes.button}
+              disabled={loading}
             >
               Submit
+              {loading && (
+                <CircularProgress size={30} className={classes.progress}/>
+              )}
             </Button>
           </form>
         </Grid>