Merge pull request #101 from ClaytonWWilson/confirm-delete

Confirm delete

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} />

twistter-frontend/src/pages/editProfile.js

@@ -1,14 +1,14 @@
 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,14 +38,23 @@ const styles = {
   },
   progress: {
     position: "absolute"
+  },
+  popoverBackground: {
+    marginTop: "-100px",
+    width: "calc(100vw)",
+    height: 'calc(100vh + 100px)',
+    backgroundColor: "gray",
+    position: "absolute",
+    opacity: "70%"
   }
 };
 
-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.
   componentDidMount() {
+    this.setState({pageLoading: true})
     axios
       .get("/getProfileInfo")
       .then((res) => {
@@ -54,16 +63,15 @@ export class edit 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) => {
         console.error(err);
         if (err.response.status === 403) {
-          alert("You are not logged in");
+          // This user is not logged in
-          // TODO: Redirect them, to the profile they are trying to edit
+          this.props.history.push('/');
-          // If they are on /itsjimmy/edit, they will be redirected to /itsjimmy
-          this.props.history.push('../');
         }
       });
   }
@@ -77,7 +85,9 @@ export class edit extends Component {
       email: "",
       handle: "",
       bio: "",
+      anchorEl: null,
       loading: false,
+      pageLoading: false,
       errors: {}
     };
   }
@@ -112,8 +122,7 @@ export class edit extends Component {
         this.setState({
           loading: false
         });
-        // this.props.history.push('/');
+        this.props.history.push('/user');
-        // TODO: Need to redirect user to their profile page
       })
       .catch((err) => {
         console.log(err);
@@ -137,12 +146,33 @@ export class edit 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}>
+      this.state.pageLoading ? 
+        <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
+      :
+        <Grid container className={classes.form} id="container-grid">
           <Grid item sm >
             <Button
               variant="outlined"
@@ -212,7 +242,7 @@ export class edit 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
@@ -260,19 +290,75 @@ export class edit extends Component {
               variant="outlined"
               color="secondary"
               className={classes.delete}
-          component={ Link }
+              onClick={this.handleOpenConfirmDelete}
-          to='/delete'
             >
               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>
     );
   }
 }
 
-edit.propTypes = {
+editProfile.propTypes = {
   classes: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(edit);
+export default withStyles(styles)(editProfile);

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>