Merge pull request #637 from Unleash/refactor/users-list

Refactor/users list

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-alert */
-import { useContext, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext, useState } from 'react';
 import {
     Table,
     TableBody,
@@ -21,9 +20,14 @@ import loadingData from './loadingData';
 import useLoading from '../../../../hooks/useLoading';
 import usePagination from '../../../../hooks/usePagination';
 import PaginateUI from '../../../common/PaginateUI/PaginateUI';
+import { useHistory } from 'react-router-dom';
+import { IUser } from '../../../../interfaces/user';
+import IRole from '../../../../interfaces/role';
+import useToast from '../../../../hooks/useToast';
 
-function UsersList({ location, closeDialog, showDialog }) {
+const UsersList = () => {
     const { users, roles, refetch, loading } = useUsers();
+    const { setToastData, setToastApiError } = useToast();
     const {
         removeUser,
         changePassword,
@@ -31,13 +35,17 @@ function UsersList({ location, closeDialog, showDialog }) {
         userLoading,
         userApiErrors,
     } = useAdminUsersApi();
+    const history = useHistory();
+    const { location } = history;
     const { hasAccess } = useContext(AccessContext);
-    const [pwDialog, setPwDialog] = useState({ open: false });
+    const [pwDialog, setPwDialog] = useState<{ open: boolean; user?: IUser }>({
+        open: false,
+    });
     const [delDialog, setDelDialog] = useState(false);
     const [showConfirm, setShowConfirm] = useState(false);
     const [emailSent, setEmailSent] = useState(false);
     const [inviteLink, setInviteLink] = useState('');
-    const [delUser, setDelUser] = useState();
+    const [delUser, setDelUser] = useState<IUser>();
     const ref = useLoading(loading);
     const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
         usePagination(users, 50);
@@ -47,40 +55,44 @@ function UsersList({ location, closeDialog, showDialog }) {
         setDelUser(undefined);
     };
 
-    const openDelDialog = user => e => {
-        e.preventDefault();
-        setDelDialog(true);
-        setDelUser(user);
-    };
-    const openPwDialog = user => e => {
-        e.preventDefault();
-        setPwDialog({ open: true, user });
-    };
+    const openDelDialog =
+        (user: IUser) => (e: React.SyntheticEvent<Element, Event>) => {
+            e.preventDefault();
+            setDelDialog(true);
+            setDelUser(user);
+        };
+    const openPwDialog =
+        (user: IUser) => (e: React.SyntheticEvent<Element, Event>) => {
+            e.preventDefault();
+            setPwDialog({ open: true, user });
+        };
 
     const closePwDialog = () => {
         setPwDialog({ open: false });
     };
 
-    const onDeleteUser = () => {
-        removeUser(delUser)
-            .then(() => {
-                refetch();
-                closeDelDialog();
-            })
-            .catch(handleCatch);
+    const onDeleteUser = async () => {
+        try {
+            await removeUser(delUser);
+            setToastData({
+                title: `${delUser?.name} has been deleted`,
+                type: 'success',
+            });
+            refetch();
+            closeDelDialog();
+        } catch (e: any) {
+            setToastApiError(e.toString());
+        }
     };
 
-    const handleCatch = () =>
-        console.log('An exception was thrown and handled.');
-
     const closeConfirm = () => {
         setShowConfirm(false);
         setEmailSent(false);
         setInviteLink('');
     };
 
-    const renderRole = roleId => {
-        const role = roles.find(r => r.id === roleId);
+    const renderRole = (roleId: number) => {
+        const role = roles.find((r: IRole) => r.id === roleId);
         return role ? role.name : '';
     };
 
@@ -156,7 +168,7 @@ function UsersList({ location, closeDialog, showDialog }) {
             />
 
             <ConditionallyRender
-                condition={delUser}
+                condition={Boolean(delUser)}
                 show={
                     <DelUser
                         showDialog={delDialog}
@@ -170,10 +182,6 @@ function UsersList({ location, closeDialog, showDialog }) {
             />
         </div>
     );
-}
-
-UsersList.propTypes = {
-    location: PropTypes.object.isRequired,
 };
 
 export default UsersList;

frontend/src/component/admin/users/index.js

@@ -1,6 +1,5 @@
-import { useContext, useState } from 'react';
-import PropTypes from 'prop-types';
-import UsersList from './UsersList';
+import { useContext } from 'react';
+import UsersList from './UsersList/UsersList';
 import AdminMenu from '../admin-menu';
 import PageContent from '../../../component/common/PageContent/PageContent';
 import AccessContext from '../../../contexts/AccessContext';
@@ -10,21 +9,13 @@ import { Alert } from '@material-ui/lab';
 import HeaderTitle from '../../../component/common/HeaderTitle';
 import { Button } from '@material-ui/core';
 import { useStyles } from './index.styles';
+import { useHistory } from 'react-router-dom';
 
-const UsersAdmin = ({ history }) => {
+const UsersAdmin = () => {
     const { hasAccess } = useContext(AccessContext);
-    const [showDialog, setDialog] = useState(false);
+    const history = useHistory();
     const styles = useStyles();
 
-    const openDialog = e => {
-        e.preventDefault();
-        setDialog(true);
-    };
-
-    const closeDialog = () => {
-        setDialog(false);
-    };
-
     return (
         <div>
             <AdminMenu history={history} />
@@ -59,13 +50,7 @@ const UsersAdmin = ({ history }) => {
             >
                 <ConditionallyRender
                     condition={hasAccess(ADMIN)}
-                    show={
-                        <UsersList
-                            openDialog={openDialog}
-                            closeDialog={closeDialog}
-                            showDialog={showDialog}
-                        />
-                    }
+                    show={<UsersList />}
                     elseShow={
                         <Alert severity="error">
                             You need instance admin to access this section.
@@ -77,9 +62,4 @@ const UsersAdmin = ({ history }) => {
     );
 };
 
-UsersAdmin.propTypes = {
-    match: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired,
-};
-
 export default UsersAdmin;