✨ add delete account feature

src/components/Profile/Dropdown.jsx

@@ -59,9 +59,13 @@ const Overlay = styled.div`
     font-size: 13px;
     font-weight: normal;
   }
+
+  .delete {
+    color: #d62828;
+  }
 `;
 
-const Dropdown = ({ onLogout, history, username, image }) => {
+const Dropdown = ({ onLogout, onDelete, history, username, image }) => {
   const dropdownRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const toggleDropdown = () => setIsOpen(!isOpen);
@@ -107,6 +111,10 @@ const Dropdown = ({ onLogout, history, username, image }) => {
             <span className="material-icons">login</span>
             <h2 className="option-text">Logout</h2>
           </div>
+          <div className="delete option" onClick={() => onDelete(history)}>
+            <span className="material-icons">delete</span>
+            <h2 className="option-text">Delete Account</h2>
+          </div>
         </Overlay>
       )}
     </Container>
@@ -115,6 +123,7 @@ const Dropdown = ({ onLogout, history, username, image }) => {
 
 Dropdown.propTypes = {
   onLogout: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
   }).isRequired,

src/components/Profile/Navbar.jsx

@@ -34,18 +34,24 @@ const Logo = styled(Link)`
   }
 `;
 
-const Navbar = ({ onLogout, username, image }) => (
+const Navbar = ({ onLogout, onDelete, username, image }) => (
   <NavbarContainer>
     <Logo to="/">
       <img src={Icon} alt="product-logo" />
       <h1>Talk.to</h1>
     </Logo>
-    <Dropdown username={username} image={image} onLogout={onLogout} />
+    <Dropdown
+      username={username}
+      image={image}
+      onLogout={onLogout}
+      onDelete={onDelete}
+    />
   </NavbarContainer>
 );
 
 Navbar.propTypes = {
   onLogout: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
 };
 
 export default Navbar;

src/containers/Dashboard.jsx

@@ -7,7 +7,11 @@ import Navbar from "../components/Profile/Navbar";
 import Titlebar from "../components/Profile/Titlebar";
 import Infobox from "../components/Profile/Infobox";
 
-import { fetchUserProfile, logoutUser } from "../redux/actions/authActions";
+import {
+  fetchUserProfile,
+  logoutUser,
+  deleteUser,
+} from "../redux/actions/authActions";
 
 class Dashboard extends React.Component {
   constructor(props) {
@@ -25,12 +29,17 @@ class Dashboard extends React.Component {
   }
 
   render() {
-    const { logoutUser, user } = this.props;
+    const { logoutUser, user, deleteUser } = this.props;
     const { isLoading } = this.state;
 
     return (
       <Layout>
-        <Navbar username={user.name} onLogout={logoutUser} image={user.image} />
+        <Navbar
+          username={user.name}
+          onLogout={logoutUser}
+          onDelete={deleteUser}
+          image={user.image}
+        />
         <Titlebar />
         <Infobox user={user} isLoading={isLoading} />
       </Layout>
@@ -47,6 +56,8 @@ const mapStateToProps = (state) => ({
   user: state.auth.user,
 });
 
-export default connect(mapStateToProps, { fetchUserProfile, logoutUser })(
-  Dashboard
-);
+export default connect(mapStateToProps, {
+  fetchUserProfile,
+  logoutUser,
+  deleteUser,
+})(Dashboard);

src/containers/EditProfile.jsx

@@ -5,7 +5,11 @@ import Layout from "../components/Profile/Layout";
 import Navbar from "../components/Profile/Navbar";
 import Back from "../components/Profile/Back";
 import EditInfo from "../components/Profile/EditInfo";
-import { logoutUser, fetchUserProfile } from "../redux/actions/authActions";
+import {
+  logoutUser,
+  fetchUserProfile,
+  deleteUser,
+} from "../redux/actions/authActions";
 
 class EditProfile extends React.Component {
   constructor(props) {
@@ -23,12 +27,17 @@ class EditProfile extends React.Component {
   }
 
   render() {
-    const { logoutUser, user } = this.props;
+    const { logoutUser, user, deleteUser } = this.props;
     const { isLoading } = this.state;
 
     return (
       <Layout>
-        <Navbar username={user.name} image={user.image} onLogout={logoutUser} />
+        <Navbar
+          username={user.name}
+          image={user.image}
+          onLogout={logoutUser}
+          onDelete={deleteUser}
+        />
         <Back />
         <EditInfo isLoading={isLoading} />
       </Layout>
@@ -43,4 +52,5 @@ const mapStateToProps = (state) => ({
 export default connect(mapStateToProps, {
   logoutUser,
   fetchUserProfile,
+  deleteUser,
 })(EditProfile);

src/redux/actions/authActions.js

@@ -158,8 +158,6 @@ export const editUserProfile = (userdata, history) => (dispatch) => {
     });
 };
 
-// Logout user
-
 export const logoutUser = (history) => (dispatch) => {
   axios
     .get(`${backendURL}/auth/logout`, { withCredentials: true })
@@ -172,6 +170,18 @@ export const logoutUser = (history) => (dispatch) => {
     });
 };
 
+export const deleteUser = (history) => (dispatch) => {
+  axios
+    .delete(`${backendURL}/profile/delete`, { withCredentials: true })
+    .then(() => {
+      dispatch({ type: CLEAR_CURRENT_USER });
+      history.push("/login");
+    })
+    .catch((err) => {
+      throw new Error(err);
+    });
+};
+
 export const setAuthState = (isAuth) => (dispatch) => {
   dispatch({ type: SET_AUTH_STATE, payload: isAuth });
 };