From 49a4d55f1e808c1857b93dc0ff844f9ff5bead16 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 14:04:40 -0500
Subject: [PATCH 1/5] Rename edit class to editProfile to be more descriptive

---
 twistter-frontend/src/pages/editProfile.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index d90b601..703fa67 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -41,7 +41,7 @@ const styles = {
   }
 };
 
-export class edit extends Component {
+export class editProfile extends Component {
   // Runs as soon as the page loads.
   // Sets the default values of all the textboxes to the data
   // that is stored in the database for the user.
@@ -271,8 +271,8 @@ export class edit extends Component {
   }
 }
 
-edit.propTypes = {
+editProfile.propTypes = {
   classes: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(edit);
+export default withStyles(styles)(editProfile);

From 825c126c6c12df2d75a0d302704777fd97f53598 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 16:26:16 -0500
Subject: [PATCH 2/5] Delete asks you to confirm

---
 twistter-frontend/src/pages/editProfile.js | 107 ++++++++++++++++++---
 1 file changed, 96 insertions(+), 11 deletions(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index 703fa67..539fc8b 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -1,14 +1,16 @@
 import React, { Component } from "react";
+import { Link } from 'react-router-dom';
 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 Box from "@material-ui/core/Box"
 import Button from "@material-ui/core/Button";
-import { Link } from 'react-router-dom';
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
+import Popover from "@material-ui/core/Popover";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
@@ -38,6 +40,14 @@ const styles = {
   },
   progress: {
     position: "absolute"
+  },
+  popoverBackground: {
+    marginTop: "-100px",
+    width: "calc(100vw)",
+    height: 'calc(100vh + 100px)',
+    backgroundColor: "gray",
+    position: "absolute",
+    opacity: "70%"
   }
 };
 
@@ -77,6 +87,7 @@ export class editProfile extends Component {
       email: "",
       handle: "",
       bio: "",
+      anchorEl: null,
       loading: false,
       errors: {}
     };
@@ -137,12 +148,30 @@ export class editProfile extends Component {
     });
   };
 
+  handleOpenConfirmDelete = (event) => {
+		this.setState({
+      // anchorEl: event.currentTarget
+      anchorEl: document.getElementById("container-grid")
+		});
+	};
+
+	handleCloseConfirmDelete = () => {
+		this.setState({
+			anchorEl: null,
+            createDMUsername: ''
+		});
+	};
+
   render() {
     const { classes } = this.props;
     const { errors, loading } = this.state;
 
+    // Used for the delete button
+		const open = Boolean(this.state.anchorEl);
+		const id = open ? 'simple-popover' : undefined;
+
     return (
-      <Grid container className={classes.form}>
+      <Grid container className={classes.form} id="container-grid">
         <Grid item sm >
           <Button
             variant="outlined"
@@ -256,16 +285,72 @@ export class editProfile extends Component {
           </form>
         </Grid>
         <Grid item sm>
-        <Button
-          variant="outlined"
-          color="secondary"
-          className={classes.delete}
-          component={ Link }
-          to='/delete'
-        >
-          Delete Account
-        </Button>
+          <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
+              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>
+            </Box>
+          </Popover>
       </Grid>
     );
   }

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 3/5] 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>
     );
   }
 }

From 5b5e78514244f539f2279f22590e6d20bb846c20 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 16:37:04 -0500
Subject: [PATCH 4/5] Changed the path of the editProfile page

---
 twistter-frontend/src/App.js               |  2 +-
 twistter-frontend/src/pages/editProfile.js | 10 +++-------
 twistter-frontend/src/pages/user.js        |  2 +-
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index 9e29d2e..1ed56dc 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -74,7 +74,7 @@ class App extends Component {
 
                 <Route exact path="/home" component={home} />
                 <Route exact path="/user" component={user} />
-                <Route exact path="/edit" component={editProfile} />
+                <Route exact path="/user/edit" component={editProfile} />
                 <Route exact path="/verify" component={verify} />
                 <Route exact path="/search" component={Search} />
                 <Route exact path="/user/:userhandle" component={otherUser} />
diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index df947fb..fae7f27 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 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 Box from "@material-ui/core/Box"
@@ -72,10 +71,8 @@ export class editProfile extends Component {
       .catch((err) => {
         console.error(err);
         if (err.response.status === 403) {
-          alert("You are not logged in");
-          // TODO: Redirect them, to the profile they are trying to edit
-          // If they are on /itsjimmy/edit, they will be redirected to /itsjimmy
-          this.props.history.push('../');
+          // This user is not logged in
+          this.props.history.push('/');
         }
       });
   }
@@ -126,8 +123,7 @@ export class editProfile extends Component {
         this.setState({
           loading: false
         });
-        // this.props.history.push('/');
-        // TODO: Need to redirect user to their profile page
+        this.props.history.push('/user');
       })
       .catch((err) => {
         console.log(err);
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 97258b0..379cb56 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -248,7 +248,7 @@ class user extends Component {
     // showing the logged in users profile, instead of retreiving the
     // profile based on the URL entered
     let editButtonMarkup = true ? (
-      <Link to="/edit">
+      <Link to="/user/edit">
         <Button className={classes.button} variant="outlined" color="primary">
           Edit Profile
         </Button>

From 2d426840c0d86bd3b57f24e04eb7dfead76c8126 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 16:37:57 -0500
Subject: [PATCH 5/5] Add @ next to handle on editProfile

---
 twistter-frontend/src/pages/editProfile.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/twistter-frontend/src/pages/editProfile.js b/twistter-frontend/src/pages/editProfile.js
index fae7f27..b4f7c2e 100644
--- a/twistter-frontend/src/pages/editProfile.js
+++ b/twistter-frontend/src/pages/editProfile.js
@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import { Link } from 'react-router-dom';
 import axios from "axios";
 import PropTypes from "prop-types";
-// TODO: Add a read-only '@' in the left side of the handle input
 
 // Material-UI stuff
 import Box from "@material-ui/core/Box"
@@ -243,7 +242,7 @@ export class editProfile extends Component {
                 name="handle"
                 label="Handle*"
                 className={classes.textField}
-                value={this.state.handle}
+                value={"@" + this.state.handle}
                 disabled
                 helperText="(disabled)"
                 // INFO: These will be uncommented if changing usernames is allowed