From ad853923c8c2d47e58b0cd2faa3cfaba5a7bf6f7 Mon Sep 17 00:00:00 2001
From: Aaron Sun <aaronsun@live.com>
Date: Wed, 23 Oct 2019 17:18:52 -0400
Subject: [PATCH] Delete Account on UI can log the user out

---
 functions/handlers/users.js                   | 28 ----------
 twistter-frontend/src/App.js                  |  2 +
 .../src/components/layout/NavBar.js           |  9 ++-
 twistter-frontend/src/pages/Delete.js         | 56 +++++++++++++++++++
 .../src/redux/actions/userActions.js          |  6 ++
 5 files changed, 70 insertions(+), 31 deletions(-)
 create mode 100644 twistter-frontend/src/pages/Delete.js

diff --git a/functions/handlers/users.js b/functions/handlers/users.js
index 4371148..7f5a39a 100644
--- a/functions/handlers/users.js
+++ b/functions/handlers/users.js
@@ -166,34 +166,6 @@ exports.deleteUser = (req, res) => {
       res.status(500).send("Cannot get user");
     }
   });
-
-  //var user = firebase.auth().currentUser;
-
-  /*user.delete()
-  .then(function() {
-    console.log("User successfully deleted!");
-    res.status(200).send("Deleted user.");
-    return;
-  })
-  .catch(function(error) {
-    console.log("Error deleting user.", err);
-    res.status(500).send("Failed to delete user.");
-  });*/
-  
-  /*admin.auth().getUserByEmail(req.body.email)
-  .then(userRecord => {
-    const uid = userRecord.uid;
-    return admin.auth().deleteUser(uid);
-  })
-  .then(() => {
-    console.log("User successfully deleted!");
-    res.status(200).send("Deleted user.");
-    return;
-  })
-  .catch(err => {
-    console.log("Error deleting user.", err);
-    res.status(500).send("Failed to delete user.");
-  });*/
 };
 
 // Returns all data in the database for the user who is currently signed in
diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index b4b1aec..b767156 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -25,6 +25,7 @@ import signup from './pages/Signup';
 import login from './pages/Login';
 import user from './pages/user';
 import logout from './pages/Logout';
+import Delete from './pages/Delete';
 import writeMicroblog from './Writing_Microblogs.js';
 import editProfile from './pages/editProfile';
 import userLine from './Userline.js';
@@ -61,6 +62,7 @@ class App extends Component {
               <AuthRoute exact path="/signup" component={signup} />
               <AuthRoute exact path="/login" component={login} />
               <Route exact path="/logout" component={logout} />
+              <Route exact path="/delete" component={Delete} />
 
               <Route exact path="/user" component={user} />
               <Route exact path="/home" component={writeMicroblog} />
diff --git a/twistter-frontend/src/components/layout/NavBar.js b/twistter-frontend/src/components/layout/NavBar.js
index 92ad833..5f8d28d 100644
--- a/twistter-frontend/src/components/layout/NavBar.js
+++ b/twistter-frontend/src/components/layout/NavBar.js
@@ -50,9 +50,12 @@ import withStyles from "@material-ui/core/styles/withStyles";
                     <Button component={ Link } to='/signup'>
                         Sign Up
                     </Button>
-		    <Button component={ Link } to='/logout'>
-			Logout
-		    </Button>
+                    <Button component={ Link } to='/logout'>
+                        Logout
+                    </Button>
+                    <Button component={ Link } to='/delete'>
+                        Delete Account
+                    </Button>
                 </ToolBar>
             </AppBar>
         )
diff --git a/twistter-frontend/src/pages/Delete.js b/twistter-frontend/src/pages/Delete.js
new file mode 100644
index 0000000..22f1682
--- /dev/null
+++ b/twistter-frontend/src/pages/Delete.js
@@ -0,0 +1,56 @@
+/* eslint-disable */
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+// Material UI stuff
+import Button from "@material-ui/core/Button";
+import withStyles from "@material-ui/core/styles/withStyles";
+
+// Redux stuff
+import { deleteUser } from "../redux/actions/userActions";
+import { connect } from "react-redux";
+
+const styles = {
+  form: {
+    textAlign: "center"
+  },
+  textField: {
+    marginBottom: 30
+  },
+  pageTitle: {
+    marginBottom: 40
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
+  },
+  progress: {
+    position: "absolute"
+  }
+};
+
+export class Delete extends Component {
+
+  componentDidMount() {
+    this.props.deleteUser();
+    this.props.history.push('/');
+  }
+
+  render() {
+    return null;
+  }
+}
+
+const mapStateToProps = (state) => ({
+  user: state.user
+});
+
+const mapActionsToProps = { deleteUser };
+
+Delete.propTypes = {
+  deleteUser: PropTypes.func.isRequired,
+  user: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
+};
+
+export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Delete));
diff --git a/twistter-frontend/src/redux/actions/userActions.js b/twistter-frontend/src/redux/actions/userActions.js
index 9b9b9a1..f6cd7f9 100644
--- a/twistter-frontend/src/redux/actions/userActions.js
+++ b/twistter-frontend/src/redux/actions/userActions.js
@@ -61,6 +61,12 @@ export const logoutUser = () => (dispatch) => {
     dispatch({ type: SET_UNAUTHENTICATED });
 }
 
+export const deleteUser = () => (dispatch) => {
+  localStorage.removeItem('FBIdToken');
+  delete axios.defaults.headers.common['Authorization'];
+  dispatch({ type: SET_UNAUTHENTICATED });
+}
+
 const setAuthorizationHeader = (token) => {
     const FBIdToken = `Bearer ${token}`;
     localStorage.setItem('FBIdToken', FBIdToken);