From a4cce0b75ec3a616641ecf8b073b52b7d69c2b58 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 16:26:54 -0500
Subject: [PATCH] Circular progress when the editProfile page is loading

---
 twistter-frontend/src/pages/editProfile.js | 354 +++++++++++----------
 1 file changed, 180 insertions(+), 174 deletions(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index 539fc8b..df947fb 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -56,6 +56,7 @@ export class editProfile extends Component {
   // Sets the default values of all the textboxes to the data
   // that is stored in the database for the user.
   componentDidMount() {
+    this.setState({pageLoading: true})
     axios
       .get("/getProfileInfo")
       .then((res) => {
@@ -64,7 +65,8 @@ export class editProfile extends Component {
           lastName: res.data.lastName,
           email: res.data.email,
           handle: res.data.handle,
-          bio: res.data.bio
+          bio: res.data.bio,
+          pageLoading: false
         });
       })
       .catch((err) => {
@@ -89,6 +91,7 @@ export class editProfile extends Component {
       bio: "",
       anchorEl: null,
       loading: false,
+      pageLoading: false,
       errors: {}
     };
   }
@@ -171,187 +174,190 @@ export class editProfile extends Component {
 		const id = open ? 'simple-popover' : undefined;
 
     return (
-      <Grid container className={classes.form} id="container-grid">
-        <Grid item sm >
-          <Button
-            variant="outlined"
-            color="primary"
-            className={classes.back}
-            component={ Link }
-            to='/user'
-          >
-            Back to Profile
-          </Button>
-        </Grid>
-        <Grid item sm>
-          <Typography variant="h2" className={classes.pageTitle}>
-            Edit Profile
-          </Typography>
-          <form noValidate onSubmit={this.handleSubmit}>
-            <Grid container className={classes.form} spacing={4}>
-              <Grid item sm>
-                <TextField
-                  id="firstName"
-                  name="firstName"
-                  label="First Name"
-                  className={classes.textField}
-                  value={this.state.firstName}
-                  helperText={errors.firstName}
-                  error={errors.firstName ? true : false}
-                  variant="outlined"
-                  onChange={this.handleChange}
-                  fullWidth
-                  autoComplete='off'
-                />
-              </Grid>
-              <Grid item sm>
-                <TextField
-                  id="lastName"
-                  name="lastName"
-                  label="Last Name"
-                  className={classes.textField}
-                  value={this.state.lastName}
-                  helperText={errors.lastname}
-                  error={errors.lastName ? true : false}
-                  variant="outlined"
-                  onChange={this.handleChange}
-                  fullWidth
-                  autoComplete='off'
-                />
-              </Grid>
-            </Grid>
-            <TextField
-              id="email"
-              name="email"
-              label="Email*"
-              className={classes.textField}
-              value={this.state.email}
-              disabled
-              helperText="(disabled)"
-              // INFO: These will be uncommented if changing emails is allowed
-              // helperText={errors.email}
-              // error={errors.email ? true : false}
-              variant="outlined"
-              onChange={this.handleChange}
-              fullWidth
-              autoComplete='off'
-            />
-            <TextField
-              id="handle"
-              name="handle"
-              label="Handle*"
-              className={classes.textField}
-              value={this.state.handle}
-              disabled
-              helperText="(disabled)"
-              // INFO: These will be uncommented if changing usernames is allowed
-              // helperText={errors.handle}
-              // error={errors.handle ? true : false}
-              variant="outlined"
-              onChange={this.handleChange}
-              fullWidth
-              autoComplete='off'
-            />
-            <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
-              autoComplete='off'
-            />
+      this.state.pageLoading ? 
+        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
+      :
+        <Grid container className={classes.form} id="container-grid">
+          <Grid item sm >
             <Button
-              type="submit"
-              variant="contained"
+              variant="outlined"
               color="primary"
-              className={classes.button}
-              disabled={loading}
-              //component={ Link }
-              //to='/user'
+              className={classes.back}
+              component={ Link }
+              to='/user'
             >
-              Submit
-              {loading && (
-                <CircularProgress size={30} className={classes.progress} />
-              )}
+              Back to Profile
             </Button>
-            
-          </form>
-        </Grid>
-        <Grid item sm>
-          <Button
-            variant="outlined"
-            color="secondary"
-            className={classes.delete}
-            onClick={this.handleOpenConfirmDelete}
-          >
-            Delete Account
-          </Button>
-        </Grid>
-        <Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box>
-        <Popover
-            id={id}
-            open={open}
-            anchorEl={this.state.anchorEl}
-            onClose={this.handleCloseConfirmDelete}
-            anchorOrigin={{
-              vertical: 'center',
-              horizontal: 'center'
-            }}
-            transformOrigin={{
-              vertical: 'top',
-              horizontal: 'center'
-            }}
-            style={{
-              marginTop: "-200px"
-            }}
-          >
-            <Box
+          </Grid>
+          <Grid item sm>
+            <Typography variant="h2" className={classes.pageTitle}>
+              Edit Profile
+            </Typography>
+            <form noValidate onSubmit={this.handleSubmit}>
+              <Grid container className={classes.form} spacing={4}>
+                <Grid item sm>
+                  <TextField
+                    id="firstName"
+                    name="firstName"
+                    label="First Name"
+                    className={classes.textField}
+                    value={this.state.firstName}
+                    helperText={errors.firstName}
+                    error={errors.firstName ? true : false}
+                    variant="outlined"
+                    onChange={this.handleChange}
+                    fullWidth
+                    autoComplete='off'
+                  />
+                </Grid>
+                <Grid item sm>
+                  <TextField
+                    id="lastName"
+                    name="lastName"
+                    label="Last Name"
+                    className={classes.textField}
+                    value={this.state.lastName}
+                    helperText={errors.lastname}
+                    error={errors.lastName ? true : false}
+                    variant="outlined"
+                    onChange={this.handleChange}
+                    fullWidth
+                    autoComplete='off'
+                  />
+                </Grid>
+              </Grid>
+              <TextField
+                id="email"
+                name="email"
+                label="Email*"
+                className={classes.textField}
+                value={this.state.email}
+                disabled
+                helperText="(disabled)"
+                // INFO: These will be uncommented if changing emails is allowed
+                // helperText={errors.email}
+                // error={errors.email ? true : false}
+                variant="outlined"
+                onChange={this.handleChange}
+                fullWidth
+                autoComplete='off'
+              />
+              <TextField
+                id="handle"
+                name="handle"
+                label="Handle*"
+                className={classes.textField}
+                value={this.state.handle}
+                disabled
+                helperText="(disabled)"
+                // INFO: These will be uncommented if changing usernames is allowed
+                // helperText={errors.handle}
+                // error={errors.handle ? true : false}
+                variant="outlined"
+                onChange={this.handleChange}
+                fullWidth
+                autoComplete='off'
+              />
+              <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
+                autoComplete='off'
+              />
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                className={classes.button}
+                disabled={loading}
+                //component={ Link }
+                //to='/user'
+              >
+                Submit
+                {loading && (
+                  <CircularProgress size={30} className={classes.progress} />
+                )}
+              </Button>
+              
+            </form>
+          </Grid>
+          <Grid item sm>
+            <Button
+              variant="outlined"
+              color="secondary"
+              className={classes.delete}
+              onClick={this.handleOpenConfirmDelete}
+            >
+              Delete Account
+            </Button>
+          </Grid>
+          <Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box>
+          <Popover
+              id={id}
+              open={open}
+              anchorEl={this.state.anchorEl}
+              onClose={this.handleCloseConfirmDelete}
+              anchorOrigin={{
+                vertical: 'center',
+                horizontal: 'center'
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center'
+              }}
               style={{
-                height: 200,
-                width: 400
+                marginTop: "-200px"
               }}
             >
-              <Grid container direction="column" spacing={3}>
-                <Grid item>
-                    <Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography>
+              <Box
+                style={{
+                  height: 200,
+                  width: 400
+                }}
+              >
+                <Grid container direction="column" spacing={3}>
+                  <Grid item>
+                      <Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography>
+                  </Grid>
+                  <Grid item>
+                    <Button 
+                      color="secondary"
+                      variant="contained"
+                      component={ Link }
+                      to='/delete'
+                      style={{
+                        marginBottom: "-40px",
+                        marginLeft: 10,
+                        width: 90
+                      }}
+                    >
+                      Yes
+                    </Button>
+                    <Button 
+                      color="primary"
+                      variant="outlined"
+                      onClick={this.handleCloseConfirmDelete}
+                      style={{
+                        marginBottom: "-40px",
+                        marginLeft: 195
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </Grid>
                 </Grid>
-                <Grid item>
-                  <Button 
-                    color="secondary"
-                    variant="contained"
-                    component={ Link }
-                    to='/delete'
-                    style={{
-                      marginBottom: "-40px",
-                      marginLeft: 10,
-                      width: 90
-                    }}
-                  >
-                    Yes
-                  </Button>
-                  <Button 
-                    color="primary"
-                    variant="outlined"
-                    onClick={this.handleCloseConfirmDelete}
-                    style={{
-                      marginBottom: "-40px",
-                      marginLeft: 195
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                </Grid>
-              </Grid>
-            </Box>
-          </Popover>
-      </Grid>
+              </Box>
+            </Popover>
+        </Grid>
     );
   }
 }