+
+
+
-
-
-
-
-
{t('organizationList')}
+
+
+
+
+
+ {t('sort')}
+
+
+ Action 1
+ Action 2
+ Action 3
+
+
+
+
+
+ {t('filter')}
+
+
+ Action 1
+ Action 2
+ Action 3
+
+
-
+ {userData && userData.user.userType === 'SUPERADMIN' && (
+ )}
+
+
+ {/* Organizations List */}
+ {!loading &&
+ ((orgsData?.organizationsConnection.length === 0 &&
+ searchByName.length == 0) ||
+ (userData &&
+ userData.user.userType === 'ADMIN' &&
+ userData.user.adminFor.length === 0)) ? (
+ // eslint-disable-next-line
+
+
{t('noOrgErrorTitle')}
+ {t('noOrgErrorDescription')}
+
+ ) : !loading &&
+ orgsData?.organizationsConnection.length == 0 &&
+ /* istanbul ignore next */
+ searchByName.length > 0 ? (
+ /* istanbul ignore next */
+ // eslint-disable-next-line
+
+
+ {t('noResultsFoundFor')} "{searchByName}"
+
+
+ ) : (
+ <>
+ )}
+
+ {loading ? (
+ <>
+ {[...Array(8)].map((_, index) => (
+
+ ))}
+
+ ) : userData && userData.user.userType == 'SUPERADMIN' ? (
+ orgsData?.organizationsConnection.map((item) => {
+ return (
+
+
+
+ );
+ })
+ ) : userData &&
+ userData.user.userType == 'ADMIN' &&
+ userData.user.adminFor.length > 0 ? (
+ orgsData?.organizationsConnection.map((item) => {
+ if (isAdminForCurrentOrg(item)) {
+ return (
+
+
+
+ );
+ }
+ })
+ ) : null}
+
+ {/* Create Organization Modal */}
+
+
+
+ {t('createOrganization')}
+
+
+
-
- {data?.organizationsConnection.length > 0 ? (
- (rowsPerPage > 0
- ? dataRevOrg.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : data.organizationsConnection
- ).map(
- (datas: {
- _id: string;
- image: string;
- name: string;
- admins: any;
- members: any;
- createdAt: string;
- location: string | null;
- }) => {
- if (data2 && data2.user.userType == 'SUPERADMIN') {
- return (
-
- );
- } else if (isAdminForCurrentOrg(data2?.user, datas)) {
- /* istanbul ignore next */
- return (
-
- );
- } else {
- return null;
- }
- }
- )
- ) : (
-
-
- {t('noOrgErrorTitle')}
- {t('noOrgErrorDescription')}
-
-
- )}
-
-
-
{t('description')}
+ {
+ setFormState({
+ ...formState,
+ descrip: e.target.value,
+ });
}}
- >
-
- {data2?.user.userType === 'SUPERADMIN' && (
-
-
-
- )}
-
-
-
-
-
-
-
-
- {t('createOrganization')}
-
-
-
-
+
+
+
+
-
-
+
+
);
}
diff --git a/src/screens/OrgList/OrgListMocks.ts b/src/screens/OrgList/OrgListMocks.ts
new file mode 100644
index 0000000000..8958574e61
--- /dev/null
+++ b/src/screens/OrgList/OrgListMocks.ts
@@ -0,0 +1,146 @@
+import {
+ ORGANIZATION_CONNECTION_LIST,
+ USER_ORGANIZATION_LIST,
+} from 'GraphQl/Queries/Queries';
+import 'jest-localstorage-mock';
+import 'jest-location-mock';
+import type {
+ InterfaceOrgConnectionInfoType,
+ InterfaceUserType,
+} from 'utils/interfaces';
+
+const superAdminUser: InterfaceUserType = {
+ user: {
+ firstName: 'John',
+ lastName: 'Doe',
+ image: '',
+ email: 'John_Does_Palasidoes@gmail.com',
+ userType: 'SUPERADMIN',
+ adminFor: [
+ {
+ _id: '1',
+ name: 'Akatsuki',
+ image: '',
+ },
+ ],
+ },
+};
+
+const adminUser: InterfaceUserType = {
+ user: { ...superAdminUser.user, userType: 'ADMIN' },
+};
+
+const organizations: InterfaceOrgConnectionInfoType[] = [
+ {
+ _id: '1',
+ creator: { _id: 'xyz', firstName: 'John', lastName: 'Doe' },
+ image: '',
+ name: 'Akatsuki',
+ createdAt: '02/02/2022',
+ admins: [
+ {
+ _id: '123',
+ },
+ ],
+ members: [
+ {
+ _id: '234',
+ },
+ ],
+ location: 'Washington DC',
+ },
+];
+
+for (let x = 0; x < 100; x++) {
+ organizations.push({
+ _id: 'a' + x,
+ image: '',
+ name: 'name',
+ creator: {
+ _id: '123',
+ firstName: 'firstName',
+ lastName: 'lastName',
+ },
+ admins: [
+ {
+ _id: x + '1',
+ },
+ ],
+ members: [
+ {
+ _id: x + '2',
+ },
+ ],
+ createdAt: new Date().toISOString(),
+ location: 'location',
+ });
+}
+
+// MOCKS FOR SUPERADMIN
+const MOCKS = [
+ {
+ request: {
+ query: ORGANIZATION_CONNECTION_LIST,
+ },
+ result: {
+ data: {
+ organizationsConnection: organizations,
+ },
+ },
+ },
+ {
+ request: {
+ query: USER_ORGANIZATION_LIST,
+ variables: { id: '123' },
+ },
+ result: {
+ data: superAdminUser,
+ },
+ },
+];
+const MOCKS_EMPTY = [
+ {
+ request: {
+ query: ORGANIZATION_CONNECTION_LIST,
+ },
+ result: {
+ data: {
+ organizationsConnection: [],
+ },
+ },
+ },
+ {
+ request: {
+ query: USER_ORGANIZATION_LIST,
+ variables: { id: '123' },
+ },
+ result: {
+ data: superAdminUser,
+ },
+ },
+];
+
+// MOCKS FOR ADMIN
+const MOCKS_ADMIN = [
+ {
+ request: {
+ query: ORGANIZATION_CONNECTION_LIST,
+ },
+ result: {
+ data: {
+ organizationsConnection: organizations,
+ },
+ },
+ },
+ {
+ request: {
+ query: USER_ORGANIZATION_LIST,
+ variables: { id: '123' },
+ },
+ result: {
+ data: adminUser,
+ },
+ },
+];
+
+export { MOCKS, MOCKS_EMPTY, MOCKS_ADMIN };
diff --git a/src/screens/Requests/Requests.module.css b/src/screens/Requests/Requests.module.css
index 06cccbba21..0750dba108 100644
--- a/src/screens/Requests/Requests.module.css
+++ b/src/screens/Requests/Requests.module.css
@@ -1,109 +1,95 @@
-.mainpage {
+.btnsContainer {
display: flex;
- flex-direction: row;
+ margin: 2.5rem 0 2.5rem 0;
}
-.sidebar {
- z-index: 0;
- padding-top: 5px;
- margin: 0;
- height: 100%;
-}
-.sidebar:after {
- content: '';
- background-color: #f7f7f7;
- position: absolute;
- width: 2px;
- height: 600px;
- top: 10px;
- left: 94%;
- display: block;
-}
-.sidebarsticky {
- padding-left: 45px;
+
+.btnsContainer .btnsBlock {
+ display: flex;
}
-.sidebarsticky > input {
- text-decoration: none;
- margin-bottom: 50px;
- border-color: #e8e5e5;
- width: 80%;
- border-radius: 7px;
- padding-top: 5px;
- padding-bottom: 5px;
- padding-right: 10px;
- padding-left: 10px;
- box-shadow: none;
+
+.btnsContainer .btnsBlock button {
+ margin-left: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.navitem {
- padding-left: 27%;
- padding-top: 12px;
- padding-bottom: 12px;
- cursor: pointer;
+.btnsContainer .inputContainer {
+ flex: 1;
+ position: relative;
+}
+.btnsContainer .input {
+ width: 70%;
+ position: relative;
}
-.searchtitle {
- color: #707070;
- font-weight: 600;
- font-size: 18px;
- margin-bottom: 20px;
- padding-bottom: 5px;
- border-bottom: 3px solid #31bb6b;
- width: 60%;
+.btnsContainer input {
+ outline: 1px solid var(--bs-gray-400);
}
-.logintitle {
- color: #707070;
- font-weight: 600;
- font-size: 20px;
- margin-bottom: 30px;
- padding-bottom: 5px;
- border-bottom: 3px solid #31bb6b;
- width: 15%;
+.btnsContainer .inputContainer button {
+ width: 52px;
}
-.mainpageright > hr {
- margin-top: 20px;
+.listBox {
width: 100%;
- margin-left: -15px;
- margin-right: -15px;
- margin-bottom: 20px;
+ flex: 1;
}
-.justifysp {
+
+.notFound {
+ flex: 1;
display: flex;
- justify-content: space-between;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
}
-@media screen and (max-width: 575.5px) {
- .justifysp {
- padding-left: 55px;
- display: flex;
- justify-content: space-between;
+@media (max-width: 1020px) {
+ .btnsContainer {
+ flex-direction: column;
+ margin: 1.5rem 0;
+ }
+ .btnsContainer .input {
width: 100%;
}
+ .btnsContainer .btnsBlock {
+ margin: 1.5rem 0 0 0;
+ justify-content: space-between;
+ }
- .mainpageright {
- width: 100%;
+ .btnsContainer .btnsBlock button {
+ margin: 0;
}
-}
-.list_box {
- height: 70vh;
- overflow-y: auto;
- width: auto;
- padding-right: 50px;
+ .btnsContainer .btnsBlock div button {
+ margin-right: 1.5rem;
+ }
}
-@media only screen and (max-width: 600px) {
- .sidebar {
- position: relative;
- bottom: 18px;
+/* For mobile devices */
+
+@media (max-width: 520px) {
+ .btnsContainer {
+ margin-bottom: 0;
}
- .invitebtn {
- width: 135px;
- position: relative;
- right: 10px;
+
+ .btnsContainer .btnsBlock {
+ display: block;
+ margin-top: 1rem;
+ margin-right: 0;
}
- .userListTable {
- margin-left: 40px;
+
+ .btnsContainer .btnsBlock div {
+ flex: 1;
+ }
+
+ .btnsContainer .btnsBlock div[title='Sort organizations'] {
+ margin-right: 0.5rem;
+ }
+
+ .btnsContainer .btnsBlock button {
+ margin-bottom: 1rem;
+ margin-right: 0;
+ width: 100%;
}
}
diff --git a/src/screens/Requests/Requests.test.tsx b/src/screens/Requests/Requests.test.tsx
index ff6183c41e..ee532f43c9 100644
--- a/src/screens/Requests/Requests.test.tsx
+++ b/src/screens/Requests/Requests.test.tsx
@@ -9,12 +9,13 @@ import 'jest-location-mock';
import Requests from './Requests';
import {
- ACCPET_ADMIN_MUTATION,
+ ACCEPT_ADMIN_MUTATION,
REJECT_ADMIN_MUTATION,
} from 'GraphQl/Mutations/mutations';
import {
ORGANIZATION_CONNECTION_LIST,
USER_LIST,
+ USER_ORGANIZATION_LIST,
} from 'GraphQl/Queries/Queries';
import { store } from 'state/store';
import userEvent from '@testing-library/user-event';
@@ -23,6 +24,28 @@ import { StaticMockLink } from 'utils/StaticMockLink';
import { ToastContainer } from 'react-toastify';
const MOCKS = [
+ {
+ request: {
+ query: USER_ORGANIZATION_LIST,
+ variables: { id: localStorage.getItem('id') },
+ },
+ result: {
+ data: {
+ user: {
+ userType: 'SUPERADMIN',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: '',
+ email: 'John_Does_Palasidoes@gmail.com',
+ adminFor: {
+ _id: 1,
+ name: 'Akatsuki',
+ image: '',
+ },
+ },
+ },
+ },
+ },
{
request: {
query: USER_LIST,
@@ -102,7 +125,7 @@ const MOCKS = [
},
{
request: {
- query: ACCPET_ADMIN_MUTATION,
+ query: ACCEPT_ADMIN_MUTATION,
variables: {
id: '123',
userType: 'ADMIN',
@@ -133,7 +156,7 @@ const MOCKS = [
const EMPTY_ORG_MOCKS = [
{
request: {
- query: ACCPET_ADMIN_MUTATION,
+ query: ACCEPT_ADMIN_MUTATION,
variables: {
id: '123',
userType: 'ADMIN',
@@ -216,9 +239,9 @@ async function wait(ms = 100): Promise
{
describe('Testing Request screen', () => {
test('Component should be rendered properly', async () => {
window.location.assign('/orglist');
-
+ localStorage.setItem('UserType', 'SUPERADMIN');
render(
-
+
@@ -230,9 +253,7 @@ describe('Testing Request screen', () => {
);
await wait();
-
- expect(screen.getByText(/Requests/i)).toBeInTheDocument();
- expect(screen.getByText(/Search By Name/i)).toBeInTheDocument();
+ expect(screen.getByTestId(/searchByName/i)).toBeInTheDocument();
expect(window.location).toBeAt('/orglist');
});
@@ -256,7 +277,7 @@ describe('Testing Request screen', () => {
test('Testing seach by name functionality', async () => {
render(
-
+
@@ -274,7 +295,7 @@ describe('Testing Request screen', () => {
test('Testing accept user functionality', async () => {
render(
-
+
@@ -286,13 +307,12 @@ describe('Testing Request screen', () => {
);
await wait();
-
userEvent.click(screen.getByTestId(/acceptUser456/i));
});
test('Testing reject user functionality', async () => {
render(
-
+
@@ -304,7 +324,6 @@ describe('Testing Request screen', () => {
);
await wait();
-
userEvent.click(screen.getByTestId(/rejectUser456/i));
});
diff --git a/src/screens/Requests/Requests.tsx b/src/screens/Requests/Requests.tsx
index 3dc20468e9..7a40b9e60a 100644
--- a/src/screens/Requests/Requests.tsx
+++ b/src/screens/Requests/Requests.tsx
@@ -1,92 +1,104 @@
-import React, { useEffect, useState } from 'react';
-import { Col, Form, Row } from 'react-bootstrap';
import { useMutation, useQuery } from '@apollo/client';
-import { toast } from 'react-toastify';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect, useState } from 'react';
+import { Dropdown, Form, Table } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
-import styles from './Requests.module.css';
-import ListNavbar from 'components/ListNavbar/ListNavbar';
+import { Search } from '@mui/icons-material';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SortIcon from '@mui/icons-material/Sort';
+import {
+ ACCEPT_ADMIN_MUTATION,
+ REJECT_ADMIN_MUTATION,
+} from 'GraphQl/Mutations/mutations';
import {
ORGANIZATION_CONNECTION_LIST,
USER_LIST,
+ USER_ORGANIZATION_LIST,
} from 'GraphQl/Queries/Queries';
-import {
- ACCPET_ADMIN_MUTATION,
- REJECT_ADMIN_MUTATION,
-} from 'GraphQl/Mutations/mutations';
-import PaginationList from 'components/PaginationList/PaginationList';
+import SuperAdminScreen from 'components/SuperAdminScreen/SuperAdminScreen';
import { errorHandler } from 'utils/errorHandler';
+import type {
+ InterfaceOrgConnectionType,
+ InterfaceUserType,
+} from 'utils/interfaces';
+import styles from './Requests.module.css';
+import debounce from 'utils/debounce';
const Requests = (): JSX.Element => {
const { t } = useTranslation('translation', { keyPrefix: 'requests' });
document.title = t('title');
- const [componentLoader, setComponentLoader] = useState(true);
const [usersData, setUsersData] = useState([]);
- const [page, setPage] = useState(0);
- const [rowsPerPage, setRowsPerPage] = useState(10);
const [searchByName, setSearchByName] = useState('');
+ const [acceptAdminFunc] = useMutation(ACCEPT_ADMIN_MUTATION);
+ const [rejectAdminFunc] = useMutation(REJECT_ADMIN_MUTATION);
+ const {
+ data: currentUserData,
+ }: {
+ data: InterfaceUserType | undefined;
+ loading: boolean;
+ error?: Error | undefined;
+ } = useQuery(USER_ORGANIZATION_LIST, {
+ variables: { id: localStorage.getItem('id') },
+ });
+
+ const {
+ data: dataUsers,
+ loading: loadingUsers,
+ refetch: refetchUsers,
+ } = useQuery(USER_LIST, {
+ notifyOnNetworkStatusChange: true,
+ });
+
+ const {
+ data: dataOrgs,
+ }: {
+ data: InterfaceOrgConnectionType | undefined;
+ error?: Error;
+ } = useQuery(ORGANIZATION_CONNECTION_LIST);
+
+ // To clear the search when the component is unmounted
+ useEffect(() => {
+ return () => {
+ setSearchByName('');
+ };
+ }, []);
+
+ // If the user is not Superadmin, redirect to Organizations screen
useEffect(() => {
const userType = localStorage.getItem('UserType');
if (userType != 'SUPERADMIN') {
window.location.assign('/orglist');
}
-
- setComponentLoader(false);
}, []);
- const { data: userData, loading: userLoading, refetch } = useQuery(USER_LIST);
-
- const [acceptAdminFunc] = useMutation(ACCPET_ADMIN_MUTATION);
- const [rejectAdminFunc] = useMutation(REJECT_ADMIN_MUTATION);
-
- const { data: dataOrgs } = useQuery(ORGANIZATION_CONNECTION_LIST);
-
+ // Check if there are no organizations then show a warning
useEffect(() => {
if (!dataOrgs) {
return;
}
-
if (dataOrgs.organizationsConnection.length === 0) {
toast.warning(t('noOrgError'));
}
}, [dataOrgs]);
+ // Set the usersData to the users that are not approved yet after every api call
useEffect(() => {
- if (userData) {
+ if (dataUsers) {
setUsersData(
- userData.users.filter(
+ dataUsers.users.filter(
(user: any) =>
user.userType === 'ADMIN' && user.adminApproved === false
)
);
}
- }, [userData]);
-
- if (componentLoader || userLoading) {
- return ;
- }
-
- const handleChangePage = (
- event: React.MouseEvent | null,
- newPage: number
- ): void => {
- /* istanbul ignore next */
- setPage(newPage);
- };
-
- /* istanbul ignore next */
- const handleChangeRowsPerPage = (
- event: React.ChangeEvent
- ): void => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
+ }, [dataUsers]);
- const accpetAdmin = async (userId: any): Promise => {
+ const acceptAdmin = async (userId: any): Promise => {
try {
const { data } = await acceptAdminFunc({
variables: {
@@ -127,126 +139,153 @@ const Requests = (): JSX.Element => {
const handleSearchByName = (e: any): any => {
const { value } = e.target;
setSearchByName(value);
-
- refetch({
- filter: searchByName,
+ refetchUsers({
+ firstName_contains: value,
+ lastName_contains: '',
+ // Later on we can add several search and filter options
});
};
+ const debouncedHandleSearchByName = debounce(handleSearchByName);
+
return (
<>
-
-
-
-
-
-
{t('searchByName')}
+
+ {/* Buttons Container */}
+
+
-
-
-
-
- {t('requests')}
-
-
-
-
-
-
- | # |
- {t('name')} |
- {t('email')} |
- {t('accept')} |
- {t('reject')} |
-
-
-
- {(rowsPerPage > 0
- ? usersData.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : usersData
- ).map(
- (
- user: {
- _id: string;
- firstName: string;
- lastName: string;
- email: string;
- userType: string;
- },
- index: number
- ) => {
- return (
-
- | {page * 10 + (index + 1)} |
- {`${user.firstName} ${user.lastName}`} |
- {user.email} |
-
-
- |
-
-
- |
-
- );
- }
- )}
-
-
-
-
-
-
+
+
+
+
+
+ {t('sort')}
+
+
+ Action 1
+ Action 2
+ Action 3
+
+
+
+
+
+ {t('filter')}
+
+
+ Action 1
+ Action 2
+ Action 3
+
+
-
-
+
+ {loadingUsers ? (
+
+
{t('loadingRequests')}
+
+ ) : usersData.length === 0 && searchByName.length > 0 ? (
+
+
+ {t('noResultsFoundFor')} "{searchByName}"
+
+
+ ) : usersData.length === 0 ? (
+
+
{t('noRequestFound')}
+
+ ) : (
+
+
+
+
+ | # |
+ {t('name')} |
+ {t('email')} |
+ {t('accept')} |
+ {t('reject')} |
+
+
+
+ {usersData.map(
+ (
+ user: {
+ _id: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ userType: string;
+ },
+ index: number
+ ) => {
+ return (
+
+ | {index + 1} |
+ {`${user.firstName} ${user.lastName}`} |
+ {user.email} |
+
+
+ |
+
+
+ |
+
+ );
+ }
+ )}
+
+
+
+ )}
+
);
};
diff --git a/src/screens/Roles/Roles.module.css b/src/screens/Roles/Roles.module.css
index 06cccbba21..0750dba108 100644
--- a/src/screens/Roles/Roles.module.css
+++ b/src/screens/Roles/Roles.module.css
@@ -1,109 +1,95 @@
-.mainpage {
+.btnsContainer {
display: flex;
- flex-direction: row;
+ margin: 2.5rem 0 2.5rem 0;
}
-.sidebar {
- z-index: 0;
- padding-top: 5px;
- margin: 0;
- height: 100%;
-}
-.sidebar:after {
- content: '';
- background-color: #f7f7f7;
- position: absolute;
- width: 2px;
- height: 600px;
- top: 10px;
- left: 94%;
- display: block;
-}
-.sidebarsticky {
- padding-left: 45px;
+
+.btnsContainer .btnsBlock {
+ display: flex;
}
-.sidebarsticky > input {
- text-decoration: none;
- margin-bottom: 50px;
- border-color: #e8e5e5;
- width: 80%;
- border-radius: 7px;
- padding-top: 5px;
- padding-bottom: 5px;
- padding-right: 10px;
- padding-left: 10px;
- box-shadow: none;
+
+.btnsContainer .btnsBlock button {
+ margin-left: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.navitem {
- padding-left: 27%;
- padding-top: 12px;
- padding-bottom: 12px;
- cursor: pointer;
+.btnsContainer .inputContainer {
+ flex: 1;
+ position: relative;
+}
+.btnsContainer .input {
+ width: 70%;
+ position: relative;
}
-.searchtitle {
- color: #707070;
- font-weight: 600;
- font-size: 18px;
- margin-bottom: 20px;
- padding-bottom: 5px;
- border-bottom: 3px solid #31bb6b;
- width: 60%;
+.btnsContainer input {
+ outline: 1px solid var(--bs-gray-400);
}
-.logintitle {
- color: #707070;
- font-weight: 600;
- font-size: 20px;
- margin-bottom: 30px;
- padding-bottom: 5px;
- border-bottom: 3px solid #31bb6b;
- width: 15%;
+.btnsContainer .inputContainer button {
+ width: 52px;
}
-.mainpageright > hr {
- margin-top: 20px;
+.listBox {
width: 100%;
- margin-left: -15px;
- margin-right: -15px;
- margin-bottom: 20px;
+ flex: 1;
}
-.justifysp {
+
+.notFound {
+ flex: 1;
display: flex;
- justify-content: space-between;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
}
-@media screen and (max-width: 575.5px) {
- .justifysp {
- padding-left: 55px;
- display: flex;
- justify-content: space-between;
+@media (max-width: 1020px) {
+ .btnsContainer {
+ flex-direction: column;
+ margin: 1.5rem 0;
+ }
+ .btnsContainer .input {
width: 100%;
}
+ .btnsContainer .btnsBlock {
+ margin: 1.5rem 0 0 0;
+ justify-content: space-between;
+ }
- .mainpageright {
- width: 100%;
+ .btnsContainer .btnsBlock button {
+ margin: 0;
}
-}
-.list_box {
- height: 70vh;
- overflow-y: auto;
- width: auto;
- padding-right: 50px;
+ .btnsContainer .btnsBlock div button {
+ margin-right: 1.5rem;
+ }
}
-@media only screen and (max-width: 600px) {
- .sidebar {
- position: relative;
- bottom: 18px;
+/* For mobile devices */
+
+@media (max-width: 520px) {
+ .btnsContainer {
+ margin-bottom: 0;
}
- .invitebtn {
- width: 135px;
- position: relative;
- right: 10px;
+
+ .btnsContainer .btnsBlock {
+ display: block;
+ margin-top: 1rem;
+ margin-right: 0;
}
- .userListTable {
- margin-left: 40px;
+
+ .btnsContainer .btnsBlock div {
+ flex: 1;
+ }
+
+ .btnsContainer .btnsBlock div[title='Sort organizations'] {
+ margin-right: 0.5rem;
+ }
+
+ .btnsContainer .btnsBlock button {
+ margin-bottom: 1rem;
+ margin-right: 0;
+ width: 100%;
}
}
diff --git a/src/screens/Roles/Roles.test.tsx b/src/screens/Roles/Roles.test.tsx
index 50505f181e..a85ed9eda5 100644
--- a/src/screens/Roles/Roles.test.tsx
+++ b/src/screens/Roles/Roles.test.tsx
@@ -1,27 +1,49 @@
import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
-import { BrowserRouter } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import Button from 'react-bootstrap/Button';
-import { I18nextProvider } from 'react-i18next';
+import { act, render, screen } from '@testing-library/react';
import 'jest-localstorage-mock';
import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
import { ToastContainer } from 'react-toastify';
-import Roles from './Roles';
+import userEvent from '@testing-library/user-event';
import { UPDATE_USERTYPE_MUTATION } from 'GraphQl/Mutations/mutations';
import {
ORGANIZATION_CONNECTION_LIST,
USER_LIST,
+ USER_ORGANIZATION_LIST,
} from 'GraphQl/Queries/Queries';
import { store } from 'state/store';
-import userEvent from '@testing-library/user-event';
-import { within } from '@testing-library/react';
-import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import Roles from './Roles';
+import { debug } from 'jest-preview';
const MOCKS = [
+ {
+ request: {
+ query: USER_ORGANIZATION_LIST,
+ variables: { id: 'SUPERADMIN' },
+ },
+ result: {
+ data: {
+ user: {
+ userType: 'SUPERADMIN',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: '',
+ email: 'John_Does_Palasidoes@gmail.com',
+ adminFor: {
+ _id: 1,
+ name: 'Palisadoes',
+ image: '',
+ },
+ },
+ },
+ },
+ },
{
request: {
query: USER_LIST,
@@ -150,6 +172,11 @@ const EMPTY_MOCKS = [
request: {
query: USER_LIST,
},
+ result: {
+ data: {
+ users: [],
+ },
+ },
},
{
request: {
@@ -177,22 +204,8 @@ const EMPTY_MOCKS = [
},
];
-const EMPTY_ORG_MOCKS = [
- {
- request: {
- query: ORGANIZATION_CONNECTION_LIST,
- },
- result: {
- data: {
- organizationsConnection: [],
- },
- },
- },
-];
-
const link = new StaticMockLink(MOCKS, true);
const link2 = new StaticMockLink(EMPTY_MOCKS, true);
-const link3 = new StaticMockLink(EMPTY_ORG_MOCKS, true);
async function wait(ms = 100): Promise
{
await act(() => {
@@ -203,7 +216,7 @@ async function wait(ms = 100): Promise {
}
describe('Testing Roles screen', () => {
- test('Componenet should be rendered properly', async () => {
+ test('Component should be rendered properly', async () => {
window.location.assign('/orglist');
render(
@@ -219,9 +232,7 @@ describe('Testing Roles screen', () => {
);
await wait();
-
- expect(screen.getByText(/Users List/i)).toBeInTheDocument();
- expect(screen.getByText(/Search By Name/i)).toBeInTheDocument();
+ expect(screen.getAllByText(/Users List/i)).toBeTruthy();
expect(window.location).toBeAt('/orglist');
});
@@ -279,109 +290,6 @@ describe('Testing Roles screen', () => {
expect(window.location.assign).not.toHaveBeenCalled();
});
- test('Roles renders a and tests changing rowsPerPage in the select', () => {
- render(
-
-
-
-
-
-
-
-
-
- );
-
- const appHeader = screen.queryByTestId('roles-header');
- const functionWhenAppHeaderIsNotNull = (app: any): void => {
- const paginationList = within(app).getByTestId('something');
- const tablePagination =
- within(paginationList).getByTestId('table-pagination');
-
- expect(tablePagination).toBeInTheDocument();
-
- const rowsPerPageSelect = within(tablePagination).getByTestId(
- 'rows-per-page-select'
- );
- fireEvent.change(rowsPerPageSelect, { target: { value: '-1' } });
- expect(rowsPerPageSelect).toHaveValue('-1');
- };
-
- const functionWhenAppHeaderIsNull = (): void => {
- expect(appHeader).toBeNull();
- };
-
- const assertion =
- appHeader !== null
- ? functionWhenAppHeaderIsNotNull(appHeader)
- : functionWhenAppHeaderIsNull();
-
- assertion;
- });
- describe('handleChangePage function', () => {
- test('should call setPage with the new page when button is clicked', () => {
- // Arrange
- const setPage = jest.fn();
- const newPage = 2;
- const { getByRole } = render(
-
- );
-
- // Act
- fireEvent.click(getByRole('button'));
-
- // Assert
- expect(setPage).toHaveBeenCalledWith(newPage);
- });
- });
-
- test('should update rowsPerPage when selected from menu', () => {
- const { getByRole } = render(
-
-
-
-
-
-
-
-
-
- );
- const appHeader = screen.queryByTestId('roles-header');
- const len = MOCKS.length;
-
- const functionWhenAppHeaderIsNotNull = (app: any): void => {
- const table = getByRole('table');
-
- const rowsPerPageButton = getByRole('button', { name: /rows per page/i });
-
- fireEvent.click(rowsPerPageButton);
-
- const rowsPerPageOption = getByRole('option', { name: /10/i });
-
- fireEvent.click(rowsPerPageOption);
-
- const paginationList = within(app).getByTestId('something');
- const tablePagination =
- within(paginationList).getByTestId('table-pagination');
-
- expect(tablePagination).toHaveAttribute('rowsPerPage', '10');
-
- expect(table.querySelectorAll('tbody tr')).toHaveLength(len);
- };
-
- const functionWhenAppHeaderIsNull = (): void => {
- expect(appHeader).toBeNull();
- };
-
- const assertion =
- appHeader !== null
- ? functionWhenAppHeaderIsNotNull(appHeader)
- : functionWhenAppHeaderIsNull();
-
- assertion;
- });
-
test('Testing seach by name functionality', async () => {
render(
@@ -446,11 +354,12 @@ describe('Testing Roles screen', () => {
);
await wait();
+ expect(screen.getByText(/No User Found/i)).toBeTruthy();
});
test('Should render warning alert when there are no organizations', async () => {
const { container } = render(
-
+
@@ -463,6 +372,7 @@ describe('Testing Roles screen', () => {
);
await wait(200);
+ debug();
expect(container.textContent).toMatch(
'Organizations not found, please create an organization through dashboard'
);
diff --git a/src/screens/Roles/Roles.tsx b/src/screens/Roles/Roles.tsx
index ac08929968..0fbb60a459 100644
--- a/src/screens/Roles/Roles.tsx
+++ b/src/screens/Roles/Roles.tsx
@@ -1,65 +1,62 @@
-import React, { useEffect, useState } from 'react';
-import { Col, Form, Row } from 'react-bootstrap';
-import { toast } from 'react-toastify';
import { useMutation, useQuery } from '@apollo/client';
+import React, { useEffect, useState } from 'react';
+import { Dropdown, Form, Table } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
-import styles from './Roles.module.css';
-import ListNavbar from 'components/ListNavbar/ListNavbar';
+import { Search } from '@mui/icons-material';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SortIcon from '@mui/icons-material/Sort';
import {
ORGANIZATION_CONNECTION_LIST,
USER_LIST,
+ USER_ORGANIZATION_LIST,
} from 'GraphQl/Queries/Queries';
-import { UPDATE_USERTYPE_MUTATION } from 'GraphQl/Mutations/mutations';
-import PaginationList from 'components/PaginationList/PaginationList';
-import NotFound from 'components/NotFound/NotFound';
+import SuperAdminScreen from 'components/SuperAdminScreen/SuperAdminScreen';
import { errorHandler } from 'utils/errorHandler';
+import styles from './Roles.module.css';
+import type { InterfaceUserType } from 'utils/interfaces';
+import { UPDATE_USERTYPE_MUTATION } from 'GraphQl/Mutations/mutations';
+import debounce from 'utils/debounce';
const Roles = (): JSX.Element => {
const { t } = useTranslation('translation', { keyPrefix: 'roles' });
document.title = t('title');
- const [componentLoader, setComponentLoader] = useState(true);
- const [page, setPage] = useState(0);
- const [rowsPerPage, setRowsPerPage] = useState(10);
const [searchByName, setSearchByName] = useState('');
- const [count, setCount] = useState(0);
const userType = localStorage.getItem('UserType');
const userId = localStorage.getItem('id');
-
- useEffect(() => {
- if (userType != 'SUPERADMIN') {
- window.location.assign('/orglist');
- }
- setComponentLoader(false);
- }, []);
-
- useEffect(() => {
- if (searchByName !== '') {
- userRefetch({
- firstName_contains: searchByName,
- });
- } else {
- if (count !== 0) {
- userRefetch({
- firstName_contains: searchByName,
- });
- }
- }
- }, [count, searchByName]);
-
const {
- loading: usersLoading,
- data: userData,
- refetch: userRefetch,
- } = useQuery(USER_LIST);
+ data: currentUserData,
+ }: {
+ data: InterfaceUserType | undefined;
+ loading: boolean;
+ error?: Error | undefined;
+ } = useQuery(USER_ORGANIZATION_LIST, {
+ variables: { id: localStorage.getItem('id') },
+ });
+ const {
+ data: dataUsers,
+ loading: loadingUsers,
+ refetch: refetchUsers,
+ } = useQuery(USER_LIST, {
+ notifyOnNetworkStatusChange: true,
+ });
const [updateUserType] = useMutation(UPDATE_USERTYPE_MUTATION);
-
const { data: dataOrgs } = useQuery(ORGANIZATION_CONNECTION_LIST);
+ // To clear the search when the component is unmounted
+ useEffect(() => {
+ return () => {
+ setSearchByName('');
+ };
+ }, []);
+
+ // Warn if there is no organization
useEffect(() => {
if (!dataOrgs) {
return;
@@ -70,25 +67,12 @@ const Roles = (): JSX.Element => {
}
}, [dataOrgs]);
- if (componentLoader || usersLoading) {
- return ;
- }
-
- const handleChangePage = (
- event: React.MouseEvent | null,
- newPage: number
- ): void => {
- /* istanbul ignore next */
- setPage(newPage);
- };
-
- /* istanbul ignore next */
- const handleChangeRowsPerPage = (
- event: React.ChangeEvent
- ): void => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
+ // Send to orgList page if user is not superadmin
+ useEffect(() => {
+ if (userType != 'SUPERADMIN') {
+ window.location.assign('/orglist');
+ }
+ }, []);
const changeRole = async (e: any): Promise => {
const { value } = e.target;
@@ -106,7 +90,7 @@ const Roles = (): JSX.Element => {
/* istanbul ignore next */
if (data) {
toast.success(t('roleUpdated'));
- userRefetch();
+ refetchUsers();
}
} catch (error: any) {
/* istanbul ignore next */
@@ -117,131 +101,153 @@ const Roles = (): JSX.Element => {
const handleSearchByName = (e: any): void => {
const { value } = e.target;
setSearchByName(value);
- setCount((prev) => prev + 1);
+ refetchUsers({
+ firstName_contains: value,
+ lastName_contains: '',
+ // Later on we can add several search and filter options
+ });
};
+ const debouncedHandleSearchByName = debounce(handleSearchByName);
+
return (
-
-
-
-
-
-
-
{t('searchByName')}
+ <>
+
+ {/* Buttons Container */}
+
+
-
-
-
-
- {t('usersList')}
-
-
-
-
-
-
-
- | # |
- {t('name')} |
- {t('email')} |
- {t('roles_userType')} |
-
-
-
- {userData && userData.users.length > 0 ? (
- (rowsPerPage > 0
- ? userData.users.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : userData.users
- ).map(
- (
- user: {
- _id: string;
- firstName: string;
- lastName: string;
- email: string;
- userType: string;
- },
- index: number
- ) => {
- return (
-
- | {page * 10 + (index + 1)} |
- {`${user.firstName} ${user.lastName}`} |
- {user.email} |
-
-
- |
-
- );
- }
- )
- ) : (
-
- |
-
- |
-
- )}
-
-
-
-
-
-
+
+
+
+
+
+ {t('sort')}
+
+
+ Action 1
+ Action 2
+ Action 3
+
+
+
+
+
+ {t('filter')}
+
+
+ Action 1
+ Action 2
+ Action 3
+
+
-
-
-
+
+
+ {loadingUsers ? (
+
+
{t('loadingUsers')}
+
+ ) : dataUsers.users.length === 0 && searchByName.length > 0 ? (
+
+
+ {t('noResultsFoundFor')} "{searchByName}"
+
+
+ ) : dataUsers && dataUsers.users.length === 0 ? (
+
+
{t('noUserFound')}
+
+ ) : (
+
+
+
+
+ | # |
+ {t('name')} |
+ {t('email')} |
+ {t('roles_userType')} |
+
+
+
+ {dataUsers &&
+ dataUsers?.users.map(
+ (
+ user: {
+ _id: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ userType: string;
+ },
+ index: number
+ ) => {
+ return (
+
+ | {index + 1} |
+ {`${user.firstName} ${user.lastName}`} |
+ {user.email} |
+
+
+ |
+
+ );
+ }
+ )}
+
+
+
+ )}
+
+
);
};
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
new file mode 100644
index 0000000000..4e5e9f98df
--- /dev/null
+++ b/src/utils/interfaces.ts
@@ -0,0 +1,36 @@
+export interface InterfaceUserType {
+ user: {
+ firstName: string;
+ lastName: string;
+ image: string | null;
+ email: string;
+ userType: string;
+ adminFor: {
+ _id: string;
+ name: string;
+ image: string | null;
+ }[];
+ };
+}
+
+export interface InterfaceOrgConnectionInfoType {
+ _id: string;
+ image: string | null;
+ creator: {
+ _id: string;
+ firstName: string;
+ lastName: string;
+ };
+ name: string;
+ members: {
+ _id: string;
+ }[];
+ admins: {
+ _id: string;
+ }[];
+ createdAt: string;
+ location: string;
+}
+export interface InterfaceOrgConnectionType {
+ organizationsConnection: InterfaceOrgConnectionInfoType[];
+}