refactor: update usersList

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,8 +20,11 @@ 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';
 
-function UsersList({ location, closeDialog, showDialog }) {
+const UsersList = () => {
     const { users, roles, refetch, loading } = useUsers();
     const {
         removeUser,
@@ -31,13 +33,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,12 +53,12 @@ function UsersList({ location, closeDialog, showDialog }) {
         setDelUser(undefined);
     };
 
-    const openDelDialog = user => e => {
+    const openDelDialog = (user: IUser) => (e: React.SyntheticEvent<Element, Event>) => {
         e.preventDefault();
         setDelDialog(true);
         setDelUser(user);
     };
-    const openPwDialog = user => e => {
+    const openPwDialog = (user: IUser) => (e: React.SyntheticEvent<Element, Event>) => {
         e.preventDefault();
         setPwDialog({ open: true, user });
     };
@@ -79,8 +85,8 @@ function UsersList({ location, closeDialog, showDialog }) {
         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 +162,7 @@ function UsersList({ location, closeDialog, showDialog }) {
             />
 
             <ConditionallyRender
-                condition={delUser}
+                condition={Boolean(delUser)}
                 show={
                     <DelUser
                         showDialog={delDialog}
@@ -170,10 +176,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;