-
-
- );
-}
-export {};
-export default landingPage;
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index b5244b2df7..57eacce0a7 100644
--- a/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -139,7 +139,7 @@ const leftDrawer = ({
}}
>
- 
-
- -
{t('fromPalisadoes')}
- -
- {userImage && userImage ? (
+ {userImage && userImage !== 'null' ? (
) : (
![]()
- {userImage && userImage ? (
+ {userImage && userImage !== 'null' ? (
) : (
![]()
{
+ console.error = jest.fn();
+});
describe('Testing Loader component', () => {
- test('Component should be rendered properly', () => {
+ test('Component should be rendered properly only headerTitles is provided', () => {
+ const props: InterfaceTableLoader = {
+ noOfRows: 10,
+ headerTitles: ['header1', 'header2', 'header3'],
+ };
render(
);
// Check if header titles are rendered properly
- props.headerTitles.forEach((title) => {
+ const data = props.headerTitles as string[];
+ data.forEach((title) => {
expect(screen.getByText(title)).toBeInTheDocument();
});
@@ -26,11 +31,48 @@ describe('Testing Loader component', () => {
expect(
screen.getByTestId(`row-${rowIndex}-tableLoading`)
).toBeInTheDocument();
- for (let colIndex = 0; colIndex < props.headerTitles.length; colIndex++) {
+ for (let colIndex = 0; colIndex < data.length; colIndex++) {
+ expect(
+ screen.getByTestId(`row-${rowIndex}-col-${colIndex}-tableLoading`)
+ ).toBeInTheDocument();
+ }
+ }
+ });
+ test('Component should be rendered properly only noCols is provided', () => {
+ const props: InterfaceTableLoader = {
+ noOfRows: 10,
+ noOfCols: 3,
+ };
+ render(
+
+
+ );
+ // Check if header titles are rendered properly
+ const data = [...Array(props.noOfCols)];
+
+ // Check if elements are rendered properly
+ for (let rowIndex = 0; rowIndex < props.noOfRows; rowIndex++) {
+ expect(
+ screen.getByTestId(`row-${rowIndex}-tableLoading`)
+ ).toBeInTheDocument();
+ for (let colIndex = 0; colIndex < data.length; colIndex++) {
expect(
screen.getByTestId(`row-${rowIndex}-col-${colIndex}-tableLoading`)
).toBeInTheDocument();
}
}
});
+ test('Component should be throw error when noOfCols and headerTitles are undefined', () => {
+ const props = {
+ noOfRows: 10,
+ };
+ expect(() => {
+ render(
+
+
+ );
+ }).toThrowError();
+ });
});
diff --git a/src/components/TableLoader/TableLoader.tsx b/src/components/TableLoader/TableLoader.tsx
index 49d317b292..2da4b1d172 100644
--- a/src/components/TableLoader/TableLoader.tsx
+++ b/src/components/TableLoader/TableLoader.tsx
@@ -1,25 +1,40 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import styles from './TableLoader.module.css';
import { Table } from 'react-bootstrap';
-interface InterfaceTableLoader {
+export interface InterfaceTableLoader {
noOfRows: number;
- headerTitles: string[];
+ headerTitles?: string[];
+ noOfCols?: number;
}
const tableLoader = (props: InterfaceTableLoader): JSX.Element => {
- const { noOfRows, headerTitles } = props;
+ const { noOfRows, headerTitles, noOfCols } = props;
+
+ useEffect(() => {
+ if (headerTitles == undefined && noOfCols == undefined) {
+ throw new Error(
+ 'TableLoader error Either headerTitles or noOfCols is required !'
+ );
+ }
+ }, []);
return (
<>
-
+
| {title} | ; - })} + {headerTitles + ? headerTitles.map((title, index) => { + return{title} | ; + }) + : noOfCols && + [...Array(noOfCols)].map((_, index) => { + return; + })} | - - | - ); - })} + {[...Array(headerTitles ? headerTitles?.length : noOfCols)].map( + (_, colIndex) => { + return ( ++ + | + ); + } + )} ); })} diff --git a/src/components/UsersTableItem/UserTableItem.test.tsx b/src/components/UsersTableItem/UserTableItem.test.tsx new file mode 100644 index 0000000000..0e67a02022 --- /dev/null +++ b/src/components/UsersTableItem/UserTableItem.test.tsx @@ -0,0 +1,1054 @@ +import React from 'react'; +import { MockedProvider } from '@apollo/react-testing'; +import { act, fireEvent, render, screen } from '@testing-library/react'; +import { I18nextProvider } from 'react-i18next'; +import { toast } from 'react-toastify'; +import { StaticMockLink } from 'utils/StaticMockLink'; +import i18nForTest from 'utils/i18nForTest'; +import type { InterfaceQueryUserListItem } from 'utils/interfaces'; +import { MOCKS } from './UserTableItemMocks'; +import UsersTableItem from './UsersTableItem'; + +const link = new StaticMockLink(MOCKS, true); + +async function wait(ms = 100): Promise||
|---|---|---|---|---|---|---|
| {index + 1} | +{`${user.firstName} ${user.lastName}`} | +{user.email} | +
+ |
+ + + | + ++ + | +
| Name | +Location | +Created on | +Created By | +Users Role | +Change Role | +Action | +
|---|---|---|---|---|---|---|
| + + | +{org.location} | +{dayjs(org.createdAt).format('DD-MM-YYYY')} | ++ + | +{isAdmin ? 'ADMIN' : 'USER'} | +
+ |
+ + + | +
+
+ )}
+
+
+ ) : orgsBlockedBy.length == 0 ? (
+ <>
+ + {user.firstName} {user.lastName} {t('isNotBlockedByAnyOrg')} +
+
+
+
+ ) : (
+ + {t('noResultsFoundFor')} "{searchByNameOrgsBlockedBy} + " +
+| Name | +Location | +Created on | +Created By | +Users Role | +Change Role | +Action | +
|---|---|---|---|---|---|---|
| + + | +{org.location} | +{dayjs(org.createdAt).format('DD-MM-YYYY')} | ++ + | +{isAdmin ? 'ADMIN' : 'USER'} | +
+ |
+ + + | +
+ Are you sure you want to remove{' '} + + “{user.firstName} {user.lastName}” + {' '} + from organization{' '} + + “ + {removeUserProps.orgName}” + {' '} + ? +
+
-
- ) : loadingUsers == false && usersData.length === 0 ? (
+ ) : isLoading == false && usersData?.users.length === 0 ? (
+ ) : isLoading ? (
+
+
+
+
)}
diff --git a/src/screens/Requests/RequestsMocks.ts b/src/screens/Requests/RequestsMocks.ts
new file mode 100644
index 0000000000..a57bff7c83
--- /dev/null
+++ b/src/screens/Requests/RequestsMocks.ts
@@ -0,0 +1,220 @@
+import {
+ ACCEPT_ADMIN_MUTATION,
+ REJECT_ADMIN_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import {
+ ORGANIZATION_CONNECTION_LIST,
+ USER_LIST_REQUEST,
+ USER_ORGANIZATION_LIST,
+} from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+ {
+ request: {
+ query: USER_ORGANIZATION_LIST,
+ variables: { id: localStorage.getItem('id') },
+ },
+ result: {
+ data: {
+ user: {
+ _id: '123',
+ userType: 'SUPERADMIN',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: '',
+ email: 'John_Does_Palasidoes@gmail.com',
+ adminFor: {
+ _id: 1,
+ name: 'Akatsuki',
+ image: '',
+ },
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: USER_LIST_REQUEST,
+ variables: {
+ adminApproved: false,
+ first: 12,
+ firstName_contains: '',
+ lastName_contains: '',
+ skip: 0,
+ userType: 'ADMIN',
+ },
+ notifyOnNetworkStatusChange: true,
+ },
+ result: {
+ data: {
+ users: [
+ {
+ _id: '123',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: 'dummyImage',
+ email: 'johndoe@gmail.com',
+ userType: 'SUPERADMIN',
+ adminApproved: true,
+ createdAt: '20/06/2022',
+ organizationsBlockedBy: [
+ {
+ _id: '256',
+ name: 'ABC',
+ },
+ ],
+ joinedOrganizations: [
+ {
+ __typename: 'Organization',
+ _id: '6401ff65ce8e8406b8f07af1',
+ },
+ ],
+ },
+ {
+ _id: '456',
+ firstName: 'Sam',
+ lastName: 'Smith',
+ image: 'dummyImage',
+ email: 'samsmith@gmail.com',
+ userType: 'ADMIN',
+ adminApproved: false,
+ createdAt: '20/06/2022',
+ organizationsBlockedBy: [
+ {
+ _id: '256',
+ name: 'ABC',
+ },
+ ],
+ joinedOrganizations: [
+ {
+ __typename: 'Organization',
+ _id: '6401ff65ce8e8406b8f07af2',
+ },
+ ],
+ },
+ {
+ _id: '789',
+ firstName: 'Peter',
+ lastName: 'Parker',
+ image: 'dummyImage',
+ email: 'peterparker@gmail.com',
+ userType: 'USER',
+ adminApproved: true,
+ createdAt: '20/06/2022',
+ organizationsBlockedBy: [
+ {
+ _id: '256',
+ name: 'ABC',
+ },
+ ],
+ joinedOrganizations: [
+ {
+ __typename: 'Organization',
+ _id: '6401ff65ce8e8406b8f07af3',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACCEPT_ADMIN_MUTATION,
+ variables: {
+ id: '123',
+ userType: 'ADMIN',
+ },
+ },
+ result: {
+ data: {
+ acceptAdmin: true,
+ },
+ },
+ },
+ {
+ request: {
+ query: REJECT_ADMIN_MUTATION,
+ variables: {
+ id: '123',
+ userType: 'ADMIN',
+ },
+ },
+ result: {
+ data: {
+ rejectAdmin: true,
+ },
+ },
+ },
+];
+
+export const EMPTY_ORG_MOCKS = [
+ {
+ request: {
+ query: ACCEPT_ADMIN_MUTATION,
+ variables: {
+ id: '123',
+ userType: 'ADMIN',
+ },
+ },
+ result: {
+ data: undefined,
+ },
+ },
+ {
+ request: {
+ query: REJECT_ADMIN_MUTATION,
+ variables: {
+ id: '123',
+ userType: 'ADMIN',
+ },
+ },
+ result: {
+ data: undefined,
+ },
+ },
+ {
+ request: {
+ query: ORGANIZATION_CONNECTION_LIST,
+ },
+ result: {
+ data: {
+ organizationsConnection: [],
+ },
+ },
+ },
+];
+
+export const ORG_LIST_MOCK = [
+ ...MOCKS,
+ {
+ request: {
+ query: ORGANIZATION_CONNECTION_LIST,
+ },
+ result: {
+ data: {
+ organizationsConnection: [
+ {
+ _id: 1,
+ image: '',
+ name: 'Akatsuki',
+ creator: {
+ firstName: 'John',
+ lastName: 'Doe',
+ },
+ admins: [
+ {
+ _id: '123',
+ },
+ ],
+ members: {
+ _id: '234',
+ },
+ createdAt: '02/02/2022',
+ location: 'Washington DC',
+ },
+ ],
+ },
+ },
+ },
+];
diff --git a/src/screens/Users/Users.test.tsx b/src/screens/Users/Users.test.tsx
index bc375bcc3d..03a65c49fd 100644
--- a/src/screens/Users/Users.test.tsx
+++ b/src/screens/Users/Users.test.tsx
@@ -9,199 +9,11 @@ import { BrowserRouter } from 'react-router-dom';
import { ToastContainer } from 'react-toastify';
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 { StaticMockLink } from 'utils/StaticMockLink';
import i18nForTest from 'utils/i18nForTest';
import Users from './Users';
-
-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,
- },
- result: {
- data: {
- users: [
- {
- _id: '123',
- firstName: 'John',
- lastName: 'Doe',
- image: 'dummyImage',
- email: 'johndoe@gmail.com',
- userType: 'SUPERADMIN',
- adminApproved: true,
- createdAt: '20/06/2022',
- organizationsBlockedBy: [
- {
- _id: '256',
- name: 'ABC',
- },
- ],
- joinedOrganizations: [
- {
- __typename: 'Organization',
- _id: '6401ff65ce8e8406b8f07af1',
- },
- ],
- },
- {
- _id: '456',
- firstName: 'Sam',
- lastName: 'Smith',
- image: 'dummyImage',
- email: 'samsmith@gmail.com',
- userType: 'ADMIN',
- adminApproved: true,
- createdAt: '20/06/2022',
- organizationsBlockedBy: [
- {
- _id: '256',
- name: 'ABC',
- },
- ],
- joinedOrganizations: [
- {
- __typename: 'Organization',
- _id: '6401ff65ce8e8406b8f07af2',
- },
- ],
- },
- {
- _id: '789',
- firstName: 'Peter',
- lastName: 'Parker',
- image: 'dummyImage',
- email: 'peterparker@gmail.com',
- userType: 'USER',
- adminApproved: true,
- createdAt: '20/06/2022',
- organizationsBlockedBy: [
- {
- _id: '256',
- name: 'ABC',
- },
- ],
- joinedOrganizations: [
- {
- __typename: 'Organization',
- _id: '6401ff65ce8e8406b8f07af3',
- },
- ],
- },
- ],
- },
- },
- },
- {
- request: {
- query: UPDATE_USERTYPE_MUTATION,
- variables: {
- id: '123',
- userType: 'ADMIN',
- },
- },
- result: {
- data: {
- updateUserType: true,
- },
- },
- },
- {
- request: {
- query: ORGANIZATION_CONNECTION_LIST,
- },
- result: {
- data: {
- organizationsConnection: [
- {
- _id: 1,
- image: '',
- name: 'Akatsuki',
- creator: {
- firstName: 'John',
- lastName: 'Doe',
- },
- admins: [
- {
- _id: '123',
- },
- ],
- members: {
- _id: '234',
- },
- createdAt: '02/02/2022',
- location: 'Washington DC',
- },
- ],
- },
- },
- },
-];
-
-const EMPTY_MOCKS = [
- {
- request: {
- query: USER_LIST,
- },
- result: {
- data: {
- users: [],
- },
- },
- },
- {
- request: {
- query: UPDATE_USERTYPE_MUTATION,
- variables: {
- id: '123',
- userType: 'ADMIN',
- },
- },
- result: {
- data: {
- updateUserType: false,
- },
- },
- },
- {
- request: {
- query: ORGANIZATION_CONNECTION_LIST,
- },
- result: {
- data: {
- organizationsConnection: [],
- },
- },
- },
-];
+import { EMPTY_MOCKS, MOCKS } from './UsersMocks';
const link = new StaticMockLink(MOCKS, true);
const link2 = new StaticMockLink(EMPTY_MOCKS, true);
@@ -213,11 +25,19 @@ async function wait(ms = 100): Promise {
});
});
}
+beforeEach(() => {
+ localStorage.setItem('id', '123');
+ localStorage.setItem('UserType', 'SUPERADMIN');
+ localStorage.setItem('FirstName', 'John');
+ localStorage.setItem('LastName', 'Doe');
+});
+
+afterEach(() => {
+ localStorage.clear();
+});
describe('Testing Users screen', () => {
test('Component should be rendered properly', async () => {
- window.location.assign('/orglist');
-
render(
@@ -232,19 +52,12 @@ describe('Testing Users screen', () => {
await wait();
expect(screen.getAllByText(/Users/i)).toBeTruthy();
- expect(window.location).toBeAt('/orglist');
});
- test('Component should be rendered properly when user is not superAdmin', async () => {
- const localStorageMock = {
- getItem: jest.fn(() => 'ADMIN'),
- };
-
- Object.defineProperty(window, 'localStorage', {
- value: localStorageMock,
- writable: true,
- });
-
+ test(`Component should be rendered properly when user is not superAdmin
+ and or userId does not exists in localstorage`, async () => {
+ localStorage.setItem('UserType', 'ADMIN');
+ localStorage.setItem('id', '');
render(
@@ -258,22 +71,11 @@ describe('Testing Users screen', () => {
);
await wait();
-
- expect(window.location.assign).toHaveBeenCalled();
});
test('Component should be rendered properly when user is superAdmin', async () => {
- const localStorageMock = {
- getItem: jest.fn(() => 'SUPERADMIN'),
- };
-
- Object.defineProperty(window, 'localStorage', {
- value: localStorageMock,
- writable: true,
- });
-
render(
-
+
@@ -285,8 +87,6 @@ describe('Testing Users screen', () => {
);
await wait();
-
- expect(window.location.assign).not.toHaveBeenCalled();
});
test('Testing seach by name functionality', async () => {
@@ -319,24 +119,7 @@ describe('Testing Users screen', () => {
const search5 = 'Xe';
userEvent.type(screen.getByTestId(/searchByName/i), search5);
- });
-
- test('Testing change role functionality', async () => {
- render(
-
-
-
-
-
-
-
-
- );
-
- await wait();
-
- userEvent.selectOptions(screen.getByTestId(/changeRole123/i), 'ADMIN');
+ userEvent.type(screen.getByTestId(/searchByName/i), '');
});
test('Testing User data is not present', async () => {
@@ -396,79 +179,4 @@ describe('Testing Users screen', () => {
'Organizations not found, please create an organization through dashboard'
);
});
-
- test('Should disable select when user is self', async () => {
- const localStorageMock = (function (): any {
- const store: any = {
- UserType: 'SUPERADMIN',
- id: '123',
- };
-
- return {
- getItem: jest.fn((key: string) => store[key]),
- };
- })();
-
- Object.defineProperty(window, 'localStorage', { value: localStorageMock });
-
- render(
-
-
-
-
-
-
-
-
- );
-
- await wait();
-
- expect(screen.getByTestId('changeRole123')).toHaveProperty(
- 'disabled',
- true
- );
- });
-
- test('Should not disable select when user is not self', async () => {
- const localStorageMock = (function (): any {
- const store: any = {
- UserType: 'SUPERADMIN',
- id: '123',
- };
-
- return {
- getItem: jest.fn((key: string) => store[key]),
- };
- })();
-
- Object.defineProperty(window, 'localStorage', { value: localStorageMock });
-
- render(
-
-
-
-
-
-
-
-
- );
-
- await wait();
-
- expect(screen.getByTestId('changeRole456')).toHaveProperty(
- 'disabled',
- false
- );
-
- expect(screen.getByTestId('changeRole789')).toHaveProperty(
- 'disabled',
- false
- );
- });
});
diff --git a/src/screens/Users/Users.tsx b/src/screens/Users/Users.tsx
index ccf70cb712..e7b1e0c1af 100644
--- a/src/screens/Users/Users.tsx
+++ b/src/screens/Users/Users.tsx
@@ -1,4 +1,5 @@
-import { useMutation, useQuery } from '@apollo/client';
+import type { ApolloError } from '@apollo/client';
+import { useQuery } from '@apollo/client';
import React, { useEffect, useState } from 'react';
import { Dropdown, Form, Table } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';
@@ -11,45 +12,62 @@ import SortIcon from '@mui/icons-material/Sort';
import {
ORGANIZATION_CONNECTION_LIST,
USER_LIST,
- USER_ORGANIZATION_LIST,
} from 'GraphQl/Queries/Queries';
import SuperAdminScreen from 'components/SuperAdminScreen/SuperAdminScreen';
-import { errorHandler } from 'utils/errorHandler';
-import styles from './Users.module.css';
-import type { InterfaceUserType } from 'utils/interfaces';
-import { UPDATE_USERTYPE_MUTATION } from 'GraphQl/Mutations/mutations';
-import debounce from 'utils/debounce';
import TableLoader from 'components/TableLoader/TableLoader';
+import UsersTableItem from 'components/UsersTableItem/UsersTableItem';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import debounce from 'utils/debounce';
+import type { InterfaceQueryUserListItem } from 'utils/interfaces';
+import styles from './Users.module.css';
const Users = (): JSX.Element => {
const { t } = useTranslation('translation', { keyPrefix: 'users' });
document.title = t('title');
+ const perPageResult = 12;
+ const [isLoading, setIsLoading] = useState(true);
+ const [hasMore, setHasMore] = useState(true);
+ const [isLoadingMore, setIsLoadingMore] = useState(false);
const [searchByName, setSearchByName] = useState('');
const userType = localStorage.getItem('UserType');
- const userId = localStorage.getItem('id');
+ const loggedInUserId = localStorage.getItem('id');
+
const {
- data: currentUserData,
+ data: usersData,
+ loading: loading,
+ fetchMore,
+ refetch: refetchUsers,
}: {
- data: InterfaceUserType | undefined;
+ data?: { users: InterfaceQueryUserListItem[] };
loading: boolean;
- error?: Error | undefined;
- } = useQuery(USER_ORGANIZATION_LIST, {
- variables: { id: localStorage.getItem('id') },
- });
- const {
- data: dataUsers,
- loading: loadingUsers,
- refetch: refetchUsers,
+ fetchMore: any;
+ refetch: any;
+ error?: ApolloError;
} = useQuery(USER_LIST, {
+ variables: {
+ first: perPageResult,
+ skip: 0,
+ firstName_contains: '',
+ lastName_contains: '',
+ },
notifyOnNetworkStatusChange: true,
});
- const [updateUserType] = useMutation(UPDATE_USERTYPE_MUTATION);
const { data: dataOrgs } = useQuery(ORGANIZATION_CONNECTION_LIST);
+ // Manage loading more state
+ useEffect(() => {
+ if (!usersData) {
+ return;
+ }
+ if (usersData.users.length < perPageResult) {
+ setHasMore(false);
+ }
+ }, [usersData]);
+
// To clear the search when the component is unmounted
useEffect(() => {
return () => {
@@ -75,40 +93,67 @@ const Users = (): JSX.Element => {
}
}, []);
- const changeRole = async (e: any): Promise => {
- const { value } = e.target;
-
- const inputData = value.split('?');
-
- try {
- const { data } = await updateUserType({
- variables: {
- id: inputData[1],
- userType: inputData[0],
- },
- });
-
- /* istanbul ignore next */
- if (data) {
- toast.success(t('roleUpdated'));
- refetchUsers();
- }
- } catch (error: any) {
- /* istanbul ignore next */
- errorHandler(t, error);
+ // Manage the loading state
+ useEffect(() => {
+ if (loading && isLoadingMore == false) {
+ setIsLoading(true);
+ } else {
+ setIsLoading(false);
}
- };
+ }, [loading]);
const handleSearchByName = (e: any): void => {
const { value } = e.target;
setSearchByName(value);
+ /* istanbul ignore next */
+ if (value.length === 0) {
+ resetAndRefetch();
+ return;
+ }
refetchUsers({
firstName_contains: value,
lastName_contains: '',
// Later on we can add several search and filter options
});
};
-
+ /* istanbul ignore next */
+ const resetAndRefetch = (): void => {
+ refetchUsers({
+ first: perPageResult,
+ skip: 0,
+ firstName_contains: '',
+ lastName_contains: '',
+ });
+ setHasMore(true);
+ };
+ /* istanbul ignore next */
+ const loadMoreUsers = (): void => {
+ setIsLoadingMore(true);
+ fetchMore({
+ variables: {
+ skip: usersData?.users.length || 0,
+ userType: 'ADMIN',
+ filter: searchByName,
+ },
+ updateQuery: (
+ prev: { users: InterfaceQueryUserListItem[] } | undefined,
+ {
+ fetchMoreResult,
+ }: {
+ fetchMoreResult: { users: InterfaceQueryUserListItem[] } | undefined;
+ }
+ ): { users: InterfaceQueryUserListItem[] } | undefined => {
+ setIsLoadingMore(false);
+ if (!fetchMoreResult) return prev;
+ if (fetchMoreResult.users.length < perPageResult) {
+ setHasMore(false);
+ }
+ return {
+ users: [...(prev?.users || []), ...(fetchMoreResult.users || [])],
+ };
+ },
+ });
+ };
const debouncedHandleSearchByName = debounce(handleSearchByName);
const headerTitles: string[] = [
@@ -116,6 +161,8 @@ const Users = (): JSX.Element => {
t('name'),
t('email'),
t('roles_userType'),
+ t('joined_organizations'),
+ t('blocked_organizations'),
];
return (
@@ -127,11 +174,7 @@ const Users = (): JSX.Element => {
{
-
- {loadingUsers == false &&
- dataUsers &&
- dataUsers.users.length === 0 &&
+ {isLoading == false &&
+ usersData &&
+ usersData.users.length === 0 &&
searchByName.length > 0 ? (
-
- {loadingUsers == false &&
- usersData.length === 0 &&
+ {isLoading == false &&
+ usersData?.users.length === 0 &&
searchByName.length > 0 ? (
-
-
- {t('forgotPassword')}
-
-
{t('noResultsFoundFor')} "{searchByName}"
{t('noRequestFound')}
- {loadingUsers ? (
-
-
-
- )}
-
+ | - {title} - | - ); - })} -||||
|---|---|---|---|---|
| {index + 1} | -{`${user.firstName} ${user.lastName}`} | -{user.email} | -- - | -- - | -
+
+ }
+ >
+ {t('endOfResults')}
+| + {title} + | + ); + })} +||||
|---|---|---|---|---|
| {index + 1} | +{`${user.firstName} ${user.lastName}`} | +{user.email} | ++ + | ++ + | +
{t('noResultsFoundFor')} "{searchByName}"
{t('noUserFound')}
- {loadingUsers ? (
-
-
-
+
+
+ })}
+
+
+
)}
)}
diff --git a/src/screens/Users/UsersMocks.ts b/src/screens/Users/UsersMocks.ts
new file mode 100644
index 0000000000..2ee589fd2f
--- /dev/null
+++ b/src/screens/Users/UsersMocks.ts
@@ -0,0 +1,216 @@
+import {
+ ORGANIZATION_CONNECTION_LIST,
+ USER_LIST,
+ USER_ORGANIZATION_LIST,
+} from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+ {
+ request: {
+ query: USER_ORGANIZATION_LIST,
+ variables: { id: 'user1' },
+ },
+ result: {
+ data: {
+ user: {
+ _id: 'user1',
+ userType: 'SUPERADMIN',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: '',
+ email: 'John_Does_Palasidoes@gmail.com',
+ adminFor: [
+ {
+ _id: 1,
+ name: 'Palisadoes',
+ image: '',
+ },
+ ],
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: USER_LIST,
+ variables: {
+ first: 12,
+ skip: 0,
+ firstName_contains: '',
+ lastName_contains: '',
+ },
+ },
+ result: {
+ data: {
+ users: [
+ {
+ _id: 'user1',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ email: 'john@example.com',
+ userType: 'SUPERADMIN',
+ adminApproved: true,
+ adminFor: [
+ {
+ _id: '123',
+ },
+ ],
+ createdAt: '20/06/2022',
+ organizationsBlockedBy: [
+ {
+ _id: 'xyz',
+ name: 'ABC',
+ image: null,
+ location: 'Jamaica',
+ createdAt: '20/06/2022',
+ creator: {
+ _id: '123',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ email: 'john@example.com',
+ createdAt: '20/06/2022',
+ },
+ },
+ ],
+ joinedOrganizations: [
+ {
+ _id: 'abc',
+ name: 'Joined Organization 1',
+ image: null,
+ location: 'Jamaica',
+ createdAt: '20/06/2022',
+ creator: {
+ _id: '123',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ email: 'john@example.com',
+ createdAt: '20/06/2022',
+ },
+ },
+ ],
+ },
+ {
+ _id: 'user2',
+ firstName: 'Jane',
+ lastName: 'Doe',
+ image: null,
+ email: 'john@example.com',
+ userType: 'SUPERADMIN',
+ adminApproved: true,
+ adminFor: [
+ {
+ _id: '123',
+ },
+ ],
+ createdAt: '20/06/2022',
+ organizationsBlockedBy: [
+ {
+ _id: '456',
+ name: 'ABC',
+ image: null,
+ location: 'Jamaica',
+ createdAt: '20/06/2022',
+ creator: {
+ _id: '123',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ email: 'john@example.com',
+ createdAt: '20/06/2022',
+ },
+ },
+ ],
+ joinedOrganizations: [
+ {
+ _id: '123',
+ name: 'Palisadoes',
+ image: null,
+ location: 'Jamaica',
+ createdAt: '20/06/2022',
+ creator: {
+ _id: '123',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ email: 'john@example.com',
+ createdAt: '20/06/2022',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: ORGANIZATION_CONNECTION_LIST,
+ },
+ result: {
+ data: {
+ organizationsConnection: [
+ {
+ _id: 123,
+ image: null,
+ creator: {
+ firstName: 'John',
+ lastName: 'Doe',
+ },
+ name: 'Palisadoes',
+ members: [
+ {
+ _id: 'user1',
+ },
+ {
+ _id: 'user2',
+ },
+ ],
+ admins: [
+ {
+ _id: 'user1',
+ },
+ {
+ _id: 'user2',
+ },
+ ],
+ createdAt: '09/11/2001',
+ location: 'Twin Tower',
+ },
+ ],
+ },
+ },
+ },
+];
+
+export const EMPTY_MOCKS = [
+ {
+ request: {
+ query: USER_LIST,
+
+ variables: {
+ first: 12,
+ skip: 0,
+ firstName_contains: '',
+ lastName_contains: '',
+ },
+ },
+ result: {
+ data: {
+ users: [],
+ },
+ },
+ },
+ {
+ request: {
+ query: ORGANIZATION_CONNECTION_LIST,
+ },
+ result: {
+ data: {
+ organizationsConnection: [],
+ },
+ },
+ },
+];
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
index 304fc36715..1a41e91dfb 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -113,3 +113,54 @@ export interface InterfaceQueryBlockPageMemberListItem {
_id: string;
}[];
}
+
+export interface InterfaceQueryUserListItem {
+ _id: string;
+ firstName: string;
+ lastName: string;
+ image: string | null;
+ email: string;
+ userType: string;
+ adminFor: { _id: string }[];
+ adminApproved: boolean;
+ organizationsBlockedBy: {
+ _id: string;
+ name: string;
+ location: string;
+ image: string | null;
+ createdAt: string;
+ creator: {
+ _id: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ image: string | null;
+ };
+ }[];
+ joinedOrganizations: {
+ _id: string;
+ name: string;
+ location: string;
+ image: string | null;
+ createdAt: string;
+ creator: {
+ _id: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ image: string | null;
+ };
+ }[];
+ createdAt: string;
+}
+
+export interface InterfaceQueryRequestListItem {
+ _id: string;
+ firstName: string;
+ lastName: string;
+ image: string;
+ email: string;
+ userType: string;
+ adminApproved: boolean;
+ createdAt: string;
+}
From 40efb0f2b6a2883b94eb63d66d0f7bc5324616cb Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Bhagat | - {title} - | - ); - })} -
|---|
| + {title} + | + ); + })} +|||
|---|---|---|---|
| {index + 1} | -{`${user.firstName} ${user.lastName}`} | -{user.email} | -- - | -
-
-
-
+ {props.postTitle}
-
+
-
-
+
+ {t('editPost')}
-
+
);
}
-export default orgPostCard;
diff --git a/src/screens/OrgPost/OrgPost.module.css b/src/screens/OrgPost/OrgPost.module.css
index 037e5f40c8..f9ff4a0794 100644
--- a/src/screens/OrgPost/OrgPost.module.css
+++ b/src/screens/OrgPost/OrgPost.module.css
@@ -1,85 +1,51 @@
-.navbarbg {
- height: 60px;
- background-color: white;
+.mainpage {
display: flex;
- margin-bottom: 30px;
- z-index: 1;
- position: relative;
flex-direction: row;
- justify-content: space-between;
- box-shadow: 0px 0px 8px 2px #c8c8c8;
}
-
-.checkboxdiv {
- position: relative;
+.btnsContainer {
display: flex;
+ margin: 2.5rem 0 2.5rem 0;
}
-.checkboxdiv label {
- margin-right: 4px;
-}
-
-.checkboxdiv input {
- margin-right: 10px;
+.btnsContainer .btnsBlock {
+ display: flex;
}
-.logo {
- color: #707070;
- margin-left: 0;
+.btnsContainer .btnsBlock button {
+ margin-left: 1rem;
display: flex;
+ justify-content: center;
align-items: center;
- text-decoration: none;
}
-.logo img {
- margin-top: 0px;
- margin-left: 10px;
- height: 64px;
- width: 70px;
+.btnsContainer .input {
+ flex: 1;
+ position: relative;
}
-.logo > strong {
- line-height: 1.5rem;
- margin-left: -5px;
- font-family: sans-serif;
- font-size: 19px;
- color: #707070;
-}
-.mainpage {
- display: flex;
- flex-direction: row;
+.btnsContainer input {
+ outline: 1px solid var(--bs-gray-400);
}
-.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;
+
+.btnsContainer .input button {
+ width: 52px;
}
-.sidebarsticky {
- padding-left: 45px;
- margin-top: 7px;
+
+.preview {
+ display: flex;
+ position: relative;
+ width: 100%;
+ margin-top: 10px;
+ justify-content: center;
}
-.sidebarsticky > p {
- margin-top: -10px;
+.preview img {
+ width: 400px;
+ height: auto;
}
-
-.navitem {
- padding-left: 27%;
- padding-top: 12px;
- padding-bottom: 12px;
- cursor: pointer;
+.preview video {
+ width: 400px;
+ height: auto;
}
-
.logintitle {
color: #707070;
font-weight: 600;
@@ -89,16 +55,6 @@
border-bottom: 3px solid #31bb6b;
width: 15%;
}
-.searchtitle {
- color: #707070;
- font-weight: 600;
- font-size: 18px;
- margin-bottom: 20px;
- line-height: 25px;
- padding-bottom: 5px;
- border-bottom: 3px solid #31bb6b;
- width: 60%;
-}
.logintitleadmin {
color: #707070;
font-weight: 600;
@@ -128,10 +84,69 @@
.justifysp {
display: flex;
justify-content: space-between;
+ align-items: center;
+ margin-bottom: 3rem;
+}
+
+@media (max-width: 1120px) {
+ .contract {
+ padding-left: calc(250px + 2rem + 1.5rem);
+ }
+
+ .listBox .itemCard {
+ width: 100%;
+ }
+}
+
+@media (max-width: 1020px) {
+ .btnsContainer {
+ flex-direction: column;
+ margin: 1.5rem 0;
+ }
+
+ .btnsContainer .btnsBlock {
+ margin: 1.5rem 0 0 0;
+ justify-content: space-between;
+ }
+
+ .btnsContainer .btnsBlock button {
+ margin: 0;
+ }
+
+ .btnsContainer .btnsBlock div button {
+ margin-right: 1.5rem;
+ }
+}
+
+/* For mobile devices */
+
+@media (max-width: 520px) {
+ .btnsContainer {
+ margin-bottom: 0;
+ }
+
+ .btnsContainer .btnsBlock {
+ display: block;
+ margin-top: 1rem;
+ margin-right: 0;
+ }
+
+ .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%;
+ }
}
@media screen and (max-width: 575.5px) {
.justifysp {
- padding-left: 55px;
display: flex;
justify-content: space-between;
width: 100%;
@@ -147,6 +162,7 @@
border-radius: 5px;
font-size: 16px;
height: 60%;
+ width: 60%;
color: white;
outline: none;
font-weight: 600;
@@ -159,7 +175,6 @@
justify-content: space-between;
border: none;
}
-
.form_wrapper {
margin-top: 27px;
top: 50%;
@@ -216,18 +231,19 @@
.modalbody {
width: 50px;
}
-.greenregbtn {
- border: 1px solid #e8e5e5;
- box-shadow: 0 2px 2px #e8e5e5;
- border-radius: 5px;
- background-color: #31bb6b;
- font-size: 16px;
- height: 60%;
- color: white;
- outline: none;
+
+.closeButton {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ background: transparent;
+ transform: scale(1.2);
+ cursor: pointer;
+ border: none;
+ color: #707070;
font-weight: 600;
+ font-size: 16px;
cursor: pointer;
- transition: transform 0.2s, box-shadow 0.2s;
}
.sidebarsticky > input {
text-decoration: none;
@@ -249,7 +265,9 @@
box-shadow: 0 0 5pt 0.5pt #d3d3d3;
outline: none;
}
-
+button[data-testid='createPostBtn'] {
+ display: block;
+}
.loader,
.loader:after {
border-radius: 50%;
diff --git a/src/screens/OrgPost/OrgPost.test.tsx b/src/screens/OrgPost/OrgPost.test.tsx
index 1db08a4179..93f603d446 100644
--- a/src/screens/OrgPost/OrgPost.test.tsx
+++ b/src/screens/OrgPost/OrgPost.test.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
import { BrowserRouter } from 'react-router-dom';
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Provider } from 'react-redux';
import 'jest-location-mock';
@@ -14,6 +14,7 @@ import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
import { ToastContainer } from 'react-toastify';
+import { debug } from 'jest-preview';
const MOCKS = [
{
@@ -35,6 +36,7 @@ const MOCKS = [
text: 'THis is the frist post',
imageUrl: null,
videoUrl: null,
+ createdAt: '2023-08-24T09:26:56.524+00:00',
creator: {
_id: '640d98d9eb6a743d75341067',
firstName: 'Aditya',
@@ -44,6 +46,7 @@ const MOCKS = [
likeCount: 0,
commentCount: 0,
comments: [],
+ pinned: false,
likedBy: [],
},
{
@@ -52,6 +55,7 @@ const MOCKS = [
text: 'THis is the post two',
imageUrl: null,
videoUrl: null,
+ createdAt: '2023-08-24T09:26:56.524+00:00',
creator: {
_id: '640d98d9eb6a743d75341067',
firstName: 'Aditya',
@@ -60,6 +64,7 @@ const MOCKS = [
},
likeCount: 0,
commentCount: 0,
+ pinned: false,
likedBy: [],
comments: [],
},
@@ -104,7 +109,6 @@ const MOCKS = [
},
];
const link = new StaticMockLink(MOCKS, true);
-const link2 = new StaticMockLink([], true);
async function wait(ms = 500): Promise {
await act(() => {
@@ -119,12 +123,7 @@ describe('Organisation Post Page', () => {
posttitle: 'dummy post',
postinfo: 'This is a dummy post',
postImage: new File(['hello'], 'hello.png', { type: 'image/png' }),
- };
-
- const formDataEmpty = {
- posttitle: ' ',
- postinfo: ' ',
- postImage: new File(['hello'], 'hello.png', { type: 'image/png' }),
+ postVideo: new File(['hello'], 'hello.mp4', { type: 'video/mp4' }),
};
test('correct mock data should be queried', async () => {
@@ -137,6 +136,7 @@ describe('Organisation Post Page', () => {
text: 'THis is the frist post',
imageUrl: null,
videoUrl: null,
+ createdAt: '2023-08-24T09:26:56.524+00:00',
creator: {
_id: '640d98d9eb6a743d75341067',
firstName: 'Aditya',
@@ -145,13 +145,14 @@ describe('Organisation Post Page', () => {
},
likeCount: 0,
commentCount: 0,
- comments: [],
+ pinned: false,
likedBy: [],
+ comments: [],
});
});
- test('should render props and text elements test for the screen', async () => {
- const { container } = render(
+ test('Testing create post functionality', async () => {
+ render(
@@ -163,17 +164,31 @@ describe('Organisation Post Page', () => {
);
- expect(container.textContent).not.toBe('Loading data...');
+ await wait();
+
+ userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+ userEvent.type(screen.getByTestId('modalTitle'), formData.posttitle);
+
+ userEvent.type(screen.getByTestId('modalinfo'), formData.postinfo);
+ userEvent.upload(
+ screen.getByTestId('organisationImage'),
+ formData.postImage
+ );
+ userEvent.upload(
+ screen.getByTestId('organisationImage'),
+ formData.postVideo
+ );
+
+ userEvent.click(screen.getByTestId('createPostBtn'));
await wait();
- expect(container.textContent).toMatch('Search Post');
- expect(container.textContent).toMatch('Posts');
- expect(container.textContent).toMatch('+ Create Post');
- });
- // Test : Render two radio buttons
- test('should render two radio buttons', async () => {
- const { container } = render(
+ userEvent.click(screen.getByTestId('closeOrganizationModal'));
+ }, 15000);
+
+ test('Testing search functionality', async () => {
+ render(
@@ -184,21 +199,123 @@ describe('Organisation Post Page', () => {
);
+ async function debounceWait(ms = 200): Promise {
+ await act(() => {
+ return new Promise((resolve) => {
+ setTimeout(resolve, ms);
+ });
+ });
+ }
+ await debounceWait();
+ userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone');
+ await debounceWait();
+ const sortDropdown = screen.getByTestId('sort');
+ userEvent.click(sortDropdown);
+ });
+ test('Testing search text and title toggle', async () => {
+ await act(async () => {
+ // Wrap the test code in act
+ render(
+
+
+
+
+
+
+
+
+ );
+
+ await wait();
+
+ const searchInput = screen.getByTestId('searchByName');
+ expect(searchInput).toHaveAttribute('placeholder', 'Search By Title');
+
+ const inputText = screen.getByTestId('searchBy');
+
+ fireEvent.click(inputText);
+ const toggleText = screen.getByTestId('Text');
+
+ fireEvent.click(toggleText);
+
+ expect(searchInput).toHaveAttribute('placeholder', 'Search By Text');
+ fireEvent.click(inputText);
+ const toggleTite = screen.getByTestId('searchTitle');
+ fireEvent.click(toggleTite);
+ expect(searchInput).toHaveAttribute('placeholder', 'Search By Title');
+ });
+ });
+ test('Testing search latest and oldest toggle', async () => {
+ await act(async () => {
+ // Wrap the test code in act
+ render(
+
+
+
+
+
+
+
+
+ );
+
+ await wait();
+
+ const searchInput = screen.getByTestId('sort');
+ expect(searchInput).toBeInTheDocument();
+
+ const inputText = screen.getByTestId('sortpost');
+
+ fireEvent.click(inputText);
+ const toggleText = screen.getByTestId('latest');
+
+ fireEvent.click(toggleText);
+
+ expect(searchInput).toBeInTheDocument();
+ fireEvent.click(inputText);
+ const toggleTite = screen.getByTestId('oldest');
+ fireEvent.click(toggleTite);
+ expect(searchInput).toBeInTheDocument();
+ });
+ });
+ test('After creating a post, the data should be refetched', async () => {
+ const refetchMock = jest.fn();
- expect(container.textContent).not.toBe('Loading data...');
+ render(
+
+
+
+
+
+
+
+
+ );
await wait();
- expect(container.textContent).toMatch('Title');
- expect(container.textContent).toMatch('Text');
+ userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+ // Fill in post form fields...
+
+ userEvent.click(screen.getByTestId('createPostBtn'));
+
+ await wait();
+
+ expect(refetchMock).toHaveBeenCalledTimes(0);
});
- test('Testing create post functionality', async () => {
+ test('Create post without media', async () => {
render(
+
@@ -207,29 +324,22 @@ describe('Organisation Post Page', () => {
);
await wait();
-
userEvent.click(screen.getByTestId('createPostModalBtn'));
- userEvent.type(
- screen.getByPlaceholderText(/Post Title/i),
- formData.posttitle
- );
-
- userEvent.type(
- screen.getByPlaceholderText(/What do you to talk about?/i),
- formData.postinfo
- );
- userEvent.upload(screen.getByLabelText(/Post Image:/i), formData.postImage);
+ const postTitleInput = screen.getByTestId('modalTitle');
+ fireEvent.change(postTitleInput, { target: { value: 'Test Post' } });
- userEvent.click(screen.getByTestId('createPostBtn'));
-
- await wait();
+ const postInfoTextarea = screen.getByTestId('modalinfo');
+ fireEvent.change(postInfoTextarea, {
+ target: { value: 'Test post information' },
+ });
- userEvent.click(screen.getByTestId('closePostModalBtn'));
+ const createPostBtn = screen.getByTestId('createPostBtn');
+ fireEvent.click(createPostBtn);
}, 15000);
- test('Create Post should throw error when empty strings have been entered', async () => {
- const { container } = render(
+ test('Create post and preview', async () => {
+ render(
@@ -243,65 +353,121 @@ describe('Organisation Post Page', () => {
);
await wait();
-
userEvent.click(screen.getByTestId('createPostModalBtn'));
- userEvent.type(
- screen.getByPlaceholderText(/Post Title/i),
- formDataEmpty.posttitle
- );
+ const postTitleInput = screen.getByTestId('modalTitle');
+ fireEvent.change(postTitleInput, { target: { value: 'Test Post' } });
- userEvent.type(
- screen.getByPlaceholderText(/What do you to talk about?/i),
- formDataEmpty.postinfo
- );
+ const postInfoTextarea = screen.getByTestId('modalinfo');
+ fireEvent.change(postInfoTextarea, {
+ target: { value: 'Test post information' },
+ });
+ const file = new File(['image content'], 'image.png', {
+ type: 'image/png',
+ });
+ const input = screen.getByTestId('organisationImage');
+ userEvent.upload(input, file);
- userEvent.upload(
- screen.getByLabelText(/Post Image:/i),
- formDataEmpty.postImage
+ await screen.findByAltText('Post Image Preview');
+ expect(screen.getByAltText('Post Image Preview')).toBeInTheDocument();
+
+ const createPostBtn = screen.getByTestId('createPostBtn');
+ fireEvent.click(createPostBtn);
+ debug();
+ }, 15000);
+
+ test('Modal opens and closes', async () => {
+ render(
+
+
+
+
+
+
+
+
);
- userEvent.click(screen.getByTestId('createPostBtn'));
+ await wait();
+
+ const createPostModalBtn = screen.getByTestId('createPostModalBtn');
+
+ userEvent.click(createPostModalBtn);
+
+ const modalTitle = screen.getByTestId('modalOrganizationHeader');
+ expect(modalTitle).toBeInTheDocument();
+
+ const closeButton = screen.getByTestId('closeOrganizationModal');
+ userEvent.click(closeButton);
await wait();
- expect(container.textContent).toMatch(
- 'Text fields cannot be empty strings'
+ const closedModalTitle = screen.queryByText(/postDetail/i);
+ expect(closedModalTitle).not.toBeInTheDocument();
+ });
+ it('renders the form with input fields and buttons', async () => {
+ render(
+
+
+
+
+
+
+
+
);
- }, 15000);
- test('Testing search functionality', async () => {
+ await wait();
+ userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+ // Check if input fields and buttons are present
+ expect(screen.getByTestId('modalTitle')).toBeInTheDocument();
+ expect(screen.getByTestId('modalinfo')).toBeInTheDocument();
+ expect(screen.getByTestId('organisationImage')).toBeInTheDocument();
+ expect(screen.getByTestId('organisationVideo')).toBeInTheDocument();
+ expect(screen.getByTestId('createPostBtn')).toBeInTheDocument();
+ });
+
+ it('allows users to input data into the form fields', async () => {
render(
+
);
- async function debounceWait(ms = 200): Promise {
- await act(() => {
- return new Promise((resolve) => {
- setTimeout(resolve, ms);
- });
- });
- }
- await debounceWait();
- userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone');
- await debounceWait();
- });
- test('Testing when post data is not present', async () => {
- window.location.assign('/orglist');
+ await wait();
+ userEvent.click(screen.getByTestId('createPostModalBtn'));
+ // Simulate user input
+ fireEvent.change(screen.getByTestId('modalTitle'), {
+ target: { value: 'Test Title' },
+ });
+ fireEvent.change(screen.getByTestId('modalinfo'), {
+ target: { value: 'Test Info' },
+ });
+
+ // Check if input values are set correctly
+ expect(screen.getByTestId('modalTitle')).toHaveValue('Test Title');
+ expect(screen.getByTestId('modalinfo')).toHaveValue('Test Info');
+ });
+
+ test('allows users to upload an image', async () => {
render(
-
+
+
@@ -310,6 +476,73 @@ describe('Organisation Post Page', () => {
);
await wait();
- expect(window.location).toBeAt('/orglist');
+ userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+ const postTitleInput = screen.getByTestId('modalTitle');
+ fireEvent.change(postTitleInput, { target: { value: 'Test Post' } });
+
+ const postInfoTextarea = screen.getByTestId('modalinfo');
+ fireEvent.change(postInfoTextarea, {
+ target: { value: 'Test post information' },
+ });
+ const file = new File(['image content'], 'image.png', {
+ type: 'image/png',
+ });
+ const input = screen.getByTestId('organisationImage');
+ userEvent.upload(input, file);
+
+ await screen.findByAltText('Post Image Preview');
+ expect(screen.getByAltText('Post Image Preview')).toBeInTheDocument();
+
+ const closeButton = screen.getByTestId('closePreview');
+ fireEvent.click(closeButton);
+ }, 15000);
+ test('Create post, preview image, and close preview', async () => {
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+
+ );
+
+ await wait();
+
+ userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+ const postTitleInput = screen.getByTestId('modalTitle');
+ fireEvent.change(postTitleInput, { target: { value: 'Test Post' } });
+
+ const postInfoTextarea = screen.getByTestId('modalinfo');
+ fireEvent.change(postInfoTextarea, {
+ target: { value: 'Test post information' },
+ });
+
+ const videoFile = new File(['video content'], 'video.mp4', {
+ type: 'video/mp4',
+ });
+
+ const videoInput = screen.getByTestId('organisationVideo');
+ fireEvent.change(videoInput, {
+ target: {
+ files: [videoFile],
+ },
+ });
+
+ // Check if the video is displayed
+ const videoPreview = await screen.findByTestId('videoPreview');
+ expect(videoPreview).toBeInTheDocument();
+
+ // Check if the close button for the video works
+ const closeVideoPreviewButton = screen.getByTestId('videoclosebutton');
+ fireEvent.click(closeVideoPreviewButton);
+ expect(videoPreview).not.toBeInTheDocument();
+ });
});
});
diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx
index 2e897aede8..9f098c291b 100644
--- a/src/screens/OrgPost/OrgPost.tsx
+++ b/src/screens/OrgPost/OrgPost.tsx
@@ -1,27 +1,38 @@
import type { ChangeEvent } from 'react';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { Search } from '@mui/icons-material';
+import SortIcon from '@mui/icons-material/Sort';
import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
import Modal from 'react-bootstrap/Modal';
import { Form } from 'react-bootstrap';
import { useMutation, useQuery } from '@apollo/client';
import Button from 'react-bootstrap/Button';
import { toast } from 'react-toastify';
import { useTranslation } from 'react-i18next';
-
+import Dropdown from 'react-bootstrap/Dropdown';
import styles from './OrgPost.module.css';
import OrgPostCard from 'components/OrgPostCard/OrgPostCard';
import { ORGANIZATION_POST_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
-import PaginationList from 'components/PaginationList/PaginationList';
import debounce from 'utils/debounce';
import convertToBase64 from 'utils/convertToBase64';
import NotFound from 'components/NotFound/NotFound';
-import { Form as StyleBox } from 'react-bootstrap';
import { errorHandler } from 'utils/errorHandler';
import Loader from 'components/Loader/Loader';
import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen';
+interface InterfaceOrgPost {
+ _id: string;
+ title: string;
+ text: string;
+ imageUrl: string;
+ videoUrl: string;
+ organizationId: string;
+ creator: { firstName: string; lastName: string };
+ pinned: boolean;
+ createdAt: string;
+}
+
function orgPost(): JSX.Element {
const { t } = useTranslation('translation', {
keyPrefix: 'orgPost',
@@ -33,15 +44,11 @@ function orgPost(): JSX.Element {
posttitle: '',
postinfo: '',
postImage: '',
+ postVideo: '',
});
+ const [sortingOption, setSortingOption] = useState('latest');
const [showTitle, setShowTitle] = useState(true);
- const searchChange = (ev: any): void => {
- setShowTitle(ev.target.value === 'searchTitle');
- };
- const [page, setPage] = useState(0);
- const [rowsPerPage, setRowsPerPage] = useState(5);
-
const currentUrl = window.location.href.split('=')[1];
const showInviteModal = (): void => {
@@ -49,6 +56,12 @@ function orgPost(): JSX.Element {
};
const hideInviteModal = (): void => {
setPostModalIsOpen(false);
+ setPostFormState({
+ posttitle: '',
+ postinfo: '',
+ postImage: '',
+ postVideo: '',
+ });
};
const {
@@ -61,7 +74,19 @@ function orgPost(): JSX.Element {
});
const [create, { loading: createPostLoading }] =
useMutation(CREATE_POST_MUTATION);
+ const [displayedPosts, setDisplayedPosts] = useState(
+ orgPostListData?.postsByOrganizationConnection.edges || []
+ );
+ useEffect(() => {
+ if (orgPostListData && orgPostListData.postsByOrganizationConnection) {
+ const newDisplayedPosts = sortPosts(
+ orgPostListData.postsByOrganizationConnection.edges,
+ sortingOption
+ );
+ setDisplayedPosts(newDisplayedPosts);
+ }
+ }, [orgPostListData, sortingOption]);
const createPost = async (e: ChangeEvent): Promise => {
e.preventDefault();
@@ -69,6 +94,7 @@ function orgPost(): JSX.Element {
posttitle: _posttitle,
postinfo: _postinfo,
postImage,
+ postVideo,
} = postformState;
const posttitle = _posttitle.trim();
@@ -84,7 +110,7 @@ function orgPost(): JSX.Element {
title: posttitle,
text: postinfo,
organizationId: currentUrl,
- file: postImage,
+ file: postImage || postVideo,
},
});
/* istanbul ignore next */
@@ -95,6 +121,7 @@ function orgPost(): JSX.Element {
posttitle: '',
postinfo: '',
postImage: '',
+ postVideo: '',
});
setPostModalIsOpen(false); // close the modal
}
@@ -113,21 +140,6 @@ function orgPost(): JSX.Element {
window.location.assign('/orglist');
}
- /* istanbul ignore next */
- const handleChangePage = (
- event: React.MouseEvent | null,
- newPage: number
- ): void => {
- setPage(newPage);
- };
- /* istanbul ignore next */
- const handleChangeRowsPerPage = (
- event: React.ChangeEvent
- ): void => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
const handleSearch = (e: any): void => {
const { value } = e.target;
const filterData = {
@@ -140,143 +152,197 @@ function orgPost(): JSX.Element {
const debouncedHandleSearch = debounce(handleSearch);
+ const handleSorting = (option: string): void => {
+ setSortingOption(option);
+ };
+
+ const sortPosts = (
+ posts: InterfaceOrgPost[],
+ sortingOption: string
+ ): InterfaceOrgPost[] => {
+ const sortedPosts = [...posts];
+
+ if (sortingOption === 'latest') {
+ sortedPosts.sort(
+ (a, b) =>
+ new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+ );
+ } else if (sortingOption === 'oldest') {
+ sortedPosts.sort(
+ (a, b) =>
+ new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+ );
+ }
+
+ return sortedPosts;
+ };
+
+ const sortedPostsList: InterfaceOrgPost[] = [...displayedPosts];
+ sortedPostsList.sort((a: InterfaceOrgPost, b: InterfaceOrgPost) => {
+ if (a.pinned === b.pinned) {
+ return 0;
+ }
+
+ if (a.pinned) {
+ return -1;
+ }
+ return 1;
+ });
return (
<>
-
-
+ {props.postVideo && (
+
+
+
+ {props.pinned && (
+
+ {props.postTitle}
+
+
+ {props.postInfo}
+
+
+ {props.postAuthor}
+
+
+
+ )}
{props.postPhoto ? (
-
+ {props.pinned && (
+
+ {props.postTitle}
+
+
+ {props.postInfo && props.postInfo.length > 20
+ ? props.postInfo.substring(0, 20) + '...'
+ : props.postInfo}
+ {' '}
+
+ {props.postAuthor}
+
+
+
+
) : (
- 
+ ''
)}
-
{/* Delete Modal */}
@@ -223,89 +471,159 @@ function orgPostCard(props: InterfaceOrgPostCardProps): JSX.Element {
{/* Edit Modal */}
-
-
- {' '}
-
+
- {t('author')}: {props.postAuthor} -
-
- {togglePost === 'Read more' ? (
-
+ {modalVisible && (
+ - {props.postInfo.length > 43 - ? props.postInfo.substring(0, 40) + '...' - : props.postInfo} -
- ) : ( -{props.postInfo}
- )} - +
+
-
+ {props.postPhoto && (
+
+ 
+
+ )}
+ {props.postVideo && (
+
+
+
+ )}
+ {!props.postPhoto && !props.postVideo && (
+
+ {' '}
+ 
+
+ )}
+
+
+
+
+
+ + {t('author')}: {props.postAuthor} +
+
+ {togglePost === 'Read more' ? (
+
+ + {props.postInfo.length > 43 + ? props.postInfo.substring(0, 40) + '...' + : props.postInfo} +
+ ) : ( +{props.postInfo}
+ )} + +- {t('videoURL')}: - - {' '} - {props.postVideo} - -
+ )} -
-
-
+ {menuVisible && (
+
+ )}
+
-
+
-
+
- + {t('edit')} + +
- + {t('deletePost')} + +
- => + togglePostPin(props.id, props.pinned) + } + > + {!props.pinned ? 'Pin post' : 'Unpin post'} + +
- setMenuVisible(false)} + data-testid="closebtn" + > + {t('close')} + +
{t('editPost')}
- +
-
-
+
{t('searchPost')}
-
-
+
-
-
+
-
-
+
+ {t('postDetails')}
-
-
+
-
-
-
-
- {t('posts')}
+
+
-
+
+
+
+
+ {
+ setShowTitle(false);
+ e.preventDefault();
+ }}
+ data-testid="Text"
+ >
+ {t('Text')}
+
+ {
+ setShowTitle(true);
+ e.preventDefault();
+ }}
+ data-testid="searchTitle"
+ >
+ {t('Title')}
+
+
+
+
+
+
+
+ handleSorting('latest')}
+ data-testid="latest"
+ >
+ {t('Latest')}
+
+ handleSorting('oldest')}
+ data-testid="oldest"
+ >
+ {t('Oldest')}
+
+
+
+
+
-
-
- {orgPostListData &&
- orgPostListData.postsByOrganizationConnection.edges.length >
- 0 ? (
- (rowsPerPage > 0
- ? orgPostListData.postsByOrganizationConnection.edges.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rowsPerPage > 0
- ? orgPostListData.postsByOrganizationConnection.edges.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : orgPostListData.postsByOrganizationConnection.edges
- ).map(
- (datas: {
- _id: string;
- title: string;
- text: string;
- imageUrl: string;
- videoUrl: string;
- organizationId: string;
- creator: { firstName: string; lastName: string };
- }) => {
- return (
-
-
-
-
+ )
+ )
+ ) : (
+
-
+ {t('postDetails')}
- +