From 918f7e9d86a879a05808aa8e551709ef1f856c9b Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 5 May 2022 10:09:16 +0200
Subject: [PATCH] change(ui) - user delete

---
 frontend/app/components/Client/Sites/Sites.js | 15 ++++---
 .../Users/components/UserForm/UserForm.tsx    | 39 ++++++++++++++-----
 .../Users/components/UserList/UserList.tsx    |  1 -
 frontend/app/mstore/userStore.ts              |  8 ++--
 frontend/app/services/UserService.ts          |  2 +-
 5 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/frontend/app/components/Client/Sites/Sites.js b/frontend/app/components/Client/Sites/Sites.js
index 8d53b8eab..19f2b8563 100644
--- a/frontend/app/components/Client/Sites/Sites.js
+++ b/frontend/app/components/Client/Sites/Sites.js
@@ -168,10 +168,13 @@ class Sites extends React.PureComponent {
           </div>
 
           <div className={ stl.list }>
+            <div key={ _site.key } className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b px-2 py-3">
+              <div>Name</div>
+            </div>
             {
               sites.map(_site => (
                 // <div key={ _site.key } data-inactive={ _site.status === RED }>
-                  <div key={ _site.key } className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b py-3">
+                  <div key={ _site.key } className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b px-2 py-3">
                     <div className="col-span-4">
                         <div className="flex items-center">
                           <Popup
@@ -195,22 +198,22 @@ class Sites extends React.PureComponent {
                       <div className={ stl.label}>{_site.projectKey}</div>
                     </div> */}
                     <div className="col-span-4 justify-self-end flex items-center invisible group-hover:visible">
-                      <button
-                        className={cn({'hidden' : !canDeleteSites})}                      
+                      <div className="mr-4"><Button size="small" primary onClick={ () => this.showTrackingCode(_site) }>{ 'Installation' }</Button></div>
+                      {/* <button
+                        className={cn('mx-3', {'hidden' : !canDeleteSites})}
                         disabled={ !canDeleteSites }
                         onClick={ () => canDeleteSites && this.remove(_site) }
                       >
                         <Icon name="trash" size="16" color="teal" />
-                      </button>
+                      </button> */}
                       <button
-                        className={cn({'hidden' : !isAdmin})}
+                        className={cn('mx-3', {'hidden' : !isAdmin})}
                         disabled={ !isAdmin }
                         onClick={ () => isAdmin && this.edit(_site) }
                         data-clickable
                       >
                         <Icon name="edit" size="16" color="teal"/>
                       </button>
-                      <div><Button size="small" outline primary onClick={ () => this.showTrackingCode(_site) }>{ 'Tracking Code' }</Button></div>
                       {/* <button disabled={ !isAdmin } onClick={ () => this.showGDPRForm(_site) } ><Icon name="cog" size="16" color="teal" /></button> */}
                     </div>
                   </div>
diff --git a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
index 19f44235c..c34828ec6 100644
--- a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
+++ b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Input, CopyButton, Button } from 'UI'
+import { Input, CopyButton, Button, Icon } from 'UI'
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 import { useModal } from 'App/components/Modal';
 import Select from 'Shared/Select';
-
+import { confirm } from 'UI/Confirmation';
 interface Props {
     isSmtp?: boolean;
     isEnterprise?: boolean;
@@ -31,6 +31,18 @@ function UserForm(props: Props) {
     const write = ({ target: { name, value } }) => {
         user.updateKey(name, value);
     }
+
+    const deleteHandler = async () => {
+        if (await confirm({
+            header: 'Confirm',
+            confirmButton: 'Yes, delete',
+            confirmation: `Are you sure you want to permanently delete this user?`
+          })) {
+            userStore.deleteUser(user.userId).then(() => {
+                hideModal();
+            });
+        }
+    }
     
     return useObserver(() => (
         <div className="bg-white h-screen p-6" style={{ width: '400px'}}>
@@ -118,14 +130,23 @@ function UserForm(props: Props) {
                             { 'Cancel' }
                         </Button>
                     </div>
-                    { !user.isJoined && user.invitationLink &&
-                        <CopyButton
-                            content={user.invitationLink}
-                            className="link"
-                            btnText="Copy invite link"
-                        />
-                    }
+                    <div>
+                        <Button
+                            data-hidden={ !user.exists() }
+                            onClick={ deleteHandler }
+                        >
+                            <Icon name="trash" size="16" />
+                        </Button>
+                    </div>
                 </div>
+
+                { !user.isJoined && user.invitationLink &&
+                    <CopyButton
+                        content={user.invitationLink}
+                        className="link"
+                        btnText="Copy invite link"
+                    />
+                }
         </div>
     ));
 }
diff --git a/frontend/app/components/Client/Users/components/UserList/UserList.tsx b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
index e0e2e37ff..215d7bf94 100644
--- a/frontend/app/components/Client/Users/components/UserList/UserList.tsx
+++ b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
@@ -27,7 +27,6 @@ function UserList(props) {
     
     useEffect(() => {
         userStore.fetchUsers();
-        editHandler(null);
     }, []);
 
     const editHandler = (user) => {
diff --git a/frontend/app/mstore/userStore.ts b/frontend/app/mstore/userStore.ts
index 640c8910b..af8c93a5f 100644
--- a/frontend/app/mstore/userStore.ts
+++ b/frontend/app/mstore/userStore.ts
@@ -104,17 +104,17 @@ export default class UserStore {
     }
 
     deleteUser(userId: string): Promise<any> {
-        this.loading = true;
+        this.saving = true;
         return new Promise((resolve, reject) => {
             userService.delete(userId)
                 .then(response => {
-                    this.instance = null;
+                    this.list = this.list.filter(user => user.userId !== userId);
                     resolve(response);
                 }).catch(error => {
-                    this.loading = false;
+                    this.saving = false;
                     reject(error);
                 }).finally(() => {
-                    this.loading = false;
+                    this.saving = false;
                 });
         });
     }
diff --git a/frontend/app/services/UserService.ts b/frontend/app/services/UserService.ts
index 4715f2e13..db86fdd7a 100644
--- a/frontend/app/services/UserService.ts
+++ b/frontend/app/services/UserService.ts
@@ -38,7 +38,7 @@ export default class UserService {
     }
 
     delete(userId: string) {
-        return this.client.delete('/users/' + userId)
+        return this.client.delete('/client/members/' + userId)
             .then(response => response.json())
             .then(response => response.data || {});
     }