fix issues in users list.

client/src/containers/Preferences/Users/UsersList.js

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { useQuery } from 'react-query';
+import { queryCache,useQuery } from 'react-query';
 import DataTable from 'components/DataTable';
 import {
   Alert,
@@ -10,10 +10,14 @@ import {
   MenuDivider,
   Position,
   Intent,
-  Tag
+  Tag,
 } from '@blueprintjs/core';
 import { snakeCase } from 'lodash';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
 
 import Icon from 'components/Icon';
 import LoadingIndicator from 'components/LoadingIndicator';
@@ -27,13 +31,12 @@ import withUsersActions from 'containers/Users/withUsersActions';
 
 import { compose } from 'utils';
 
-
 function UsersListPreferences({
   // #withDialog
   openDialog,
   closeDialog,
 
-  // #withUsers  
+  // #withUsers
   usersList,
 
   // #withUsersActions
@@ -46,9 +49,8 @@ function UsersListPreferences({
 }) {
   const [deleteUserState, setDeleteUserState] = useState(false);
   const [inactiveUserState, setInactiveUserState] = useState(false);
-  const { formatMessage } = useIntl()
-  const fetchUsers = useQuery('users-table',
-    () => requestFetchUsers());
+  const { formatMessage } = useIntl();
+  const fetchUsers = useQuery('users-table', () => requestFetchUsers());
 
   const onInactiveUser = (user) => {
     setInactiveUserState(user);
@@ -63,9 +65,18 @@ function UsersListPreferences({
   const handleConfirmUserActive = useCallback(() => {
     requestInactiveUser(inactiveUserState.id).then(() => {
       setInactiveUserState(false);
-      AppToaster.show({ message: formatMessage({id:'the_user_has_been_successfully_inactivated'}) });
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_user_has_been_successfully_inactivated',
+        }),
+      });
     });
-  }, [inactiveUserState, requestInactiveUser, requestFetchUsers,formatMessage]);
+  }, [
+    inactiveUserState,
+    requestInactiveUser,
+    requestFetchUsers,
+    formatMessage,
+  ]);
 
   const onDeleteUser = (user) => {
     setDeleteUserState(user);
@@ -75,16 +86,6 @@ function UsersListPreferences({
     setDeleteUserState(false);
   };
 
-  const onEditInviteUser = (user) => () => {
-    const form = Object.keys(user).reduce((obj, key) => {
-      const camelKey = snakeCase(key);
-      obj[camelKey] = user[key];
-      return obj;
-    }, {});
-
-    openDialog('user-form', { action: 'edit', user: form });
-  };
-
   const onEditUser = (user) => () => {
     const form = Object.keys(user).reduce((obj, key) => {
       const camelKey = snakeCase(key);
@@ -95,72 +96,97 @@ function UsersListPreferences({
     openDialog('userList-form', { action: 'edit', user: form });
   };
 
-  const handleConfirmUserDelete = () => {
-    if (!deleteUserState) { return; }
+  // Handle confirm User delete
+
+  const handleConfirmUserDelete =useCallback(()=>{
+    if (!deleteUserState) {
+      return;
+    }
     requestDeleteUser(deleteUserState.id).then((response) => {
       setDeleteUserState(false);
       AppToaster.show({
-        message: formatMessage({id:'the_user_has_been_successfully_deleted'}),
+        message: formatMessage({
+          id: 'the_user_has_been_successfully_deleted',
+        }),
+        intent:Intent.SUCCESS,
       });
-    });
-  };
+      queryCache.refetchQueries('users-table',{force:true})
+    }).catch((errors)=>{
+      setDeleteUserState(false)
+    })
+  },[deleteUserState,requestDeleteUser,formatMessage])
+
 
   const actionMenuList = useCallback(
     (user) => (
       <Menu>
         <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
-        <MenuDivider />
-        <MenuItem text={<T id={'edit_invite'} />} onClick={onEditInviteUser(user)} />
-        <MenuItem text={<T id={'inactivate_user'} />} onClick={() => onInactiveUser(user)} />
-        <MenuItem text={<T id={'delete_user'} />} onClick={() => onDeleteUser(user)} />
+        <MenuItem
+          text={<T id={'inactivate_user'} />}
+          onClick={() => onInactiveUser(user)}
+        />
+        <MenuItem
+          text={<T id={'delete_user'} />}
+          onClick={() => onDeleteUser(user)}
+        />
       </Menu>
     ),
-    []
+    [],
   );
 
-  const columns = useMemo(() => [
-    {
-      id: 'full_name',
-      Header:formatMessage({id:'full_name'}),
+  const columns = useMemo(
+    () => [
+      {
+        id: 'full_name',
+        Header: formatMessage({ id: 'full_name' }),
         accessor: 'full_name',
-      width: 170,
-    },
-    {
-      id: 'email',
-      Header: formatMessage({id:'email'}),
-      accessor: 'email',
-      width: 150,
-    },
-    {
-      id: 'phone_number',
-      Header: formatMessage({id:'phone_number'}),
-      accessor: 'phone_number',
-      width: 150,
-    },
-    {
-      id: 'active',
-      Header: 'Status',
-      accessor: (user) => user.active ?
-        <Tag intent={Intent.SUCCESS} minimal={true}><T id={'activate'} /></Tag> :
-        <Tag intent={Intent.WARNING} minimal={true}><T id={'inactivate'} /></Tag>,
-      width: 50,
-      className: 'status',
-    },
-    {
-      id: 'actions',
-      Header: '',
-      Cell: ({ cell }) => (
-        <Popover
-          content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_TOP}
-        >
-          <Button icon={<Icon icon='ellipsis-h' />} />
-        </Popover>
-      ),
-      className: 'actions',
-      width: 50,
-    },
-  ], [actionMenuList,formatMessage]);
+        width: 150,
+      },
+      {
+        id: 'email',
+        Header: formatMessage({ id: 'email' }),
+        accessor: 'email',
+        width: 150,
+      },
+      {
+        id: 'phone_number',
+        Header: formatMessage({ id: 'phone_number' }),
+        accessor: 'phone_number',
+        width: 120,
+      },
+      {
+        id: 'active',
+        Header: 'Status',
+        accessor: (user) =>
+          user.active ? (
+            <Tag intent={Intent.SUCCESS} minimal={true}>
+              <T id={'activate'} />
+            </Tag>
+          ) : (
+            <Tag intent={Intent.WARNING} minimal={true}>
+              <T id={'inactivate'} />
+            </Tag>
+          ),
+        width: 50,
+        className: 'status',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_TOP}
+          >
+            <Button icon={<Icon icon="ellipsis-h" />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
 
   const handelDataTableFetchData = useCallback(() => {
     onFetchData && onFetchData();
@@ -178,32 +204,31 @@ function UsersListPreferences({
       />
 
       <Alert
-        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText={<T id={'move_to_trash'}/>}
-        icon='trash'
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={<T id={'delete'} />}
+        icon="trash"
         intent={Intent.DANGER}
         isOpen={deleteUserState}
         onCancel={handleCancelUserDelete}
         onConfirm={handleConfirmUserDelete}
       >
         <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be
-          able to restore it later, but it will become private to you.
+          <FormattedHTMLMessage
+            id={'once_delete_this_account_you_will_able_to_restore_it'}
+          />
         </p>
       </Alert>
 
       <Alert
-        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText={<T id={'inactivate'}/>}
-        icon='trash'
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={<T id={'inactivate'} />}
         intent={Intent.WARNING}
         isOpen={inactiveUserState}
         onCancel={handleCancelInactiveUser}
         onConfirm={handleConfirmUserActive}
       >
         <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be
-          able to restore it later, but it will become private to you.
+          <T id={'are_sure_to_inactive_this_account'} />
         </p>
       </Alert>
     </LoadingIndicator>