-
-
- {/* action item status change modal */}
-
-
-
-
-
- {'#'}
-
- {t('assignee')}
-
- {t('preCompletionNotes')}
-
- {t('postCompletionNotes')}
-
- {t('options')}
-
-
- {actionItemsData?.map((actionItem, index) => (
-
-
-
-
-
- {index !== actionItemsData.length - 1 &&
} -
- ))}
-
- {actionItemsData?.length === 0 && (
-
-
- {
- setActionItemId(actionItem._id);
- setActionItemNotes(actionItem.preCompletionNotes);
- }}
- >
- {actionItem.preCompletionNotes.length > 25
- ? `${actionItem.preCompletionNotes.substring(0, 25)}...`
- : actionItem.preCompletionNotes}
-
-
-
-
-
- {actionItem.isCompleted ? (
-
- {
- setActionItemId(actionItem._id);
- setActionItemNotes(actionItem.postCompletionNotes);
- }}
- className="ms-3 "
- >
- {actionItem.postCompletionNotes?.length > 25
- ? `${actionItem.postCompletionNotes.substring(0, 25)}...`
- : actionItem.postCompletionNotes}
-
-
- ) : (
-
- {t('actionItemActive')}
-
- )}
-
-
-
- handleActionItemStatusChange(actionItem)}
- />
-
-
-
-
- } -
- {t('noActionItems')}
-
- )}
- {t('actionItemStatus')}
- -
-
- Error occured while loading{' '}
- {actionItemCategoriesError
- ? 'Action Item Categories'
- : membersError
- ? 'Members List'
- : 'Action Items List'}{' '}
- Data
-
-
- );
- }
-
- // Filtering out disabled action item categories
- const actionItemCategories =
- actionItemCategoriesData?.actionItemCategoriesByOrganization.filter(
- (category) => !category.isDisabled,
- );
-
- // Counting the number of completed action items
- const completedActionItemsCount =
- actionItemsData?.actionItemsByOrganization.reduce(
- (acc, item) => (item.isCompleted === true ? acc + 1 : acc),
- 0,
- );
-
- return (
- <>
-
- Error occured while loading{' '}
- {actionItemCategoriesError
- ? 'Action Item Categories'
- : membersError
- ? 'Members List'
- : 'Action Items List'}{' '}
- Data
-
- {actionItemCategoriesError
- ? actionItemCategoriesError.message
- : membersError
- ? membersError.message
- : actionItemsError?.message}
-
-
-
- Status:
- {actionItemsData?.actionItemsByOrganization.length} action items
- assigned, {completedActionItemsCount} completed
-
-
-
-
-
-
- {children}
-
-
+
+ {children}
+
);
}
-// Default props for the AddOn component
-addOn.defaultProps = {
- extras: {},
- name: '',
- children: null,
-};
-
// PropTypes validation for the AddOn component
-addOn.propTypes = {
+AddOn.propTypes = {
extras: PropTypes.shape({
components: PropTypes.shape({}),
actions: PropTypes.shape({}),
}),
name: PropTypes.string,
- children: PropTypes.any,
+ children: PropTypes.node,
};
-export default addOn;
+export default AddOn;
diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx
index c09840a8f0..3d800eb59f 100644
--- a/src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx
+++ b/src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import AddOnEntry from './AddOnEntry';
import {
@@ -76,6 +76,32 @@ describe('Testing AddOnEntry', () => {
expect(getByTestId('AddOnEntry')).toBeInTheDocument();
});
+ test('uses default values for title and description when not provided', () => {
+ // Render the component with only required parameters
+ const mockGetInstalledPlugins = jest.fn();
+ render(
+ - {eventData.event.startTime !== null - ? `${formatTime(eventData.event.startTime)}` - : ``} + {eventData?.event?.startTime !== null + ? `${formatTime(eventData?.event?.startTime)}` + : ''} {' '} - {formatDate(eventData.event.startDate)}{' '} + {formatDate(eventData?.event?.startDate)}{' '}
{t('to')}
- {eventData.event.endTime !== null - ? `${formatTime(eventData.event.endTime)}` + {eventData?.event?.endTime !== null + ? `${formatTime(eventData?.event?.endTime)}` : ``} {' '} - {formatDate(eventData.event.endDate)}{' '} + {formatDate(eventData?.event?.endDate)}{' '}
{eventData.event.title}
+{eventData?.event?.title}
- {eventData.event.description} + {eventData?.event?.description}
- Location: {eventData.event.location} + Location: {eventData?.event?.location}
Registrants:{' '} - {eventData.event.attendees.length} + {eventData?.event?.attendees?.length}
diff --git a/src/components/EventManagement/EventActionItems/EventActionItems.module.css b/src/components/EventManagement/EventActionItems/EventActionItems.module.css deleted file mode 100644 index 120177d155..0000000000 --- a/src/components/EventManagement/EventActionItems/EventActionItems.module.css +++ /dev/null @@ -1,206 +0,0 @@ -@media screen and (max-width: 575.5px) { - .mainpageright { - width: 98%; - } -} -.actionItemModal { - max-width: 80vw; - margin-top: 2vh; - margin-left: 13vw; -} -.modalContent { - width: 670px; - max-width: 680px; -} -.dropdown { - background-color: white; - border: 1px solid #31bb6b; - position: relative; - display: inline-block; - margin-top: 10px; - margin-bottom: 10px; - color: #31bb6b; -} -.input { - flex: 1; - position: relative; -} - -.btnsContainer { - display: flex; - margin: 2.5rem 0 2.5rem 0; -} - -.btnsContainer .btnsBlock { - display: flex; -} - -.btnsContainer .btnsBlock button { - margin-left: 1rem; - display: flex; - justify-content: center; - align-items: center; -} - -.btnsContainer .input { - flex: 1; - position: relative; -} - -/* input { - outline: 1px solid var(--bs-gray-400); -} */ - -.btnsContainer .input button { - width: 52px; -} - -.inputField { - margin-top: 10px; - margin-bottom: 10px; - background-color: white; - box-shadow: 0 1px 1px #31bb6b; -} -.inputFieldModal { - margin-bottom: 10px; - background-color: white; - box-shadow: 0 1px 1px #31bb6b; -} -.inputField > button { - padding-top: 10px; - padding-bottom: 10px; -} -.TableImage { - object-fit: cover; - width: 50px !important; - height: 50px !important; - border-radius: 100% !important; -} -.datagrid { - overflow: auto; - border-radius: 10px; -} -.tableHead { - background-color: #31bb6b !important; - color: white; - border-radius: 20px !important; - padding: 20px; - margin-top: 20px; -} - -.tableHead :nth-first-child() { - border-top-left-radius: 20px; -} - -.mainpageright > hr { - margin-top: 10px; - width: 100%; - margin-left: -15px; - margin-right: -15px; - margin-bottom: 20px; -} -.rowBackground { - background-color: var(--bs-white); -} -.tableHeader { - color: var(--bs-black); - font-size: var(--bs-body-font-size); -} -.addButton { - width: 7em; - position: absolute; - right: 1rem; - top: 1rem; -} - -.createModal { - margin-top: 20vh; - margin-left: 13vw; - max-width: 80vw; -} - -.icon { - transform: scale(1.5); - color: var(--bs-danger); - margin-bottom: 1rem; -} - -.message { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.titlemodal { - color: var(--bs-gray-600); - font-weight: 600; - font-size: 20px; - margin-bottom: 20px; - padding-bottom: 5px; - border-bottom: 3px solid var(--bs-primary); - width: 65%; -} - -.editDelBtns { - margin-top: 15px; - border: 1px solid var(--bs-gray-300); - box-shadow: 0 2px 2px var(--bs-gray-300); - padding: 10px 10px; - border-radius: 5px; - background-color: var(--bs-primary); - width: 100%; - font-size: 16px; - color: var(--bs-white); - outline: none; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s, - box-shadow 0.2s; - width: 100%; -} - -.greenregbtn { - margin-left: 93%; -} - -.datatable { - margin-top: 5rem; -} - -.datediv { - display: flex; - flex-direction: row; -} -.datebox { - width: 90%; - border-radius: 7px; - outline: none; - box-shadow: none; -} -.actionItemsOptionsButton { - width: 24px; - height: 24px; -} - -@-webkit-keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} diff --git a/src/components/EventManagement/EventActionItems/EventActionItems.test.tsx b/src/components/EventManagement/EventActionItems/EventActionItems.test.tsx deleted file mode 100644 index 9da0b5247a..0000000000 --- a/src/components/EventManagement/EventActionItems/EventActionItems.test.tsx +++ /dev/null @@ -1,1179 +0,0 @@ -import React from 'react'; -import { MockedProvider } from '@apollo/react-testing'; -import { LocalizationProvider } from '@mui/x-date-pickers'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { - act, - fireEvent, - render, - screen, - waitFor, - waitForElementToBeRemoved, -} from '@testing-library/react'; -import 'jest-localstorage-mock'; -import { Provider } from 'react-redux'; -import { BrowserRouter } from 'react-router-dom'; -import userEvent from '@testing-library/user-event'; -import { I18nextProvider } from 'react-i18next'; -import EventActionItems from './EventActionItems'; -import { store } from 'state/store'; -import 'jest-location-mock'; -import { toast } from 'react-toastify'; -import i18nForTest from 'utils/i18nForTest'; -import { StaticMockLink } from 'utils/StaticMockLink'; -import { - CREATE_ACTION_ITEM_MUTATION, - UPDATE_ACTION_ITEM_MUTATION, - DELETE_ACTION_ITEM_MUTATION, -} from 'GraphQl/Mutations/ActionItemMutations'; -import { - ACTION_ITEM_CATEGORY_LIST, - MEMBERS_LIST, -} from 'GraphQl/Queries/Queries'; -import { ACTION_ITEM_LIST_BY_EVENTS } from 'GraphQl/Queries/ActionItemQueries'; - -async function wait(ms = 100): Promise
- {/* create action item modal */} -
{t('actionItemDetails')}
- -{t('actionItemDetails')}
- -{t('actionItemStatus')}
- -
- row._id}
- slots={{
- noRowsOverlay: () => (
-
- Nothing Found !!
-
- ),
- }}
- sx={{
- '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
- outline: 'none !important',
- },
- '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
- outline: 'none',
- },
- '& .MuiDataGrid-row:hover': {
- backgroundColor: 'transparent',
- },
- '& .MuiDataGrid-row.Mui-hovered': {
- backgroundColor: 'transparent',
- },
- '& .MuiDataGrid-columnHeaderTitle': {
- fontWeight: 700,
- },
- }}
- getRowClassName={() => `${styles.rowBackground}`}
- autoHeight
- rowHeight={50}
- columnHeaderHeight={40}
- rows={actionItemsData?.actionItemsByEvent?.map(
- (item: object, index: number) => ({
- ...item,
- index: index + 1,
- }),
- )}
- columns={columns}
- isRowSelectable={() => false}
- />
-
- )}
-
- );
-}
-export default eventActionItems;
diff --git a/src/components/EventManagement/EventActionItems/useEventActionColumnConfig.tsx b/src/components/EventManagement/EventActionItems/useEventActionColumnConfig.tsx
deleted file mode 100644
index b1ec584f3b..0000000000
--- a/src/components/EventManagement/EventActionItems/useEventActionColumnConfig.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import React from 'react';
-import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
-import { Link } from 'react-router-dom';
-import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
-import styles from './EventActionItems.module.css';
-import type { InterfaceActionItemInfo } from 'utils/interfaces';
-import { useTranslation } from 'react-i18next';
-
-export type Props = {
- eventId: string;
- handleActionItemStatusChange: (actionItem: InterfaceActionItemInfo) => void;
- showPreviewModal: (actionItem: InterfaceActionItemInfo) => void;
- handleEditClick: (actionItem: InterfaceActionItemInfo) => void;
-};
-
-type ColumnConfig = {
- /** Configuration for the columns of the data grid. */
- columns: GridColDef[];
-};
-
-const popover = (
- actionItemId: string,
- actionItemNotes: string,
-): JSX.Element => {
- return (
-
- handleActionItemStatusChange(params.row)}
- />
-
-
-
- );
- },
- },
- ];
- return {
- columns,
- };
-};
diff --git a/src/components/EventManagement/EventAgendaItems/EventAgendaItems.test.tsx b/src/components/EventManagement/EventAgendaItems/EventAgendaItems.test.tsx
index b1b3ed6094..3bce7ad11e 100644
--- a/src/components/EventManagement/EventAgendaItems/EventAgendaItems.test.tsx
+++ b/src/components/EventManagement/EventAgendaItems/EventAgendaItems.test.tsx
@@ -14,7 +14,7 @@ import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import i18n from 'utils/i18nForTest';
-import { toast } from 'react-toastify';
+// import { toast } from 'react-toastify';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -26,7 +26,7 @@ import EventAgendaItems from './EventAgendaItems';
import {
MOCKS,
MOCKS_ERROR_QUERY,
- MOCKS_ERROR_MUTATION,
+ // MOCKS_ERROR_MUTATION,
} from './EventAgendaItemsMocks';
jest.mock('react-toastify', () => ({
@@ -41,6 +41,15 @@ jest.mock('react-router-dom', () => ({
useParams: () => ({ eventId: '123' }),
}));
+//temporarily fixes react-beautiful-dnd droppable method's depreciation error
+//needs to be fixed in React 19
+jest.spyOn(console, 'error').mockImplementation((message) => {
+ if (message.includes('Support for defaultProps will be removed')) {
+ return;
+ }
+ console.error(message);
+});
+
async function wait(ms = 100): Promise
Error occurred while loading{' '}
- {agendaCategoryError
- ? 'Agenda Categories'
- : agendaItemError && 'Agenda Items'}
- Data
+ {agendaCategoryError ? 'Agenda Categories' : 'Agenda Items'} Data
- {agendaCategoryError
- ? agendaCategoryError.message
- : agendaItemError && (agendaItemError as Error).message}
+ {errorMessage}
+
{/* Options List */}
+
{loading ? (
<>
- Error Occured while loading the Organization
+ {tErrors('errorLoading', { entity: 'Organization' })}
) : (
@@ -126,6 +126,7 @@ const leftDrawerOrg = ({
) : (
+ {tCommon('menu')} +
-
diff --git a/src/components/LoginPortalToggle/LoginPortalToggle.test.tsx b/src/components/LoginPortalToggle/LoginPortalToggle.test.tsx
index ac971e52ea..327e6cccea 100644
--- a/src/components/LoginPortalToggle/LoginPortalToggle.test.tsx
+++ b/src/components/LoginPortalToggle/LoginPortalToggle.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render } from '@testing-library/react';
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/MemberRequestCard/MemberRequestCard.test.tsx b/src/components/MemberRequestCard/MemberRequestCard.test.tsx
index 121213e4e7..a38a046ea2 100644
--- a/src/components/MemberRequestCard/MemberRequestCard.test.tsx
+++ b/src/components/MemberRequestCard/MemberRequestCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
@@ -16,7 +16,7 @@ const MOCKS = [
{
request: {
query: ACCEPT_ORGANIZATION_REQUEST_MUTATION,
- variable: { id: '123' },
+ variables: { id: '123' },
},
result: {
data: {
@@ -31,7 +31,7 @@ const MOCKS = [
{
request: {
query: REJECT_ORGANIZATION_REQUEST_MUTATION,
- variable: { id: '234' },
+ variables: { userid: '234' },
},
result: {
data: {
@@ -44,7 +44,9 @@ const MOCKS = [
},
},
];
+
const link = new StaticMockLink(MOCKS, true);
+
async function wait(ms = 100): Promise {
await act(() => {
return new Promise((resolve) => {
@@ -55,7 +57,6 @@ async function wait(ms = 100): Promise {
describe('Testing Member Request Card', () => {
const props = {
- key: '123',
id: '1',
memberName: 'John Doe',
memberLocation: 'India',
@@ -89,14 +90,13 @@ describe('Testing Member Request Card', () => {
expect(screen.getByText(props.email)).toBeInTheDocument();
});
- it('Should render text elements when props value is not passed', async () => {
+ it('should render text elements when props value is not passed', async () => {
global.confirm = (): boolean => false;
render(
{
window.location.reload();
@@ -136,5 +135,4 @@ function memberRequestCard(
);
}
-export {};
-export default memberRequestCard;
+export default MemberRequestCard;
diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css b/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css
deleted file mode 100644
index ac9f4a5900..0000000000
--- a/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.addButton {
- width: 7em;
- position: absolute;
- right: 1rem;
- top: 1rem;
-}
-
-.createModal {
- margin-top: 20vh;
- margin-left: 13vw;
- max-width: 80vw;
-}
-
-.icon {
- transform: scale(1.5);
- color: var(--bs-danger);
- margin-bottom: 1rem;
-}
-
-.message {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
-}
-
-.titlemodal {
- color: var(--bs-gray-600);
- font-weight: 600;
- font-size: 20px;
- margin-top: 1rem;
- width: 65%;
-}
diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx
deleted file mode 100644
index 0665ce6fc4..0000000000
--- a/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-import React from 'react';
-import {
- render,
- screen,
- fireEvent,
- waitFor,
- act,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import 'jest-localstorage-mock';
-import { MockedProvider } from '@apollo/client/testing';
-import 'jest-location-mock';
-import { I18nextProvider } from 'react-i18next';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import i18n from 'utils/i18nForTest';
-import { toast } from 'react-toastify';
-
-import { store } from 'state/store';
-import { StaticMockLink } from 'utils/StaticMockLink';
-
-import OrgActionItemCategories from './OrgActionItemCategories';
-import {
- MOCKS,
- MOCKS_ERROR_QUERY,
- MOCKS_ERROR_MUTATIONS,
-} from './OrgActionItemCategoryMocks';
-
-jest.mock('react-toastify', () => ({
- toast: {
- success: jest.fn(),
- error: jest.fn(),
- },
-}));
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useParams: () => ({ orgId: '123' }),
-}));
-
-async function wait(ms = 100): Promise {
- await act(() => {
- return new Promise((resolve) => {
- setTimeout(resolve, ms);
- });
- });
-}
-
-const link = new StaticMockLink(MOCKS, true);
-const link2 = new StaticMockLink(MOCKS_ERROR_QUERY, true);
-const link3 = new StaticMockLink(MOCKS_ERROR_MUTATIONS, true);
-
-const translations = {
- ...JSON.parse(
- JSON.stringify(
- i18n.getDataByLanguage('en')?.translation.orgActionItemCategories ?? {},
- ),
- ),
- ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
- ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
-};
-
-describe('Testing Action Item Categories Component', () => {
- test('Component loads correctly', async () => {
- window.location.assign('/orgsetting/123');
- const { getByText } = render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- expect(getByText(translations.create)).toBeInTheDocument();
- });
- });
-
- test('render error component on unsuccessful query', async () => {
- window.location.assign('/orgsetting/123');
- const { queryByText } = render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- expect(queryByText(translations.create)).not.toBeInTheDocument();
- });
- });
-
- test('opens and closes create and update modals on button clicks', async () => {
- window.location.assign('/orgsetting/123');
- render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- userEvent.click(screen.getByTestId('actionItemCategoryModalOpenBtn'));
- userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn'));
- });
-
- await waitFor(() => {
- userEvent.click(
- screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0],
- );
- userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn'));
- });
- });
-
- test('create a new action item category', async () => {
- window.location.assign('/orgsetting/123');
- render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- userEvent.click(screen.getByTestId('actionItemCategoryModalOpenBtn'));
- userEvent.type(
- screen.getByPlaceholderText(translations.enterName),
- 'ActionItemCategory 4',
- );
-
- userEvent.click(screen.getByTestId('formSubmitButton'));
- });
-
- await waitFor(() => {
- expect(toast.success).toBeCalledWith(translations.successfulCreation);
- });
- });
-
- test('toast error on unsuccessful creation', async () => {
- window.location.assign('/orgsetting/123');
- render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- userEvent.click(screen.getByTestId('actionItemCategoryModalOpenBtn'));
- userEvent.type(
- screen.getByPlaceholderText(translations.enterName),
- 'ActionItemCategory 4',
- );
-
- userEvent.click(screen.getByTestId('formSubmitButton'));
- });
-
- await waitFor(() => {
- expect(toast.error).toHaveBeenCalled();
- });
- });
-
- test('update an action item category', async () => {
- window.location.assign('/orgsetting/123');
- render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- userEvent.click(
- screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0],
- );
-
- const name = screen.getByPlaceholderText(translations.enterName);
- fireEvent.change(name, { target: { value: '' } });
-
- userEvent.type(
- screen.getByPlaceholderText(translations.enterName),
- 'ActionItemCategory 1 updated',
- );
-
- userEvent.click(screen.getByTestId('formSubmitButton'));
- });
-
- await waitFor(() => {
- expect(toast.success).toBeCalledWith(translations.successfulUpdation);
- });
- });
-
- test('toast error on unsuccessful updation', async () => {
- window.location.assign('/orgsetting/123');
- render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- userEvent.click(
- screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0],
- );
-
- const name = screen.getByPlaceholderText(translations.enterName);
- fireEvent.change(name, { target: { value: '' } });
-
- userEvent.type(
- screen.getByPlaceholderText(translations.enterName),
- 'ActionItemCategory 1 updated',
- );
-
- userEvent.click(screen.getByTestId('formSubmitButton'));
- });
-
- await waitFor(() => {
- expect(toast.error).toHaveBeenCalled();
- });
- });
-
- test('toast error on providing the same name on updation', async () => {
- window.location.assign('/orgsetting/123');
- render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- userEvent.click(
- screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0],
- );
-
- const name = screen.getByPlaceholderText(translations.enterName);
- fireEvent.change(name, { target: { value: '' } });
-
- userEvent.type(
- screen.getByPlaceholderText(translations.enterName),
- 'ActionItemCategory 1',
- );
-
- userEvent.click(screen.getByTestId('formSubmitButton'));
- });
-
- await waitFor(() => {
- expect(toast.error).toBeCalledWith(translations.sameNameConflict);
- });
- });
-
- test('toggle the disablity status of an action item category', async () => {
- window.location.assign('/orgsetting/123');
- render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- userEvent.click(screen.getAllByTestId('disabilityStatusButton')[0]);
- });
-
- await waitFor(() => {
- expect(toast.success).toBeCalledWith(translations.categoryDisabled);
- });
-
- await waitFor(() => {
- userEvent.click(screen.getAllByTestId('disabilityStatusButton')[1]);
- });
-
- await waitFor(() => {
- expect(toast.success).toBeCalledWith(translations.categoryEnabled);
- });
- });
-
- test('toast error on unsuccessful toggling of the disablity status', async () => {
- window.location.assign('/orgsetting/123');
- render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- userEvent.click(screen.getAllByTestId('disabilityStatusButton')[0]);
- });
-
- await waitFor(() => {
- expect(toast.error).toHaveBeenCalled();
- });
-
- await waitFor(() => {
- userEvent.click(screen.getAllByTestId('disabilityStatusButton')[1]);
- });
-
- await waitFor(() => {
- expect(toast.error).toHaveBeenCalled();
- });
- });
-});
diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx
deleted file mode 100644
index 72b1fdd23c..0000000000
--- a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-import type { ChangeEvent } from 'react';
-import React, { useState } from 'react';
-import { Button, Form, Modal } from 'react-bootstrap';
-import styles from './OrgActionItemCategories.module.css';
-import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
-import { WarningAmberRounded } from '@mui/icons-material';
-
-import { useMutation, useQuery } from '@apollo/client';
-import {
- CREATE_ACTION_ITEM_CATEGORY_MUTATION,
- UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
-} from 'GraphQl/Mutations/mutations';
-import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/Queries';
-import type { InterfaceActionItemCategoryList } from 'utils/interfaces';
-import Loader from 'components/Loader/Loader';
-import { useParams } from 'react-router-dom';
-
-type ModalType = 'Create' | 'Update';
-
-/**
- * Represents the component for managing organization action item categories.
- * This component allows creating, updating, enabling, and disabling action item categories.
- */
-const OrgActionItemCategories = (): JSX.Element => {
- const { t } = useTranslation('translation', {
- keyPrefix: 'orgActionItemCategories',
- });
- const { t: tCommon } = useTranslation('common');
-
- // State variables
- const [modalIsOpen, setModalIsOpen] = useState(false); // Controls modal visibility
- const [modalType, setModalType] = useState('Create'); // Type of modal (Create or Update)
- const [categoryId, setCategoryId] = useState(''); // Current category ID for updating
- const [name, setName] = useState(''); // Category name for creation or update
- const [currName, setCurrName] = useState(''); // Current category name (used for comparison)
-
- // Fetch organization ID from URL params
- const { orgId: currentUrl } = useParams();
-
- // Query to fetch action item categories
- const {
- data,
- loading,
- error,
- refetch,
- }: {
- data: InterfaceActionItemCategoryList | undefined;
- loading: boolean;
- error?: Error | undefined;
- refetch: () => void;
- } = useQuery(ACTION_ITEM_CATEGORY_LIST, {
- variables: {
- organizationId: currentUrl,
- },
- notifyOnNetworkStatusChange: true,
- });
-
- // Mutations for creating and updating categories
- const [createActionItemCategory] = useMutation(
- CREATE_ACTION_ITEM_CATEGORY_MUTATION,
- );
-
- const [updateActionItemCategory] = useMutation(
- UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
- );
-
- // Handles category creation
- const handleCreate = async (
- e: ChangeEvent,
- ): Promise => {
- e.preventDefault();
- try {
- await createActionItemCategory({
- variables: {
- name,
- organizationId: currentUrl,
- },
- });
-
- setName('');
- refetch();
-
- setModalIsOpen(false);
-
- toast.success(t('successfulCreation'));
- } catch (error: unknown) {
- if (error instanceof Error) {
- toast.error(error.message);
- console.log(error.message);
- }
- }
- };
-
- // Handles category update
- const handleEdit = async (e: ChangeEvent): Promise => {
- e.preventDefault();
- if (name === currName) {
- toast.error(t('sameNameConflict')); // Show error if the name is the same
- } else {
- try {
- await updateActionItemCategory({
- variables: {
- actionItemCategoryId: categoryId,
- name,
- },
- });
-
- setName(''); // Clear the name input
- setCategoryId(''); // Clear the category ID
- refetch(); // Refetch the list of categories
- setModalIsOpen(false); // Close the modal
-
- toast.success(t('successfulUpdation')); // Show success toast
- } catch (error: unknown) {
- if (error instanceof Error) {
- toast.error(error.message); // Show error toast
- console.log(error.message); // Log the error
- }
- }
- }
- };
-
- // Handles enabling or disabling a category
- const handleStatusChange = async (
- id: string,
- disabledStatus: boolean,
- ): Promise => {
- try {
- await updateActionItemCategory({
- variables: {
- actionItemCategoryId: id,
- isDisabled: !disabledStatus,
- },
- });
-
- refetch(); // Refetch the list of categories
-
- toast.success(
- disabledStatus ? t('categoryEnabled') : t('categoryDisabled'),
- ); // Show success toast
- } catch (error: unknown) {
- if (error instanceof Error) {
- toast.error(error.message);
- console.log(error.message);
- }
- }
- };
-
- // Shows the modal for creating a new category
- const showCreateModal = (): void => {
- setModalType('Create');
- setModalIsOpen(true);
- };
-
- // Shows the modal for updating an existing category
- const showUpdateModal = (name: string, id: string): void => {
- setCurrName(name);
- setName(name);
- setCategoryId(id);
- setModalType('Update');
- setModalIsOpen(true);
- };
-
- // Hides the modal and clears input fields
- const hideModal = (): void => {
- setName('');
- setCategoryId('');
- setModalIsOpen(false);
- };
-
- // Show loader while data is being fetched
- if (loading) {
- return
-
-
-
-
-
-
-
- );
-};
-
-export default OrgActionItemCategories;
diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts b/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts
deleted file mode 100644
index b03e53c5f5..0000000000
--- a/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import {
- CREATE_ACTION_ITEM_CATEGORY_MUTATION,
- UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
-} from 'GraphQl/Mutations/mutations';
-
-import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/Queries';
-
-export const MOCKS = [
- {
- request: {
- query: ACTION_ITEM_CATEGORY_LIST,
- variables: { organizationId: '123' },
- },
- result: {
- data: {
- actionItemCategoriesByOrganization: [
- {
- _id: '1',
- name: 'ActionItemCategory 1',
- isDisabled: false,
- },
- {
- _id: '2',
- name: 'ActionItemCategory 2',
- isDisabled: true,
- },
- {
- _id: '3',
- name: 'ActionItemCategory 3',
- isDisabled: false,
- },
- ],
- },
- },
- },
- {
- request: {
- query: CREATE_ACTION_ITEM_CATEGORY_MUTATION,
- variables: { name: 'ActionItemCategory 4', organizationId: '123' },
- },
- result: {
- data: {
- createActionItemCategory: {
- _id: '4',
- },
- },
- },
- },
- {
- request: {
- query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
- variables: {
- name: 'ActionItemCategory 1 updated',
- actionItemCategoryId: '1',
- },
- },
- result: {
- data: {
- updateActionItemCategory: {
- _id: '1',
- },
- },
- },
- },
- {
- request: {
- query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
- variables: {
- isDisabled: true,
- actionItemCategoryId: '1',
- },
- },
- result: {
- data: {
- updateActionItemCategory: {
- _id: '1',
- },
- },
- },
- },
- {
- request: {
- query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
- variables: {
- isDisabled: false,
- actionItemCategoryId: '2',
- },
- },
- result: {
- data: {
- updateActionItemCategory: {
- _id: '2',
- },
- },
- },
- },
-];
-
-export const MOCKS_ERROR_QUERY = [
- {
- request: {
- query: ACTION_ITEM_CATEGORY_LIST,
- variables: { organizationId: '123' },
- },
- error: new Error('Mock Graphql Error'),
- },
-];
-
-export const MOCKS_ERROR_MUTATIONS = [
- {
- request: {
- query: ACTION_ITEM_CATEGORY_LIST,
- variables: { organizationId: '123' },
- },
- result: {
- data: {
- actionItemCategoriesByOrganization: [
- {
- _id: '1',
- name: 'ActionItemCategory 1',
- isDisabled: false,
- },
- {
- _id: '2',
- name: 'ActionItemCategory 2',
- isDisabled: true,
- },
- {
- _id: '3',
- name: 'ActionItemCategory 3',
- isDisabled: false,
- },
- ],
- },
- },
- },
- {
- request: {
- query: CREATE_ACTION_ITEM_CATEGORY_MUTATION,
- variables: { name: 'ActionItemCategory 4', organizationId: '123' },
- },
- error: new Error('Mock Graphql Error'),
- },
- {
- request: {
- query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
- variables: {
- name: 'ActionItemCategory 1 updated',
- actionItemCategoryId: '1',
- },
- },
- error: new Error('Mock Graphql Error'),
- },
- {
- request: {
- query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
- variables: {
- isDisabled: true,
- actionItemCategoryId: '1',
- },
- },
- error: new Error('Mock Graphql Error'),
- },
- {
- request: {
- query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
- variables: {
- isDisabled: false,
- actionItemCategoryId: '2',
- },
- },
- error: new Error('Mock Graphql Error'),
- },
-];
diff --git a/src/components/OrgAdminListCard/OrgAdminListCard.test.tsx b/src/components/OrgAdminListCard/OrgAdminListCard.test.tsx
index 282dedb330..7baea946d2 100644
--- a/src/components/OrgAdminListCard/OrgAdminListCard.test.tsx
+++ b/src/components/OrgAdminListCard/OrgAdminListCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
import type { RenderResult } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
diff --git a/src/components/OrgAdminListCard/OrgAdminListCard.tsx b/src/components/OrgAdminListCard/OrgAdminListCard.tsx
index 418592819f..f8fc454823 100644
--- a/src/components/OrgAdminListCard/OrgAdminListCard.tsx
+++ b/src/components/OrgAdminListCard/OrgAdminListCard.tsx
@@ -44,7 +44,7 @@ function orgAdminListCard(props: InterfaceOrgPeopleListCardProps): JSX.Element {
},
});
if (data) {
- toast.success(t('adminRemoved'));
+ toast.success(t('adminRemoved') as string);
setTimeout(() => {
window.location.reload();
}, 2000);
diff --git a/src/components/OrgListCard/OrgListCard.test.tsx b/src/components/OrgListCard/OrgListCard.test.tsx
index 4889a57ea2..be780fb402 100644
--- a/src/components/OrgListCard/OrgListCard.test.tsx
+++ b/src/components/OrgListCard/OrgListCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import 'jest-location-mock';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
index 1ae9b8a30e..47440b6880 100644
--- a/src/components/OrgListCard/OrgListCard.tsx
+++ b/src/components/OrgListCard/OrgListCard.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { ReactComponent as FlaskIcon } from 'assets/svgs/flask.svg';
+import FlaskIcon from 'assets/svgs/flask.svg?react';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
import styles from './OrgListCard.module.css';
diff --git a/src/components/OrgPeopleListCard/OrgPeopleListCard.test.tsx b/src/components/OrgPeopleListCard/OrgPeopleListCard.test.tsx
index 57a6e0265f..7cee31107f 100644
--- a/src/components/OrgPeopleListCard/OrgPeopleListCard.test.tsx
+++ b/src/components/OrgPeopleListCard/OrgPeopleListCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
index f22abc2c01..d24773c02a 100644
--- a/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
+++ b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
@@ -56,7 +56,7 @@ function orgPeopleListCard(
// If the mutation is successful, show a success message and reload the page
/* istanbul ignore next */
if (data) {
- toast.success(t('memberRemoved'));
+ toast.success(t('memberRemoved') as string);
setTimeout(() => {
window.location.reload();
}, 2000);
diff --git a/src/components/OrgPostCard/OrgPostCard.test.tsx b/src/components/OrgPostCard/OrgPostCard.test.tsx
index 863ed2822b..7105e5e8f2 100644
--- a/src/components/OrgPostCard/OrgPostCard.test.tsx
+++ b/src/components/OrgPostCard/OrgPostCard.test.tsx
@@ -112,8 +112,8 @@ describe('Testing Organization Post Card', () => {
});
const props = {
- key: '123',
id: '12',
+ postID: '123',
postTitle: 'Event Info',
postInfo: 'Time change',
postAuthor: 'John Doe',
@@ -135,6 +135,20 @@ describe('Testing Organization Post Card', () => {
}));
global.alert = jest.fn();
+ test('Opens post on image click', () => {
+ const { getByTestId, getByAltText } = render(
+
+
+
+ ,
+ );
+ userEvent.click(screen.getByAltText('image'));
+
+ expect(getByTestId('card-text')).toBeInTheDocument();
+ expect(getByTestId('card-title')).toBeInTheDocument();
+ expect(getByAltText('image')).toBeInTheDocument();
+ });
test('renders with default props', () => {
const { getByAltText, getByTestId } = render(
@@ -147,7 +161,6 @@ describe('Testing Organization Post Card', () => {
expect(getByTestId('card-title')).toBeInTheDocument();
expect(getByAltText('image')).toBeInTheDocument();
});
-
test('toggles "Read more" button', () => {
const { getByTestId } = render(
@@ -265,6 +278,84 @@ describe('Testing Organization Post Card', () => {
{ timeout: 2500 },
);
});
+ test('Testing post updating functionality fail case', async () => {
+ const props2 = {
+ id: '',
+ postID: '123',
+ postTitle: 'Event Info',
+ postInfo: 'Time change',
+ postAuthor: 'John Doe',
+ postPhoto: 'test.png',
+ postVideo: 'test.mp4',
+ pinned: true,
+ };
+ const { getByTestId } = render(
+
+
+
+ ,
+ );
+
+ await wait();
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+
+ userEvent.click(screen.getByTestId('editPostModalBtn'));
+ fireEvent.change(getByTestId('updateTitle'), {
+ target: { value: 'updated title' },
+ });
+ fireEvent.change(getByTestId('updateText'), {
+ target: { value: 'This is a updated text' },
+ });
+ const postVideoUrlInput = screen.queryByTestId('postVideoUrl');
+ if (postVideoUrlInput) {
+ fireEvent.change(getByTestId('postVideoUrl'), {
+ target: { value: 'This is a updated video' },
+ });
+ userEvent.click(screen.getByPlaceholderText(/video/i));
+ const input = getByTestId('postVideoUrl');
+ const file = new File(['test-video'], 'test.mp4', { type: 'video/mp4' });
+ Object.defineProperty(input, 'files', {
+ value: [file],
+ });
+ fireEvent.change(input);
+ await waitFor(() => {
+ convertToBase64(file);
+ });
+
+ userEvent.click(screen.getByTestId('closePreview'));
+ }
+ const imageUrlInput = screen.queryByTestId('postImageUrl');
+ if (imageUrlInput) {
+ fireEvent.change(getByTestId('postImageUrl'), {
+ target: { value: 'This is a updated image' },
+ });
+ userEvent.click(screen.getByPlaceholderText(/image/i));
+ const input = getByTestId('postImageUrl');
+ const file = new File(['test-image'], 'test.jpg', { type: 'image/jpeg' });
+ Object.defineProperty(input, 'files', {
+ value: [file],
+ });
+ fireEvent.change(input);
+
+ // Simulate the asynchronous base64 conversion function
+ await waitFor(() => {
+ convertToBase64(file); // Replace with the expected base64-encoded image
+ });
+ document.getElementById = jest.fn(() => input);
+ const clearImageButton = getByTestId('closeimage');
+ fireEvent.click(clearImageButton);
+ }
+ userEvent.click(screen.getByTestId('updatePostBtn'));
+
+ await waitFor(
+ () => {
+ expect(window.location.reload).toHaveBeenCalled();
+ },
+ { timeout: 2500 },
+ );
+ });
test('Testing pin post functionality', async () => {
render(
@@ -289,8 +380,8 @@ describe('Testing Organization Post Card', () => {
});
test('Testing pin post functionality fail case', async () => {
const props2 = {
- key: '123',
id: '',
+ postID: '123',
postTitle: 'Event Info',
postInfo: 'Time change',
postAuthor: 'John Doe',
@@ -340,8 +431,8 @@ describe('Testing Organization Post Card', () => {
});
test('Testing post delete functionality fail case', async () => {
const props2 = {
- key: '123',
id: '',
+ postID: '123',
postTitle: 'Event Info',
postInfo: 'Time change',
postAuthor: 'John Doe',
@@ -380,6 +471,9 @@ describe('Testing Organization Post Card', () => {
userEvent.click(screen.getByAltText('image'));
userEvent.click(screen.getByTestId('closeiconbtn'));
+
+ //Primary Modal is closed
+ expect(screen.queryByTestId('moreiconbtn')).not.toBeInTheDocument();
});
test('Testing close functionality of secondary modal', async () => {
render(
@@ -395,13 +489,30 @@ describe('Testing Organization Post Card', () => {
userEvent.click(screen.getByAltText('image'));
userEvent.click(screen.getByTestId('moreiconbtn'));
userEvent.click(screen.getByTestId('closebtn'));
+
+ //Secondary Modal is closed
+ expect(screen.queryByTestId('deletePostModalBtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('editPostModalBtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('pinpostBtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('closebtn')).not.toBeInTheDocument();
});
test('renders without "Read more" button when postInfo length is less than or equal to 43', () => {
+ render(
+
+
+
+ ,
+ );
+ expect(screen.queryByTestId('toggleBtn')).not.toBeInTheDocument();
+ });
+ test('renders with "Read more" button when postInfo length is more than 43', () => {
const props2 = {
- key: '123',
id: '12',
+ postID: '123',
postTitle: 'Event Info',
- postInfo: 'Lorem ipsum dolor sit amet',
+ postInfo:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.', // Length is greater than 43
postAuthor: 'John Doe',
postPhoto: 'photoLink',
postVideo: 'videoLink',
@@ -414,6 +525,9 @@ describe('Testing Organization Post Card', () => {
,
);
+ userEvent.click(screen.getByAltText('image'));
+
+ expect(screen.getByTestId('toggleBtn')).toBeInTheDocument();
});
test('updates state variables correctly when handleEditModal is called', () => {
const link2 = new StaticMockLink(MOCKS, true);
@@ -430,17 +544,42 @@ describe('Testing Organization Post Card', () => {
userEvent.click(screen.getByTestId('editPostModalBtn'));
- // expect(screen.queryByTestId('editPostModalBtn')).toBeInTheDocument();
- // expect(screen.queryByTestId('deletePostModalBtn')).not.toBeInTheDocument();
- // expect(screen.queryByTestId('closeiconbtn')).not.toBeInTheDocument();
+ //Primary Modal is closed
+ expect(screen.queryByTestId('closeiconbtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('moreiconbtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('toggleBtn')).not.toBeInTheDocument();
+
+ //Secondary Modal is closed
+ expect(screen.queryByTestId('deletePostModalBtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('editPostModalBtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('pinpostBtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('closebtn')).not.toBeInTheDocument();
+ });
+ test('updates state variables correctly when handleDeleteModal is called', () => {
+ const link2 = new StaticMockLink(MOCKS, true);
+ render(
+
+ ,
+ );
+ userEvent.click(screen.getByAltText('image'));
+
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+
+ expect(screen.queryByTestId('deletePostModalBtn')).toBeInTheDocument();
+
+ userEvent.click(screen.getByTestId('deletePostModalBtn'));
- // expect(screen.getByTestId('editPostModal')).toHaveClass('show');
- // expect(screen.getByTestId('deletePostModal')).not.toHaveClass('show');
+ //Primary Modal is closed
+ expect(screen.queryByTestId('closeiconbtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('moreiconbtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('toggleBtn')).not.toBeInTheDocument();
- // expect(screen.getByTestId('modalVisible')).toBe('false');
- // expect(screen.getByTestId('menuVisible')).toBe('false');
- // expect(screen.getByTestId('showEditModal')).toBe('true');
- // expect(screen.getByTestId('showDeleteModal')).toBe('false');
+ //Secondary Modal is closed
+ expect(screen.queryByTestId('deletePostModalBtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('editPostModalBtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('pinpostBtn')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('closebtn')).not.toBeInTheDocument();
});
test('clears postvideo state and resets file input value', async () => {
const { getByTestId } = render(
@@ -513,6 +652,56 @@ describe('Testing Organization Post Card', () => {
fireEvent.click(clearImageButton);
}
});
+ test('clears postitle state and resets file input value', async () => {
+ const { getByTestId } = render(
+
+
+
+ ,
+ );
+
+ await wait();
+
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+ userEvent.click(screen.getByTestId('editPostModalBtn'));
+
+ fireEvent.change(getByTestId('updateTitle'), {
+ target: { value: '' },
+ });
+
+ userEvent.click(screen.getByTestId('updatePostBtn')); // Should not update post
+
+ expect(screen.getByTestId('updateTitle')).toHaveValue('');
+ expect(screen.getByTestId('closeOrganizationModal')).toBeInTheDocument();
+ expect(screen.getByTestId('updatePostBtn')).toBeInTheDocument();
+ });
+ test('clears postinfo state and resets file input value', async () => {
+ const { getByTestId } = render(
+
+
+
+ ,
+ );
+
+ await wait();
+
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+ userEvent.click(screen.getByTestId('editPostModalBtn'));
+
+ fireEvent.change(getByTestId('updateText'), {
+ target: { value: '' },
+ });
+
+ userEvent.click(screen.getByTestId('updatePostBtn')); // Should not update post
+
+ expect(screen.getByTestId('updateText')).toHaveValue('');
+ expect(screen.getByTestId('closeOrganizationModal')).toBeInTheDocument();
+ expect(screen.getByTestId('updatePostBtn')).toBeInTheDocument();
+ });
test('Testing create organization modal', async () => {
setItem('id', '123');
@@ -576,8 +765,8 @@ describe('Testing Organization Post Card', () => {
});
test('for rendering when no image and no video is available', async () => {
const props2 = {
- key: '123',
id: '',
+ postID: '123',
postTitle: 'Event Info',
postInfo: 'Time change',
postAuthor: 'John Doe',
diff --git a/src/components/OrgPostCard/OrgPostCard.tsx b/src/components/OrgPostCard/OrgPostCard.tsx
index be71622c7c..b7cc419d12 100644
--- a/src/components/OrgPostCard/OrgPostCard.tsx
+++ b/src/components/OrgPostCard/OrgPostCard.tsx
@@ -16,7 +16,7 @@ import { errorHandler } from 'utils/errorHandler';
import type { InterfacePostForm } from 'utils/interfaces';
import styles from './OrgPostCard.module.css';
interface InterfaceOrgPostCardProps {
- key: string;
+ postID: string;
id: string;
postTitle: string;
postInfo: string;
@@ -25,9 +25,13 @@ interface InterfaceOrgPostCardProps {
postVideo: string | null;
pinned: boolean;
}
-export default function orgPostCard(
+export default function OrgPostCard(
props: InterfaceOrgPostCardProps,
): JSX.Element {
+ const {
+ postID, // Destructure the key prop from props
+ // ...rest // Spread the rest of the props
+ } = props;
const [postformState, setPostFormState] = useState({
posttitle: '',
postinfo: '',
@@ -68,12 +72,13 @@ export default function orgPostCard(
}
};
const toggleShowEditModal = (): void => {
+ const { postTitle, postInfo, postPhoto, postVideo, pinned } = props;
setPostFormState({
- posttitle: props.postTitle,
- postinfo: props.postInfo,
- postphoto: props.postPhoto,
- postvideo: props.postVideo,
- pinned: props.pinned,
+ posttitle: postTitle,
+ postinfo: postInfo,
+ postphoto: postPhoto,
+ postvideo: postVideo,
+ pinned: pinned,
});
setPostPhotoUpdated(false);
setPostVideoUpdated(false);
@@ -128,13 +133,14 @@ export default function orgPostCard(
}
}
function handleEditModal(): void {
+ const { postPhoto, postVideo } = props;
setModalVisible(false);
setMenuVisible(false);
setShowEditModal(true);
setPostFormState({
...postformState,
- postphoto: props.postPhoto,
- postvideo: props.postVideo,
+ postphoto: postPhoto,
+ postvideo: postVideo,
});
}
function handleDeleteModal(): void {
@@ -165,7 +171,7 @@ export default function orgPostCard(
},
});
if (data) {
- toast.success(t('postDeleted'));
+ toast.success(t('postDeleted') as string);
toggleShowDeleteModal();
setTimeout(() => {
window.location.reload();
@@ -203,7 +209,7 @@ export default function orgPostCard(
},
});
if (data) {
- toast.success(t('postUpdated'));
+ toast.success(t('postUpdated') as string);
setTimeout(() => {
window.location.reload();
}, 2000);
@@ -216,7 +222,11 @@ export default function orgPostCard(
};
return (
<>
-
- {tCommon('menu')} -
{targets.map(({ name, url }, index) => { return url ? (
-
- Error occured while loading Action Item Categories Data
-
-
- );
- }
-
- // Render the list of action item categories
- const actionItemCategories = data?.actionItemCategoriesByOrganization;
-
- return (
- <>
-
-
-
- Error occured while loading Action Item Categories Data
-
- {`${error.message}`}
-
-
- {actionItemCategories?.map((category, index) => {
- return (
-
-
- {/* Modal for creating or updating categories */}
-
-
} -
- );
- })}
-
-
-
- {index !== actionItemCategories.length - 1 && - {category.name} -
-
-
-
-
- } -
- {t('actionItemCategoryDetails')} -
- -
+
({
+ toast: {
+ success: jest.fn(),
+ error: jest.fn(),
+ },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link3 = new StaticMockLink(MOCKS_ERROR);
+const translations = {
+ ...JSON.parse(
+ JSON.stringify(
+ i18n.getDataByLanguage('en')?.translation.orgActionItemCategories ?? {},
+ ),
+ ),
+ ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+ ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const categoryProps: InterfaceActionItemCategoryModal[] = [
+ {
+ isOpen: true,
+ hide: jest.fn(),
+ refetchCategories: jest.fn(),
+ orgId: 'orgId',
+ mode: 'create',
+ category: {
+ _id: 'categoryId',
+ name: 'Category 1',
+ isDisabled: false,
+ createdAt: '2044-01-01',
+ creator: { _id: 'userId', firstName: 'John', lastName: 'Doe' },
+ },
+ },
+ {
+ isOpen: true,
+ hide: jest.fn(),
+ refetchCategories: jest.fn(),
+ orgId: 'orgId',
+ mode: 'edit',
+ category: {
+ _id: 'categoryId',
+ name: 'Category 1',
+ isDisabled: false,
+ createdAt: '2044-01-01',
+ creator: { _id: 'userId', firstName: 'John', lastName: 'Doe' },
+ },
+ },
+];
+
+const renderCategoryModal = (
+ link: ApolloLink,
+ props: InterfaceActionItemCategoryModal,
+): RenderResult => {
+ return render(
+
+
+
+
+
+
+
+ ,
+ );
+};
+
+const fillFormAndSubmit = async (
+ name: string,
+ isDisabled: boolean,
+): Promise => {
+ const nameInput = screen.getByLabelText('Name *');
+ const isDisabledSwitch = screen.getByTestId('isDisabledSwitch');
+ const submitBtn = screen.getByTestId('formSubmitButton');
+
+ fireEvent.change(nameInput, { target: { value: name } });
+ if (isDisabled) {
+ userEvent.click(isDisabledSwitch);
+ }
+ userEvent.click(submitBtn);
+};
+
+describe('Testing Action Item Category Modal', () => {
+ it('should populate form fields with correct values in edit mode', async () => {
+ renderCategoryModal(link1, categoryProps[1]);
+ await waitFor(() =>
+ expect(
+ screen.getByText(translations.categoryDetails),
+ ).toBeInTheDocument(),
+ );
+
+ expect(screen.getByLabelText('Name *')).toHaveValue('Category 1');
+ expect(screen.getByTestId('isDisabledSwitch')).not.toBeChecked();
+ });
+
+ it('should update name when input value changes', async () => {
+ renderCategoryModal(link1, categoryProps[1]);
+ const nameInput = screen.getByLabelText('Name *');
+ expect(nameInput).toHaveValue('Category 1');
+ fireEvent.change(nameInput, { target: { value: 'Category 2' } });
+ expect(nameInput).toHaveValue('Category 2');
+ });
+
+ it('should update isDisabled when switch is toggled', async () => {
+ renderCategoryModal(link1, categoryProps[1]);
+ const isDisabledSwitch = screen.getByTestId('isDisabledSwitch');
+ expect(isDisabledSwitch).not.toBeChecked();
+ userEvent.click(isDisabledSwitch);
+ expect(isDisabledSwitch).toBeChecked();
+ });
+
+ it('should edit category', async () => {
+ renderCategoryModal(link1, categoryProps[1]);
+ await fillFormAndSubmit('Category 2', true);
+
+ await waitFor(() => {
+ expect(categoryProps[1].refetchCategories).toHaveBeenCalled();
+ expect(categoryProps[1].hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(
+ translations.successfulUpdation,
+ );
+ });
+ });
+
+ it('Edit only Name', async () => {
+ renderCategoryModal(link1, categoryProps[1]);
+ await fillFormAndSubmit('Category 2', false);
+
+ await waitFor(() => {
+ expect(categoryProps[1].refetchCategories).toHaveBeenCalled();
+ expect(categoryProps[1].hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(
+ translations.successfulUpdation,
+ );
+ });
+ });
+
+ it('Edit only isDisabled', async () => {
+ renderCategoryModal(link1, categoryProps[1]);
+ await fillFormAndSubmit('Category 1', true);
+
+ await waitFor(() => {
+ expect(categoryProps[1].refetchCategories).toHaveBeenCalled();
+ expect(categoryProps[1].hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(
+ translations.successfulUpdation,
+ );
+ });
+ });
+
+ it('Error in updating category', async () => {
+ renderCategoryModal(link3, categoryProps[1]);
+ await fillFormAndSubmit('Category 2', true);
+
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+ });
+ });
+
+ it('should create category', async () => {
+ renderCategoryModal(link1, categoryProps[0]);
+ await fillFormAndSubmit('Category 2', true);
+
+ await waitFor(() => {
+ expect(categoryProps[0].refetchCategories).toHaveBeenCalled();
+ expect(categoryProps[0].hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(
+ translations.successfulCreation,
+ );
+ });
+ });
+
+ it('Error in creating category', async () => {
+ renderCategoryModal(link3, categoryProps[0]);
+ await fillFormAndSubmit('Category 2', true);
+
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+ });
+ });
+
+ it('Try to edit without changing any field', async () => {
+ renderCategoryModal(link1, categoryProps[1]);
+ const submitBtn = screen.getByTestId('formSubmitButton');
+ userEvent.click(submitBtn);
+
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith(translations.sameNameConflict);
+ });
+ });
+});
diff --git a/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx b/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx
new file mode 100644
index 0000000000..43018db0ab
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx
@@ -0,0 +1,208 @@
+import React, { type ChangeEvent, type FC, useEffect, useState } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import styles from './OrgActionItemCategories.module.css';
+import { useTranslation } from 'react-i18next';
+import type { InterfaceActionItemCategoryInfo } from 'utils/interfaces';
+import { useMutation } from '@apollo/client';
+import {
+ CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+ UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+} from 'GraphQl/Mutations/ActionItemCategoryMutations';
+import { toast } from 'react-toastify';
+import { FormControl, TextField } from '@mui/material';
+
+/**
+ * Props for the `CategoryModal` component.
+ *
+ *
+ * isOpen - The state of the modal.
+ * hide - The function to hide the modal.
+ * refetchCategories - The function to refetch the categories.
+ * orgId - The organization ID.
+ * category - The category to be edited.
+ * mode - The mode of the modal.
+ * @returns The `CategoryModal` component.
+ */
+export interface InterfaceActionItemCategoryModal {
+ isOpen: boolean;
+ hide: () => void;
+ refetchCategories: () => void;
+ orgId: string;
+ category: InterfaceActionItemCategoryInfo | null;
+ mode: 'create' | 'edit';
+}
+
+/**
+ * A modal component for creating and editing action item categories.
+ *
+ * @param props - The properties passed to the component.
+ * @returns The `CategoryModal` component.
+ */
+const CategoryModal: FC = ({
+ category,
+ hide,
+ isOpen,
+ mode,
+ refetchCategories,
+ orgId,
+}) => {
+ const { t: tCommon } = useTranslation('common');
+ const { t } = useTranslation('translation', {
+ keyPrefix: 'orgActionItemCategories',
+ });
+
+ const [formState, setFormState] = useState({
+ name: category?.name ?? '',
+ isDisabled: category?.isDisabled ?? false,
+ });
+
+ const { name, isDisabled } = formState;
+
+ useEffect(() => {
+ setFormState({
+ name: category?.name ?? '',
+ isDisabled: category?.isDisabled ?? false,
+ });
+ }, [category]);
+
+ // Mutations for creating and updating categories
+ const [createActionItemCategory] = useMutation(
+ CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+ );
+
+ const [updateActionItemCategory] = useMutation(
+ UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+ );
+
+ /**
+ * Handles category creation.
+ *
+ * @param e - The form submission event.
+ */
+ const handleCreate = async (
+ e: ChangeEvent,
+ ): Promise => {
+ e.preventDefault();
+ try {
+ await createActionItemCategory({
+ variables: {
+ name,
+ isDisabled,
+ organizationId: orgId,
+ },
+ });
+
+ refetchCategories();
+ hide();
+ toast.success(t('successfulCreation'));
+ } catch (error: unknown) {
+ toast.error((error as Error).message);
+ }
+ };
+
+ /**
+ * Handles category update.
+ *
+ * @param e - The form submission event.
+ */
+ const handleEdit = async (e: ChangeEvent): Promise => {
+ e.preventDefault();
+ if (name === category?.name && isDisabled === category?.isDisabled) {
+ toast.error(t('sameNameConflict')); // Show error if the name is the same
+ } else {
+ try {
+ const updatedFields: { [key: string]: string | boolean } = {};
+ if (name != category?.name) {
+ updatedFields.name = name;
+ }
+ if (isDisabled != category?.isDisabled) {
+ updatedFields.isDisabled = isDisabled;
+ }
+
+ await updateActionItemCategory({
+ variables: {
+ actionItemCategoryId: category?._id,
+ ...updatedFields,
+ },
+ });
+
+ setFormState({
+ name: '',
+ isDisabled: false,
+ });
+ refetchCategories();
+ hide();
+ toast.success(t('successfulUpdation'));
+ } catch (error: unknown) {
+ toast.error((error as Error).message);
+ }
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default CategoryModal;
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css
new file mode 100644
index 0000000000..919421b0f2
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css
@@ -0,0 +1,138 @@
+/* Button Styles */
+.addButton {
+ /* Position and size of the button */
+ width: 7em;
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
+}
+
+/* Modal Styles */
+.createModal {
+ /* Position and size of the modal */
+ margin-top: 20vh;
+ margin-left: 13vw;
+ max-width: 80vw;
+}
+
+.icon {
+ /* Size and color of the icon */
+ transform: scale(1.5);
+ color: var(--bs-danger);
+ margin-bottom: 1rem;
+}
+
+.message {
+ /* Centering the content of the modal */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.titlemodal {
+ /* Styling for the modal title */
+ color: #707070;
+ font-weight: 600;
+ font-size: 32px;
+ width: 65%;
+ margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+ /* Styling for the modal close button */
+ width: 40px;
+ height: 40px;
+ padding: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* Input Styles */
+.noOutline input {
+ /* Removing the outline from the input */
+ outline: none;
+}
+
+/* Header and Action Item Categories Styles */
+.btnsContainer {
+ /* Styling for the container of the buttons */
+ display: flex;
+ margin: 0.5rem 0 1.5rem 0;
+}
+
+.btnsContainer .input {
+ /* Styling for the input field */
+ flex: 1;
+ min-width: 18rem;
+ position: relative;
+}
+
+.btnsContainer input {
+ /* Styling for the input border */
+ outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+ /* Styling for the button in the input field */
+ width: 52px;
+}
+
+.inputField {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ background-color: white;
+ box-shadow: 0 1px 1px #31bb6b;
+}
+
+.inputField > button {
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+/* Dropdown Styles */
+.dropdown {
+ /* Styling for the dropdown */
+ background-color: white;
+ border: 1px solid #31bb6b;
+ position: relative;
+ display: inline-block;
+ color: #31bb6b;
+}
+
+/* Datagrid Styles */
+.rowBackground {
+ /* Styling for the row background */
+ background-color: var(--bs-white);
+ max-height: 120px;
+}
+
+.tableHeader {
+ /* Styling for the table header */
+ background-color: var(--bs-primary);
+ color: var(--bs-white);
+ font-size: 1rem;
+}
+
+.chipIcon {
+ /* Styling for the chip icon */
+ height: 0.9rem !important;
+}
+
+.chip {
+ /* Styling for the chip */
+ height: 1.5rem !important;
+}
+
+.active {
+ /* Styling for the active state */
+ background-color: #31bb6a50 !important;
+}
+
+.pending {
+ /* Styling for the pending state */
+ background-color: #ffd76950 !important;
+ color: #bb952bd0 !important;
+ border-color: #bb952bd0 !important;
+}
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx
new file mode 100644
index 0000000000..d3698bf346
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx
@@ -0,0 +1,241 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import type { ApolloLink } from '@apollo/client';
+import { MOCKS, MOCKS_EMPTY, MOCKS_ERROR } from './OrgActionItemCategoryMocks';
+import OrgActionItemCategories from './OrgActionItemCategories';
+
+jest.mock('react-toastify', () => ({
+ toast: {
+ success: jest.fn(),
+ error: jest.fn(),
+ },
+}));
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+ return {
+ DateTimePicker: jest.requireActual(
+ '@mui/x-date-pickers/DesktopDateTimePicker',
+ ).DesktopDateTimePicker,
+ };
+});
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_EMPTY);
+const link3 = new StaticMockLink(MOCKS_ERROR);
+const t = {
+ ...JSON.parse(
+ JSON.stringify(
+ i18n.getDataByLanguage('en')?.translation.orgActionItemCategories ?? {},
+ ),
+ ),
+ ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+ ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const renderActionItemCategories = (
+ link: ApolloLink,
+ orgId: string,
+): RenderResult => {
+ return render(
+
+
+
+
+
+
+
+ ,
+ );
+};
+
+describe('Testing Organisation Action Item Categories', () => {
+ it('should render the Action Item Categories Screen', async () => {
+ renderActionItemCategories(link1, 'orgId');
+ await waitFor(() => {
+ expect(screen.getByTestId('searchByName')).toBeInTheDocument();
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.getByText('Category 2')).toBeInTheDocument();
+ });
+ });
+
+ it('Sort the Categories (asc/desc) by createdAt', async () => {
+ renderActionItemCategories(link1, 'orgId');
+
+ const sortBtn = await screen.findByTestId('sort');
+ expect(sortBtn).toBeInTheDocument();
+
+ // Sort by createdAt_DESC
+ fireEvent.click(sortBtn);
+ await waitFor(() => {
+ expect(screen.getByTestId('createdAt_DESC')).toBeInTheDocument();
+ });
+ fireEvent.click(screen.getByTestId('createdAt_DESC'));
+ await waitFor(() => {
+ expect(screen.getAllByTestId('categoryName')[0]).toHaveTextContent(
+ 'Category 1',
+ );
+ });
+
+ // Sort by createdAt_ASC
+ fireEvent.click(sortBtn);
+ await waitFor(() => {
+ expect(screen.getByTestId('createdAt_ASC')).toBeInTheDocument();
+ });
+ fireEvent.click(screen.getByTestId('createdAt_ASC'));
+ await waitFor(() => {
+ expect(screen.getAllByTestId('categoryName')[0]).toHaveTextContent(
+ 'Category 2',
+ );
+ });
+ });
+
+ it('Filter the categories by status (All/Disabled)', async () => {
+ renderActionItemCategories(link1, 'orgId');
+
+ const filterBtn = await screen.findByTestId('filter');
+ expect(filterBtn).toBeInTheDocument();
+
+ // Filter by All
+ fireEvent.click(filterBtn);
+ await waitFor(() => {
+ expect(screen.getByTestId('statusAll')).toBeInTheDocument();
+ });
+ fireEvent.click(screen.getByTestId('statusAll'));
+
+ await waitFor(() => {
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.getByText('Category 2')).toBeInTheDocument();
+ });
+
+ // Filter by Disabled
+ fireEvent.click(filterBtn);
+ await waitFor(() => {
+ expect(screen.getByTestId('statusDisabled')).toBeInTheDocument();
+ });
+ fireEvent.click(screen.getByTestId('statusDisabled'));
+ await waitFor(() => {
+ expect(screen.queryByText('Category 1')).toBeNull();
+ expect(screen.getByText('Category 2')).toBeInTheDocument();
+ });
+ });
+
+ it('Filter the categories by status (Active)', async () => {
+ renderActionItemCategories(link1, 'orgId');
+
+ const filterBtn = await screen.findByTestId('filter');
+ expect(filterBtn).toBeInTheDocument();
+
+ fireEvent.click(filterBtn);
+ await waitFor(() => {
+ expect(screen.getByTestId('statusActive')).toBeInTheDocument();
+ });
+ fireEvent.click(screen.getByTestId('statusActive'));
+ await waitFor(() => {
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.queryByText('Category 2')).toBeNull();
+ });
+ });
+
+ it('open and closes Create Category modal', async () => {
+ renderActionItemCategories(link1, 'orgId');
+
+ const addCategoryBtn = await screen.findByTestId(
+ 'createActionItemCategoryBtn',
+ );
+ expect(addCategoryBtn).toBeInTheDocument();
+ userEvent.click(addCategoryBtn);
+
+ await waitFor(() => expect(screen.getAllByText(t.create)).toHaveLength(2));
+ userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn'));
+ await waitFor(() =>
+ expect(
+ screen.queryByTestId('actionItemCategoryModalCloseBtn'),
+ ).toBeNull(),
+ );
+ });
+
+ it('open and closes Edit Category modal', async () => {
+ renderActionItemCategories(link1, 'orgId');
+
+ const editCategoryBtn = await screen.findByTestId('editCategoryBtn1');
+ await waitFor(() => expect(editCategoryBtn).toBeInTheDocument());
+ userEvent.click(editCategoryBtn);
+
+ await waitFor(() =>
+ expect(screen.getByText(t.updateActionItemCategory)).toBeInTheDocument(),
+ );
+ userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn'));
+ await waitFor(() =>
+ expect(
+ screen.queryByTestId('actionItemCategoryModalCloseBtn'),
+ ).toBeNull(),
+ );
+ });
+
+ it('Search categories by name', async () => {
+ renderActionItemCategories(link1, 'orgId');
+
+ const searchInput = await screen.findByTestId('searchByName');
+ expect(searchInput).toBeInTheDocument();
+
+ userEvent.type(searchInput, 'Category 1');
+ userEvent.click(screen.getByTestId('searchBtn'));
+ await waitFor(() => {
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.queryByText('Category 2')).toBeNull();
+ });
+ });
+
+ it('Search categories by name and clear the input by backspace', async () => {
+ renderActionItemCategories(link1, 'orgId');
+
+ const searchInput = await screen.findByTestId('searchByName');
+ expect(searchInput).toBeInTheDocument();
+
+ // Clear the search input by backspace
+ userEvent.type(searchInput, 'A{backspace}');
+ await waitFor(() => {
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.getByText('Category 2')).toBeInTheDocument();
+ });
+ });
+
+ it('Search categories by name on press of ENTER', async () => {
+ renderActionItemCategories(link1, 'orgId');
+
+ const searchInput = await screen.findByTestId('searchByName');
+ expect(searchInput).toBeInTheDocument();
+
+ userEvent.type(searchInput, 'Category 1');
+ userEvent.type(searchInput, '{enter}');
+ await waitFor(() => {
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.queryByText('Category 2')).toBeNull();
+ });
+ });
+
+ it('should render Empty Action Item Categories Screen', async () => {
+ renderActionItemCategories(link2, 'orgId');
+ await waitFor(() => {
+ expect(screen.getByTestId('searchByName')).toBeInTheDocument();
+ expect(screen.getByText(t.noActionItemCategories)).toBeInTheDocument();
+ });
+ });
+
+ it('should render the Action Item Categories Screen with error', async () => {
+ renderActionItemCategories(link3, 'orgId');
+ await waitFor(() => {
+ expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx
new file mode 100644
index 0000000000..49cf47dd49
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx
@@ -0,0 +1,418 @@
+import type { FC } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import styles from './OrgActionItemCategories.module.css';
+import { useTranslation } from 'react-i18next';
+
+import { useQuery } from '@apollo/client';
+import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/Queries';
+import type { InterfaceActionItemCategoryInfo } from 'utils/interfaces';
+import Loader from 'components/Loader/Loader';
+import {
+ Circle,
+ Search,
+ Sort,
+ WarningAmberRounded,
+ FilterAltOutlined,
+} from '@mui/icons-material';
+import {
+ DataGrid,
+ type GridCellParams,
+ type GridColDef,
+} from '@mui/x-data-grid';
+import dayjs from 'dayjs';
+import { Chip, Stack } from '@mui/material';
+import CategoryModal from './CategoryModal';
+
+enum ModalState {
+ SAME = 'same',
+ DELETE = 'delete',
+}
+
+enum CategoryStatus {
+ Active = 'active',
+ Disabled = 'disabled',
+}
+
+interface InterfaceActionItemCategoryProps {
+ orgId: string;
+}
+
+const dataGridStyle = {
+ '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+ outline: 'none !important',
+ },
+ '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+ outline: 'none',
+ },
+ '& .MuiDataGrid-row:hover': {
+ backgroundColor: 'transparent',
+ },
+ '& .MuiDataGrid-row.Mui-hovered': {
+ backgroundColor: 'transparent',
+ },
+ '& .MuiDataGrid-root': {
+ borderRadius: '0.5rem',
+ },
+ '& .MuiDataGrid-main': {
+ borderRadius: '0.5rem',
+ },
+};
+
+/**
+ * Represents the component for managing organization action item categories.
+ * This component allows creating, updating, enabling, and disabling action item categories.
+ */
+const OrgActionItemCategories: FC = ({
+ orgId,
+}) => {
+ const { t } = useTranslation('translation', {
+ keyPrefix: 'orgActionItemCategories',
+ });
+ const { t: tCommon } = useTranslation('common');
+ const { t: tErrors } = useTranslation('errors');
+
+ const [category, setCategory] =
+ useState(null);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [searchValue, setSearchValue] = useState('');
+ const [sortBy, setSortBy] = useState<'createdAt_ASC' | 'createdAt_DESC'>(
+ 'createdAt_DESC',
+ );
+ const [status, setStatus] = useState(null);
+ const [categories, setCategories] = useState<
+ InterfaceActionItemCategoryInfo[]
+ >([]);
+ const [modalMode, setModalMode] = useState<'edit' | 'create'>('create');
+ const [modalState, setModalState] = useState<{
+ [key in ModalState]: boolean;
+ }>({
+ [ModalState.SAME]: false,
+ [ModalState.DELETE]: false,
+ });
+
+ // Query to fetch action item categories
+ const {
+ data: catData,
+ loading: catLoading,
+ error: catError,
+ refetch: refetchCategories,
+ }: {
+ data?: {
+ actionItemCategoriesByOrganization: InterfaceActionItemCategoryInfo[];
+ };
+ loading: boolean;
+ error?: Error | undefined;
+ refetch: () => void;
+ } = useQuery(ACTION_ITEM_CATEGORY_LIST, {
+ variables: {
+ organizationId: orgId,
+ where: {
+ name_contains: searchTerm,
+ is_disabled: !status ? undefined : status === CategoryStatus.Disabled,
+ },
+ orderBy: sortBy,
+ },
+ });
+
+ const openModal = (modal: ModalState): void =>
+ setModalState((prevState) => ({ ...prevState, [modal]: true }));
+
+ const closeModal = (modal: ModalState): void =>
+ setModalState((prevState) => ({ ...prevState, [modal]: false }));
+
+ const handleOpenModal = useCallback(
+ (
+ category: InterfaceActionItemCategoryInfo | null,
+ mode: 'edit' | 'create',
+ ): void => {
+ setCategory(category);
+ setModalMode(mode);
+ openModal(ModalState.SAME);
+ },
+ [openModal],
+ );
+
+ useEffect(() => {
+ if (catData && catData.actionItemCategoriesByOrganization) {
+ setCategories(catData.actionItemCategoriesByOrganization);
+ }
+ }, [catData]);
+
+ // Show loader while data is being fetched
+ if (catLoading) {
+ return
- {
@@ -96,7 +96,7 @@ describe('Testing Agenda Categories Component', () => {
- {
@@ -119,7 +119,7 @@ describe('Testing Agenda Categories Component', () => {
- {
@@ -152,7 +152,7 @@ describe('Testing Agenda Categories Component', () => {
- {
diff --git a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.tsx b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
similarity index 92%
rename from src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.tsx
rename to src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
index 9fcb3f0a40..884371d862 100644
--- a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.tsx
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
@@ -1,8 +1,7 @@
import React, { useState } from 'react';
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from 'react-bootstrap';
-import { useParams } from 'react-router-dom';
import { WarningAmberRounded } from '@mui/icons-material';
import { toast } from 'react-toastify';
@@ -17,6 +16,10 @@ import AgendaCategoryCreateModal from './AgendaCategoryCreateModal';
import styles from './OrganizationAgendaCategory.module.css';
import Loader from 'components/Loader/Loader';
+interface InterfaceAgendaCategoryProps {
+ orgId: string;
+}
+
/**
* Component for managing and displaying agenda item categories within an organization.
*
@@ -24,14 +27,14 @@ import Loader from 'components/Loader/Loader';
*
* @returns The rendered component.
*/
-function organizationAgendaCategory(): JSX.Element {
+
+const organizationAgendaCategory: FC = ({
+ orgId,
+}) => {
const { t } = useTranslation('translation', {
keyPrefix: 'organizationAgendaCategory',
});
- // Get the organization ID from URL parameters
- const { orgId: currentUrl } = useParams();
-
// State for managing modal visibility and form data
const [agendaCategoryCreateModalIsOpen, setAgendaCategoryCreateModalIsOpen] =
useState(false);
@@ -56,7 +59,7 @@ function organizationAgendaCategory(): JSX.Element {
error?: unknown | undefined;
refetch: () => void;
} = useQuery(AGENDA_ITEM_CATEGORY_LIST, {
- variables: { organizationId: currentUrl },
+ variables: { organizationId: orgId },
notifyOnNetworkStatusChange: true,
});
@@ -81,13 +84,13 @@ function organizationAgendaCategory(): JSX.Element {
await createAgendaCategory({
variables: {
input: {
- organizationId: currentUrl,
+ organizationId: orgId,
name: formState.name,
description: formState.description,
},
},
});
- toast.success(t('agendaCategoryCreated'));
+ toast.success(t('agendaCategoryCreated') as string);
setFormState({ name: '', description: '', createdBy: '' });
refetchAgendaCategory();
hideCreateModal();
@@ -132,7 +135,7 @@ function organizationAgendaCategory(): JSX.Element {
}
return (
-
{t('categoryDetails')}
+ +
+
+ {tErrors('errorLoading', { entity: 'Action Item Categories' })}
+
+
+ );
+ }
+
+ const columns: GridColDef[] = [
+ {
+ field: 'id',
+ headerName: 'Sr. No.',
+ flex: 1,
+ minWidth: 100,
+ align: 'center',
+ headerAlign: 'center',
+ headerClassName: `${styles.tableHeader}`,
+ sortable: false,
+ renderCell: (params: GridCellParams) => {
+ return
+ {tErrors('errorLoading', { entity: 'Action Item Categories' })}
+
+ {`${catError.message}`}
+
+ {params.row.id}
;
+ },
+ },
+ {
+ field: 'categoryName',
+ headerName: 'Category',
+ flex: 2,
+ align: 'center',
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+ {params.row.name}
+
+ );
+ },
+ },
+ {
+ field: 'status',
+ headerName: 'Status',
+ flex: 1,
+ align: 'center',
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+ {dayjs(params.row.createdAt).format('DD/MM/YYYY')}
+
+ );
+ },
+ },
+ {
+ field: 'action',
+ headerName: 'Action',
+ flex: 2,
+ align: 'center',
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+ );
+ },
+ },
+ ];
+
+ return (
+
+ {/* Header with search, filter and Create Button */}
+ row._id}
+ slots={{
+ noRowsOverlay: () => (
+
+ {t('noActionItemCategories')}
+
+ ),
+ }}
+ sx={dataGridStyle}
+ getRowClassName={() => `${styles.rowBackground}`}
+ autoHeight
+ rowHeight={65}
+ rows={categories.map((category, index) => ({
+ id: index + 1,
+ ...category,
+ }))}
+ columns={columns}
+ isRowSelectable={() => false}
+ />
+
+ closeModal(ModalState.SAME)}
+ refetchCategories={refetchCategories}
+ category={category}
+ orgId={orgId}
+ mode={modalMode}
+ />
+
+ );
+};
+
+export default OrgActionItemCategories;
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategoryMocks.ts b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategoryMocks.ts
new file mode 100644
index 0000000000..10310a01e4
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategoryMocks.ts
@@ -0,0 +1,288 @@
+import {
+ CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+ UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+
+import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+ {
+ request: {
+ query: ACTION_ITEM_CATEGORY_LIST,
+ variables: {
+ organizationId: 'orgId',
+ where: { name_contains: '' },
+ orderBy: 'createdAt_DESC',
+ },
+ },
+ result: {
+ data: {
+ actionItemCategoriesByOrganization: [
+ {
+ _id: 'categoryId1',
+ name: 'Category 1',
+ isDisabled: false,
+ createdAt: '2024-08-26',
+ creator: {
+ _id: 'creatorId1',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ {
+ _id: 'categoryId2',
+ name: 'Category 2',
+ isDisabled: true,
+ createdAt: '2024-08-25',
+ creator: {
+ _id: 'creatorId2',
+ firstName: 'John',
+ lastName: 'Doe',
+ },
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_CATEGORY_LIST,
+ variables: {
+ organizationId: 'orgId',
+ where: { name_contains: '' },
+ orderBy: 'createdAt_ASC',
+ },
+ },
+ result: {
+ data: {
+ actionItemCategoriesByOrganization: [
+ {
+ _id: 'categoryId2',
+ name: 'Category 2',
+ isDisabled: true,
+ createdAt: '2024-08-25',
+ creator: {
+ _id: 'creatorId2',
+ firstName: 'John',
+ lastName: 'Doe',
+ },
+ },
+ {
+ _id: 'categoryId1',
+ name: 'Category 1',
+ isDisabled: false,
+ createdAt: '2024-08-26',
+ creator: {
+ _id: 'creatorId1',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_CATEGORY_LIST,
+ variables: {
+ organizationId: 'orgId',
+ where: { name_contains: '', is_disabled: false },
+ orderBy: 'createdAt_DESC',
+ },
+ },
+ result: {
+ data: {
+ actionItemCategoriesByOrganization: [
+ {
+ _id: 'categoryId1',
+ name: 'Category 1',
+ isDisabled: false,
+ createdAt: '2024-08-26',
+ creator: {
+ _id: 'creatorId1',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_CATEGORY_LIST,
+ variables: {
+ organizationId: 'orgId',
+ where: { name_contains: '', is_disabled: true },
+ orderBy: 'createdAt_DESC',
+ },
+ },
+ result: {
+ data: {
+ actionItemCategoriesByOrganization: [
+ {
+ _id: 'categoryId2',
+ name: 'Category 2',
+ isDisabled: true,
+ createdAt: '2024-08-25',
+ creator: {
+ _id: 'creatorId2',
+ firstName: 'John',
+ lastName: 'Doe',
+ },
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_CATEGORY_LIST,
+ variables: {
+ organizationId: 'orgId',
+ where: { name_contains: 'Category 1' },
+ orderBy: 'createdAt_DESC',
+ },
+ },
+ result: {
+ data: {
+ actionItemCategoriesByOrganization: [
+ {
+ _id: 'categoryId1',
+ name: 'Category 1',
+ isDisabled: false,
+ createdAt: '2024-08-26',
+ creator: {
+ _id: 'creatorId1',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+ variables: {
+ name: 'Category 2',
+ isDisabled: true,
+ organizationId: 'orgId',
+ },
+ },
+ result: {
+ data: {
+ createActionItemCategory: {
+ _id: 'categoryId3',
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+ variables: {
+ name: 'Category 2',
+ isDisabled: true,
+ actionItemCategoryId: 'categoryId',
+ },
+ },
+ result: {
+ data: {
+ updateActionItemCategory: {
+ _id: 'categoryId',
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+ variables: {
+ name: 'Category 2',
+ isDisabled: false,
+ actionItemCategoryId: 'categoryId',
+ },
+ },
+ result: {
+ data: {
+ updateActionItemCategory: {
+ _id: 'categoryId',
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+ variables: {
+ name: 'Category 1',
+ isDisabled: true,
+ actionItemCategoryId: 'categoryId',
+ },
+ },
+ result: {
+ data: {
+ updateActionItemCategory: {
+ _id: 'categoryId',
+ },
+ },
+ },
+ },
+];
+
+export const MOCKS_EMPTY = [
+ {
+ request: {
+ query: ACTION_ITEM_CATEGORY_LIST,
+ variables: {
+ organizationId: 'orgId',
+ where: { name_contains: '' },
+ orderBy: 'createdAt_DESC',
+ },
+ },
+ result: {
+ data: {
+ actionItemCategoriesByOrganization: [],
+ },
+ },
+ },
+];
+
+export const MOCKS_ERROR = [
+ {
+ request: {
+ query: ACTION_ITEM_CATEGORY_LIST,
+ variables: {
+ organizationId: 'orgId',
+ where: { name_contains: '' },
+ orderBy: 'createdAt_DESC',
+ },
+ },
+ error: new Error('Mock Graphql Error'),
+ },
+ {
+ request: {
+ query: CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+ variables: {
+ name: 'Category 2',
+ isDisabled: true,
+ organizationId: 'orgId',
+ },
+ },
+ error: new Error('Mock Graphql Error'),
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+ variables: {
+ name: 'Category 2',
+ isDisabled: true,
+ actionItemCategoryId: 'categoryId',
+ },
+ },
+ error: new Error('Mock Graphql Error'),
+ },
+];
diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.test.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx
similarity index 100%
rename from src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.test.tsx
rename to src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx
diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx
similarity index 100%
rename from src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.tsx
rename to src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx
diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryDeleteModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx
similarity index 100%
rename from src/screens/OrganizationAgendaCategory/AgendaCategoryDeleteModal.tsx
rename to src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx
diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryPreviewModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx
similarity index 100%
rename from src/screens/OrganizationAgendaCategory/AgendaCategoryPreviewModal.tsx
rename to src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx
diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.test.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx
similarity index 100%
rename from src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.test.tsx
rename to src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx
diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx
similarity index 100%
rename from src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.tsx
rename to src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx
diff --git a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.module.css b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css
similarity index 100%
rename from src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.module.css
rename to src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css
diff --git a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.test.tsx b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx
similarity index 96%
rename from src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.test.tsx
rename to src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx
index 732db13a74..e05edc665d 100644
--- a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.test.tsx
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx
@@ -76,7 +76,7 @@ describe('Testing Agenda Categories Component', () => {
+
+
+ {/* Table with Action Item Categories */}
+
+ setSearchValue(e.target.value)}
+ onKeyUp={(e) => {
+ if (e.key === 'Enter') {
+ setSearchTerm(searchValue);
+ } else if (e.key === 'Backspace' && searchValue === '') {
+ setSearchTerm('');
+ }
+ }}
+ data-testid="searchByName"
+ />
+
+
+
+
+
+
+
+
+
+ setSortBy('createdAt_DESC')}
+ data-testid="createdAt_DESC"
+ >
+ {tCommon('createdLatest')}
+
+ setSortBy('createdAt_ASC')}
+ data-testid="createdAt_ASC"
+ >
+ {tCommon('createdEarliest')}
+
+
+
+
+
+
+
+ setStatus(null)}
+ data-testid="statusAll"
+ >
+ {tCommon('all')}
+
+ setStatus(CategoryStatus.Active)}
+ data-testid="statusActive"
+ >
+ {tCommon('active')}
+
+ setStatus(CategoryStatus.Disabled)}
+ data-testid="statusDisabled"
+ >
+ {tCommon('disabled')}
+
+
+
+
+
+
+
+
+
{
+ await act(async () => {
+ await new Promise((resolve) => setTimeout(resolve, ms));
+ });
+}
+
+const MOCKS = [
+ {
+ request: {
+ query: IS_SAMPLE_ORGANIZATION_QUERY,
+ variables: {
+ isSampleOrganizationId: '123',
+ },
+ },
+ result: {
+ data: {
+ isSampleOrganization: true,
+ },
+ },
+ },
+ {
+ request: {
+ query: REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+ },
+ result: {
+ data: {
+ removeSampleOrganization: true,
+ },
+ },
+ },
+ {
+ request: {
+ query: DELETE_ORGANIZATION_MUTATION,
+ variables: {
+ id: '456',
+ },
+ },
+ result: {
+ data: {
+ removeOrganization: {
+ _id: '456',
+ },
+ },
+ },
+ },
+];
+
+const MOCKS_WITH_ERROR = [
+ {
+ request: {
+ query: IS_SAMPLE_ORGANIZATION_QUERY,
+ variables: {
+ isSampleOrganizationId: '123',
+ },
+ },
+ result: {
+ data: {
+ isSampleOrganization: true,
+ },
+ },
+ },
+ {
+ request: {
+ query: DELETE_ORGANIZATION_MUTATION,
+ variables: {
+ id: '456',
+ },
+ },
+ error: new Error('Failed to delete organization'),
+ },
+ {
+ request: {
+ query: REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+ },
+ error: new Error('Failed to delete sample organization'),
+ },
+];
+
+const mockNavgatePush = jest.fn();
+let mockURL = '123';
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useParams: () => ({ orgId: mockURL }),
+ useNavigate: () => mockNavgatePush,
+}));
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_WITH_ERROR, true);
+
+afterEach(() => {
+ localStorage.clear();
+});
+
+describe('Delete Organization Component', () => {
+ test('should be able to Toggle Delete Organization Modal', async () => {
+ mockURL = '456';
+ setItem('SuperAdmin', true);
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
+ act(() => {
+ screen.getByTestId(/openDeleteModalBtn/i).click();
+ });
+ expect(await screen.findByTestId(/orgDeleteModal/i)).toBeInTheDocument();
+ act(() => {
+ screen.getByTestId(/closeDelOrgModalBtn/i).click();
+ });
+ await waitFor(() => {
+ expect(screen.queryByTestId(/orgDeleteModal/i)).not.toBeInTheDocument();
+ });
+ });
+
+ test('should be able to Toggle Delete Organization Modal When Organization is Sample Organization', async () => {
+ mockURL = '123';
+ setItem('SuperAdmin', true);
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
+ await wait();
+ act(() => {
+ screen.getByTestId(/openDeleteModalBtn/i).click();
+ });
+ expect(screen.getByTestId(/orgDeleteModal/i)).toBeInTheDocument();
+ act(() => {
+ screen.getByTestId(/closeDelOrgModalBtn/i).click();
+ });
+ await waitFor(() => {
+ expect(screen.queryByTestId(/orgDeleteModal/i)).not.toBeInTheDocument();
+ });
+ });
+
+ test('Delete organization functionality should work properly', async () => {
+ mockURL = '456';
+ setItem('SuperAdmin', true);
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
+ screen.debug();
+ act(() => {
+ screen.getByTestId('openDeleteModalBtn').click();
+ });
+ screen.debug();
+ expect(await screen.findByTestId('orgDeleteModal')).toBeInTheDocument();
+ const deleteButton = await screen.findByTestId('deleteOrganizationBtn');
+ act(() => {
+ deleteButton.click();
+ });
+ });
+
+ test('Delete organization functionality should work properly for sample org', async () => {
+ mockURL = '123';
+ setItem('SuperAdmin', true);
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
+ await waitFor(() => {
+ expect(screen.getByTestId('openDeleteModalBtn')).toBeInTheDocument();
+ });
+ act(() => {
+ screen.getByTestId('openDeleteModalBtn').click();
+ });
+ await waitFor(() => {
+ expect(screen.getByTestId('orgDeleteModal')).toBeInTheDocument();
+ });
+ const deleteButton = await screen.findByTestId('deleteOrganizationBtn');
+ act(() => {
+ deleteButton.click();
+ });
+ await wait(2000);
+ expect(mockNavgatePush).toHaveBeenCalledWith('/orglist');
+ });
+
+ test('Error handling for IS_SAMPLE_ORGANIZATION_QUERY mock', async () => {
+ mockURL = '123';
+ setItem('SuperAdmin', true);
+ jest.spyOn(toast, 'error');
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
+ await waitFor(() => {
+ expect(screen.getByTestId('openDeleteModalBtn')).toBeInTheDocument();
+ });
+ act(() => {
+ screen.getByTestId('openDeleteModalBtn').click();
+ });
+ await waitFor(() => {
+ expect(screen.getByTestId('orgDeleteModal')).toBeInTheDocument();
+ });
+ act(() => {
+ screen.getByTestId('deleteOrganizationBtn').click();
+ });
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith(
+ 'Failed to delete sample organization',
+ );
+ });
+ });
+
+ test('Error handling for DELETE_ORGANIZATION_MUTATION mock', async () => {
+ mockURL = '456';
+ setItem('SuperAdmin', true);
+ jest.spyOn(toast, 'error');
+
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
+ await waitFor(() => {
+ expect(screen.getByTestId('openDeleteModalBtn')).toBeInTheDocument();
+ });
+ act(() => {
+ screen.getByTestId('openDeleteModalBtn').click();
+ });
+ await waitFor(() => {
+ expect(screen.getByTestId('orgDeleteModal')).toBeInTheDocument();
+ });
+ act(() => {
+ screen.getByTestId('deleteOrganizationBtn').click();
+ });
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith('Failed to delete organization');
+ });
+ });
+});
diff --git a/src/components/DeleteOrg/DeleteOrg.tsx b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx
similarity index 99%
rename from src/components/DeleteOrg/DeleteOrg.tsx
rename to src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx
index e9370cb1a6..8edf11ca22 100644
--- a/src/components/DeleteOrg/DeleteOrg.tsx
+++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx
@@ -69,7 +69,7 @@ function deleteOrg(): JSX.Element {
// If it's a sample organization, use a specific mutation
removeSampleOrganization()
.then(() => {
- toast.success(t('successfullyDeletedSampleOrganization'));
+ toast.success(t('successfullyDeletedSampleOrganization') as string);
setTimeout(() => {
navigate('/orglist');
}, 1000);
diff --git a/src/components/OrgSettings/General/GeneralSettings.tsx b/src/components/OrgSettings/General/GeneralSettings.tsx
new file mode 100644
index 0000000000..4dbca1b6eb
--- /dev/null
+++ b/src/components/OrgSettings/General/GeneralSettings.tsx
@@ -0,0 +1,73 @@
+import React, { type FC } from 'react';
+import { Card, Col, Form, Row } from 'react-bootstrap';
+import styles from 'screens/OrgSettings/OrgSettings.module.css';
+import OrgProfileFieldSettings from './OrgProfileFieldSettings/OrgProfileFieldSettings';
+import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
+import DeleteOrg from './DeleteOrg/DeleteOrg';
+import OrgUpdate from './OrgUpdate/OrgUpdate';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Props for the `GeneralSettings` component.
+ */
+interface InterfaceGeneralSettingsProps {
+ orgId: string;
+}
+
+/**
+ * A component for displaying general settings for an organization.
+ *
+ * @param props - The properties passed to the component.
+ * @returns The `GeneralSettings` component.
+ */
+const GeneralSettings: FC = ({ orgId }) => {
+ const { t } = useTranslation('translation', {
+ keyPrefix: 'orgSettings',
+ });
+
+ return (
+
+
+
+ {/* Render organization update component */}
+
+
+
+
+
+
+
+
+
+
+ {/* Render organization profile field settings component */}
+
+
+
+
+ );
+};
+
+export default GeneralSettings;
diff --git a/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css
similarity index 100%
rename from src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css
rename to src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css
diff --git a/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
similarity index 98%
rename from src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
rename to src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
index 2630c6c4ee..8db8773381 100644
--- a/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
+++ b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
similarity index 96%
rename from src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
rename to src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
index 5b67a8525d..dcb6992e21 100644
--- a/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
+++ b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
@@ -13,14 +13,7 @@ import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import EditOrgCustomFieldDropDown from 'components/EditCustomFieldDropDown/EditCustomFieldDropDown';
import { useParams } from 'react-router-dom';
-
-/**
- * Interface for custom field data
- */
-export interface InterfaceCustomFieldData {
- type: string;
- name: string;
-}
+import type { InterfaceCustomFieldData } from 'utils/interfaces';
/**
* Component for managing organization profile field settings
@@ -71,7 +64,7 @@ const OrgProfileFieldSettings = (): JSX.Element => {
...customFieldData,
},
});
- toast.success(t('fieldSuccessMessage'));
+ toast.success(t('fieldSuccessMessage') as string);
setCustomFieldData({ type: '', name: '' });
refetch();
} catch (error) {
@@ -89,7 +82,7 @@ const OrgProfileFieldSettings = (): JSX.Element => {
},
});
- toast.success(t('fieldRemovalSuccess'));
+ toast.success(t('fieldRemovalSuccess') as string);
refetch();
} catch (error) {
toast.error((error as Error).message);
diff --git a/src/components/OrgUpdate/OrgUpdate.module.css b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.module.css
similarity index 100%
rename from src/components/OrgUpdate/OrgUpdate.module.css
rename to src/components/OrgSettings/General/OrgUpdate/OrgUpdate.module.css
diff --git a/src/components/OrgUpdate/OrgUpdate.test.tsx b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx
similarity index 98%
rename from src/components/OrgUpdate/OrgUpdate.test.tsx
rename to src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx
index 9c56a61d78..6304bb3ec9 100644
--- a/src/components/OrgUpdate/OrgUpdate.test.tsx
+++ b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
import { StaticMockLink } from 'utils/StaticMockLink';
diff --git a/src/components/OrgUpdate/OrgUpdate.tsx b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx
similarity index 99%
rename from src/components/OrgUpdate/OrgUpdate.tsx
rename to src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx
index f33c758acd..6e0be28a56 100644
--- a/src/components/OrgUpdate/OrgUpdate.tsx
+++ b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx
@@ -144,7 +144,7 @@ function orgUpdate(props: InterfaceOrgUpdateProps): JSX.Element {
// istanbul ignore next
if (data) {
refetch({ id: orgId });
- toast.success(t('successfulUpdated'));
+ toast.success(t('successfulUpdated') as string);
}
} catch (error: unknown) {
errorHandler(t, error);
diff --git a/src/components/OrgUpdate/OrgUpdateMocks.ts b/src/components/OrgSettings/General/OrgUpdate/OrgUpdateMocks.ts
similarity index 100%
rename from src/components/OrgUpdate/OrgUpdateMocks.ts
rename to src/components/OrgSettings/General/OrgUpdate/OrgUpdateMocks.ts
diff --git a/src/components/OrganizationCard/OrganizationCard.test.tsx b/src/components/OrganizationCard/OrganizationCard.test.tsx
index e0095d20b2..e4abf3a1fd 100644
--- a/src/components/OrganizationCard/OrganizationCard.test.tsx
+++ b/src/components/OrganizationCard/OrganizationCard.test.tsx
@@ -6,7 +6,6 @@ describe('Testing the Organization Card', () => {
test('should render props and text elements test for the page component', () => {
const props = {
id: '123',
- key: '456',
image: 'https://via.placeholder.com/80',
firstName: 'John',
lastName: 'Doe',
@@ -24,7 +23,6 @@ describe('Testing the Organization Card', () => {
test('Should render text elements when props value is not passed', () => {
const props = {
id: '123',
- key: '456',
image: '',
firstName: 'John',
lastName: 'Doe',
diff --git a/src/components/OrganizationCard/OrganizationCard.tsx b/src/components/OrganizationCard/OrganizationCard.tsx
index 05f8712ec5..ae513eff5d 100644
--- a/src/components/OrganizationCard/OrganizationCard.tsx
+++ b/src/components/OrganizationCard/OrganizationCard.tsx
@@ -12,47 +12,45 @@ interface InterfaceOrganizationCardProps {
/**
* Component to display an organization's card with its image and owner details.
*
- * @param image - URL of the organization's image.
- * @param id - Unique identifier for the organization.
- * @param name - Name of the organization.
- * @param lastName - Last name of the owner's name.
- * @param firstName - First name of the owner's name.
+ * @param props - Properties for the organization card.
* @returns JSX element representing the organization card.
*/
-function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
+function OrganizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
const uri = '/superorghome/i=' + props.id;
return (
- <>
-
-
diff --git a/src/screens/CommunityProfile/CommunityProfile.test.tsx b/src/screens/CommunityProfile/CommunityProfile.test.tsx
index 033c48464f..d7e056caa4 100644
--- a/src/screens/CommunityProfile/CommunityProfile.test.tsx
+++ b/src/screens/CommunityProfile/CommunityProfile.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import 'jest-localstorage-mock';
import 'jest-location-mock';
@@ -213,53 +213,53 @@ describe('Testing Community Profile Screen', () => {
,
);
- await wait();
+ });
+ await wait();
- const communityName = screen.getByPlaceholderText(/Community Name/i);
- const websiteLink = screen.getByPlaceholderText(/Website Link/i);
- const logo = screen.getByTestId(/fileInput/i);
- const facebook = screen.getByTestId(/facebook/i);
- const instagram = screen.getByTestId(/instagram/i);
- const X = screen.getByTestId(/X/i);
- const linkedIn = screen.getByTestId(/linkedIn/i);
- const github = screen.getByTestId(/github/i);
- const youtube = screen.getByTestId(/youtube/i);
- const reddit = screen.getByTestId(/reddit/i);
- const slack = screen.getByTestId(/slack/i);
- const saveChangesBtn = screen.getByTestId(/saveChangesBtn/i);
- const resetChangeBtn = screen.getByTestId(/resetChangesBtn/i);
+ const communityName = screen.getByPlaceholderText(/Community Name/i);
+ const websiteLink = screen.getByPlaceholderText(/Website Link/i);
+ const logo = screen.getByTestId(/fileInput/i);
+ const facebook = screen.getByTestId(/facebook/i);
+ const instagram = screen.getByTestId(/instagram/i);
+ const X = screen.getByTestId(/X/i);
+ const linkedIn = screen.getByTestId(/linkedIn/i);
+ const github = screen.getByTestId(/github/i);
+ const youtube = screen.getByTestId(/youtube/i);
+ const reddit = screen.getByTestId(/reddit/i);
+ const slack = screen.getByTestId(/slack/i);
+ const saveChangesBtn = screen.getByTestId(/saveChangesBtn/i);
+ const resetChangeBtn = screen.getByTestId(/resetChangesBtn/i);
- userEvent.type(communityName, profileVariables.name);
- userEvent.type(websiteLink, profileVariables.websiteLink);
- userEvent.type(facebook, profileVariables.socialUrl);
- userEvent.type(instagram, profileVariables.socialUrl);
- userEvent.type(X, profileVariables.socialUrl);
- userEvent.type(linkedIn, profileVariables.socialUrl);
- userEvent.type(github, profileVariables.socialUrl);
- userEvent.type(youtube, profileVariables.socialUrl);
- userEvent.type(reddit, profileVariables.socialUrl);
- userEvent.type(slack, profileVariables.socialUrl);
- userEvent.upload(logo, profileVariables.logo);
- await wait();
+ userEvent.type(communityName, profileVariables.name);
+ userEvent.type(websiteLink, profileVariables.websiteLink);
+ userEvent.type(facebook, profileVariables.socialUrl);
+ userEvent.type(instagram, profileVariables.socialUrl);
+ userEvent.type(X, profileVariables.socialUrl);
+ userEvent.type(linkedIn, profileVariables.socialUrl);
+ userEvent.type(github, profileVariables.socialUrl);
+ userEvent.type(youtube, profileVariables.socialUrl);
+ userEvent.type(reddit, profileVariables.socialUrl);
+ userEvent.type(slack, profileVariables.socialUrl);
+ userEvent.upload(logo, profileVariables.logo);
+ await wait();
- expect(communityName).toHaveValue(profileVariables.name);
- expect(websiteLink).toHaveValue(profileVariables.websiteLink);
- // expect(logo).toBeTruthy();
- expect(facebook).toHaveValue(profileVariables.socialUrl);
- expect(instagram).toHaveValue(profileVariables.socialUrl);
- expect(X).toHaveValue(profileVariables.socialUrl);
- expect(linkedIn).toHaveValue(profileVariables.socialUrl);
- expect(github).toHaveValue(profileVariables.socialUrl);
- expect(youtube).toHaveValue(profileVariables.socialUrl);
- expect(reddit).toHaveValue(profileVariables.socialUrl);
- expect(slack).toHaveValue(profileVariables.socialUrl);
- expect(saveChangesBtn).not.toBeDisabled();
- expect(resetChangeBtn).not.toBeDisabled();
- await wait();
+ expect(communityName).toHaveValue(profileVariables.name);
+ expect(websiteLink).toHaveValue(profileVariables.websiteLink);
+ // expect(logo).toBeTruthy();
+ expect(facebook).toHaveValue(profileVariables.socialUrl);
+ expect(instagram).toHaveValue(profileVariables.socialUrl);
+ expect(X).toHaveValue(profileVariables.socialUrl);
+ expect(linkedIn).toHaveValue(profileVariables.socialUrl);
+ expect(github).toHaveValue(profileVariables.socialUrl);
+ expect(youtube).toHaveValue(profileVariables.socialUrl);
+ expect(reddit).toHaveValue(profileVariables.socialUrl);
+ expect(slack).toHaveValue(profileVariables.socialUrl);
+ expect(saveChangesBtn).not.toBeDisabled();
+ expect(resetChangeBtn).not.toBeDisabled();
+ await wait();
- userEvent.click(saveChangesBtn);
- await wait();
- });
+ userEvent.click(saveChangesBtn);
+ await wait();
});
test('If the queried data has some fields null then the input field should be empty', async () => {
diff --git a/src/screens/CommunityProfile/CommunityProfile.tsx b/src/screens/CommunityProfile/CommunityProfile.tsx
index 2f2d956b55..02f8b8aca4 100644
--- a/src/screens/CommunityProfile/CommunityProfile.tsx
+++ b/src/screens/CommunityProfile/CommunityProfile.tsx
@@ -146,7 +146,7 @@ const CommunityProfile = (): JSX.Element => {
},
},
});
- toast.success(t('profileChangedMsg'));
+ toast.success(t('profileChangedMsg') as string);
} catch (error: unknown) {
/* istanbul ignore next */
errorHandler(t, error as Error);
@@ -179,7 +179,7 @@ const CommunityProfile = (): JSX.Element => {
resetPreLoginImageryId: preLoginData?._id,
},
});
- toast.success(t(`resetData`));
+ toast.success(t(`resetData`) as string);
} catch (error: unknown) {
/* istanbul ignore next */
errorHandler(t, error as Error);
diff --git a/src/screens/EventManagement/EventManagement.module.css b/src/screens/EventManagement/EventManagement.module.css
deleted file mode 100644
index f7e911887c..0000000000
--- a/src/screens/EventManagement/EventManagement.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.content {
- width: 100%;
- height: 100%;
- min-height: 80vh;
- box-sizing: border-box;
- background: #ffffff;
- border-radius: 1rem;
-}
diff --git a/src/screens/EventManagement/EventManagement.tsx b/src/screens/EventManagement/EventManagement.tsx
index adcc536a08..8a5b685855 100644
--- a/src/screens/EventManagement/EventManagement.tsx
+++ b/src/screens/EventManagement/EventManagement.tsx
@@ -1,18 +1,16 @@
import React, { useState } from 'react';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
-import styles from './EventManagement.module.css';
import { Navigate, useNavigate, useParams } from 'react-router-dom';
-import { ReactComponent as AngleLeftIcon } from 'assets/svgs/angleLeft.svg';
-import { ReactComponent as EventDashboardIcon } from 'assets/svgs/eventDashboard.svg';
-import { ReactComponent as EventRegistrantsIcon } from 'assets/svgs/people.svg';
-import { ReactComponent as EventActionsIcon } from 'assets/svgs/settings.svg';
-import { ReactComponent as EventAgendaItemsIcon } from 'assets/svgs/agenda-items.svg';
-import { ReactComponent as EventStatisticsIcon } from 'assets/svgs/eventStats.svg';
+import { FaChevronLeft, FaTasks } from 'react-icons/fa';
+import { MdOutlineDashboard } from 'react-icons/md';
+import EventRegistrantsIcon from 'assets/svgs/people.svg?react';
+import { IoMdStats } from 'react-icons/io';
+import EventAgendaItemsIcon from 'assets/svgs/agenda-items.svg?react';
import { useTranslation } from 'react-i18next';
-import { Button } from 'react-bootstrap';
+import { Button, Dropdown } from 'react-bootstrap';
import EventDashboard from 'components/EventManagement/Dashboard/EventDashboard';
-import EventActionItems from 'components/EventManagement/EventActionItems/EventActionItems';
+import OrganizationActionItems from 'screens/OrganizationActionItems/OrganizationActionItems';
import EventAgendaItems from 'components/EventManagement/EventAgendaItems/EventAgendaItems';
import useLocalStorage from 'utils/useLocalstorage';
@@ -27,7 +25,7 @@ const eventDashboardTabs: {
}[] = [
{
value: 'dashboard',
- icon: ('dashboard');
- /**
- * Handles tab button clicks to update the selected tab.
- *
- * @param value - The value representing the tab to select
- */
- const handleClick = (value: TabOptions): void => {
- setTab(value);
- };
-
/**
* Renders a button for each tab with the appropriate icon and label.
*
@@ -133,86 +122,123 @@ const EventManagement = (): JSX.Element => {
const selected = tab === value;
const variant = selected ? 'success' : 'light';
const translatedText = t(value);
+
const className = selected
- ? 'px-4'
- : 'text-secondary border-secondary-subtle px-4';
+ ? 'px-4 d-flex align-items-center shadow'
+ : 'text-secondary bg-white px-4 d-flex align-items-center rounded shadow';
const props = {
variant,
className,
- key: value,
+ style: { height: '2.5rem' },
size: 'sm' as 'sm' | 'lg',
- onClick: () => handleClick(value),
+ onClick: () => setTab(value),
'data-testid': `${value}Btn`,
};
return (
- }
+ />
+
-
+
,
);
-
- await wait();
-
- expect(screen.getAllByText(/Delete Organization/i)).toHaveLength(3);
- expect(
- screen.getByText(
- /By clicking on Delete Organization button the organization will be permanently deleted along with its events, tags and all related data/i,
- ),
- ).toBeInTheDocument();
- expect(screen.getByText(/Other Settings/i)).toBeInTheDocument();
- expect(screen.getByText(/Change Language/i)).toBeInTheDocument();
- expect(window.location).toBeAt('/orgsetting/123');
+ await waitFor(() => {
+ expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+ });
});
- test('should render appropriate settings based on the orgSetting state', async () => {
- window.location.assign('/orgsetting/123');
- setItem('SuperAdmin', true);
-
- const { queryByText } = render(
-
-
-
-
-
-
-
- ,
- );
-
- await wait();
+ test('should render the organisation settings page', async () => {
+ renderOrganisationSettings(link1);
await waitFor(() => {
- userEvent.click(screen.getByTestId('actionItemCategoriesSettings'));
+ expect(screen.getByTestId('generalSettings')).toBeInTheDocument();
expect(
- queryByText(translations.actionItemCategories),
+ screen.getByTestId('actionItemCategoriesSettings'),
).toBeInTheDocument();
+ expect(
+ screen.getByTestId('agendaItemCategoriesSettings'),
+ ).toBeInTheDocument();
+ });
+ userEvent.click(screen.getByTestId('generalSettings'));
+
+ await waitFor(() => {
+ expect(screen.getByTestId('generalTab')).toBeInTheDocument();
+ });
+
+ userEvent.click(screen.getByTestId('actionItemCategoriesSettings'));
+ await waitFor(() => {
+ expect(screen.getByTestId('actionItemCategoriesTab')).toBeInTheDocument();
});
+ userEvent.click(screen.getByTestId('agendaItemCategoriesSettings'));
await waitFor(() => {
- userEvent.click(screen.getByTestId('generalSettings'));
- expect(queryByText(translations.updateOrganization)).toBeInTheDocument();
+ expect(screen.getByTestId('agendaItemCategoriesTab')).toBeInTheDocument();
});
});
});
diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx
index 336c4eb427..e4ae5424a6 100644
--- a/src/screens/OrgSettings/OrgSettings.tsx
+++ b/src/screens/OrgSettings/OrgSettings.tsx
@@ -1,18 +1,21 @@
import React, { useState } from 'react';
-import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
-import DeleteOrg from 'components/DeleteOrg/DeleteOrg';
-import OrgUpdate from 'components/OrgUpdate/OrgUpdate';
-import { Button, Card, Dropdown, Form } from 'react-bootstrap';
-import Col from 'react-bootstrap/Col';
-import Row from 'react-bootstrap/Row';
+import { Button, Dropdown, Row, Col } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import styles from './OrgSettings.module.css';
-import OrgProfileFieldSettings from 'components/OrgProfileFieldSettings/OrgProfileFieldSettings';
-import OrgActionItemCategories from 'components/OrgActionItemCategories/OrgActionItemCategories';
-import { useParams } from 'react-router-dom';
+import OrgActionItemCategories from 'components/OrgSettings/ActionItemCategories/OrgActionItemCategories';
+import OrganizationAgendaCategory from 'components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory';
+import { Navigate, useParams } from 'react-router-dom';
+import GeneralSettings from 'components/OrgSettings/General/GeneralSettings';
// Type representing the different settings categories available
-type SettingType = 'general' | 'actionItemCategories';
+type SettingType = 'general' | 'actionItemCategories' | 'agendaItemCategories';
+
+// List of available settings categories
+const settingtabs: SettingType[] = [
+ 'general',
+ 'actionItemCategories',
+ 'agendaItemCategories',
+];
/**
* The `orgSettings` component provides a user interface for managing various settings related to an organization.
@@ -29,11 +32,7 @@ function orgSettings(): JSX.Element {
keyPrefix: 'orgSettings',
});
- // List of available settings categories
- const orgSettings: SettingType[] = ['general', 'actionItemCategories'];
-
- // State to manage the currently selected settings category
- const [orgSetting, setOrgSetting] = useState('general');
+ const [tab, setTab] = useState('general');
// Set the document title using the translated title for this page
document.title = t('title');
@@ -41,130 +40,89 @@ function orgSettings(): JSX.Element {
// Get the organization ID from the URL parameters
const { orgId } = useParams();
+ if (!orgId) {
+ return ) => void;
- createActionItemHandler: (e: ChangeEvent) => Promise;
- t: (key: string) => string;
- actionItemCategories: InterfaceActionItemCategoryInfo[] | undefined;
- membersData: InterfaceMemberInfo[] | undefined;
- dueDate: Date | null;
- setDueDate: (state: React.SetStateAction) => void;
-}
-
-/**
- * A modal component for creating action items.
- *
- * @param props - The properties passed to the component.
- * @returns The `ActionItemCreateModal` component.
- */
-const ActionItemCreateModal: React.FC = ({
- actionItemCreateModalIsOpen,
- hideCreateModal,
- formState,
- setFormState,
- createActionItemHandler,
- t,
- actionItemCategories,
- membersData,
- dueDate,
- setDueDate,
-}) => {
- return (
- <>
-
-
-
-
-
-
-
-
- );
-};
-
-export default ActionItemCreateModal;
diff --git a/src/screens/OrganizationActionItems/ActionItemDeleteModal.tsx b/src/screens/OrganizationActionItems/ActionItemDeleteModal.tsx
deleted file mode 100644
index 22725b5f56..0000000000
--- a/src/screens/OrganizationActionItems/ActionItemDeleteModal.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { Modal, Button } from 'react-bootstrap';
-import styles from './OrganizationActionItems.module.css';
-
-/**
- * Props for the `ActionItemPreviewModal` component.
- */
-interface InterfaceActionItemCreateModalProps {
- actionItemDeleteModalIsOpen: boolean;
- deleteActionItemHandler: () => Promise;
- toggleDeleteModal: () => void;
- t: (key: string) => string;
- tCommon: (key: string) => string;
-}
-
-/**
- * A modal component for confirming the deletion of an action item.
- *
- * @param props - The properties passed to the component.
- * @returns The `ActionItemPreviewModal` component.
- */
-const ActionItemPreviewModal: React.FC = ({
- actionItemDeleteModalIsOpen,
- deleteActionItemHandler,
- toggleDeleteModal,
- t,
- tCommon,
-}) => {
- return (
- <>
-
-
-
- {t('deleteActionItem')}
-
-
- {t('deleteActionItemMsg')}
-
-
-
-
-
-
- );
-};
-
-export default ActionItemPreviewModal;
diff --git a/src/screens/OrganizationActionItems/ActionItemPreviewModal.tsx b/src/screens/OrganizationActionItems/ActionItemPreviewModal.tsx
deleted file mode 100644
index ae2043bf88..0000000000
--- a/src/screens/OrganizationActionItems/ActionItemPreviewModal.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import React from 'react';
-import { Modal, Form, Button } from 'react-bootstrap';
-
-import styles from './OrganizationActionItems.module.css';
-import dayjs from 'dayjs';
-/**
- * State object for form details related to an action item.
- */
-interface InterfaceFormStateType {
- assigneeId: string;
- assignee: string;
- assigner: string;
- isCompleted: boolean;
- preCompletionNotes: string;
- postCompletionNotes: string;
-}
-/**
- * Props for the `ActionItemPreviewModal` component.
- */
-interface InterfaceActionItemCreateModalProps {
- actionItemPreviewModalIsOpen: boolean;
- hidePreviewModal: () => void;
- showUpdateModal: () => void;
- toggleDeleteModal: () => void;
- formState: InterfaceFormStateType;
- t: (key: string) => string;
- dueDate: Date | null;
- completionDate: Date | null;
- assignmentDate: Date | null;
-}
-
-/**
- * A modal component for previewing the details of an action item.
- *
- * @param props - The properties passed to the component.
- * @returns The `ActionItemPreviewModal` component.
- */
-const ActionItemPreviewModal: React.FC = ({
- actionItemPreviewModalIsOpen,
- hidePreviewModal,
- showUpdateModal,
- toggleDeleteModal,
- formState,
- t,
- dueDate,
- completionDate,
- assignmentDate,
-}) => {
- return (
- <>
-
-
-
-
-
-
-
-
- );
-};
-
-export default ActionItemPreviewModal;
diff --git a/src/screens/OrganizationActionItems/ActionItemUpdateModal.test.tsx b/src/screens/OrganizationActionItems/ActionItemUpdateModal.test.tsx
deleted file mode 100644
index f52da23530..0000000000
--- a/src/screens/OrganizationActionItems/ActionItemUpdateModal.test.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import ActionItemUpdateModal from './ActionItemUpdateModal';
-import { MockedProvider } from '@apollo/react-testing';
-import { I18nextProvider } from 'react-i18next';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import { store } from 'state/store';
-import i18nForTest from 'utils/i18nForTest';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import type { InterfaceMemberInfo } from 'utils/interfaces';
-import { t } from 'i18next';
-
-const mockMembersData: InterfaceMemberInfo[] = [
- {
- _id: '1',
- firstName: 'John',
- lastName: 'Doe',
- email: 'john.doe@example.com',
- image: 'https://example.com/john-doe.jpg',
- createdAt: '2022-01-01T00:00:00.000Z',
- organizationsBlockedBy: [],
- },
- {
- _id: '2',
- firstName: 'Jane',
- lastName: 'Smith',
- email: 'jane.smith@example.com',
- image: 'https://example.com/jane-smith.jpg',
- createdAt: '2022-02-01T00:00:00.000Z',
- organizationsBlockedBy: [],
- },
-];
-
-const mockFormState = {
- assigneeId: '1',
- assignee: 'John Doe',
- assigner: 'Jane Smith',
- isCompleted: false,
- preCompletionNotes: 'Test pre-completion notes',
- postCompletionNotes: '',
-};
-
-const mockDueDate = new Date('2023-05-01');
-const mockCompletionDate = new Date('2023-05-15');
-
-const mockHideUpdateModal = jest.fn();
-const mockSetFormState = jest.fn();
-const mockUpdateActionItemHandler = jest.fn();
-const mockSetDueDate = jest.fn();
-const mockSetCompletionDate = jest.fn();
-const mockT = (key: string): string => key;
-
-describe('ActionItemUpdateModal', () => {
- test('renders modal correctly', () => {
- render(
-
-
-
-
-
-
-
-
-
- ,
- );
-
- expect(screen.getByText('actionItemDetails')).toBeInTheDocument();
- expect(
- screen.getByTestId('updateActionItemModalCloseBtn'),
- ).toBeInTheDocument();
- expect(screen.getByTestId('formUpdateAssignee')).toBeInTheDocument();
- expect(screen.getByLabelText('preCompletionNotes')).toBeInTheDocument();
- expect(screen.getByLabelText('dueDate')).toBeInTheDocument();
- expect(screen.getByLabelText('completionDate')).toBeInTheDocument();
- expect(screen.getByTestId('editActionItemBtn')).toBeInTheDocument();
- });
-
- test('closes modal when close button is clicked', () => {
- render(
-
-
-
-
-
-
-
-
-
- ,
- );
-
- fireEvent.click(screen.getByTestId('updateActionItemModalCloseBtn'));
- expect(mockHideUpdateModal).toHaveBeenCalled();
- });
-
- test('updates form state when assignee is changed', () => {
- render(
-
-
-
-
-
-
-
-
-
- ,
- );
-
- const assigneeSelect = screen.getByTestId('formUpdateAssignee');
- userEvent.selectOptions(assigneeSelect, '2');
- expect(mockSetFormState).toHaveBeenCalledWith({
- ...mockFormState,
- assigneeId: '2',
- });
- });
-
- test('tests the condition for formState.preCompletionNotes', () => {
- const mockFormState = {
- assigneeId: '1',
- assignee: 'John Doe',
- assigner: 'Jane Smith',
- isCompleted: false,
- preCompletionNotes: '',
- postCompletionNotes: '',
- };
- render(
-
-
-
-
-
-
-
-
-
- ,
- );
- const preCompletionNotesInput = screen.getByLabelText('preCompletionNotes');
- fireEvent.change(preCompletionNotesInput, {
- target: { value: 'New pre-completion notes' },
- });
- expect(mockSetFormState).toHaveBeenCalledWith({
- ...mockFormState,
- preCompletionNotes: 'New pre-completion notes',
- });
- });
-
- test('calls updateActionItemHandler when form is submitted', () => {
- render(
-
-
-
-
-
-
-
-
-
- ,
- );
-
- fireEvent.submit(screen.getByTestId('editActionItemBtn'));
- expect(mockUpdateActionItemHandler).toHaveBeenCalled();
- });
-});
diff --git a/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx b/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx
deleted file mode 100644
index 89a262fe0b..0000000000
--- a/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React from 'react';
-import { Modal, Form, Button } from 'react-bootstrap';
-import type { ChangeEvent } from 'react';
-import { DatePicker } from '@mui/x-date-pickers';
-import dayjs from 'dayjs';
-import type { Dayjs } from 'dayjs';
-
-import styles from './OrganizationActionItems.module.css';
-import type { InterfaceMemberInfo } from 'utils/interfaces';
-
-/**
- * InterfaceFormStateType is an object containing the form state
- */
-interface InterfaceFormStateType {
- assigneeId: string;
- assignee: string;
- assigner: string;
- isCompleted: boolean;
- preCompletionNotes: string;
- postCompletionNotes: string;
-}
-
-/**
- * ActionItemUpdateModal component is used to update the action item details like assignee, preCompletionNotes, dueDate, completionDate
- * @param actionItemUpdateModalIsOpen - boolean value to check if the modal is open or not
- * @param hideUpdateModal - function to hide the modal
- * @param formState - object containing the form state
- * @param setFormState - function to set the form state
- * @param updateActionItemHandler - function to update the action item
- * @param t - i18n function to translate the text
- * @param membersData - array of members data
- * @param dueDate - due date of the action item
- * @param setDueDate - function to set the due date
- * @param completionDate - completion date of the action item
- * @param setCompletionDate - function to set the completion date
- * @returns returns the ActionItemUpdateModal component
- */
-interface InterfaceActionItemCreateModalProps {
- actionItemUpdateModalIsOpen: boolean;
- hideUpdateModal: () => void;
- formState: InterfaceFormStateType;
- setFormState: (state: React.SetStateAction) => void;
- updateActionItemHandler: (e: ChangeEvent) => Promise;
- t: (key: string) => string;
- membersData: InterfaceMemberInfo[] | undefined;
- dueDate: Date | null;
- setDueDate: (state: React.SetStateAction) => void;
- completionDate: Date | null;
- setCompletionDate: (state: React.SetStateAction) => void;
-}
-
-const ActionItemUpdateModal: React.FC = ({
- actionItemUpdateModalIsOpen,
- hideUpdateModal,
- formState,
- setFormState,
- updateActionItemHandler,
- t,
- membersData,
- dueDate,
- setDueDate,
- completionDate,
- setCompletionDate,
-}) => {
- return (
- <>
-
-
-
-
-
-
-
-
- );
-};
-
-export default ActionItemUpdateModal;
diff --git a/src/screens/OrganizationActionItems/ItemDeleteModal.test.tsx b/src/screens/OrganizationActionItems/ItemDeleteModal.test.tsx
new file mode 100644
index 0000000000..3d45e12a25
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemDeleteModal.test.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './OrganizationActionItem.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import ItemDeleteModal, {
+ type InterfaceItemDeleteModalProps,
+} from './ItemDeleteModal';
+
+jest.mock('react-toastify', () => ({
+ toast: {
+ success: jest.fn(),
+ error: jest.fn(),
+ },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = JSON.parse(
+ JSON.stringify(
+ i18nForTest.getDataByLanguage('en')?.translation.organizationActionItems,
+ ),
+);
+
+const itemProps: InterfaceItemDeleteModalProps = {
+ isOpen: true,
+ hide: jest.fn(),
+ actionItemsRefetch: jest.fn(),
+ actionItem: {
+ _id: 'actionItemId1',
+ assignee: {
+ _id: 'userId1',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ },
+ actionItemCategory: {
+ _id: 'actionItemCategoryId1',
+ name: 'Category 1',
+ },
+ preCompletionNotes: 'Notes 1',
+ postCompletionNotes: 'Cmp Notes 1',
+ assignmentDate: new Date('2024-08-27'),
+ dueDate: new Date('2044-08-30'),
+ completionDate: new Date('2044-09-03'),
+ isCompleted: true,
+ event: null,
+ allotedHours: 24,
+ assigner: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ image: null,
+ },
+ creator: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+};
+
+const renderItemDeleteModal = (
+ link: ApolloLink,
+ props: InterfaceItemDeleteModalProps,
+): RenderResult => {
+ return render(
+
+
+
+
+
+
+
+
+
+ ,
+ );
+};
+
+describe('Testing ItemDeleteModal', () => {
+ it('should render ItemDeleteModal', () => {
+ renderItemDeleteModal(link1, itemProps);
+ expect(screen.getByText(t.deleteActionItem)).toBeInTheDocument();
+ });
+
+ it('should successfully Delete Action Item', async () => {
+ renderItemDeleteModal(link1, itemProps);
+ expect(screen.getByTestId('deleteyesbtn')).toBeInTheDocument();
+
+ fireEvent.click(screen.getByTestId('deleteyesbtn'));
+
+ await waitFor(() => {
+ expect(itemProps.actionItemsRefetch).toHaveBeenCalled();
+ expect(itemProps.hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(t.successfulDeletion);
+ });
+ });
+
+ it('should fail to Delete Action Item', async () => {
+ renderItemDeleteModal(link2, itemProps);
+ expect(screen.getByTestId('deleteyesbtn')).toBeInTheDocument();
+ fireEvent.click(screen.getByTestId('deleteyesbtn'));
+
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+ });
+ });
+});
diff --git a/src/screens/OrganizationActionItems/ItemDeleteModal.tsx b/src/screens/OrganizationActionItems/ItemDeleteModal.tsx
new file mode 100644
index 0000000000..2526486993
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemDeleteModal.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Modal, Button } from 'react-bootstrap';
+import styles from './OrganizationActionItems.module.css';
+import { useMutation } from '@apollo/client';
+import { DELETE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/ActionItemMutations';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import type { InterfaceActionItemInfo } from 'utils/interfaces';
+
+/**
+ * Props for the `ItemDeleteModal` component.
+ */
+export interface InterfaceItemDeleteModalProps {
+ isOpen: boolean;
+ hide: () => void;
+ actionItem: InterfaceActionItemInfo | null;
+ actionItemsRefetch: () => void;
+}
+
+/**
+ * A modal component for confirming the deletion of an action item.
+ *
+ * @param props - The properties passed to the component.
+ * @returns The `ItemDeleteModal` component.
+ */
+const ItemDeleteModal: React.FC = ({
+ isOpen,
+ hide,
+ actionItem,
+ actionItemsRefetch,
+}) => {
+ const { t } = useTranslation('translation', {
+ keyPrefix: 'organizationActionItems',
+ });
+ const { t: tCommon } = useTranslation('common');
+
+ const [removeActionItem] = useMutation(DELETE_ACTION_ITEM_MUTATION);
+
+ /**
+ * Handles the action item deletion.
+ */
+ const deleteActionItemHandler = async (): Promise => {
+ try {
+ await removeActionItem({
+ variables: {
+ actionItemId: actionItem?._id,
+ },
+ });
+
+ actionItemsRefetch();
+ hide();
+ toast.success(t('successfulDeletion'));
+ } catch (error: unknown) {
+ toast.error((error as Error).message);
+ }
+ };
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ItemDeleteModal;
diff --git a/src/screens/OrganizationActionItems/ItemModal.test.tsx b/src/screens/OrganizationActionItems/ItemModal.test.tsx
new file mode 100644
index 0000000000..6901e16291
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemModal.test.tsx
@@ -0,0 +1,373 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import {
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+ within,
+} from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18n from '../../utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './OrganizationActionItem.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { InterfaceItemModalProps } from './ItemModal';
+import ItemModal from './ItemModal';
+
+jest.mock('react-toastify', () => ({
+ toast: {
+ success: jest.fn(),
+ error: jest.fn(),
+ warning: jest.fn(),
+ },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = {
+ ...JSON.parse(
+ JSON.stringify(
+ i18n.getDataByLanguage('en')?.translation.organizationActionItems ?? {},
+ ),
+ ),
+ ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+ ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const itemProps: InterfaceItemModalProps[] = [
+ {
+ isOpen: true,
+ hide: jest.fn(),
+ orgId: 'orgId',
+ actionItemsRefetch: jest.fn(),
+ editMode: false,
+ actionItem: null,
+ },
+ {
+ isOpen: true,
+ hide: jest.fn(),
+ orgId: 'orgId',
+ actionItemsRefetch: jest.fn(),
+ editMode: true,
+ actionItem: {
+ _id: 'actionItemId1',
+ assignee: {
+ _id: 'userId1',
+ firstName: 'Harve',
+ lastName: 'Lance',
+ image: '',
+ },
+ actionItemCategory: {
+ _id: 'categoryId1',
+ name: 'Category 1',
+ },
+ preCompletionNotes: 'Notes 1',
+ postCompletionNotes: 'Cmp Notes 1',
+ assignmentDate: new Date('2024-08-27'),
+ dueDate: new Date('2044-08-30'),
+ completionDate: new Date('2044-09-03'),
+ isCompleted: true,
+ event: null,
+ allotedHours: 24,
+ assigner: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ image: null,
+ },
+ creator: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ },
+ {
+ isOpen: true,
+ hide: jest.fn(),
+ orgId: 'orgId',
+ actionItemsRefetch: jest.fn(),
+ editMode: true,
+ actionItem: {
+ _id: 'actionItemId2',
+ assignee: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ image: '',
+ },
+ actionItemCategory: {
+ _id: 'categoryId2',
+ name: 'Category 2',
+ },
+ preCompletionNotes: 'Notes 2',
+ postCompletionNotes: null,
+ assignmentDate: new Date('2024-08-27'),
+ dueDate: new Date('2044-09-30'),
+ completionDate: new Date('2044-10-03'),
+ isCompleted: false,
+ event: null,
+ allotedHours: null,
+ assigner: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ image: 'wilt-image',
+ },
+ creator: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ },
+];
+
+const renderItemModal = (
+ link: ApolloLink,
+ props: InterfaceItemModalProps,
+): RenderResult => {
+ return render(
+
+
+
+
+
+
+
+
+
+ ,
+ );
+};
+
+describe('Testing ItemModal', () => {
+ it('Create Action Item', async () => {
+ renderItemModal(link1, itemProps[0]);
+ expect(screen.getAllByText(t.createActionItem)).toHaveLength(2);
+
+ // Select Category 1
+ const categorySelect = await screen.findByTestId('categorySelect');
+ expect(categorySelect).toBeInTheDocument();
+ const inputField = within(categorySelect).getByRole('combobox');
+ fireEvent.mouseDown(inputField);
+
+ const categoryOption = await screen.findByText('Category 1');
+ expect(categoryOption).toBeInTheDocument();
+ fireEvent.click(categoryOption);
+
+ // Select Assignee
+ const memberSelect = await screen.findByTestId('memberSelect');
+ expect(memberSelect).toBeInTheDocument();
+ const memberInputField = within(memberSelect).getByRole('combobox');
+ fireEvent.mouseDown(memberInputField);
+
+ const memberOption = await screen.findByText('Harve Lance');
+ expect(memberOption).toBeInTheDocument();
+ fireEvent.click(memberOption);
+
+ // Select Due Date
+ fireEvent.change(screen.getByLabelText(t.dueDate), {
+ target: { value: '02/01/2044' },
+ });
+
+ // Select Allotted Hours (try all options)
+ const allotedHours = screen.getByLabelText(t.allotedHours);
+ const allotedHoursOptions = ['', '-1', '9'];
+
+ allotedHoursOptions.forEach((option) => {
+ fireEvent.change(allotedHours, { target: { value: option } });
+ expect(allotedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+ });
+
+ // Add Pre Completion Notes
+ fireEvent.change(screen.getByLabelText(t.preCompletionNotes), {
+ target: { value: 'Notes' },
+ });
+
+ // Click Submit
+ const submitButton = screen.getByTestId('submitBtn');
+ expect(submitButton).toBeInTheDocument();
+ fireEvent.click(submitButton);
+
+ await waitFor(() => {
+ expect(itemProps[0].actionItemsRefetch).toHaveBeenCalled();
+ expect(itemProps[0].hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(t.successfulCreation);
+ });
+ });
+
+ it('Update Action Item (completed)', async () => {
+ renderItemModal(link1, itemProps[1]);
+ expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2);
+
+ // Update Category
+ const categorySelect = await screen.findByTestId('categorySelect');
+ expect(categorySelect).toBeInTheDocument();
+ const inputField = within(categorySelect).getByRole('combobox');
+ fireEvent.mouseDown(inputField);
+
+ const categoryOption = await screen.findByText('Category 2');
+ expect(categoryOption).toBeInTheDocument();
+ fireEvent.click(categoryOption);
+
+ // Update Allotted Hours (try all options)
+ const allotedHours = screen.getByLabelText(t.allotedHours);
+ const allotedHoursOptions = ['', '-1', '19'];
+
+ allotedHoursOptions.forEach((option) => {
+ fireEvent.change(allotedHours, { target: { value: option } });
+ expect(allotedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+ });
+
+ // Update Post Completion Notes
+ fireEvent.change(screen.getByLabelText(t.postCompletionNotes), {
+ target: { value: 'Cmp Notes 2' },
+ });
+
+ // Click Submit
+ const submitButton = screen.getByTestId('submitBtn');
+ expect(submitButton).toBeInTheDocument();
+ fireEvent.click(submitButton);
+
+ await waitFor(() => {
+ expect(itemProps[1].actionItemsRefetch).toHaveBeenCalled();
+ expect(itemProps[1].hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+ });
+ });
+
+ it('Update Action Item (not completed)', async () => {
+ renderItemModal(link1, itemProps[2]);
+ expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2);
+
+ // Update Category
+ const categorySelect = await screen.findByTestId('categorySelect');
+ expect(categorySelect).toBeInTheDocument();
+ const inputField = within(categorySelect).getByRole('combobox');
+ fireEvent.mouseDown(inputField);
+
+ const categoryOption = await screen.findByText('Category 1');
+ expect(categoryOption).toBeInTheDocument();
+ fireEvent.click(categoryOption);
+
+ // Update Assignee
+ const memberSelect = await screen.findByTestId('memberSelect');
+ expect(memberSelect).toBeInTheDocument();
+ const memberInputField = within(memberSelect).getByRole('combobox');
+ fireEvent.mouseDown(memberInputField);
+
+ const memberOption = await screen.findByText('Harve Lance');
+ expect(memberOption).toBeInTheDocument();
+ fireEvent.click(memberOption);
+
+ // Update Allotted Hours (try all options)
+ const allotedHours = screen.getByLabelText(t.allotedHours);
+ const allotedHoursOptions = ['', '-1', '19'];
+
+ allotedHoursOptions.forEach((option) => {
+ fireEvent.change(allotedHours, { target: { value: option } });
+ expect(allotedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+ });
+
+ // Update Due Date
+ fireEvent.change(screen.getByLabelText(t.dueDate), {
+ target: { value: '02/01/2044' },
+ });
+
+ // Update Pre Completion Notes
+ fireEvent.change(screen.getByLabelText(t.preCompletionNotes), {
+ target: { value: 'Notes 3' },
+ });
+
+ // Click Submit
+ const submitButton = screen.getByTestId('submitBtn');
+ expect(submitButton).toBeInTheDocument();
+ fireEvent.click(submitButton);
+
+ await waitFor(() => {
+ expect(itemProps[2].actionItemsRefetch).toHaveBeenCalled();
+ expect(itemProps[2].hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+ });
+ });
+
+ it('Try adding negative Allotted Hours', async () => {
+ renderItemModal(link1, itemProps[0]);
+ expect(screen.getAllByText(t.createActionItem)).toHaveLength(2);
+ const allotedHours = screen.getByLabelText(t.allotedHours);
+ fireEvent.change(allotedHours, { target: { value: '-1' } });
+
+ await waitFor(() => {
+ expect(allotedHours).toHaveValue('');
+ });
+
+ fireEvent.change(allotedHours, { target: { value: '' } });
+
+ await waitFor(() => {
+ expect(allotedHours).toHaveValue('');
+ });
+
+ fireEvent.change(allotedHours, { target: { value: '0' } });
+ await waitFor(() => {
+ expect(allotedHours).toHaveValue('0');
+ });
+
+ fireEvent.change(allotedHours, { target: { value: '19' } });
+ await waitFor(() => {
+ expect(allotedHours).toHaveValue('19');
+ });
+ });
+
+ it('should fail to Create Action Item', async () => {
+ renderItemModal(link2, itemProps[0]);
+ // Click Submit
+ const submitButton = screen.getByTestId('submitBtn');
+ expect(submitButton).toBeInTheDocument();
+ fireEvent.click(submitButton);
+
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+ });
+ });
+
+ it('No Fields Updated while Updating', async () => {
+ renderItemModal(link2, itemProps[1]);
+ // Click Submit
+ const submitButton = screen.getByTestId('submitBtn');
+ expect(submitButton).toBeInTheDocument();
+ fireEvent.click(submitButton);
+
+ await waitFor(() => {
+ expect(toast.warning).toHaveBeenCalledWith(t.noneUpdated);
+ });
+ });
+
+ it('should fail to Update Action Item', async () => {
+ renderItemModal(link2, itemProps[1]);
+ expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2);
+
+ // Update Post Completion Notes
+ fireEvent.change(screen.getByLabelText(t.postCompletionNotes), {
+ target: { value: 'Cmp Notes 2' },
+ });
+
+ // Click Submit
+ const submitButton = screen.getByTestId('submitBtn');
+ expect(submitButton).toBeInTheDocument();
+ fireEvent.click(submitButton);
+
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+ });
+ });
+});
diff --git a/src/screens/OrganizationActionItems/ItemModal.tsx b/src/screens/OrganizationActionItems/ItemModal.tsx
new file mode 100644
index 0000000000..d7a38ee0df
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemModal.tsx
@@ -0,0 +1,440 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Modal, Form, Button } from 'react-bootstrap';
+import type { ChangeEvent, FC } from 'react';
+import styles from './OrganizationActionItems.module.css';
+import { DatePicker } from '@mui/x-date-pickers';
+import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
+
+import type {
+ InterfaceActionItemCategoryInfo,
+ InterfaceActionItemCategoryList,
+ InterfaceActionItemInfo,
+ InterfaceMemberInfo,
+ InterfaceMembersList,
+} from 'utils/interfaces';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { useMutation, useQuery } from '@apollo/client';
+import {
+ CREATE_ACTION_ITEM_MUTATION,
+ UPDATE_ACTION_ITEM_MUTATION,
+} from 'GraphQl/Mutations/ActionItemMutations';
+import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/ActionItemCategoryQueries';
+import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+import { Autocomplete, FormControl, TextField } from '@mui/material';
+
+/**
+ * Interface for the form state used in the `ItemModal` component.
+ */
+interface InterfaceFormStateType {
+ dueDate: Date;
+ actionItemCategoryId: string;
+ assigneeId: string;
+ eventId?: string;
+ preCompletionNotes: string;
+ postCompletionNotes: string | null;
+ allotedHours: number | null;
+ isCompleted: boolean;
+}
+
+/**
+ * Props for the `ItemModal` component.
+ */
+export interface InterfaceItemModalProps {
+ isOpen: boolean;
+ hide: () => void;
+ orgId: string;
+ actionItemsRefetch: () => void;
+ actionItem: InterfaceActionItemInfo | null;
+ editMode: boolean;
+}
+
+/**
+ * Initializes the form state for the `ItemModal` component.
+ *
+ * @param actionItem - The action item to be edited.
+ * @returns
+ */
+
+const initializeFormState = (
+ actionItem: InterfaceActionItemInfo | null,
+): InterfaceFormStateType => ({
+ dueDate: actionItem?.dueDate || new Date(),
+ actionItemCategoryId: actionItem?.actionItemCategory?._id || '',
+ assigneeId: actionItem?.assignee._id || '',
+ preCompletionNotes: actionItem?.preCompletionNotes || '',
+ postCompletionNotes: actionItem?.postCompletionNotes || null,
+ allotedHours: actionItem?.allotedHours || null,
+ isCompleted: actionItem?.isCompleted || false,
+});
+
+/**
+ * A modal component for creating action items.
+ *
+ * @param props - The properties passed to the component.
+ * @returns The `ItemModal` component.
+ */
+const ItemModal: FC = ({
+ isOpen,
+ hide,
+ orgId,
+ actionItem,
+ editMode,
+ actionItemsRefetch,
+}) => {
+ const { t } = useTranslation('translation', {
+ keyPrefix: 'organizationActionItems',
+ });
+
+ const [actionItemCategory, setActionItemCategory] =
+ useState(null);
+ const [assignee, setAssignee] = useState(null);
+
+ const [formState, setFormState] = useState(
+ initializeFormState(actionItem),
+ );
+
+ const {
+ dueDate,
+ actionItemCategoryId,
+ assigneeId,
+ preCompletionNotes,
+ postCompletionNotes,
+ allotedHours,
+ isCompleted,
+ } = formState;
+
+ /**
+ * Query to fetch action item categories for the organization.
+ */
+ const {
+ data: actionItemCategoriesData,
+ }: {
+ data: InterfaceActionItemCategoryList | undefined;
+ } = useQuery(ACTION_ITEM_CATEGORY_LIST, {
+ variables: {
+ organizationId: orgId,
+ where: { is_disabled: false },
+ },
+ });
+
+ /**
+ * Query to fetch members of the organization.
+ */
+ const {
+ data: membersData,
+ }: {
+ data: InterfaceMembersList | undefined;
+ } = useQuery(MEMBERS_LIST, {
+ variables: { id: orgId },
+ });
+
+ const actionItemCategories = useMemo(
+ () => actionItemCategoriesData?.actionItemCategoriesByOrganization || [],
+ [actionItemCategoriesData],
+ );
+
+ const members = useMemo(
+ () => membersData?.organizations[0].members || [],
+ [membersData],
+ );
+
+ /**
+ * Mutation to create & update a new action item.
+ */
+ const [createActionItem] = useMutation(CREATE_ACTION_ITEM_MUTATION);
+ const [updateActionItem] = useMutation(UPDATE_ACTION_ITEM_MUTATION);
+
+ /**
+ * Handler function to update the form state.
+ *
+ * @param field - The field to be updated.
+ * @param value - The value to be set.
+ * @returns void
+ */
+ const handleFormChange = (
+ field: keyof InterfaceFormStateType,
+ value: string | number | boolean | Date | undefined | null,
+ ): void => {
+ setFormState((prevState) => ({ ...prevState, [field]: value }));
+ };
+
+ /**
+ * Handler function to create a new action item.
+ *
+ * @param e - The form submit event.
+ * @returns A promise that resolves when the action item is created.
+ */
+ const createActionItemHandler = async (
+ e: ChangeEvent,
+ ): Promise => {
+ e.preventDefault();
+ try {
+ await createActionItem({
+ variables: {
+ assigneeId: assignee?._id,
+ actionItemCategoryId: actionItemCategory?._id,
+ preCompletionNotes: preCompletionNotes,
+ allotedHours: allotedHours,
+ dueDate: dayjs(dueDate).format('YYYY-MM-DD'),
+ },
+ });
+
+ // Reset form and date after successful creation
+ setFormState(initializeFormState(null));
+ setActionItemCategory(null);
+ setAssignee(null);
+
+ actionItemsRefetch();
+ hide();
+ toast.success(t('successfulCreation'));
+ } catch (error: unknown) {
+ toast.error((error as Error).message);
+ }
+ };
+
+ /**
+ * Handles the form submission for updating an action item.
+ *
+ * @param e - The form submission event.
+ */
+ const updateActionItemHandler = async (
+ e: ChangeEvent,
+ ): Promise => {
+ e.preventDefault();
+ try {
+ const updatedFields: {
+ [key: string]: number | string | boolean | Date | undefined | null;
+ } = {};
+
+ if (actionItemCategoryId !== actionItem?.actionItemCategory?._id) {
+ updatedFields.actionItemCategoryId = actionItemCategoryId;
+ }
+ if (assigneeId !== actionItem?.assignee._id) {
+ updatedFields.assigneeId = assigneeId;
+ }
+
+ if (preCompletionNotes !== actionItem?.preCompletionNotes) {
+ updatedFields.preCompletionNotes = preCompletionNotes;
+ }
+
+ if (postCompletionNotes !== actionItem?.postCompletionNotes) {
+ updatedFields.postCompletionNotes = postCompletionNotes;
+ }
+
+ if (allotedHours !== actionItem?.allotedHours) {
+ updatedFields.allotedHours = allotedHours;
+ }
+
+ if (dueDate !== actionItem?.dueDate) {
+ updatedFields.dueDate = dayjs(dueDate).format('YYYY-MM-DD');
+ }
+
+ if (Object.keys(updatedFields).length === 0) {
+ toast.warning(t('noneUpdated'));
+ return;
+ }
+
+ await updateActionItem({
+ variables: {
+ actionItemId: actionItem?._id,
+ assigneeId: assigneeId,
+ ...updatedFields,
+ },
+ });
+
+ setFormState(initializeFormState(null));
+ actionItemsRefetch();
+ hide();
+ toast.success(t('successfulUpdation'));
+ } catch (error: unknown) {
+ toast.error((error as Error).message);
+ }
+ };
+
+ useEffect(() => {
+ setFormState(initializeFormState(actionItem));
+ setActionItemCategory(
+ actionItemCategories.find(
+ (category) => category._id === actionItem?.actionItemCategory?._id,
+ ) || null,
+ );
+ setAssignee(
+ members.find((member) => member._id === actionItem?.assignee._id) || null,
+ );
+ }, [actionItem, actionItemCategories, members]);
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default ItemModal;
diff --git a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.test.tsx b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.test.tsx
new file mode 100644
index 0000000000..c1fee119cc
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.test.tsx
@@ -0,0 +1,173 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './OrganizationActionItem.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import ItemUpdateStatusModal, {
+ type InterfaceItemUpdateStatusModalProps,
+} from './ItemUpdateStatusModal';
+
+jest.mock('react-toastify', () => ({
+ toast: {
+ success: jest.fn(),
+ error: jest.fn(),
+ },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = JSON.parse(
+ JSON.stringify(
+ i18nForTest.getDataByLanguage('en')?.translation.organizationActionItems,
+ ),
+);
+
+const itemProps: InterfaceItemUpdateStatusModalProps[] = [
+ {
+ isOpen: true,
+ hide: jest.fn(),
+ actionItemsRefetch: jest.fn(),
+ actionItem: {
+ _id: 'actionItemId1',
+ assignee: {
+ _id: 'userId1',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ },
+ actionItemCategory: {
+ _id: 'actionItemCategoryId1',
+ name: 'Category 1',
+ },
+ preCompletionNotes: 'Notes 1',
+ postCompletionNotes: 'Cmp Notes 1',
+ assignmentDate: new Date('2024-08-27'),
+ dueDate: new Date('2044-08-30'),
+ completionDate: new Date('2044-09-03'),
+ isCompleted: true,
+ event: null,
+ allotedHours: 24,
+ assigner: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ image: null,
+ },
+ creator: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ },
+ {
+ isOpen: true,
+ hide: jest.fn(),
+ actionItemsRefetch: jest.fn(),
+ actionItem: {
+ _id: 'actionItemId1',
+ assignee: {
+ _id: 'userId1',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ },
+ actionItemCategory: {
+ _id: 'actionItemCategoryId1',
+ name: 'Category 1',
+ },
+ preCompletionNotes: 'Notes 1',
+ postCompletionNotes: null,
+ assignmentDate: new Date('2024-08-27'),
+ dueDate: new Date('2044-08-30'),
+ completionDate: new Date('2044-09-03'),
+ isCompleted: false,
+ event: null,
+ allotedHours: 24,
+ assigner: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ image: null,
+ },
+ creator: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ },
+];
+
+const renderItemUpdateStatusModal = (
+ link: ApolloLink,
+ props: InterfaceItemUpdateStatusModalProps,
+): RenderResult => {
+ return render(
+
+
+
+
+
+
+
+
+
+ ,
+ );
+};
+
+describe('Testing ItemUpdateStatusModal', () => {
+ it('Update Status of Completed ActionItem', async () => {
+ renderItemUpdateStatusModal(link1, itemProps[0]);
+ expect(screen.getByText(t.actionItemStatus)).toBeInTheDocument();
+ const yesBtn = await screen.findByTestId('yesBtn');
+ fireEvent.click(yesBtn);
+
+ await waitFor(() => {
+ expect(itemProps[0].actionItemsRefetch).toHaveBeenCalled();
+ expect(itemProps[0].hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+ });
+ });
+
+ it('Update Status of Pending ActionItem', async () => {
+ renderItemUpdateStatusModal(link1, itemProps[1]);
+ expect(screen.getByText(t.actionItemStatus)).toBeInTheDocument();
+
+ const notes = await screen.findByLabelText(t.postCompletionNotes);
+ fireEvent.change(notes, { target: { value: 'Cmp Notes 1' } });
+
+ const createBtn = await screen.findByTestId('createBtn');
+ fireEvent.click(createBtn);
+
+ await waitFor(() => {
+ expect(itemProps[1].actionItemsRefetch).toHaveBeenCalled();
+ expect(itemProps[1].hide).toHaveBeenCalled();
+ expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+ });
+ });
+
+ it('should fail to Update status of Action Item', async () => {
+ renderItemUpdateStatusModal(link2, itemProps[0]);
+
+ expect(screen.getByText(t.actionItemStatus)).toBeInTheDocument();
+ const yesBtn = await screen.findByTestId('yesBtn');
+ fireEvent.click(yesBtn);
+
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+ });
+ });
+});
diff --git a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
new file mode 100644
index 0000000000..44ac0e63e6
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
@@ -0,0 +1,129 @@
+import React, { type FC, type FormEvent, useEffect, useState } from 'react';
+import { Modal, Button, Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { FormControl, TextField } from '@mui/material';
+import styles from './OrganizationActionItems.module.css';
+import { useMutation } from '@apollo/client';
+import { UPDATE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/ActionItemMutations';
+import { toast } from 'react-toastify';
+import type { InterfaceActionItemInfo } from 'utils/interfaces';
+
+export interface InterfaceItemUpdateStatusModalProps {
+ isOpen: boolean;
+ hide: () => void;
+ actionItemsRefetch: () => void;
+ actionItem: InterfaceActionItemInfo | null;
+}
+
+const ItemUpdateStatusModal: FC = ({
+ hide,
+ isOpen,
+ actionItemsRefetch,
+ actionItem,
+}) => {
+ const { t } = useTranslation('translation', {
+ keyPrefix: 'organizationActionItems',
+ });
+ const { t: tCommon } = useTranslation('common');
+
+ const [isCompleted, setIsCompleted] = useState(
+ actionItem?.isCompleted ?? false,
+ );
+ const [postCompletionNotes, setPostCompletionNotes] = useState(
+ actionItem?.postCompletionNotes ?? '',
+ );
+
+ /**
+ * Mutation to update an action item.
+ */
+ const [updateActionItem] = useMutation(UPDATE_ACTION_ITEM_MUTATION);
+
+ /**
+ * Handles the form submission for updating an action item.
+ *
+ * @param e - The form submission event.
+ */
+ const updateActionItemHandler = async (
+ e: FormEvent,
+ ): Promise => {
+ e.preventDefault();
+
+ try {
+ await updateActionItem({
+ variables: {
+ actionItemId: actionItem?._id,
+ assigneeId: actionItem?.assignee?._id,
+ postCompletionNotes: isCompleted ? '' : postCompletionNotes,
+ isCompleted: !isCompleted,
+ },
+ });
+
+ actionItemsRefetch();
+ hide();
+ toast.success(t('successfulUpdation'));
+ } catch (error: unknown) {
+ toast.error((error as Error).message);
+ }
+ };
+
+ useEffect(() => {
+ if (actionItem) {
+ setIsCompleted(actionItem?.isCompleted);
+ setPostCompletionNotes(actionItem?.postCompletionNotes ?? '');
+ }
+ }, [actionItem]);
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default ItemUpdateStatusModal;
diff --git a/src/screens/OrganizationActionItems/ItemViewModal.test.tsx b/src/screens/OrganizationActionItems/ItemViewModal.test.tsx
new file mode 100644
index 0000000000..13c208b854
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemViewModal.test.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { MOCKS } from './OrganizationActionItem.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import ItemViewModal, { type InterfaceViewModalProps } from './ItemViewModal';
+
+jest.mock('react-toastify', () => ({
+ toast: {
+ success: jest.fn(),
+ error: jest.fn(),
+ },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const t = JSON.parse(
+ JSON.stringify(
+ i18nForTest.getDataByLanguage('en')?.translation.organizationActionItems,
+ ),
+);
+
+const itemProps: InterfaceViewModalProps[] = [
+ {
+ isOpen: true,
+ hide: jest.fn(),
+ item: {
+ _id: 'actionItemId1',
+ assignee: {
+ _id: 'userId1',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ },
+ actionItemCategory: {
+ _id: 'actionItemCategoryId1',
+ name: 'Category 1',
+ },
+ preCompletionNotes: 'Notes 1',
+ postCompletionNotes: 'Cmp Notes 1',
+ assignmentDate: new Date('2024-08-27'),
+ dueDate: new Date('2044-08-30'),
+ completionDate: new Date('2044-09-03'),
+ isCompleted: true,
+ event: null,
+ allotedHours: 24,
+ assigner: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ image: null,
+ },
+ creator: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ },
+ {
+ isOpen: true,
+ hide: jest.fn(),
+ item: {
+ _id: 'actionItemId2',
+ assignee: {
+ _id: 'userId1',
+ firstName: 'Jane',
+ lastName: 'Doe',
+ image: 'image-url',
+ },
+ actionItemCategory: {
+ _id: 'actionItemCategoryId2',
+ name: 'Category 2',
+ },
+ preCompletionNotes: 'Notes 2',
+ postCompletionNotes: null,
+ assignmentDate: new Date('2024-08-27'),
+ dueDate: new Date('2044-09-30'),
+ completionDate: new Date('2044-10-03'),
+ isCompleted: false,
+ event: null,
+ allotedHours: null,
+ assigner: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ image: 'wilt-image',
+ },
+ creator: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ },
+];
+
+const renderItemViewModal = (
+ link: ApolloLink,
+ props: InterfaceViewModalProps,
+): RenderResult => {
+ return render(
+
+
+
+
+
+
+
+
+
+ ,
+ );
+};
+
+describe('Testing ItemViewModal', () => {
+ it('should render ItemViewModal with pending item & assignee with null image', () => {
+ renderItemViewModal(link1, itemProps[0]);
+ expect(screen.getByText(t.actionItemDetails)).toBeInTheDocument();
+ expect(screen.getByTestId('John_avatar')).toBeInTheDocument();
+ expect(screen.getByTestId('Wilt_avatar')).toBeInTheDocument();
+ expect(screen.getByLabelText(t.postCompletionNotes)).toBeInTheDocument();
+ expect(screen.getByLabelText(t.allotedHours)).toBeInTheDocument();
+ expect(screen.getByLabelText(t.allotedHours)).toHaveValue('24');
+ });
+
+ it('should render ItemViewModal with completed item & assignee with null image', () => {
+ renderItemViewModal(link1, itemProps[1]);
+ expect(screen.getByText(t.actionItemDetails)).toBeInTheDocument();
+ expect(screen.getByTestId('Jane_image')).toBeInTheDocument();
+ expect(screen.getByTestId('Wilt_image')).toBeInTheDocument();
+ expect(
+ screen.queryByLabelText(t.postCompletionNotes),
+ ).not.toBeInTheDocument();
+ expect(screen.getByLabelText(t.allotedHours)).toBeInTheDocument();
+ expect(screen.getByLabelText(t.allotedHours)).toHaveValue('-');
+ });
+});
diff --git a/src/screens/OrganizationActionItems/ItemViewModal.tsx b/src/screens/OrganizationActionItems/ItemViewModal.tsx
new file mode 100644
index 0000000000..84d9a3e7fe
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemViewModal.tsx
@@ -0,0 +1,233 @@
+import { DatePicker } from '@mui/x-date-pickers';
+import React from 'react';
+import dayjs from 'dayjs';
+import type { FC } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import type { InterfaceActionItemInfo } from 'utils/interfaces';
+import styles from './OrganizationActionItems.module.css';
+import { useTranslation } from 'react-i18next';
+import { FormControl, TextField } from '@mui/material';
+import { TaskAlt, HistoryToggleOff } from '@mui/icons-material';
+import Avatar from 'components/Avatar/Avatar';
+
+export interface InterfaceViewModalProps {
+ isOpen: boolean;
+ hide: () => void;
+ item: InterfaceActionItemInfo;
+}
+
+/**
+ * A modal dialog for viewing action item details.
+ *
+ * @param isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param item - The action item object to be displayed.
+ *
+ * @returns The rendered modal component.
+ *
+ * The `ItemViewModal` component displays all the fields of an action item in a modal dialog.
+ * It includes fields for assignee, assigner, category, pre and post completion notes, assignment date, due date, completion date, and event.
+ */
+
+const ItemViewModal: FC = ({ isOpen, hide, item }) => {
+ const { t } = useTranslation('translation', {
+ keyPrefix: 'organizationActionItems',
+ });
+ const { t: tCommon } = useTranslation('common');
+
+ const {
+ actionItemCategory,
+ assignee,
+ assigner,
+ completionDate,
+ dueDate,
+ isCompleted,
+ postCompletionNotes,
+ preCompletionNotes,
+ allotedHours,
+ } = item;
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+export default ItemViewModal;
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItem.mocks.ts b/src/screens/OrganizationActionItems/OrganizationActionItem.mocks.ts
new file mode 100644
index 0000000000..0a324d39ac
--- /dev/null
+++ b/src/screens/OrganizationActionItems/OrganizationActionItem.mocks.ts
@@ -0,0 +1,482 @@
+import dayjs from 'dayjs';
+import {
+ CREATE_ACTION_ITEM_MUTATION,
+ DELETE_ACTION_ITEM_MUTATION,
+ UPDATE_ACTION_ITEM_MUTATION,
+} from 'GraphQl/Mutations/ActionItemMutations';
+import {
+ ACTION_ITEM_CATEGORY_LIST,
+ ACTION_ITEM_LIST,
+ MEMBERS_LIST,
+} from 'GraphQl/Queries/Queries';
+import { act } from 'react-dom/test-utils';
+
+const baseActionItem = {
+ assigner: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ image: null,
+ },
+ creator: {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ __typename: 'User',
+ },
+};
+
+const actionItem1 = {
+ _id: 'actionItemId1',
+ assignee: {
+ _id: 'userId1',
+ firstName: 'John',
+ lastName: 'Doe',
+ image: null,
+ },
+ actionItemCategory: {
+ _id: 'actionItemCategoryId1',
+ name: 'Category 1',
+ },
+ preCompletionNotes: 'Notes 1',
+ postCompletionNotes: 'Cmp Notes 1',
+ assignmentDate: '2024-08-27',
+ dueDate: '2044-08-30',
+ completionDate: '2044-09-03',
+ isCompleted: true,
+ event: null,
+ allotedHours: 24,
+ ...baseActionItem,
+};
+
+const actionItem2 = {
+ _id: 'actionItemId2',
+ assignee: {
+ _id: 'userId1',
+ firstName: 'Jane',
+ lastName: 'Doe',
+ image: 'image-url',
+ },
+ actionItemCategory: {
+ _id: 'actionItemCategoryId2',
+ name: 'Category 2',
+ },
+ preCompletionNotes: 'Notes 2',
+ postCompletionNotes: null,
+ assignmentDate: '2024-08-27',
+ dueDate: '2044-09-30',
+ completionDate: '2044-10-03',
+ isCompleted: false,
+ event: null,
+ allotedHours: null,
+ ...baseActionItem,
+};
+
+const memberListQuery = {
+ request: {
+ query: MEMBERS_LIST,
+ variables: { id: 'orgId' },
+ },
+ result: {
+ data: {
+ organizations: [
+ {
+ _id: 'orgId',
+ members: [
+ {
+ _id: 'userId1',
+ firstName: 'Harve',
+ lastName: 'Lance',
+ email: 'harve@example.com',
+ image: '',
+ organizationsBlockedBy: [],
+ createdAt: '2024-02-14',
+ },
+ {
+ _id: 'userId2',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ email: 'wilt@example.com',
+ image: '',
+ organizationsBlockedBy: [],
+ createdAt: '2024-02-14',
+ },
+ ],
+ },
+ ],
+ },
+ },
+};
+
+const actionItemCategoryListQuery = {
+ request: {
+ query: ACTION_ITEM_CATEGORY_LIST,
+ variables: {
+ organizationId: 'orgId',
+ where: { is_disabled: false },
+ },
+ },
+ result: {
+ data: {
+ actionItemCategoriesByOrganization: [
+ {
+ _id: 'categoryId1',
+ name: 'Category 1',
+ isDisabled: false,
+ createdAt: '2024-08-26',
+ creator: {
+ _id: 'creatorId1',
+ firstName: 'Wilt',
+ lastName: 'Shepherd',
+ },
+ },
+ {
+ _id: 'categoryId2',
+ name: 'Category 2',
+ isDisabled: true,
+ createdAt: '2024-08-25',
+ creator: {
+ _id: 'creatorId2',
+ firstName: 'John',
+ lastName: 'Doe',
+ },
+ },
+ ],
+ },
+ },
+};
+
+export const MOCKS = [
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: null,
+ where: {
+ assigneeName: '',
+ },
+ },
+ },
+ result: {
+ data: {
+ actionItemsByOrganization: [actionItem1, actionItem2],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: null,
+ where: {
+ categoryName: '',
+ },
+ },
+ },
+ result: {
+ data: {
+ actionItemsByOrganization: [actionItem1, actionItem2],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: 'dueDate_ASC',
+ where: {
+ assigneeName: '',
+ },
+ },
+ },
+ result: {
+ data: {
+ actionItemsByOrganization: [actionItem1, actionItem2],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: 'dueDate_DESC',
+ where: {
+ assigneeName: '',
+ },
+ },
+ },
+ result: {
+ data: {
+ actionItemsByOrganization: [actionItem2, actionItem1],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: null,
+ where: {
+ assigneeName: '',
+ is_completed: true,
+ },
+ },
+ },
+ result: {
+ data: {
+ actionItemsByOrganization: [actionItem1],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: null,
+ where: {
+ assigneeName: '',
+ is_completed: false,
+ },
+ },
+ },
+ result: {
+ data: {
+ actionItemsByOrganization: [actionItem2],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: null,
+ where: {
+ assigneeName: 'John',
+ },
+ },
+ },
+ result: {
+ data: {
+ actionItemsByOrganization: [actionItem1],
+ },
+ },
+ },
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: null,
+ where: {
+ categoryName: 'Category 1',
+ },
+ },
+ },
+ result: {
+ data: {
+ actionItemsByOrganization: [actionItem1],
+ },
+ },
+ },
+ {
+ request: {
+ query: DELETE_ACTION_ITEM_MUTATION,
+ variables: {
+ actionItemId: 'actionItemId1',
+ },
+ },
+ result: {
+ data: {
+ removeActionItem: {
+ _id: 'actionItemId1',
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_MUTATION,
+ variables: {
+ actionItemId: 'actionItemId1',
+ assigneeId: 'userId1',
+ postCompletionNotes: '',
+ isCompleted: false,
+ },
+ },
+ result: {
+ data: {
+ updateActionItem: {
+ _id: 'actionItemId1',
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_MUTATION,
+ variables: {
+ actionItemId: 'actionItemId1',
+ assigneeId: 'userId1',
+ actionItemCategoryId: 'categoryId2',
+ postCompletionNotes: 'Cmp Notes 2',
+ allotedHours: 19,
+ },
+ },
+ result: {
+ data: {
+ updateActionItem: {
+ _id: 'actionItemId1',
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_MUTATION,
+ variables: {
+ actionItemId: 'actionItemId2',
+ assigneeId: 'userId1',
+ actionItemCategoryId: 'categoryId1',
+ preCompletionNotes: 'Notes 3',
+ allotedHours: 19,
+ dueDate: '2044-01-02',
+ },
+ },
+ result: {
+ data: {
+ updateActionItem: {
+ _id: 'actionItemId1',
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_MUTATION,
+ variables: {
+ actionItemId: 'actionItemId1',
+ assigneeId: 'userId1',
+ postCompletionNotes: 'Cmp Notes 1',
+ isCompleted: true,
+ },
+ },
+ result: {
+ data: {
+ updateActionItem: {
+ _id: 'actionItemId1',
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: CREATE_ACTION_ITEM_MUTATION,
+ variables: {
+ assigneeId: 'userId1',
+ actionItemCategoryId: 'categoryId1',
+ preCompletionNotes: 'Notes',
+ allotedHours: 9,
+ dueDate: '2044-01-02',
+ },
+ },
+ result: {
+ data: {
+ createActionItem: {
+ _id: 'actionItemId1',
+ },
+ },
+ },
+ },
+ memberListQuery,
+ actionItemCategoryListQuery,
+];
+
+export const MOCKS_ERROR = [
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: null,
+ where: {
+ assigneeName: '',
+ },
+ },
+ },
+ error: new Error('Mock Graphql Error'),
+ },
+ {
+ request: {
+ query: DELETE_ACTION_ITEM_MUTATION,
+ variables: {
+ actionItemId: 'actionItemId1',
+ },
+ },
+ error: new Error('Mock Graphql Error'),
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_MUTATION,
+ variables: {
+ actionItemId: 'actionItemId1',
+ assigneeId: 'userId1',
+ postCompletionNotes: '',
+ isCompleted: false,
+ },
+ },
+ error: new Error('Mock Graphql Error'),
+ },
+ {
+ request: {
+ query: CREATE_ACTION_ITEM_MUTATION,
+ variables: {
+ preCompletionNotes: '',
+ allotedHours: null,
+ dueDate: dayjs().format('YYYY-MM-DD'),
+ },
+ },
+ error: new Error('Mock Graphql Error'),
+ },
+ {
+ request: {
+ query: UPDATE_ACTION_ITEM_MUTATION,
+ variables: {
+ actionItemId: 'actionItemId1',
+ assigneeId: 'userId1',
+ postCompletionNotes: 'Cmp Notes 2',
+ },
+ },
+ error: new Error('Mock Graphql Error'),
+ },
+ memberListQuery,
+ actionItemCategoryListQuery,
+];
+
+export const MOCKS_EMPTY = [
+ {
+ request: {
+ query: ACTION_ITEM_LIST,
+ variables: {
+ organizationId: 'orgId',
+ orderBy: null,
+ where: {
+ assigneeName: '',
+ },
+ },
+ },
+ result: {
+ data: {
+ actionItemsByOrganization: [],
+ },
+ },
+ },
+ memberListQuery,
+ actionItemCategoryListQuery,
+];
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItemMocks.ts b/src/screens/OrganizationActionItems/OrganizationActionItemMocks.ts
deleted file mode 100644
index acbb243e5d..0000000000
--- a/src/screens/OrganizationActionItems/OrganizationActionItemMocks.ts
+++ /dev/null
@@ -1,417 +0,0 @@
-import { CREATE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/mutations';
-
-import {
- ACTION_ITEM_CATEGORY_LIST,
- ACTION_ITEM_LIST,
- MEMBERS_LIST,
-} from 'GraphQl/Queries/Queries';
-
-export const MOCKS = [
- {
- request: {
- query: ACTION_ITEM_CATEGORY_LIST,
- variables: { organizationId: '123' },
- },
- result: {
- data: {
- actionItemCategoriesByOrganization: [
- {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- isDisabled: false,
- },
- ],
- },
- },
- },
- {
- request: {
- query: MEMBERS_LIST,
- variables: { id: '123' },
- },
- result: {
- data: {
- organizations: [
- {
- _id: '123',
- members: [
- {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- email: 'harve@example.com',
- image: '',
- organizationsBlockedBy: [],
- createdAt: '2024-02-14',
- },
- ],
- },
- ],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_LIST,
- variables: {
- organizationId: '123',
- orderBy: 'createdAt_DESC',
- actionItemCategoryId: '',
- isActive: false,
- isCompleted: false,
- },
- },
- result: {
- data: {
- actionItemsByOrganization: [
- {
- _id: 'actionItem1',
- assignee: {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- },
- actionItemCategory: {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- },
- preCompletionNotes: 'Pre Completion Notes',
- postCompletionNotes: 'Post Completion Notes',
- assignmentDate: '2024-02-14',
- dueDate: '2024-02-21',
- completionDate: '2024-02-21',
- isCompleted: false,
- assigner: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- event: {
- _id: 'event1',
- title: 'event 1',
- },
- creator: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- },
- {
- _id: 'actionItem2',
- assignee: {
- _id: 'user2',
- firstName: 'John',
- lastName: 'Doe',
- },
- actionItemCategory: {
- _id: 'actionItemCategory2',
- name: 'ActionItemCategory 2',
- },
- preCompletionNotes: 'Pre Completion Notes',
- postCompletionNotes: 'Post Completion Notes',
- assignmentDate: '2024-02-14',
- dueDate: '2024-02-21',
- completionDate: '2024-02-21',
- isCompleted: false,
- assigner: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- event: null,
- creator: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- },
- ],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_LIST,
- variables: {
- organizationId: '123',
- eventId: 'event1',
- orderBy: 'createdAt_DESC',
- },
- },
- result: {
- data: {
- actionItemsByOrganization: [
- {
- _id: 'actionItem1',
- assignee: {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- },
- actionItemCategory: {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- },
- preCompletionNotes: 'Pre Completion Notes',
- postCompletionNotes: 'Post Completion Notes',
- assignmentDate: '2024-02-14',
- dueDate: '2024-02-21',
- completionDate: '2024-02-21',
- isCompleted: false,
- assigner: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- event: {
- _id: 'event1',
- title: 'event 1',
- },
- creator: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- },
- ],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_LIST,
- variables: {
- organizationId: '123',
- orderBy: 'createdAt_ASC',
- actionItemCategoryId: '',
- isActive: false,
- isCompleted: false,
- },
- },
- result: {
- data: {
- actionItemsByOrganization: [
- {
- _id: 'actionItem3',
- assignee: {
- _id: 'user1',
- firstName: 'Praise',
- lastName: 'Norris',
- },
- actionItemCategory: {
- _id: 'actionItemCategory3',
- name: 'ActionItemCategory 3',
- },
- preCompletionNotes: 'Pre Completion Notes',
- postCompletionNotes: 'Post Completion Notes',
- assignmentDate: '2024-02-14',
- dueDate: '2024-02-21',
- completionDate: '2024-02-21',
- isCompleted: false,
- assigner: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- event: {
- _id: 'event1',
- title: 'event 1',
- },
- creator: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- },
- ],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_LIST,
- variables: {
- organizationId: '123',
- orderBy: 'createdAt_ASC',
- actionItemCategoryId: '',
- isActive: true,
- isCompleted: false,
- },
- },
- result: {
- data: {
- actionItemsByOrganization: [
- {
- _id: 'actionItem1',
- assignee: {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- },
- actionItemCategory: {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- },
- preCompletionNotes: 'Pre Completion Notes',
- postCompletionNotes: 'Post Completion Notes',
- assignmentDate: '2024-02-14',
- dueDate: '2024-02-21',
- completionDate: '2024-02-21',
- isCompleted: true,
- assigner: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- event: {
- _id: 'event1',
- title: 'event 1',
- },
- creator: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- },
- ],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_LIST,
- variables: {
- organizationId: '123',
- orderBy: 'createdAt_ASC',
- actionItemCategoryId: '',
- isActive: false,
- isCompleted: true,
- },
- },
- result: {
- data: {
- actionItemsByOrganization: [
- {
- _id: 'actionItem1',
- assignee: {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- },
- actionItemCategory: {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- },
- preCompletionNotes: 'Pre Completion Notes',
- postCompletionNotes: 'Post Completion Notes',
- assignmentDate: '2024-02-14',
- dueDate: '2024-02-21',
- completionDate: '2024-02-21',
- isCompleted: true,
- assigner: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- event: {
- _id: 'event1',
- title: 'event 1',
- },
- creator: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- },
- ],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_LIST,
- variables: {
- organizationId: '123',
- orderBy: 'createdAt_ASC',
- actionItemCategoryId: 'actionItemCategory1',
- isActive: false,
- isCompleted: true,
- },
- },
- result: {
- data: {
- actionItemsByOrganization: [
- {
- _id: 'actionItem1',
- assignee: {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- },
- actionItemCategory: {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- },
- preCompletionNotes: 'Pre Completion Notes',
- postCompletionNotes: 'Post Completion Notes',
- assignmentDate: '2024-02-14',
- dueDate: '2024-02-21',
- completionDate: '2024-02-21',
- isCompleted: true,
- assigner: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- event: {
- _id: 'event1',
- title: 'event 1',
- },
- creator: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- },
- ],
- },
- },
- },
- {
- request: {
- query: CREATE_ACTION_ITEM_MUTATION,
- variables: {
- actionItemCategoryId: 'actionItemCategory1',
- assigneeId: 'user1',
- preCompletionNotes: 'pre completion notes',
- dueDate: '2024-02-14',
- },
- },
- result: {
- data: {
- createActionItem: {
- _id: 'actionItem2',
- },
- },
- },
- },
- {
- request: {
- query: CREATE_ACTION_ITEM_MUTATION,
- variables: {
- eventId: 'event1',
- actionItemCategoryId: 'actionItemCategory1',
- assigneeId: 'user1',
- preCompletionNotes: 'pre completion notes',
- dueDate: '2024-02-14',
- },
- },
- result: {
- data: {
- createActionItem: {
- _id: 'actionItem2',
- },
- },
- },
- },
-];
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
index 7a67362c8b..48720ac902 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
@@ -8,26 +8,6 @@
margin-left: 13vw;
}
-.btnsContainer {
- display: flex;
- gap: 10px;
-}
-
-.btnsContainer .btnsBlock {
- display: flex;
- gap: 10px;
-}
-
-.btnsContainer button {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.container {
- min-height: 100vh;
-}
-
.datediv {
display: flex;
flex-direction: row;
@@ -46,10 +26,6 @@
margin-left: 5px;
}
-.dropdown {
- display: block;
-}
-
.dropdownToggle {
margin-bottom: 0;
display: flex;
@@ -108,10 +84,6 @@ hr {
flex-direction: column;
}
-.organizationActionItemsContainer h2 {
- margin: 0.6rem 0;
-}
-
.preview {
display: flex;
flex-direction: row;
@@ -128,16 +100,6 @@ hr {
display: inline;
}
-.titlemodal {
- color: var(--bs-gray-600);
- font-weight: 600;
- font-size: 20px;
- margin-bottom: 20px;
- padding-bottom: 5px;
- border-bottom: 3px solid var(--bs-primary);
- width: 65%;
-}
-
.view {
margin-left: 2%;
font-weight: 600;
@@ -145,24 +107,127 @@ hr {
color: var(--bs-gray-600);
}
-@media (max-width: 767px) {
- .btnsContainer {
- margin-bottom: 0;
- display: flex;
- flex-direction: column;
- }
+/* header (search, filter, dropdown) */
+.btnsContainer {
+ display: flex;
+ margin: 0.5rem 0 1.5rem 0;
+}
+
+.btnsContainer .input {
+ flex: 1;
+ min-width: 18rem;
+ position: relative;
+}
+
+.btnsContainer input {
+ outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+ width: 52px;
+}
+
+.noOutline input {
+ outline: none;
+}
+
+.noOutline input:disabled {
+ -webkit-text-fill-color: black !important;
+}
+
+.noOutline textarea:disabled {
+ -webkit-text-fill-color: black !important;
+}
+
+.inputField {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ background-color: white;
+ box-shadow: 0 1px 1px #31bb6b;
+}
+
+.inputField > button {
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
- .btnsContainer .btnsBlock .dropdownToggle {
- flex-grow: 1;
- }
+.dropdown {
+ background-color: white;
+ border: 1px solid #31bb6b;
+ position: relative;
+ display: inline-block;
+ color: #31bb6b;
+}
- .btnsContainer button {
- width: 100%;
- }
+/* Action Items Data Grid */
+.rowBackground {
+ background-color: var(--bs-white);
+ max-height: 120px;
+}
+
+.tableHeader {
+ background-color: var(--bs-primary);
+ color: var(--bs-white);
+ font-size: 1rem;
+}
+
+.chipIcon {
+ height: 0.9rem !important;
+}
+
+.chip {
+ height: 1.5rem !important;
+}
+
+.active {
+ background-color: #31bb6a50 !important;
+}
+
+.pending {
+ background-color: #ffd76950 !important;
+ color: #bb952bd0 !important;
+ border-color: #bb952bd0 !important;
+}
+
+/* Modals */
+.itemModal {
+ max-width: 80vw;
+ margin-top: 2vh;
+ margin-left: 13vw;
+}
+
+.titlemodal {
+ color: #707070;
+ font-weight: 600;
+ font-size: 32px;
+ width: 65%;
+ margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+ width: 40px;
+ height: 40px;
+ padding: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.imageContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 0.5rem;
+}
+
+.TableImage {
+ object-fit: cover;
+ width: 25px !important;
+ height: 25px !important;
+ border-radius: 100% !important;
+}
- .createActionItemButton {
- position: absolute;
- top: 1rem;
- right: 2rem;
- }
+.avatarContainer {
+ width: 28px;
+ height: 26px;
}
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
index 7a9060a892..c163ff9546 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
@@ -1,35 +1,23 @@
import React from 'react';
-import {
- render,
- screen,
- fireEvent,
- waitFor,
- act,
- waitForElementToBeRemoved,
-} from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import 'jest-localstorage-mock';
-import { MockedProvider } from '@apollo/client/testing';
-import 'jest-location-mock';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import i18n from 'utils/i18nForTest';
-import { toast } from 'react-toastify';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { store } from 'state/store';
import { StaticMockLink } from 'utils/StaticMockLink';
-
-import OrganizationActionItems from './OrganizationActionItems';
+import i18n from 'utils/i18nForTest';
+import OrganizationActionItems from 'screens/OrganizationActionItems/OrganizationActionItems';
+import type { ApolloLink } from '@apollo/client';
import {
- MOCKS_ERROR_ACTION_ITEM_CATEGORY_LIST_QUERY,
- MOCKS_ERROR_ACTION_ITEM_LIST_QUERY,
- MOCKS_ERROR_MEMBERS_LIST_QUERY,
- MOCKS_ERROR_MUTATIONS,
-} from './OrganizationActionItemsErrorMocks';
-import { MOCKS } from './OrganizationActionItemMocks';
+ MOCKS,
+ MOCKS_EMPTY,
+ MOCKS_ERROR,
+} from './OrganizationActionItem.mocks';
jest.mock('react-toastify', () => ({
toast: {
@@ -46,29 +34,10 @@ jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
};
});
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useParams: () => ({ orgId: '123' }),
-}));
-
-async function wait(ms = 100): Promise {
- await act(() => {
- return new Promise((resolve) => {
- setTimeout(resolve, ms);
- });
- });
-}
-
-const link = new StaticMockLink(MOCKS, true);
-const link2 = new StaticMockLink(
- MOCKS_ERROR_ACTION_ITEM_CATEGORY_LIST_QUERY,
- true,
-);
-const link3 = new StaticMockLink(MOCKS_ERROR_MEMBERS_LIST_QUERY, true);
-const link4 = new StaticMockLink(MOCKS_ERROR_ACTION_ITEM_LIST_QUERY, true);
-const link5 = new StaticMockLink(MOCKS_ERROR_MUTATIONS, true);
-
-const translations = {
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const link3 = new StaticMockLink(MOCKS_EMPTY);
+const t = {
...JSON.parse(
JSON.stringify(
i18n.getDataByLanguage('en')?.translation.organizationActionItems ?? {},
@@ -78,542 +47,331 @@ const translations = {
...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
};
-describe('Testing Action Item Categories Component', () => {
- const formData = {
- actionItemCategory: 'ActionItemCategory 1',
- assignee: 'Harve Lance',
- preCompletionNotes: 'pre completion notes',
- dueDate: '02/14/2024',
- };
-
- test('Component loads correctly', async () => {
- const { getByText } = render(
-
+const renderOrganizationActionItems = (link: ApolloLink): RenderResult => {
+ return render(
+
+
-
+
- {
+ }
+ />
+
-
+
- ,
- );
-
- await wait();
+
+ ,
+ );
+};
- await waitFor(() => {
- expect(getByText(translations.create)).toBeInTheDocument();
- });
+describe('Testing Organization Action Items Screen', () => {
+ beforeAll(() => {
+ jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }),
+ }));
});
- test('render error component on unsuccessful action item category list query', async () => {
- const { queryByText } = render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
- await waitFor(() => {
- expect(queryByText(translations.create)).not.toBeInTheDocument();
- });
+ afterAll(() => {
+ jest.clearAllMocks();
});
- test('render error component on unsuccessful members list query', async () => {
- const { queryByText } = render(
-
-
-
+ it('should redirect to fallback URL if URL params are undefined', async () => {
+ render(
+
+
+
- {
+ }
+ />
+
-
-
+
+
,
);
-
- await wait();
-
await waitFor(() => {
- expect(queryByText(translations.create)).not.toBeInTheDocument();
+ expect(screen.getByTestId('paramsError')).toBeInTheDocument();
});
});
- test('render error component on unsuccessful action item list query', async () => {
- const { queryByText } = render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
-
+ it('should render Organization Action Items screen', async () => {
+ renderOrganizationActionItems(link1);
await waitFor(() => {
- expect(queryByText(translations.create)).not.toBeInTheDocument();
+ expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ expect(screen.getByText('Jane Doe')).toBeInTheDocument();
});
});
- test('sorts action items in earliest or latest first order based on orderBy', async () => {
- render(
-
-
-
-
- {
-
-
- ,
- );
+ it('Sort Action Items descending by dueDate', async () => {
+ renderOrganizationActionItems(link1);
- await wait();
+ const sortBtn = await screen.findByTestId('sort');
+ expect(sortBtn).toBeInTheDocument();
+ // Sort by dueDate_DESC
+ fireEvent.click(sortBtn);
await waitFor(() => {
- expect(screen.getByTestId('sortActionItems')).toBeInTheDocument();
+ expect(screen.getByTestId('dueDate_DESC')).toBeInTheDocument();
});
- userEvent.click(screen.getByTestId('sortActionItems'));
-
+ fireEvent.click(screen.getByTestId('dueDate_DESC'));
await waitFor(() => {
- expect(screen.getByTestId('earliest')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('earliest'));
-
- await waitFor(() => {
- expect(screen.getByTestId('sortActionItems')).toHaveTextContent(
- translations.earliest,
- );
- });
-
- await waitFor(() => {
- expect(screen.getByTestId('sortActionItems')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('sortActionItems'));
-
- await waitFor(() => {
- expect(screen.getByTestId('latest')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('latest'));
-
- await waitFor(() => {
- expect(screen.getByTestId('sortActionItems')).toHaveTextContent(
- translations.latest,
+ expect(screen.getAllByTestId('categoryName')[0]).toHaveTextContent(
+ 'Category 2',
);
});
});
- test('applies and then clears filters one by one', async () => {
- render(
-
-
-
-
- {
-
-
- ,
- );
-
- await wait();
+ it('Sort Action Items ascending by dueDate', async () => {
+ renderOrganizationActionItems(link1);
- await waitFor(() => {
- expect(screen.getByTestId('sortActionItems')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('sortActionItems'));
+ const sortBtn = await screen.findByTestId('sort');
+ expect(sortBtn).toBeInTheDocument();
+ // Sort by dueDate_ASC
+ fireEvent.click(sortBtn);
await waitFor(() => {
- expect(screen.getByTestId('earliest')).toBeInTheDocument();
+ expect(screen.getByTestId('dueDate_ASC')).toBeInTheDocument();
});
- userEvent.click(screen.getByTestId('earliest'));
-
- // all the action items ordered by earliest first
+ fireEvent.click(screen.getByTestId('dueDate_ASC'));
await waitFor(() => {
- expect(screen.getByTestId('sortActionItems')).toHaveTextContent(
- translations.earliest,
+ expect(screen.getAllByTestId('categoryName')[0]).toHaveTextContent(
+ 'Category 1',
);
});
+ });
- await waitFor(() => {
- expect(screen.getByTestId('selectActionItemStatus')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('selectActionItemStatus'));
-
- await waitFor(() => {
- expect(screen.getByTestId('activeActionItems')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('activeActionItems'));
+ it('Filter Action Items by status (All/Pending)', async () => {
+ renderOrganizationActionItems(link1);
- // all the action items that are active
- await waitFor(() => {
- expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
- translations.active,
- );
- });
+ const filterBtn = await screen.findByTestId('filter');
+ expect(filterBtn).toBeInTheDocument();
+ // Filter by All
+ fireEvent.click(filterBtn);
await waitFor(() => {
- expect(screen.getByTestId('selectActionItemStatus')).toBeInTheDocument();
+ expect(screen.getByTestId('statusAll')).toBeInTheDocument();
});
- userEvent.click(screen.getByTestId('selectActionItemStatus'));
+ fireEvent.click(screen.getByTestId('statusAll'));
await waitFor(() => {
- expect(screen.getByTestId('completedActionItems')).toBeInTheDocument();
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.getByText('Category 2')).toBeInTheDocument();
});
- userEvent.click(screen.getByTestId('completedActionItems'));
- // all the action items that are completed
+ // Filter by Pending
+ fireEvent.click(filterBtn);
await waitFor(() => {
- expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
- translations.completed,
- );
+ expect(screen.getByTestId('statusPending')).toBeInTheDocument();
});
-
+ fireEvent.click(screen.getByTestId('statusPending'));
await waitFor(() => {
- expect(
- screen.getByTestId('selectActionItemCategory'),
- ).toBeInTheDocument();
+ expect(screen.queryByText('Category 1')).toBeNull();
+ expect(screen.getByText('Category 2')).toBeInTheDocument();
});
- userEvent.click(screen.getByTestId('selectActionItemCategory'));
+ });
- await waitFor(() => {
- expect(
- screen.getAllByTestId('actionItemCategory')[0],
- ).toBeInTheDocument();
- });
- userEvent.click(screen.getAllByTestId('actionItemCategory')[0]);
+ it('Filter Action Items by status (Completed)', async () => {
+ renderOrganizationActionItems(link1);
- // action items belonging to this action item category
- await waitFor(() => {
- expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
- 'ActionItemCategory 1',
- );
- });
+ const filterBtn = await screen.findByTestId('filter');
+ expect(filterBtn).toBeInTheDocument();
+ fireEvent.click(filterBtn);
await waitFor(() => {
- expect(
- screen.getByTestId('clearActionItemCategoryFilter'),
- ).toBeInTheDocument();
+ expect(screen.getByTestId('statusCompleted')).toBeInTheDocument();
});
- // remove the action item category filter
- userEvent.click(screen.getByTestId('clearActionItemCategoryFilter'));
-
+ fireEvent.click(screen.getByTestId('statusCompleted'));
await waitFor(() => {
- expect(
- screen.queryByTestId('clearActionItemCategoryFilter'),
- ).not.toBeInTheDocument();
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.queryByText('Category 2')).toBeNull();
});
+ });
- await waitFor(() => {
- expect(
- screen.getByTestId('clearActionItemStatusFilter'),
- ).toBeInTheDocument();
- });
- // remove the action item status filter
- userEvent.click(screen.getByTestId('clearActionItemStatusFilter'));
+ it('open and close Item modal (create)', async () => {
+ renderOrganizationActionItems(link1);
- await waitFor(() => {
- expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
- translations.status,
- );
- expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
- translations.actionItemCategory,
- );
- });
- });
+ const addItemBtn = await screen.findByTestId('createActionItemBtn');
+ expect(addItemBtn).toBeInTheDocument();
+ userEvent.click(addItemBtn);
- test('applies and then clears all the filters', async () => {
- render(
-
-
-
-
- {
-
-
- ,
+ await waitFor(() =>
+ expect(screen.getAllByText(t.createActionItem)).toHaveLength(2),
+ );
+ userEvent.click(screen.getByTestId('modalCloseBtn'));
+ await waitFor(() =>
+ expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
);
+ });
- await wait();
+ it('open and close Item modal (view)', async () => {
+ renderOrganizationActionItems(link1);
- await waitFor(() => {
- expect(screen.getByTestId('sortActionItems')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('sortActionItems'));
+ const viewItemBtn = await screen.findByTestId('viewItemBtn1');
+ expect(viewItemBtn).toBeInTheDocument();
+ userEvent.click(viewItemBtn);
- await waitFor(() => {
- expect(screen.getByTestId('earliest')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('earliest'));
+ await waitFor(() =>
+ expect(screen.getByText(t.actionItemDetails)).toBeInTheDocument(),
+ );
+ userEvent.click(screen.getByTestId('modalCloseBtn'));
+ await waitFor(() =>
+ expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
+ );
+ });
- // all the action items ordered by earliest first
- await waitFor(() => {
- expect(screen.getByTestId('sortActionItems')).toHaveTextContent(
- translations.earliest,
- );
- });
+ it('open and closes Item modal (edit)', async () => {
+ renderOrganizationActionItems(link1);
- await waitFor(() => {
- expect(screen.getByTestId('selectActionItemStatus')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('selectActionItemStatus'));
+ const editItemBtn = await screen.findByTestId('editItemBtn1');
+ await waitFor(() => expect(editItemBtn).toBeInTheDocument());
+ userEvent.click(editItemBtn);
- await waitFor(() => {
- expect(screen.getByTestId('activeActionItems')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('activeActionItems'));
+ await waitFor(() =>
+ expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2),
+ );
+ userEvent.click(screen.getByTestId('modalCloseBtn'));
+ await waitFor(() =>
+ expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
+ );
+ });
- // all the action items that are active
- await waitFor(() => {
- expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
- translations.active,
- );
- });
+ it('open and closes Item modal (delete)', async () => {
+ renderOrganizationActionItems(link1);
- await waitFor(() => {
- expect(screen.getByTestId('selectActionItemStatus')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('selectActionItemStatus'));
+ const deleteItemBtn = await screen.findByTestId('deleteItemBtn1');
+ expect(deleteItemBtn).toBeInTheDocument();
+ userEvent.click(deleteItemBtn);
- await waitFor(() => {
- expect(screen.getByTestId('completedActionItems')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('completedActionItems'));
+ await waitFor(() =>
+ expect(screen.getByText(t.deleteActionItem)).toBeInTheDocument(),
+ );
+ userEvent.click(screen.getByTestId('modalCloseBtn'));
+ await waitFor(() =>
+ expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
+ );
+ });
- // all the action items that are completed
- await waitFor(() => {
- expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
- translations.completed,
- );
- });
+ it('open and closes Item modal (update status)', async () => {
+ renderOrganizationActionItems(link1);
- await waitFor(() => {
- expect(
- screen.getByTestId('selectActionItemCategory'),
- ).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('selectActionItemCategory'));
+ const statusCheckbox = await screen.findByTestId('statusCheckbox1');
+ expect(statusCheckbox).toBeInTheDocument();
+ userEvent.click(statusCheckbox);
- await waitFor(() => {
- expect(
- screen.getAllByTestId('actionItemCategory')[0],
- ).toBeInTheDocument();
- });
- userEvent.click(screen.getAllByTestId('actionItemCategory')[0]);
+ await waitFor(() =>
+ expect(screen.getByText(t.actionItemStatus)).toBeInTheDocument(),
+ );
+ userEvent.click(screen.getByTestId('modalCloseBtn'));
+ await waitFor(() =>
+ expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
+ );
+ });
- // action items belonging to this action item category
- await waitFor(() => {
- expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
- 'ActionItemCategory 1',
- );
- });
+ it('Search action items by assignee', async () => {
+ renderOrganizationActionItems(link1);
- await waitFor(() => {
- expect(screen.getByTestId('clearFilters')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('clearFilters'));
+ const searchByToggle = await screen.findByTestId('searchByToggle');
+ expect(searchByToggle).toBeInTheDocument();
- // filters cleared, all the action items belonging to the organization
+ userEvent.click(searchByToggle);
await waitFor(() => {
- expect(screen.getByTestId('sortActionItems')).toHaveTextContent(
- translations.latest,
- );
- expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
- translations.status,
- );
- expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
- translations.actionItemCategory,
- );
+ expect(screen.getByTestId('assignee')).toBeInTheDocument();
});
- });
- test('opens and closes the create action item modal', async () => {
- render(
-
-
-
-
-
- {
-
-
-
- ,
- );
+ userEvent.click(screen.getByTestId('assignee'));
- await wait();
+ const searchInput = await screen.findByTestId('searchBy');
+ expect(searchInput).toBeInTheDocument();
+ userEvent.type(searchInput, 'John');
+ userEvent.click(screen.getByTestId('searchBtn'));
await waitFor(() => {
- expect(screen.getByTestId('createActionItemBtn')).toBeInTheDocument();
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.queryByText('Category 2')).toBeNull();
});
- userEvent.click(screen.getByTestId('createActionItemBtn'));
-
- await waitFor(() => {
- return expect(
- screen.findByTestId('createActionItemModalCloseBtn'),
- ).resolves.toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('createActionItemModalCloseBtn'));
-
- await waitForElementToBeRemoved(() =>
- screen.queryByTestId('createActionItemModalCloseBtn'),
- );
});
- test('creates new action item', async () => {
- render(
-
-
-
-
-
- {
-
-
-
- ,
- );
+ it('Search action items by category', async () => {
+ renderOrganizationActionItems(link1);
- await wait();
+ const searchByToggle = await screen.findByTestId('searchByToggle');
+ expect(searchByToggle).toBeInTheDocument();
+ userEvent.click(searchByToggle);
await waitFor(() => {
- expect(screen.getByTestId('createActionItemBtn')).toBeInTheDocument();
+ expect(screen.getByTestId('category')).toBeInTheDocument();
});
- userEvent.click(screen.getByTestId('createActionItemBtn'));
- await waitFor(() => {
- return expect(
- screen.findByTestId('createActionItemModalCloseBtn'),
- ).resolves.toBeInTheDocument();
- });
+ userEvent.click(screen.getByTestId('category'));
+ const searchInput = await screen.findByTestId('searchBy');
+ expect(searchInput).toBeInTheDocument();
+
+ userEvent.type(searchInput, 'Category 1');
+ userEvent.click(screen.getByTestId('searchBtn'));
await waitFor(() => {
- expect(
- screen.getByTestId('formSelectActionItemCategory'),
- ).toBeInTheDocument();
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.queryByText('Category 2')).toBeNull();
});
+ });
- userEvent.selectOptions(
- screen.getByTestId('formSelectActionItemCategory'),
- formData.actionItemCategory,
- );
-
- userEvent.selectOptions(
- screen.getByTestId('formSelectAssignee'),
- formData.assignee,
- );
-
- userEvent.type(
- screen.getByPlaceholderText(translations.preCompletionNotes),
- formData.preCompletionNotes,
- );
-
- const dueDatePicker = screen.getByLabelText(translations.dueDate);
- fireEvent.change(dueDatePicker, {
- target: { value: formData.dueDate },
- });
+ it('Search action items by name and clear the input by backspace', async () => {
+ renderOrganizationActionItems(link1);
- userEvent.click(screen.getByTestId('createActionItemFormSubmitBtn'));
+ const searchInput = await screen.findByTestId('searchBy');
+ expect(searchInput).toBeInTheDocument();
+ // Clear the search input by backspace
+ userEvent.type(searchInput, 'A{backspace}');
await waitFor(() => {
- expect(toast.success).toBeCalledWith(translations.successfulCreation);
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.getByText('Category 2')).toBeInTheDocument();
});
});
- test('toasts error on unsuccessful creation', async () => {
- render(
-
-
-
-
-
- {
-
-
-
- ,
- );
-
- await wait();
+ it('Search action items by name on press of ENTER', async () => {
+ renderOrganizationActionItems(link1);
- await waitFor(() => {
- expect(screen.getByTestId('createActionItemBtn')).toBeInTheDocument();
- });
- userEvent.click(screen.getByTestId('createActionItemBtn'));
+ const searchInput = await screen.findByTestId('searchBy');
+ expect(searchInput).toBeInTheDocument();
+ userEvent.type(searchInput, 'John');
+ userEvent.type(searchInput, '{enter}');
await waitFor(() => {
- return expect(
- screen.findByTestId('createActionItemModalCloseBtn'),
- ).resolves.toBeInTheDocument();
+ expect(screen.getByText('Category 1')).toBeInTheDocument();
+ expect(screen.queryByText('Category 2')).toBeNull();
});
+ });
+ it('should render Empty Action Item Categories Screen', async () => {
+ renderOrganizationActionItems(link3);
await waitFor(() => {
- expect(
- screen.getByTestId('formSelectActionItemCategory'),
- ).toBeInTheDocument();
- });
-
- userEvent.selectOptions(
- screen.getByTestId('formSelectActionItemCategory'),
- formData.actionItemCategory,
- );
-
- userEvent.selectOptions(
- screen.getByTestId('formSelectAssignee'),
- formData.assignee,
- );
-
- userEvent.type(
- screen.getByPlaceholderText(translations.preCompletionNotes),
- formData.preCompletionNotes,
- );
-
- const dueDatePicker = screen.getByLabelText(translations.dueDate);
- fireEvent.change(dueDatePicker, {
- target: { value: formData.dueDate },
+ expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+ expect(screen.getByText(t.noActionItems)).toBeInTheDocument();
});
+ });
- userEvent.click(screen.getByTestId('createActionItemFormSubmitBtn'));
-
+ it('should render the Action Item Categories Screen with error', async () => {
+ renderOrganizationActionItems(link2);
await waitFor(() => {
- expect(toast.error).toHaveBeenCalled();
+ expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
});
});
-
- test('Testing Only Action Items Displaying', async () => {
- const mockApp = render(
-
-
-
-
-
- {
-
-
-
- ,
- );
-
- await waitFor(mockApp.asFragment);
-
- const actionItem = screen.getByText(/John Doe/i);
-
- expect(actionItem).toContainHTML('John Doe');
- });
});
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
index a1c822d0b4..ba48f212e0 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
@@ -1,31 +1,71 @@
-import React, { useState } from 'react';
-import type { ChangeEvent } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { Button, Dropdown } from 'react-bootstrap';
-import { useParams } from 'react-router-dom';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Navigate, useParams } from 'react-router-dom';
-import SortIcon from '@mui/icons-material/Sort';
-import { WarningAmberRounded } from '@mui/icons-material';
+import {
+ Circle,
+ FilterAltOutlined,
+ Search,
+ Sort,
+ WarningAmberRounded,
+} from '@mui/icons-material';
import dayjs from 'dayjs';
-import { toast } from 'react-toastify';
-import { useMutation, useQuery } from '@apollo/client';
-import {
- ACTION_ITEM_CATEGORY_LIST,
- ACTION_ITEM_LIST,
- MEMBERS_LIST,
-} from 'GraphQl/Queries/Queries';
-import { CREATE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/mutations';
+import { useQuery } from '@apollo/client';
+import { ACTION_ITEM_LIST } from 'GraphQl/Queries/Queries';
import type {
- InterfaceActionItemCategoryList,
+ InterfaceActionItemInfo,
InterfaceActionItemList,
- InterfaceMembersList,
} from 'utils/interfaces';
-import ActionItemsContainer from 'components/ActionItems/ActionItemsContainer';
-import ActionItemCreateModal from './ActionItemCreateModal';
import styles from './OrganizationActionItems.module.css';
import Loader from 'components/Loader/Loader';
+import {
+ DataGrid,
+ type GridCellParams,
+ type GridColDef,
+} from '@mui/x-data-grid';
+import { Chip, Stack } from '@mui/material';
+import ItemViewModal from './ItemViewModal';
+import ItemModal from './ItemModal';
+import ItemDeleteModal from './ItemDeleteModal';
+import Avatar from 'components/Avatar/Avatar';
+import ItemUpdateStatusModal from './ItemUpdateStatusModal';
+
+enum ItemStatus {
+ Pending = 'pending',
+ Completed = 'completed',
+ Late = 'late',
+}
+
+enum ModalState {
+ SAME = 'same',
+ DELETE = 'delete',
+ VIEW = 'view',
+ STATUS = 'status',
+}
+
+const dataGridStyle = {
+ '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+ outline: 'none !important',
+ },
+ '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+ outline: 'none',
+ },
+ '& .MuiDataGrid-row:hover': {
+ backgroundColor: 'transparent',
+ },
+ '& .MuiDataGrid-row.Mui-hovered': {
+ backgroundColor: 'transparent',
+ },
+ '& .MuiDataGrid-root': {
+ borderRadius: '0.5rem',
+ },
+ '& .MuiDataGrid-main': {
+ borderRadius: '0.5rem',
+ },
+};
/**
* Component for managing and displaying action items within an organization.
@@ -39,57 +79,51 @@ function organizationActionItems(): JSX.Element {
keyPrefix: 'organizationActionItems',
});
const { t: tCommon } = useTranslation('common');
+ const { t: tErrors } = useTranslation('errors');
// Get the organization ID from URL parameters
- const { orgId: currentUrl } = useParams();
+ const { orgId, eventId } = useParams();
- // State for managing modal visibility and form data
- const [actionItemCreateModalIsOpen, setActionItemCreateModalIsOpen] =
- useState(false);
- const [dueDate, setDueDate] = useState(new Date());
- const [orderBy, setOrderBy] = useState<'Latest' | 'Earliest'>('Latest');
- const [actionItemStatus, setActionItemStatus] = useState('');
- const [actionItemCategoryId, setActionItemCategoryId] = useState('');
- const [actionItemCategoryName, setActionItemCategoryName] = useState('');
+ if (!orgId) {
+ return (
+ null,
+ );
+ const [modalMode, setModalMode] = useState<'create' | 'edit'>('create');
+ const [searchValue, setSearchValue] = useState('');
+ const [searchTerm, setSearchTerm] = useState('');
+ const [sortBy, setSortBy] = useState<'dueDate_ASC' | 'dueDate_DESC' | null>(
+ null,
+ );
+ const [status, setStatus] = useState(null);
+ const [searchBy, setSearchBy] = useState<'assignee' | 'category'>('assignee');
+ const [modalState, setModalState] = useState<{
+ [key in ModalState]: boolean;
+ }>({
+ [ModalState.SAME]: false,
+ [ModalState.DELETE]: false,
+ [ModalState.VIEW]: false,
+ [ModalState.STATUS]: false,
});
- /**
- * Query to fetch action item categories for the organization.
- */
- const {
- data: actionItemCategoriesData,
- loading: actionItemCategoriesLoading,
- error: actionItemCategoriesError,
- }: {
- data: InterfaceActionItemCategoryList | undefined;
- loading: boolean;
- error?: Error | undefined;
- } = useQuery(ACTION_ITEM_CATEGORY_LIST, {
- variables: {
- organizationId: currentUrl,
- },
- notifyOnNetworkStatusChange: true,
- });
+ const openModal = (modal: ModalState): void =>
+ setModalState((prevState) => ({ ...prevState, [modal]: true }));
- /**
- * Query to fetch members of the organization.
- */
- const {
- data: membersData,
- loading: membersLoading,
- error: membersError,
- }: {
- data: InterfaceMembersList | undefined;
- loading: boolean;
- error?: Error | undefined;
- } = useQuery(MEMBERS_LIST, {
- variables: { id: currentUrl },
- });
+ const closeModal = (modal: ModalState): void =>
+ setModalState((prevState) => ({ ...prevState, [modal]: false }));
+
+ const handleModalClick = useCallback(
+ (actionItem: InterfaceActionItemInfo | null, modal: ModalState): void => {
+ if (modal === ModalState.SAME) {
+ setModalMode(actionItem ? 'edit' : 'create');
+ }
+ setActionItem(actionItem);
+ openModal(modal);
+ },
+ [openModal],
+ );
/**
* Query to fetch action items for the organization based on filters and sorting.
@@ -106,335 +140,407 @@ function organizationActionItems(): JSX.Element {
refetch: () => void;
} = useQuery(ACTION_ITEM_LIST, {
variables: {
- organizationId: currentUrl,
- actionItemCategoryId,
- orderBy: orderBy === 'Latest' ? 'createdAt_DESC' : 'createdAt_ASC',
- isActive: actionItemStatus === 'Active' ? true : false,
- isCompleted: actionItemStatus === 'Completed' ? true : false,
+ organizationId: orgId,
+ eventId: eventId,
+ orderBy: sortBy,
+ where: {
+ assigneeName: searchBy === 'assignee' ? searchTerm : undefined,
+ categoryName: searchBy === 'category' ? searchTerm : undefined,
+ is_completed:
+ status === null ? undefined : status === ItemStatus.Completed,
+ },
},
- notifyOnNetworkStatusChange: true,
});
- /**
- * Mutation to create a new action item.
- */
- const [createActionItem] = useMutation(CREATE_ACTION_ITEM_MUTATION);
-
- /**
- * Handler function to create a new action item.
- *
- * @param e - The form submit event.
- * @returns A promise that resolves when the action item is created.
- */
- const createActionItemHandler = async (
- e: ChangeEvent,
- ): Promise => {
- e.preventDefault();
- try {
- await createActionItem({
- variables: {
- assigneeId: formState.assigneeId,
- actionItemCategoryId: formState.actionItemCategoryId,
- preCompletionNotes: formState.preCompletionNotes,
- dueDate: dayjs(dueDate).format('YYYY-MM-DD'),
- },
- });
-
- // Reset form and date after successful creation
- setFormState({
- assigneeId: '',
- actionItemCategoryId: '',
- preCompletionNotes: '',
- });
-
- setDueDate(new Date());
-
- actionItemsRefetch();
- hideCreateModal();
- toast.success(t('successfulCreation'));
- } catch (error: unknown) {
- if (error instanceof Error) {
- toast.error(error.message);
- console.log(error.message);
- }
- }
- };
-
- /**
- * Toggles the visibility of the create action item modal.
- */
- const showCreateModal = (): void => {
- setActionItemCreateModalIsOpen(!actionItemCreateModalIsOpen);
- };
-
- /**
- * Hides the create action item modal.
- */
- const hideCreateModal = (): void => {
- setActionItemCreateModalIsOpen(!actionItemCreateModalIsOpen);
- };
-
- /**
- * Handles sorting action items by date.
- *
- * @param sort - The sorting order ('Latest' or 'Earliest').
- */
- const handleSorting = (sort: string): void => {
- if (sort === 'Latest') {
- setOrderBy('Latest');
- } else {
- setOrderBy('Earliest');
- }
- };
-
- /**
- * Filters action items by status.
- *
- * @param status - The status to filter by ('Active' or 'Completed').
- */
- const handleStatusFilter = (status: string): void => {
- if (status === 'Active') {
- setActionItemStatus('Active');
- } else {
- setActionItemStatus('Completed');
- }
- };
-
- /**
- * Clears all filters applied to the action items.
- */
- const handleClearFilters = (): void => {
- setActionItemCategoryId('');
- setActionItemCategoryName('');
- setActionItemStatus('');
- setOrderBy('Latest');
- };
+ const actionItems = useMemo(
+ () => actionItemsData?.actionItemsByOrganization || [],
+ [actionItemsData],
+ );
- if (actionItemCategoriesLoading || membersLoading || actionItemsLoading) {
+ if (actionItemsLoading) {
return
@@ -179,6 +182,6 @@ function organizationAgendaCategory(): JSX.Element {
/>
);
-}
+};
export default organizationAgendaCategory;
diff --git a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryErrorMocks.ts b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts
similarity index 100%
rename from src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryErrorMocks.ts
rename to src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts
diff --git a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryMocks.ts b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts
similarity index 100%
rename from src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryMocks.ts
rename to src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts
diff --git a/src/components/DeleteOrg/DeleteOrg.module.css b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css
similarity index 100%
rename from src/components/DeleteOrg/DeleteOrg.module.css
rename to src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css
diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.test.tsx b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.test.tsx
new file mode 100644
index 0000000000..77ffe65c08
--- /dev/null
+++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.test.tsx
@@ -0,0 +1,307 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen, waitFor } from '@testing-library/react';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+
+import {
+ DELETE_ORGANIZATION_MUTATION,
+ REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import DeleteOrg from './DeleteOrg';
+import { ToastContainer, toast } from 'react-toastify';
+import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+async function wait(ms = 1000): Promise
+
+ {t('updateOrganization')}
+
+
+ {t('otherSettings')}
+
+
+ {t('changeLanguage')}
+
+ {/* Render language change dropdown component */}
+
+
+
+ {t('manageCustomFields')}
+
-
{/* Table */}
- {loadingMembers == false &&
+ {loadingMembers === false &&
membersData.length === 0 &&
searchByName.length > 0 ? (
- {props.image ? (
- 
- ) : (
- 
- )}
- {
await act(() => {
return new Promise((resolve) => {
@@ -41,7 +42,6 @@ describe('Testing User List Card', () => {
test('Should render props and text elements test for the page component', async () => {
const props = {
- key: 123,
id: '456',
};
@@ -49,7 +49,7 @@ describe('Testing User List Card', () => {
-
,
@@ -62,7 +62,6 @@ describe('Testing User List Card', () => {
test('Should render text elements when props value is not passed', async () => {
const props = {
- key: 123,
id: '456',
};
@@ -70,7 +69,7 @@ describe('Testing User List Card', () => {
-
,
diff --git a/src/components/UserListCard/UserListCard.tsx b/src/components/UserListCard/UserListCard.tsx
index 193569424f..76ad110ea1 100644
--- a/src/components/UserListCard/UserListCard.tsx
+++ b/src/components/UserListCard/UserListCard.tsx
@@ -47,7 +47,7 @@ function userListCard(props: InterfaceUserListCardProps): JSX.Element {
/* istanbul ignore next */
if (data) {
- toast.success(t('addedAsAdmin'));
+ toast.success(t('addedAsAdmin') as string);
setTimeout(() => {
window.location.reload();
}, 2000);
diff --git a/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx b/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx
index 4fcbb18070..65f5e40f76 100644
--- a/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx
+++ b/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
@@ -20,7 +20,7 @@ const MOCKS = [
{
request: {
query: UPDATE_USER_PASSWORD_MUTATION,
- variable: {
+ variables: {
previousPassword: 'anshgoyal',
newPassword: 'anshgoyalansh',
confirmNewPassword: 'anshgoyalansh',
@@ -49,15 +49,10 @@ async function wait(ms = 5): Promise {
}
describe('Testing User Password Update', () => {
- const props = {
- key: '123',
- id: '1',
- };
-
const formData = {
previousPassword: 'Palisadoes',
newPassword: 'ThePalisadoesFoundation',
- wrongPassword: 'This is wrong passoword',
+ wrongPassword: 'This is wrong password',
confirmNewPassword: 'ThePalisadoesFoundation',
};
@@ -67,7 +62,7 @@ describe('Testing User Password Update', () => {
render(
-
,
);
@@ -102,7 +97,7 @@ describe('Testing User Password Update', () => {
render(
-
,
);
@@ -117,7 +112,7 @@ describe('Testing User Password Update', () => {
render(
-
,
);
diff --git a/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx b/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
index e1f8c64f0b..1ea75811c1 100644
--- a/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
+++ b/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
@@ -45,12 +45,12 @@ const UserUpdate: React.FC<
!formState.newPassword ||
!formState.confirmNewPassword
) {
- toast.error(t('passCantBeEmpty'));
+ toast.error(t('passCantBeEmpty') as string);
return;
}
if (formState.newPassword !== formState.confirmNewPassword) {
- toast.error(t('passNoMatch'));
+ toast.error(t('passNoMatch') as string);
return;
}
@@ -64,7 +64,9 @@ const UserUpdate: React.FC<
});
/* istanbul ignore next */
if (data) {
- toast.success(tCommon('updatedSuccessfully', { item: 'Password' }));
+ toast.success(
+ tCommon('updatedSuccessfully', { item: 'Password' }) as string,
+ );
setTimeout(() => {
window.location.reload();
}, 2000);
diff --git a/src/components/UserPortal/CommentCard/CommentCard.test.tsx b/src/components/UserPortal/CommentCard/CommentCard.test.tsx
index 35b81167fc..f02e5a606a 100644
--- a/src/components/UserPortal/CommentCard/CommentCard.test.tsx
+++ b/src/components/UserPortal/CommentCard/CommentCard.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
diff --git a/src/components/UserPortal/CommentCard/CommentCard.tsx b/src/components/UserPortal/CommentCard/CommentCard.tsx
index 026c2f1af3..9e8c46d241 100644
--- a/src/components/UserPortal/CommentCard/CommentCard.tsx
+++ b/src/components/UserPortal/CommentCard/CommentCard.tsx
@@ -92,7 +92,7 @@ function commentCard(props: InterfaceCommentCardProps): JSX.Element {
}
} catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
} else {
try {
@@ -109,7 +109,7 @@ function commentCard(props: InterfaceCommentCardProps): JSX.Element {
}
} catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
}
};
diff --git a/src/components/UserPortal/ContactCard/ContactCard.test.tsx b/src/components/UserPortal/ContactCard/ContactCard.test.tsx
index 7f55196bb0..03136387a7 100644
--- a/src/components/UserPortal/ContactCard/ContactCard.test.tsx
+++ b/src/components/UserPortal/ContactCard/ContactCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/DonationCard/DonationCard.test.tsx b/src/components/UserPortal/DonationCard/DonationCard.test.tsx
index 4e49ed8b26..cddf62dd6c 100644
--- a/src/components/UserPortal/DonationCard/DonationCard.test.tsx
+++ b/src/components/UserPortal/DonationCard/DonationCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render } from '@testing-library/react';
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/EventCard/EventCard.tsx b/src/components/UserPortal/EventCard/EventCard.tsx
index 3b9d328154..e93138ce42 100644
--- a/src/components/UserPortal/EventCard/EventCard.tsx
+++ b/src/components/UserPortal/EventCard/EventCard.tsx
@@ -103,7 +103,7 @@ function eventCard(props: InterfaceEventCardProps): JSX.Element {
}
} catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
}
};
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
index dba4286290..ba13fe346d 100644
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
@@ -250,7 +250,7 @@ describe('Testing OrganizationCard Component [User Portal]', () => {
fireEvent.click(screen.getByTestId('joinBtn'));
await wait();
- expect(toast.success).toHaveBeenCalledWith('users.MembershipRequestSent');
+ expect(toast.success).toHaveBeenCalledWith('MembershipRequestSent');
});
test('send membership request to public org', async () => {
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
index b88e17ae95..e1c2c23beb 100644
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
@@ -110,23 +110,23 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
organizationId: props.id,
},
});
- toast.success(t('MembershipRequestSent'));
+ toast.success(t('MembershipRequestSent') as string);
} else {
await joinPublicOrganization({
variables: {
organizationId: props.id,
},
});
- toast.success(t('orgJoined'));
+ toast.success(t('orgJoined') as string);
}
refetch();
} catch (error: unknown) {
/* istanbul ignore next */
if (error instanceof Error) {
if (error.message === 'User is already a member') {
- toast.error(t('AlreadyJoined'));
+ toast.error(t('AlreadyJoined') as string);
} else {
- toast.error(t('errorOccured'));
+ toast.error(t('errorOccured') as string);
}
}
}
diff --git a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
index 027234b641..038ff626df 100644
--- a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
+++ b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
import 'jest-localstorage-mock';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter, Router } from 'react-router-dom';
diff --git a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
index abad27dbad..34022fcfcf 100644
--- a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
+++ b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import styles from './OrganizationNavbar.module.css';
-import TalawaImage from 'assets/images/talawa-logo-200x200.png';
+import TalawaImage from 'assets/images/talawa-logo-600x600.png';
import { Container, Dropdown, Nav, Navbar, Offcanvas } from 'react-bootstrap';
import { languages } from 'utils/languages';
import i18next from 'i18next';
diff --git a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
index c5fbcf335e..c08240462a 100644
--- a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
+++ b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx b/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
index 5cadfa923b..fd5d6c7f93 100644
--- a/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
+++ b/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render } from '@testing-library/react';
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/PostCard/PostCard.test.tsx b/src/components/UserPortal/PostCard/PostCard.test.tsx
index 64f6670223..f7d9217308 100644
--- a/src/components/UserPortal/PostCard/PostCard.test.tsx
+++ b/src/components/UserPortal/PostCard/PostCard.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
diff --git a/src/components/UserPortal/PostCard/PostCard.tsx b/src/components/UserPortal/PostCard/PostCard.tsx
index 3eed167f65..f8fcdaebca 100644
--- a/src/components/UserPortal/PostCard/PostCard.tsx
+++ b/src/components/UserPortal/PostCard/PostCard.tsx
@@ -128,7 +128,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
}
} catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
} else {
try {
@@ -144,7 +144,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
}
} catch (error: unknown) {
/* istanbul ignore next */
- toast.error(error);
+ toast.error(error as string);
}
}
};
@@ -245,7 +245,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
props.fetchPosts(); // Refresh the posts
toggleEditPost();
- toast.success(tCommon('updatedSuccessfully', { item: 'Post' }));
+ toast.success(tCommon('updatedSuccessfully', { item: 'Post' }) as string);
} catch (error: unknown) {
/* istanbul ignore next */
errorHandler(t, error);
diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx b/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
index b5d753551c..6ec8ec5de7 100644
--- a/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
+++ b/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, waitFor } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/Register/Register.test.tsx b/src/components/UserPortal/Register/Register.test.tsx
index cdcfb9ebc0..f9929a0588 100644
--- a/src/components/UserPortal/Register/Register.test.tsx
+++ b/src/components/UserPortal/Register/Register.test.tsx
@@ -1,6 +1,6 @@
import type { SetStateAction } from 'react';
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/components/UserPortal/Register/Register.tsx b/src/components/UserPortal/Register/Register.tsx
index 952acf7987..11a810c955 100644
--- a/src/components/UserPortal/Register/Register.tsx
+++ b/src/components/UserPortal/Register/Register.tsx
@@ -57,11 +57,11 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
registerVariables.lastName
)
) {
- toast.error(t('invalidDetailsMessage')); // Error if fields are missing
+ toast.error(t('invalidDetailsMessage') as string); // Error if fields are missing
} else if (
registerVariables.password !== registerVariables.confirmPassword
) {
- toast.error(t('passwordNotMatch')); // Error if passwords do not match
+ toast.error(t('passwordNotMatch') as string); // Error if passwords do not match
} else {
try {
await registerMutation({
@@ -73,7 +73,7 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
},
});
- toast.success(t('afterRegister')); // Success message
+ toast.success(t('afterRegister') as string); // Success message
// Reset form fields
/* istanbul ignore next */
diff --git a/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx b/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
index 5a2e815af4..5c436705cd 100644
--- a/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
+++ b/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
import type { RenderResult } from '@testing-library/react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import userEvent from '@testing-library/user-event';
import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
diff --git a/src/components/UserPortal/StartPostModal/StartPostModal.tsx b/src/components/UserPortal/StartPostModal/StartPostModal.tsx
index 060963865a..d48b8425fa 100644
--- a/src/components/UserPortal/StartPostModal/StartPostModal.tsx
+++ b/src/components/UserPortal/StartPostModal/StartPostModal.tsx
@@ -93,7 +93,7 @@ const startPostModal = ({
/* istanbul ignore next */
if (data) {
toast.dismiss();
- toast.success(t('postNowVisibleInFeed'));
+ toast.success(t('postNowVisibleInFeed') as string);
fetchPosts();
handleHide();
}
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
index 59e3585aa0..8c3447f25a 100644
--- a/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
index 25b3bd2578..4160b00aad 100644
--- a/src/components/UserPortal/UserNavbar/UserNavbar.tsx
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import styles from './UserNavbar.module.css';
-import TalawaImage from 'assets/images/talawa-logo-200x200.png';
+import TalawaImage from 'assets/images/talawa-logo-600x600.png';
import { Container, Dropdown, Navbar } from 'react-bootstrap';
import { languages } from 'utils/languages';
import i18next from 'i18next';
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
index 2984604951..7218bc745c 100644
--- a/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import type { RenderResult } from '@testing-library/react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
@@ -19,14 +19,17 @@ import useLocalStorage from 'utils/useLocalstorage';
const { setItem } = useLocalStorage();
const resizeWindow = (width: number): void => {
- window.innerWidth = width;
- fireEvent(window, new Event('resize'));
+ act(() => {
+ window.innerWidth = width;
+ fireEvent(window, new Event('resize'));
+ });
};
const props = {
hideDrawer: true,
setHideDrawer: jest.fn(),
};
+
const MOCKS = [
{
request: {
@@ -366,38 +369,48 @@ describe('Testing UserSidebar Component [User Portal]', () => {
});
test('Component should be rendered properly', async () => {
- renderUserSidebar('properId', link);
- await wait();
+ await act(async () => {
+ renderUserSidebar('properId', link);
+ await wait();
+ });
});
test('Component should be rendered properly when userImage is present', async () => {
- renderUserSidebar('imagePresent', link);
- await wait();
+ await act(async () => {
+ renderUserSidebar('imagePresent', link);
+ await wait();
+ });
});
test('Component should be rendered properly when organizationImage is present', async () => {
- renderUserSidebar('imagePresent', link);
- await wait();
+ await act(async () => {
+ renderUserSidebar('imagePresent', link);
+ await wait();
+ });
});
test('Component should be rendered properly when joinedOrganizations list is empty', async () => {
- renderUserSidebar('orgEmpty', link);
- await wait();
+ await act(async () => {
+ renderUserSidebar('orgEmpty', link);
+ await wait();
+ });
});
- test('Testing Drawer when the screen size is less than or equal to 820px', () => {
- resizeWindow(800);
- render(
-
-
-
-
-
-
-
- ,
- );
+ test('Testing Drawer when the screen size is less than or equal to 820px', async () => {
+ await act(async () => {
+ resizeWindow(800);
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
expect(screen.getByText('My Organizations')).toBeInTheDocument();
expect(screen.getByText('Settings')).toBeInTheDocument();
expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
@@ -405,13 +418,21 @@ describe('Testing UserSidebar Component [User Portal]', () => {
const orgsBtn = screen.getAllByTestId(/orgsBtn/i);
- orgsBtn[0].click();
- expect(
- orgsBtn[0].className.includes('text-white btn btn-success'),
- ).toBeTruthy();
- settingsBtn.click();
- expect(
- settingsBtn.className.includes('text-white btn btn-success'),
- ).toBeTruthy();
+ act(() => {
+ orgsBtn[0].click();
+ });
+ await waitFor(() =>
+ expect(
+ orgsBtn[0].className.includes('text-white btn btn-success'),
+ ).toBeTruthy(),
+ );
+ act(() => {
+ settingsBtn.click();
+ });
+ await waitFor(() =>
+ expect(
+ settingsBtn.className.includes('text-white btn btn-success'),
+ ).toBeTruthy(),
+ );
});
});
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
index 25086d24b2..5e258f8a8e 100644
--- a/src/components/UserPortal/UserSidebar/UserSidebar.tsx
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
@@ -2,10 +2,10 @@ import React from 'react';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
import { NavLink } from 'react-router-dom';
-import { ReactComponent as OrganizationsIcon } from 'assets/svgs/organizations.svg';
-import { ReactComponent as SettingsIcon } from 'assets/svgs/settings.svg';
-import { ReactComponent as ChatIcon } from 'assets/svgs/chat.svg';
-import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
+import OrganizationsIcon from 'assets/svgs/organizations.svg?react';
+import SettingsIcon from 'assets/svgs/settings.svg?react';
+import ChatIcon from 'assets/svgs/chat.svg?react';
+import TalawaLogo from 'assets/svgs/talawa.svg?react';
import styles from './UserSidebar.module.css';
export interface InterfaceUserSidebarProps {
diff --git a/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx
index d9d70478b3..2f28d9afd1 100644
--- a/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx
+++ b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import 'jest-localstorage-mock';
@@ -12,7 +12,6 @@ import { Provider } from 'react-redux';
import { MockedProvider } from '@apollo/react-testing';
import { store } from 'state/store';
import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
-import { act } from 'react-dom/test-utils';
import { StaticMockLink } from 'utils/StaticMockLink';
import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
import useLocalStorage from 'utils/useLocalstorage';
@@ -332,7 +331,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
);
await wait();
resizeWindow(800);
- expect(screen.getByText(/People/i)).toBeInTheDocument();
+ expect(screen.getAllByText(/People/i)[0]).toBeInTheDocument();
const peopelBtn = screen.getByTestId(/People/i);
userEvent.click(peopelBtn);
diff --git a/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx
index 19866ee2e4..19036b2307 100644
--- a/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx
+++ b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx
@@ -9,8 +9,8 @@ import { useTranslation } from 'react-i18next';
import { NavLink } from 'react-router-dom';
import type { TargetsType } from 'state/reducers/routesReducer';
import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
-import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
-import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
+import AngleRightIcon from 'assets/svgs/angleRight.svg?react';
+import TalawaLogo from 'assets/svgs/talawa.svg?react';
import styles from './UserSidebarOrg.module.css';
import Avatar from 'components/Avatar/Avatar';
diff --git a/src/components/UsersTableItem/UserTableItem.test.tsx b/src/components/UsersTableItem/UserTableItem.test.tsx
index bfa0a31c86..e87b41f7f2 100644
--- a/src/components/UsersTableItem/UserTableItem.test.tsx
+++ b/src/components/UsersTableItem/UserTableItem.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { toast } from 'react-toastify';
import { StaticMockLink } from 'utils/StaticMockLink';
diff --git a/src/components/UsersTableItem/UsersTableItem.tsx b/src/components/UsersTableItem/UsersTableItem.tsx
index 9d6ec65187..9e94b8a9f5 100644
--- a/src/components/UsersTableItem/UsersTableItem.tsx
+++ b/src/components/UsersTableItem/UsersTableItem.tsx
@@ -56,7 +56,9 @@ const UsersTableItem = (props: Props): JSX.Element => {
},
});
if (data) {
- toast.success(tCommon('removedSuccessfully', { item: 'User' }));
+ toast.success(
+ tCommon('removedSuccessfully', { item: 'User' }) as string,
+ );
resetAndRefetch();
}
} catch (error: unknown) {
@@ -77,7 +79,7 @@ const UsersTableItem = (props: Props): JSX.Element => {
},
});
if (data) {
- toast.success(t('roleUpdated'));
+ toast.success(t('roleUpdated') as string);
resetAndRefetch();
}
} catch (error: unknown) {
diff --git a/src/components/Venues/VenueCard.tsx b/src/components/Venues/VenueCard.tsx
index f9f50cace8..752ac95139 100644
--- a/src/components/Venues/VenueCard.tsx
+++ b/src/components/Venues/VenueCard.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { Card, Button } from 'react-bootstrap';
import defaultImg from 'assets/images/defaultImg.png';
-import { ReactComponent as PeopleIcon } from 'assets/svgs/people.svg';
+import PeopleIcon from 'assets/svgs/people.svg?react';
import styles from 'screens/OrganizationVenues/OrganizationVenues.module.css';
import { useTranslation } from 'react-i18next';
import type { InterfaceQueryVenueListItem } from 'utils/interfaces';
diff --git a/src/components/Venues/VenueModal.test.tsx b/src/components/Venues/VenueModal.test.tsx
index 652816adaf..b299c8ff20 100644
--- a/src/components/Venues/VenueModal.test.tsx
+++ b/src/components/Venues/VenueModal.test.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
import type { RenderResult } from '@testing-library/react';
-import { act, render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import 'jest-location-mock';
diff --git a/src/components/Venues/VenueModal.tsx b/src/components/Venues/VenueModal.tsx
index fd672d4ea2..476964b910 100644
--- a/src/components/Venues/VenueModal.tsx
+++ b/src/components/Venues/VenueModal.tsx
@@ -77,13 +77,13 @@ const VenueModal = ({
*/
const handleSubmit = useCallback(async () => {
if (formState.name.trim().length === 0) {
- toast.error(t('venueTitleError'));
+ toast.error(t('venueTitleError') as string);
return;
}
const capacityNum = parseInt(formState.capacity);
if (isNaN(capacityNum) || capacityNum <= 0) {
- toast.error(t('venueCapacityError'));
+ toast.error(t('venueCapacityError') as string);
return;
}
@@ -100,7 +100,9 @@ const VenueModal = ({
});
/* istanbul ignore next */
if (data) {
- toast.success(edit ? t('venueUpdated') : t('venueAdded'));
+ toast.success(
+ edit ? (t('venueUpdated') as string) : (t('venueAdded') as string),
+ );
refetchVenues();
onHide();
setFormState({
diff --git a/src/components/plugins/DummyPlugin/DummyPlugin.test.jsx b/src/components/plugins/DummyPlugin/DummyPlugin.test.jsx
index ae792966fe..e1abb52a1e 100644
--- a/src/components/plugins/DummyPlugin/DummyPlugin.test.jsx
+++ b/src/components/plugins/DummyPlugin/DummyPlugin.test.jsx
@@ -1,15 +1,16 @@
+import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { I18nextProvider } from 'react-i18next';
-import React from 'react';
-
import { store } from 'state/store';
import DummyPlugin from './DummyPlugin';
import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
+
const link = new StaticMockLink([], true);
+
describe('Testing dummy plugin', () => {
test('should render props and text elements test for the page component', () => {
const { getByText } = render(
@@ -21,7 +22,7 @@ describe('Testing dummy plugin', () => {
-
+ ,
);
expect(getByText(/Welcome to the Dummy Plugin!/i)).toBeInTheDocument();
diff --git a/src/components/plugins/DummyPlugin/DummyPlugin.tsx b/src/components/plugins/DummyPlugin/DummyPlugin.tsx
index d3c8ed8d41..5b837ea076 100644
--- a/src/components/plugins/DummyPlugin/DummyPlugin.tsx
+++ b/src/components/plugins/DummyPlugin/DummyPlugin.tsx
@@ -9,7 +9,7 @@ import AddOn from 'components/AddOn/AddOn';
*
* @returns JSX.Element - Renders the `AddOn` component containing a welcome message.
*/
-function dummyPlugin(): JSX.Element {
+function DummyPlugin(): JSX.Element {
return (
-
+ ,
);
});
});
diff --git a/src/components/plugins/DummyPlugin2/DummyPlugin2.tsx b/src/components/plugins/DummyPlugin2/DummyPlugin2.tsx
index 9d7e5e4498..dca6d63ee3 100644
--- a/src/components/plugins/DummyPlugin2/DummyPlugin2.tsx
+++ b/src/components/plugins/DummyPlugin2/DummyPlugin2.tsx
@@ -7,12 +7,8 @@ import React from 'react';
* This component currently does not have any additional functionality
* or properties.
*/
-function dummyPlugin2(): JSX.Element {
+function DummyPlugin2(): JSX.Element {
return ;
}
-dummyPlugin2.defaultProps = {};
-
-dummyPlugin2.propTypes = {};
-
-export default dummyPlugin2;
+export default DummyPlugin2;
diff --git a/src/index.tsx b/src/index.tsx
index 44cb0578b6..ec1d45ae69 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import type { NormalizedCacheObject } from '@apollo/client';
import {
@@ -44,6 +44,7 @@ const theme = createTheme({
});
import useLocalStorage from 'utils/useLocalstorage';
import i18n from './utils/i18n';
+import { requestMiddleware, responseMiddleware } from 'utils/timezoneUtils';
const { getItem } = useLocalStorage();
const authLink = setContext((_, { headers }) => {
@@ -123,7 +124,13 @@ const splitLink = split(
httpLink,
);
-const combinedLink = ApolloLink.from([errorLink, authLink, splitLink]);
+const combinedLink = ApolloLink.from([
+ errorLink,
+ authLink,
+ requestMiddleware,
+ responseMiddleware,
+ splitLink,
+]);
const client: ApolloClient = new ApolloClient({
cache: new InMemoryCache(),
@@ -131,7 +138,10 @@ const client: ApolloClient = new ApolloClient({
});
const fallbackLoader = ;
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!); // Note the use of '!' is to assert the container is not null
+
+root.render(
@@ -146,5 +156,4 @@ ReactDOM.render(
,
- document.getElementById('root'),
);
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5fc6..0000000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// => {
- try {
- const { data } = await blockUser({
- variables: {
- userId,
- orgId: currentUrl,
- },
- });
- /* istanbul ignore next */
- if (data) {
- toast.success(t('blockedSuccessfully'));
- memberRefetch();
+ const handleBlockUser = useCallback(
+ async (userId: string): Promise => {
+ try {
+ const { data } = await blockUser({
+ variables: {
+ userId,
+ orgId: currentUrl,
+ },
+ });
+ /* istanbul ignore next */
+ if (data) {
+ toast.success(t('blockedSuccessfully') as string);
+ memberRefetch();
+ }
+ } catch (error: unknown) {
+ /* istanbul ignore next */
+ errorHandler(t, error);
}
- } catch (error: unknown) {
- /* istanbul ignore next */
- errorHandler(t, error);
- }
- };
+ },
+ [blockUser, currentUrl, memberRefetch, t],
+ );
// Handler for unblocking a user
- const handleUnBlockUser = async (userId: string): Promise => {
- try {
- const { data } = await unBlockUser({
- variables: {
- userId,
- orgId: currentUrl,
- },
- });
- /* istanbul ignore next */
- if (data) {
- toast.success(t('Un-BlockedSuccessfully'));
- memberRefetch();
+ const handleUnBlockUser = useCallback(
+ async (userId: string): Promise => {
+ try {
+ const { data } = await unBlockUser({
+ variables: {
+ userId,
+ orgId: currentUrl,
+ },
+ });
+ /* istanbul ignore next */
+ if (data) {
+ toast.success(t('Un-BlockedSuccessfully') as string);
+ memberRefetch();
+ }
+ } catch (error: unknown) {
+ /* istanbul ignore next */
+ errorHandler(t, error);
}
- } catch (error: unknown) {
- /* istanbul ignore next */
- errorHandler(t, error);
- }
- };
+ },
+ [unBlockUser, currentUrl, memberRefetch, t],
+ );
// Display error if member query fails
- /* istanbul ignore next */
- if (memberError) {
- toast.error(memberError.message);
- }
+ useEffect(() => {
+ if (memberError) {
+ toast.error(memberError.message);
+ }
+ }, [memberError]);
// Search handler
- const handleSearch = (value: string): void => {
- setSearchByName(value);
- memberRefetch({
- orgId: currentUrl,
- firstName_contains: searchByFirstName ? value : '',
- lastName_contains: searchByFirstName ? '' : value,
- });
- };
+ const handleSearch = useCallback(
+ (value: string): void => {
+ setSearchByName(value);
+ memberRefetch({
+ orgId: currentUrl,
+ firstName_contains: searchByFirstName ? value : '',
+ lastName_contains: searchByFirstName ? '' : value,
+ });
+ },
+ [searchByFirstName, memberRefetch, currentUrl],
+ );
// Search by Enter key
- const handleSearchByEnter = (
- e: React.KeyboardEvent,
- ): void => {
- if (e.key === 'Enter') {
- const { value } = e.currentTarget;
- handleSearch(value);
- }
- };
+ const handleSearchByEnter = useCallback(
+ (e: React.KeyboardEvent): void => {
+ if (e.key === 'Enter') {
+ const { value } = e.currentTarget;
+ handleSearch(value);
+ }
+ },
+ [handleSearch],
+ );
// Search button click handler
- const handleSearchByBtnClick = (): void => {
- const inputValue =
- (document.getElementById('searchBlockedUsers') as HTMLInputElement)
- ?.value || '';
+ const handleSearchByBtnClick = useCallback((): void => {
+ const inputValue = searchByName;
handleSearch(inputValue);
- };
+ }, [handleSearch, searchByName]);
// Header titles for the table
const headerTitles: string[] = [
@@ -195,6 +204,8 @@ const Requests = (): JSX.Element => {
data-testid="searchByName"
autoComplete="off"
required
+ value={searchByName}
+ onChange={(e) => setSearchByName(e.target.value)}
onKeyUp={handleSearchByEnter}
/>
-
+
+ {props.name}
-- Owner: - {props.firstName} - - - {props.lastName} - -
-
+
+
);
}
-export {};
-export default organizationCard;
+export default OrganizationCard;
diff --git a/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx b/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx
index 2a9f03a9be..dd65c8649e 100644
--- a/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx
+++ b/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx
@@ -6,12 +6,11 @@ describe('Testing the Organization Cards', () => {
test('should render props and text elements test for the page component', () => {
const props = {
id: '123',
- key: '456',
image: 'https://via.placeholder.com/80',
name: 'Sample',
};
- render(
+ {props.image ? (
+
+ ) : (
+
+ )}
+
-
-
+
+
+
-
{props.name}
++ Owner: + {props.firstName} + + + {props.lastName} + +
Welcome to the Dummy Plugin!
@@ -17,8 +17,4 @@ function dummyPlugin(): JSX.Element {
);
}
-dummyPlugin.defaultProps = {};
-
-dummyPlugin.propTypes = {};
-
-export default dummyPlugin;
+export default DummyPlugin;
diff --git a/src/components/plugins/DummyPlugin2/DummyPlugin2.test.jsx b/src/components/plugins/DummyPlugin2/DummyPlugin2.test.jsx
index bcec97367c..c2cfe03a1e 100644
--- a/src/components/plugins/DummyPlugin2/DummyPlugin2.test.jsx
+++ b/src/components/plugins/DummyPlugin2/DummyPlugin2.test.jsx
@@ -5,14 +5,14 @@ import { BrowserRouter } from 'react-router-dom';
import { store } from 'state/store';
import DummyPlugin2 from './DummyPlugin2';
-describe('Testing dummy plugin 2', () => {
- test('should render props and text elements test for the page component', () => {
+describe('Testing DummyPlugin2', () => {
+ test('should render DummyPlugin2 component', () => {
render(
@@ -269,7 +280,7 @@ const Requests = (): JSX.Element => {
{tCommon('noResultsFoundFor')} "{searchByName}"
- ) : loadingMembers == false && membersData.length === 0 ? (
+ ) : loadingMembers === false && membersData.length === 0 ? (
{t('noSpammerFound')}
-
-
-
- {t(orgSetting)}
-
-
- {/* Render dropdown items for each settings category */}
- {orgSettings.map((setting, index) => (
- setOrgSetting(setting)
- }
- className={orgSetting === setting ? 'text-secondary' : ''}
- >
- {t(setting)}
-
- ))}
-
-
-
-
-
-
-
+
+
+
- {/* Render content based on the selected settings category */}
- {orgSetting === 'general' && (
-
-
-
- {/* Render organization update component if orgId is available */}
- {orgId &&
-
-
-
-
-
-
-
-
-
- {/* Render organization profile field settings component if orgId is available */}
- {orgId &&
-
-
-
- )}
-
- {orgSetting === 'actionItemCategories' && (
-
-
);
}
diff --git a/src/screens/OrganizationActionItems/ActionItemCreateModal.tsx b/src/screens/OrganizationActionItems/ActionItemCreateModal.tsx
deleted file mode 100644
index 00284468f1..0000000000
--- a/src/screens/OrganizationActionItems/ActionItemCreateModal.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React from 'react';
-import { Modal, Form, Button } from 'react-bootstrap';
-import type { ChangeEvent } from 'react';
-import styles from './OrganizationActionItems.module.css';
-import { DatePicker } from '@mui/x-date-pickers';
-import dayjs from 'dayjs';
-import type { Dayjs } from 'dayjs';
-
-import type {
- InterfaceActionItemCategoryInfo,
- InterfaceMemberInfo,
-} from 'utils/interfaces';
-
-/**
- * Interface for the form state used in the `ActionItemCreateModal` component.
- */
-interface InterfaceFormStateType {
- actionItemCategoryId: string;
- assigneeId: string;
- eventId?: string;
- preCompletionNotes: string;
-}
-
-/**
- * Props for the `ActionItemCreateModal` component.
- */
-interface InterfaceActionItemCreateModalProps {
- actionItemCreateModalIsOpen: boolean;
- hideCreateModal: () => void;
- formState: InterfaceFormStateType;
- setFormState: (state: React.SetStateAction
- {/* Render buttons for each settings category */}
- {orgSettings.map((setting, index) => (
-
+
))}
-
+
+
+
- {/* Dropdown menu for selecting settings category */}
- -
-
-
- {t('updateOrganization')}
-
-
-
- {t('otherSettings')}
-
-
- {t('changeLanguage')}
-
- {/* Render language change dropdown component */}
-
-
-
-
- {t('manageCustomFields')}
-
-
-
-
+ );
+ }
+ })()}
+
- {t('actionItemCategories')}
+ {/* Render content based on the selected settings category */}
+ {(() => {
+ switch (tab) {
+ case 'general':
+ return (
+
-
+
+ );
+ case 'actionItemCategories':
+ return (
+
+
+ );
+ case 'agendaItemCategories':
+ return (
+
+
-
- {/* Render action item categories component if orgId is available */}
- {orgId &&
-
- )}
- {t('actionItemDetails')}
- -{t('actionItemDetails')}
- -{t('actionItemDetails')}
- -{t('deleteActionItem')}
+ +{t('deleteActionItemMsg')}
++ {editMode ? t('updateActionItem') : t('createActionItem')} +
+ +{t('actionItemStatus')}
+ +{t('actionItemDetails')}
+ +
-
-
- Error occured while loading{' '}
- {actionItemCategoriesError
- ? 'Action Item Categories'
- : membersError
- ? 'Members List'
- : 'Action Items List'}{' '}
- Data
-
-
+
- Error occured while loading{' '}
- {actionItemCategoriesError
- ? 'Action Item Categories'
- : membersError
- ? 'Members List'
- : 'Action Items List'}{' '}
- Data
-
- {actionItemCategoriesError
- ? actionItemCategoriesError.message
- : membersError
- ? membersError.message
- : actionItemsError?.message}
-
-
+
+ {tErrors('errorLoading', { entity: 'Action Items' })}
+
);
}
- const actionItemCategories =
- actionItemCategoriesData?.actionItemCategoriesByOrganization.filter(
- (category) => !category.isDisabled,
- );
-
- const actionItemOnly = actionItemsData?.actionItemsByOrganization.filter(
- (item) => item.event == null,
- );
+ const columns: GridColDef[] = [
+ {
+ field: 'assignee',
+ headerName: 'Assignee',
+ flex: 1,
+ align: 'left',
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ const { _id, firstName, lastName, image } = params.row.assignee;
+ return (
+
+ {tErrors('errorLoading', { entity: 'Action Items' })}
+
+ {`${actionItemsError.message}`}
+
+ {image ? (
+ 
+ ) : (
+
+ );
+ },
+ },
+ {
+ field: 'itemCategory',
+ headerName: 'Item Category',
+ flex: 1,
+ align: 'center',
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+
+ )}
+ {params.row.assignee.firstName + ' ' + params.row.assignee.lastName}
+
+ {params.row.actionItemCategory?.name}
+
+ );
+ },
+ },
+ {
+ field: 'status',
+ headerName: 'Status',
+ flex: 1,
+ align: 'center',
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+ {params.row.allotedHours ?? '-'}
+ );
+ },
+ },
+ {
+ field: 'dueDate',
+ headerName: 'Due Date',
+ align: 'center',
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ flex: 1,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+ {dayjs(params.row.dueDate).format('DD/MM/YYYY')}
+
+ );
+ },
+ },
+ {
+ field: 'options',
+ headerName: 'Options',
+ align: 'center',
+ flex: 1,
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+ <>
+
+
+
+
+ );
+ },
+ },
+ {
+ field: 'completed',
+ headerName: 'Completed',
+ align: 'center',
+ flex: 1,
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+ handleModalClick(params.row, ModalState.STATUS)}
+ />
+
+ );
+ },
+ },
+ ];
return (
-
-
#
+
+ {translateAddMember('profile')}
+
{translateAddMember('user')}
@@ -395,6 +399,24 @@ function AddMember(): JSX.Element {
{index + 1}
+
+ {userDetails.user.image ? (
+ 
+ ) : (
+
{
userEvent.click(screen.getByTestId('existingUser'));
await wait();
- expect(screen.getByTestId('addExistingUserModal')).toBeInTheDocument();
+ expect(
+ screen.getAllByTestId('addExistingUserModal').length,
+ ).toBeGreaterThan(0);
await wait();
- userEvent.click(screen.getByTestId('addBtn'));
+ const addBtn = screen.getAllByTestId('addBtn');
+ userEvent.click(addBtn[0]);
});
test('Open and search existing user', async () => {
@@ -1287,3 +1316,54 @@ describe('Organization People Page', () => {
await wait();
});
});
+
+test('Open and check if profile image is displayed for existing user', async () => {
+ window.location.assign('/orgpeople/orgid');
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+
+ // Wait for the component to finish rendering
+ await wait();
+
+ // Click on the dropdown toggle to open the menu
+ userEvent.click(screen.getByTestId('addMembers'));
+ await wait();
+
+ // Click on the "Admins" option in the dropdown menu
+ userEvent.click(screen.getByTestId('existingUser'));
+ await wait();
+
+ expect(screen.getByTestId('addExistingUserModal')).toBeInTheDocument();
+ await wait();
+
+ expect(screen.getAllByTestId('user').length).toBeGreaterThan(0);
+ await wait();
+
+ // Check if the image is rendered
+ expect(screen.getAllByTestId('profileImage').length).toBeGreaterThan(0);
+ await wait();
+
+ const images = await screen.findAllByAltText('avatar');
+ expect(images.length).toBeGreaterThan(0);
+ await wait();
+
+ const avatarImages = await screen.findAllByAltText('Dummy Avatar');
+ expect(avatarImages.length).toBeGreaterThan(0);
+ await wait();
+});
diff --git a/src/screens/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx
index 0dcefc17e3..e4bf0604e9 100644
--- a/src/screens/OrganizationTags/OrganizationTags.tsx
+++ b/src/screens/OrganizationTags/OrganizationTags.tsx
@@ -99,7 +99,7 @@ function OrganizationTags(): JSX.Element {
});
if (data) {
- toast.success(t('tagCreationSuccess'));
+ toast.success(t('tagCreationSuccess') as string);
orgUserTagsRefetch();
setTagName('');
setCreateTagModalIsOpen(false);
@@ -123,7 +123,7 @@ function OrganizationTags(): JSX.Element {
orgUserTagsRefetch();
toggleRemoveUserTagModal();
- toast.success(t('tagRemovalSuccess'));
+ toast.success(t('tagRemovalSuccess') as string);
} catch (error: unknown) {
/* istanbul ignore next */
if (error instanceof Error) {
diff --git a/src/screens/PageNotFound/PageNotFound.tsx b/src/screens/PageNotFound/PageNotFound.tsx
index 58fc859b4f..037aeecbab 100644
--- a/src/screens/PageNotFound/PageNotFound.tsx
+++ b/src/screens/PageNotFound/PageNotFound.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import useLocalStorage from 'utils/useLocalstorage';
import styles from './PageNotFound.module.css';
-import Logo from 'assets/images/talawa-logo-200x200.png';
+import Logo from 'assets/images/talawa-logo-600x600.png';
/**
* The `PageNotFound` component displays a 404 error page when a user navigates to a non-existent route.
diff --git a/src/screens/Requests/Requests.test.tsx b/src/screens/Requests/Requests.test.tsx
index bf1a533870..4606fdae08 100644
--- a/src/screens/Requests/Requests.test.tsx
+++ b/src/screens/Requests/Requests.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import 'jest-localstorage-mock';
import 'jest-location-mock';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/screens/Requests/Requests.tsx b/src/screens/Requests/Requests.tsx
index a8d9f40315..38bc51195e 100644
--- a/src/screens/Requests/Requests.tsx
+++ b/src/screens/Requests/Requests.tsx
@@ -102,7 +102,7 @@ const Requests = (): JSX.Element => {
}
if (orgsData.organizationsConnection.length === 0) {
- toast.warning(t('noOrgError'));
+ toast.warning(t('noOrgError') as string);
}
}, [orgsData]);
diff --git a/src/screens/SubTags/SubTags.tsx b/src/screens/SubTags/SubTags.tsx
index 9c8ac44191..b381c9f816 100644
--- a/src/screens/SubTags/SubTags.tsx
+++ b/src/screens/SubTags/SubTags.tsx
@@ -126,7 +126,7 @@ function SubTags(): JSX.Element {
/* istanbul ignore next */
if (data) {
- toast.success(t('tagCreationSuccess'));
+ toast.success(t('tagCreationSuccess') as string);
subTagsRefetch();
setTagName('');
setAddSubTagModalIsOpen(false);
@@ -150,7 +150,7 @@ function SubTags(): JSX.Element {
subTagsRefetch();
toggleRemoveUserTagModal();
- toast.success(t('tagRemovalSuccess'));
+ toast.success(t('tagRemovalSuccess') as string);
} catch (error: unknown) {
/* istanbul ignore next */
if (error instanceof Error) {
diff --git a/src/screens/UserPortal/Campaigns/Campaigns.test.tsx b/src/screens/UserPortal/Campaigns/Campaigns.test.tsx
index 443d643cff..17b7eec4d5 100644
--- a/src/screens/UserPortal/Campaigns/Campaigns.test.tsx
+++ b/src/screens/UserPortal/Campaigns/Campaigns.test.tsx
@@ -155,14 +155,17 @@ describe('Testing User Campaigns Screen', () => {
it('Check if All details are rendered correctly', async () => {
renderCampaigns(link1);
+
+ const detailContainer = await screen.findByTestId('detailContainer1');
+ const detailContainer2 = await screen.findByTestId('detailContainer2');
await waitFor(() => {
- const detailContainer = screen.getByTestId('detailContainer1');
+ expect(detailContainer).toBeInTheDocument();
+ expect(detailContainer2).toBeInTheDocument();
expect(detailContainer).toHaveTextContent('School Campaign');
expect(detailContainer).toHaveTextContent('$22000');
expect(detailContainer).toHaveTextContent('2024-07-28');
expect(detailContainer).toHaveTextContent('2025-08-31');
expect(detailContainer).toHaveTextContent('Active');
- const detailContainer2 = screen.getByTestId('detailContainer2');
expect(detailContainer2).toHaveTextContent('Hospital Campaign');
expect(detailContainer2).toHaveTextContent('$9000');
expect(detailContainer2).toHaveTextContent('2024-07-28');
@@ -291,18 +294,6 @@ describe('Testing User Campaigns Screen', () => {
});
});
- it('Redirect to My Pledges screen', async () => {
- renderCampaigns(link1);
-
- const myPledgesBtn = await screen.findByText(cTranslations.myPledges);
- expect(myPledgesBtn).toBeInTheDocument();
- userEvent.click(myPledgesBtn);
-
- await waitFor(() => {
- expect(screen.getByTestId('pledgeScreen')).toBeInTheDocument();
- });
- });
-
it('open and closes add pledge modal', async () => {
renderCampaigns(link1);
@@ -318,4 +309,16 @@ describe('Testing User Campaigns Screen', () => {
expect(screen.queryByTestId('pledgeModalCloseBtn')).toBeNull(),
);
});
+
+ it('Redirect to My Pledges screen', async () => {
+ renderCampaigns(link1);
+
+ const myPledgesBtn = await screen.findByText(cTranslations.myPledges);
+ expect(myPledgesBtn).toBeInTheDocument();
+ userEvent.click(myPledgesBtn);
+
+ await waitFor(() => {
+ expect(screen.getByTestId('pledgeScreen')).toBeInTheDocument();
+ });
+ });
});
diff --git a/src/screens/UserPortal/Campaigns/Campaigns.tsx b/src/screens/UserPortal/Campaigns/Campaigns.tsx
index 4aeca6876d..e4483f87fe 100644
--- a/src/screens/UserPortal/Campaigns/Campaigns.tsx
+++ b/src/screens/UserPortal/Campaigns/Campaigns.tsx
@@ -244,8 +244,12 @@ const Campaigns = (): JSX.Element => {
{campaign.fundingGoal}
Raised: $0
- Start Date: {campaign.startDate}
- End Date: {campaign.endDate}
+
+ Start Date: {campaign.startDate as unknown as string}
+
+
+ End Date: {campaign.endDate as unknown as string}
+
-
-
-
-
-
-
-
-
-
- ,
- );
-};
-
-describe('CampaignDeleteModal', () => {
- it('should render CampaignDeleteModal', () => {
- renderFundDeleteModal(link1, campaignProps);
- expect(screen.getByTestId('deleteCampaignCloseBtn')).toBeInTheDocument();
- });
-
- it('should successfully Delete Campaign', async () => {
- renderFundDeleteModal(link1, campaignProps);
- expect(screen.getByTestId('deleteCampaignCloseBtn')).toBeInTheDocument();
-
- fireEvent.click(screen.getByTestId('deleteyesbtn'));
-
- await waitFor(() => {
- expect(campaignProps.refetchCampaign).toHaveBeenCalled();
- expect(campaignProps.hide).toHaveBeenCalled();
- expect(toast.success).toHaveBeenCalledWith(translations.deletedCampaign);
- });
- });
-
- it('should fail to Delete Campaign', async () => {
- renderFundDeleteModal(link2, campaignProps);
- expect(screen.getByTestId('deleteCampaignCloseBtn')).toBeInTheDocument();
-
- fireEvent.click(screen.getByTestId('deleteyesbtn'));
-
- await waitFor(() => {
- expect(toast.error).toHaveBeenCalledWith('Mock graphql error');
- });
- });
-});
diff --git a/src/screens/OrganizationFundCampaign/CampaignDeleteModal.tsx b/src/screens/OrganizationFundCampaign/CampaignDeleteModal.tsx
deleted file mode 100644
index c6c0b5a35e..0000000000
--- a/src/screens/OrganizationFundCampaign/CampaignDeleteModal.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import { Button, Modal } from 'react-bootstrap';
-import styles from './OrganizationFundCampaign.module.css';
-import { useMutation } from '@apollo/client';
-import { DELETE_CAMPAIGN_MUTATION } from 'GraphQl/Mutations/CampaignMutation';
-import type { InterfaceCampaignInfo } from 'utils/interfaces';
-import { toast } from 'react-toastify';
-import { useTranslation } from 'react-i18next';
-
-/**
- * Props for the CampaignDeleteModal component.
- */
-export interface InterfaceDeleteCampaignModal {
- isOpen: boolean;
- hide: () => void;
- campaign: InterfaceCampaignInfo | null;
- refetchCampaign: () => void;
-}
-
-/**
- * Modal component for confirming the deletion of a campaign.
- *
- * @param props - The props for the CampaignDeleteModal component.
- * @returns JSX.Element
- */
-const CampaignDeleteModal: React.FC = ({
- isOpen,
- hide,
- campaign,
- refetchCampaign,
-}) => {
- const { t } = useTranslation('translation', {
- keyPrefix: 'fundCampaign',
- });
- const { t: tCommon } = useTranslation('common');
-
- const [deleteCampaign] = useMutation(DELETE_CAMPAIGN_MUTATION);
-
- /**
- * Handles the campaign deletion.
- *
- * @returns Promise
- */
- const deleteCampaignHandler = async (): Promise => {
- try {
- await deleteCampaign({
- variables: {
- id: campaign?._id,
- },
- });
- toast.success(t('deletedCampaign'));
- refetchCampaign();
- hide();
- } catch (error: unknown) {
- toast.error((error as Error).message);
- }
- };
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-export default CampaignDeleteModal;
diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.tsx
index 1a31dd8242..63d1e8de3a 100644
--- a/src/screens/OrganizationFundCampaign/CampaignModal.tsx
+++ b/src/screens/OrganizationFundCampaign/CampaignModal.tsx
@@ -106,7 +106,7 @@ const CampaignModal: React.FC = ({
fundId,
},
});
- toast.success(t('createdCampaign'));
+ toast.success(t('createdCampaign') as string);
setFormState({
campaignName: '',
campaignCurrency: 'USD',
@@ -166,7 +166,7 @@ const CampaignModal: React.FC = ({
});
refetchCampaign();
hide();
- toast.success(t('updatedCampaign'));
+ toast.success(t('updatedCampaign') as string);
} catch (error: unknown) {
toast.error((error as Error).message);
}
diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
index 8abba9bab6..1c6dbf2cc6 100644
--- a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
+++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
@@ -13,7 +13,6 @@ import React, { useCallback, useMemo, useState } from 'react';
import dayjs from 'dayjs';
import Loader from 'components/Loader/Loader';
import CampaignModal from './CampaignModal';
-import CampaignDeleteModal from './CampaignDeleteModal';
import { FUND_CAMPAIGN } from 'GraphQl/Queries/fundQueries';
import styles from './OrganizationFundCampaign.module.css';
import { currencySymbols } from 'utils/currency';
@@ -43,33 +42,26 @@ const dataGridStyle = {
},
};
-enum ModalState {
- SAME = 'same',
- DELETE = 'delete',
-}
/**
* `orgFundCampaign` component displays a list of fundraising campaigns for a specific fund within an organization.
- * It allows users to search, sort, view, edit, and delete campaigns.
+ * It allows users to search, sort, view and edit campaigns.
*
* ### Functionality
* - Displays a data grid with campaigns information, including their names, start and end dates, funding goals, and actions.
* - Provides search functionality to filter campaigns by name.
* - Offers sorting options based on funding goal and end date.
- * - Opens modals for creating, editing, or deleting campaigns.
+ * - Opens modals for creating or editing campaigns.
*
*
* ### State
* - `campaign`: The current campaign being edited or deleted.
* - `searchTerm`: The term used for searching campaigns by name.
* - `sortBy`: The current sorting criteria for campaigns.
- * - `modalState`: An object indicating the visibility of different modals (`same` for create/edit and `delete` for deletion).
+ * - `modalState`: An object indicating the visibility of different modals (`same` for create/edit).
* - `campaignModalMode`: Determines if the modal is in 'edit' or 'create' mode.
*
* ### Methods
- * - `openModal(modal: ModalState)`: Opens the specified modal.
- * - `closeModal(modal: ModalState)`: Closes the specified modal.
* - `handleOpenModal(campaign: InterfaceCampaignInfo | null, mode: 'edit' | 'create')`: Opens the modal for creating or editing a campaign.
- * - `handleDeleteClick(campaign: InterfaceCampaignInfo)`: Opens the delete confirmation modal.
* - `handleClick(campaignId: string)`: Navigates to the pledge details page for a specific campaign.
*
* ### GraphQL Queries
@@ -77,7 +69,7 @@ enum ModalState {
*
* ### Rendering
* - Renders a `DataGrid` component with campaigns information.
- * - Displays modals for creating, editing, and deleting campaigns.
+ * - Displays modals for creating and editing campaigns.
* - Shows error and loading states using `Loader` and error message components.
*
* @returns The rendered component including breadcrumbs, search and filter controls, data grid, and modals.
@@ -99,36 +91,18 @@ const orgFundCampaign = (): JSX.Element => {
const [searchTerm, setSearchTerm] = useState('');
const [sortBy, setSortBy] = useState(null);
- const [modalState, setModalState] = useState<{
- [key in ModalState]: boolean;
- }>({
- [ModalState.SAME]: false,
- [ModalState.DELETE]: false,
- });
+ const [modalState, setModalState] = useState(false);
const [campaignModalMode, setCampaignModalMode] = useState<'edit' | 'create'>(
'create',
);
- const openModal = (modal: ModalState): void =>
- setModalState((prevState) => ({ ...prevState, [modal]: true }));
-
- const closeModal = (modal: ModalState): void =>
- setModalState((prevState) => ({ ...prevState, [modal]: false }));
const handleOpenModal = useCallback(
(campaign: InterfaceCampaignInfo | null, mode: 'edit' | 'create'): void => {
setCampaign(campaign);
setCampaignModalMode(mode);
- openModal(ModalState.SAME);
- },
- [openModal],
- );
-
- const handleDeleteClick = useCallback(
- (campaign: InterfaceCampaignInfo): void => {
- setCampaign(campaign);
- openModal(ModalState.DELETE);
+ setModalState(true);
},
- [openModal],
+ [],
);
const {
@@ -157,10 +131,11 @@ const orgFundCampaign = (): JSX.Element => {
navigate(`/fundCampaignPledge/${orgId}/${campaignId}`);
};
- const campaigns = useMemo(() => {
- if (campaignData?.getFundById?.campaigns)
- return campaignData.getFundById.campaigns;
- return [];
+ const { campaigns, fundName, isArchived } = useMemo(() => {
+ const fundName = campaignData?.getFundById?.name || 'Fund';
+ const isArchived = campaignData?.getFundById?.isArchived || false;
+ const campaigns = campaignData?.getFundById?.campaigns || [];
+ return { fundName, campaigns, isArchived };
}, [campaignData]);
if (campaignLoading) {
@@ -319,17 +294,6 @@ const orgFundCampaign = (): JSX.Element => {
>
-
);
},
@@ -370,9 +334,9 @@ const orgFundCampaign = (): JSX.Element => {
data-testid="fundsLink"
onClick={() => navigate(`/orgfunds/${orgId}`)}
>
- {tCommon('Funds')}
+ {fundName}
- FundRaising Campaign
+ {t('title')}
-
-
-
-
-
-
-
-
- ,
- );
-};
-
-describe('FundDeleteModal', () => {
- it('should render FundDeleteModal', () => {
- renderFundDeleteModal(link1, fundProps);
- expect(screen.getByTestId('deleteFundCloseBtn')).toBeInTheDocument();
- });
-
- it('should successfully Delete Fund', async () => {
- renderFundDeleteModal(link1, fundProps);
- expect(screen.getByTestId('deleteFundCloseBtn')).toBeInTheDocument();
-
- fireEvent.click(screen.getByTestId('deleteyesbtn'));
-
- await waitFor(() => {
- expect(fundProps.refetchFunds).toHaveBeenCalled();
- expect(fundProps.hide).toHaveBeenCalled();
- expect(toast.success).toHaveBeenCalledWith(translations.fundDeleted);
- });
- });
-
- it('should fail to Delete Fund', async () => {
- renderFundDeleteModal(link2, fundProps);
- expect(screen.getByTestId('deleteFundCloseBtn')).toBeInTheDocument();
-
- fireEvent.click(screen.getByTestId('deleteyesbtn'));
-
- await waitFor(() => {
- expect(toast.error).toHaveBeenCalledWith('Mock graphql error');
- });
- });
-});
diff --git a/src/screens/OrganizationFunds/FundDeleteModal.tsx b/src/screens/OrganizationFunds/FundDeleteModal.tsx
deleted file mode 100644
index bca92614ca..0000000000
--- a/src/screens/OrganizationFunds/FundDeleteModal.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import type { InterfaceFundInfo } from 'utils/interfaces';
-import styles from './OrganizationFunds.module.css';
-import { Button, Modal } from 'react-bootstrap';
-import { REMOVE_FUND_MUTATION } from 'GraphQl/Mutations/FundMutation';
-import { useMutation } from '@apollo/client';
-import { toast } from 'react-toastify';
-
-export interface InterfaceDeleteFundModal {
- isOpen: boolean;
- hide: () => void;
- fund: InterfaceFundInfo | null;
- refetchFunds: () => void;
-}
-/**
- * `FundDeleteModal` component provides a modal dialog for confirming the deletion of a fund.
- * It prompts the user to confirm or cancel the deletion of a specific fund.
- *
- * ### Props
- * - `isOpen`: A boolean indicating whether the modal is open or closed.
- * - `hide`: A function to close the modal.
- * - `fund`: The fund object to be deleted or `null` if no fund is selected.
- * - `refetchFunds`: A function to refetch the list of funds after a successful deletion.
- *
- * ### Methods
- * - `deleteFundHandler()`: Asynchronously handles the deletion of the fund using the `REMOVE_FUND_MUTATION` mutation.
- * - `onClose()`: Closes the modal without deleting the fund.
- *
- * ### Behavior
- * - Displays a confirmation modal when `isOpen` is `true`.
- * - On confirmation, it triggers the `deleteFundHandler` to perform the deletion.
- * - On successful deletion, it calls `refetchFunds`, hides the modal, and shows a success toast notification.
- * - On failure, it shows an error toast notification.
- *
- * @returns The rendered modal dialog.
- */
-const FundDeleteModal: React.FC = ({
- isOpen,
- hide,
- fund,
- refetchFunds,
-}) => {
- const { t } = useTranslation('translation', {
- keyPrefix: 'funds',
- });
- const { t: tCommon } = useTranslation('common');
-
- const [deleteFund] = useMutation(REMOVE_FUND_MUTATION);
-
- const deleteFundHandler = async (): Promise => {
- try {
- await deleteFund({
- variables: {
- id: fund?._id,
- },
- });
- refetchFunds();
- hide();
- toast.success(t('fundDeleted'));
- } catch (error: unknown) {
- toast.error((error as Error).message);
- }
- };
-
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default FundDeleteModal;
diff --git a/src/screens/OrganizationFunds/FundModal.tsx b/src/screens/OrganizationFunds/FundModal.tsx
index d347d02111..0f112cba9b 100644
--- a/src/screens/OrganizationFunds/FundModal.tsx
+++ b/src/screens/OrganizationFunds/FundModal.tsx
@@ -107,7 +107,7 @@ const FundModal: React.FC = ({
taxDeductible: false,
isArchived: false,
});
- toast.success(t('fundCreated'));
+ toast.success(t('fundCreated') as string);
refetchFunds();
hide();
} catch (error: unknown) {
@@ -155,7 +155,7 @@ const FundModal: React.FC = ({
});
refetchFunds();
hide();
- toast.success(t('fundUpdated'));
+ toast.success(t('fundUpdated') as string);
} catch (error: unknown) {
if (error instanceof Error) {
toast.error(error.message);
diff --git a/src/screens/OrganizationFunds/OrganizationFunds.test.tsx b/src/screens/OrganizationFunds/OrganizationFunds.test.tsx
index a1b49e68eb..c6983e1d6d 100644
--- a/src/screens/OrganizationFunds/OrganizationFunds.test.tsx
+++ b/src/screens/OrganizationFunds/OrganizationFunds.test.tsx
@@ -149,22 +149,6 @@ describe('OrganizationFunds Screen =>', () => {
);
});
- it('open and closes delete fund modal', async () => {
- renderOrganizationFunds(link1);
-
- const deleteFundBtn = await screen.findAllByTestId('deleteFundBtn');
- await waitFor(() => expect(deleteFundBtn[0]).toBeInTheDocument());
- userEvent.click(deleteFundBtn[0]);
-
- await waitFor(() =>
- expect(screen.getByText(translations.fundDelete)).toBeInTheDocument(),
- );
- userEvent.click(screen.getByTestId('deleteFundCloseBtn'));
- await waitFor(() =>
- expect(screen.queryByTestId('deleteFundCloseBtn')).toBeNull(),
- );
- });
-
it('Search the Funds list by name', async () => {
renderOrganizationFunds(link1);
const searchField = await screen.findByTestId('searchByName');
diff --git a/src/screens/OrganizationFunds/OrganizationFunds.tsx b/src/screens/OrganizationFunds/OrganizationFunds.tsx
index 56ed17b377..29ffb0d865 100644
--- a/src/screens/OrganizationFunds/OrganizationFunds.tsx
+++ b/src/screens/OrganizationFunds/OrganizationFunds.tsx
@@ -13,7 +13,6 @@ import React, { useCallback, useMemo, useState } from 'react';
import dayjs from 'dayjs';
import Loader from 'components/Loader/Loader';
import FundModal from './FundModal';
-import FundDeleteModal from './FundDeleteModal';
import { FUND_LIST } from 'GraphQl/Queries/fundQueries';
import styles from './OrganizationFunds.module.css';
import type { InterfaceFundInfo } from 'utils/interfaces';
@@ -39,24 +38,20 @@ const dataGridStyle = {
},
};
-enum ModalState {
- SAME = 'same',
- DELETE = 'delete',
-}
/**
* `organizationFunds` component displays a list of funds for a specific organization,
- * allowing users to search, sort, view, edit, and delete funds.
+ * allowing users to search, sort, view and edit funds.
*
* This component utilizes the `DataGrid` from Material-UI to present the list of funds in a tabular format,
* and includes functionality for filtering and sorting. It also handles the opening and closing of modals
- * for creating, editing, and deleting funds.
+ * for creating and editing.
*
* It includes:
* - A search input field to filter funds by name.
* - A dropdown menu to sort funds by creation date.
* - A button to create a new fund.
* - A table to display the list of funds with columns for fund details and actions.
- * - Modals for creating, editing, and deleting funds.
+ * - Modals for creating and editing funds.
*
* ### GraphQL Queries
* - `FUND_LIST`: Fetches a list of funds for the given organization, filtered and sorted based on the provided parameters.
@@ -68,14 +63,11 @@ enum ModalState {
* - `fund`: The currently selected fund for editing or deletion.
* - `searchTerm`: The current search term used for filtering funds.
* - `sortBy`: The current sorting order for funds.
- * - `modalState`: The state of the modals (edit/create or delete).
+ * - `modalState`: The state of the modals (edit/create).
* - `fundModalMode`: The mode of the fund modal (edit or create).
*
* ### Methods
- * - `openModal(modal: ModalState)`: Opens the specified modal.
- * - `closeModal(modal: ModalState)`: Closes the specified modal.
* - `handleOpenModal(fund: InterfaceFundInfo | null, mode: 'edit' | 'create')`: Opens the fund modal with the given fund and mode.
- * - `handleDeleteClick(fund: InterfaceFundInfo)`: Opens the delete modal for the specified fund.
* - `handleClick(fundId: string)`: Navigates to the campaign page for the specified fund.
*
* @returns The rendered component.
@@ -99,29 +91,18 @@ const organizationFunds = (): JSX.Element => {
'createdAt_DESC',
);
- const [modalState, setModalState] = useState<{
- [key in ModalState]: boolean;
- }>({
- [ModalState.SAME]: false,
- [ModalState.DELETE]: false,
- });
+ const [modalState, setModalState] = useState(false);
const [fundModalMode, setFundModalMode] = useState<'edit' | 'create'>(
'create',
);
- const openModal = (modal: ModalState): void =>
- setModalState((prevState) => ({ ...prevState, [modal]: true }));
-
- const closeModal = (modal: ModalState): void =>
- setModalState((prevState) => ({ ...prevState, [modal]: false }));
-
const handleOpenModal = useCallback(
(fund: InterfaceFundInfo | null, mode: 'edit' | 'create'): void => {
setFund(fund);
setFundModalMode(mode);
- openModal(ModalState.SAME);
+ setModalState(true);
},
- [openModal],
+ [],
);
const {
@@ -144,14 +125,6 @@ const organizationFunds = (): JSX.Element => {
},
});
- const handleDeleteClick = useCallback(
- (fund: InterfaceFundInfo): void => {
- setFund(fund);
- openModal(ModalState.DELETE);
- },
- [openModal],
- );
-
const funds = useMemo(() => fundData?.fundsByOrganization ?? [], [fundData]);
const handleClick = (fundId: string): void => {
@@ -277,15 +250,6 @@ const organizationFunds = (): JSX.Element => {
>
-
);
},
@@ -405,20 +369,13 @@ const organizationFunds = (): JSX.Element => {
isRowSelectable={() => false}
/>
closeModal(ModalState.SAME)}
+ isOpen={modalState}
+ hide={() => setModalState(false)}
refetchFunds={refetchFunds}
fund={fund}
orgId={orgId}
mode={fundModalMode}
/>
-
- closeModal(ModalState.DELETE)}
- fund={fund}
- refetchFunds={refetchFunds}
- />
);
};
diff --git a/src/screens/OrganizationFunds/OrganizationFundsMocks.ts b/src/screens/OrganizationFunds/OrganizationFundsMocks.ts
index cd03dc7f31..81e5a0fb64 100644
--- a/src/screens/OrganizationFunds/OrganizationFundsMocks.ts
+++ b/src/screens/OrganizationFunds/OrganizationFundsMocks.ts
@@ -1,6 +1,5 @@
import {
CREATE_FUND_MUTATION,
- REMOVE_FUND_MUTATION,
UPDATE_FUND_MUTATION,
} from 'GraphQl/Mutations/FundMutation';
import { FUND_LIST } from 'GraphQl/Queries/fundQueries';
@@ -169,21 +168,6 @@ export const MOCKS = [
},
},
},
- {
- request: {
- query: REMOVE_FUND_MUTATION,
- variables: {
- id: 'fundId',
- },
- },
- result: {
- data: {
- removeFund: {
- _id: 'fundId',
- },
- },
- },
- },
];
export const NO_FUNDS = [
@@ -230,15 +214,6 @@ export const MOCKS_ERROR = [
},
error: new Error('Mock graphql error'),
},
- {
- request: {
- query: REMOVE_FUND_MUTATION,
- variables: {
- id: 'fundId',
- },
- },
- error: new Error('Mock graphql error'),
- },
{
request: {
query: UPDATE_FUND_MUTATION,
diff --git a/src/screens/OrganizationPeople/AddMember.tsx b/src/screens/OrganizationPeople/AddMember.tsx
index 7a780b9f7c..ff5811b519 100644
--- a/src/screens/OrganizationPeople/AddMember.tsx
+++ b/src/screens/OrganizationPeople/AddMember.tsx
@@ -32,6 +32,7 @@ import type {
InterfaceQueryUserListItem,
} from 'utils/interfaces';
import styles from './OrganizationPeople.module.css';
+import Avatar from 'components/Avatar/Avatar';
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
@@ -107,7 +108,7 @@ function AddMember(): JSX.Element {
orgid: currentUrl,
},
});
- toast.success(tCommon('addedSuccessfully', { item: 'Member' }));
+ toast.success(tCommon('addedSuccessfully', { item: 'Member' }) as string);
memberRefetch({
orgId: currentUrl,
});
@@ -199,11 +200,11 @@ function AddMember(): JSX.Element {
createUserVariables.lastName
)
) {
- toast.error(translateOrgPeople('invalidDetailsMessage'));
+ toast.error(translateOrgPeople('invalidDetailsMessage') as string);
} else if (
createUserVariables.password !== createUserVariables.confirmPassword
) {
- toast.error(translateOrgPeople('passwordNotMatch'));
+ toast.error(translateOrgPeople('passwordNotMatch') as string);
} else {
try {
const registeredUser = await registerMutation({
@@ -372,6 +373,9 @@ function AddMember(): JSX.Element {
- closeModal(ModalState.SAME)}
+ orgId={orgId}
+ actionItemsRefetch={actionItemsRefetch}
+ actionItem={actionItem}
+ editMode={modalMode === 'edit'}
+ />
+
+ closeModal(ModalState.DELETE)}
+ actionItem={actionItem}
+ actionItemsRefetch={actionItemsRefetch}
+ />
- {/* Create Modal */}
- closeModal(ModalState.STATUS)}
+ actionItemsRefetch={actionItemsRefetch}
/>
+
+ {/* View Modal */}
+ {actionItem && (
+ closeModal(ModalState.VIEW)}
+ item={actionItem}
+ />
+ )}
);
}
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItemsErrorMocks.ts b/src/screens/OrganizationActionItems/OrganizationActionItemsErrorMocks.ts
deleted file mode 100644
index bedba6572b..0000000000
--- a/src/screens/OrganizationActionItems/OrganizationActionItemsErrorMocks.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-import { CREATE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/mutations';
-
-import {
- ACTION_ITEM_CATEGORY_LIST,
- ACTION_ITEM_LIST,
- MEMBERS_LIST,
-} from 'GraphQl/Queries/Queries';
-
-export const MOCKS_ERROR_ACTION_ITEM_CATEGORY_LIST_QUERY = [
- {
- request: {
- query: ACTION_ITEM_CATEGORY_LIST,
- variables: { organizationId: '123' },
- },
- error: new Error('Mock Graphql Error'),
- },
-];
-
-export const MOCKS_ERROR_MEMBERS_LIST_QUERY = [
- {
- request: {
- query: ACTION_ITEM_CATEGORY_LIST,
- variables: { organizationId: '123' },
- },
- result: {
- data: {
- actionItemCategoriesByOrganization: [
- {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- isDisabled: false,
- },
- ],
- },
- },
- },
- {
- request: {
- query: MEMBERS_LIST,
- variables: { id: '123' },
- },
- error: new Error('Mock Graphql Error'),
- },
-];
-
-export const MOCKS_ERROR_ACTION_ITEM_LIST_QUERY = [
- {
- request: {
- query: ACTION_ITEM_CATEGORY_LIST,
- variables: { organizationId: '123' },
- },
- result: {
- data: {
- actionItemCategoriesByOrganization: [
- {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- isDisabled: false,
- },
- ],
- },
- },
- },
- {
- request: {
- query: MEMBERS_LIST,
- variables: { id: '123' },
- },
- result: {
- data: {
- organizations: [
- {
- _id: '123',
- members: [
- {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- email: 'harve@example.com',
- image: '',
- organizationsBlockedBy: [],
- createdAt: '2024-02-14',
- },
- ],
- },
- ],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_LIST,
- variables: { id: '123' },
- },
- error: new Error('Mock Graphql Error'),
- },
-];
-
-export const MOCKS_ERROR_MUTATIONS = [
- {
- request: {
- query: ACTION_ITEM_CATEGORY_LIST,
- variables: { organizationId: '123' },
- },
- result: {
- data: {
- actionItemCategoriesByOrganization: [
- {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- isDisabled: false,
- },
- ],
- },
- },
- },
- {
- request: {
- query: MEMBERS_LIST,
- variables: { id: '123' },
- },
- result: {
- data: {
- organizations: [
- {
- _id: '123',
- members: [
- {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- email: 'harve@example.com',
- image: '',
- organizationsBlockedBy: [],
- createdAt: '2024-02-14',
- },
- ],
- },
- ],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_LIST,
- variables: {
- organizationId: '123',
- orderBy: 'createdAt_DESC',
- actionItemCategoryId: '',
- isActive: false,
- isCompleted: false,
- },
- },
- result: {
- data: {
- actionItemsByOrganization: [
- {
- _id: 'actionItem1',
- assignee: {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- },
- actionItemCategory: {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- },
- preCompletionNotes: 'Pre Completion Notes',
- postCompletionNotes: 'Post Completion Notes',
- assignmentDate: '2024-02-14',
- dueDate: '2024-02-21',
- completionDate: '2024-02-21',
- isCompleted: false,
- assigner: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- event: {
- _id: 'event1',
- title: 'event 1',
- },
- creator: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- },
- ],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_LIST,
- variables: {
- organizationId: '123',
- eventId: 'event1',
- orderBy: 'createdAt_DESC',
- },
- },
- result: {
- data: {
- actionItemsByOrganization: [
- {
- _id: 'actionItem1',
- assignee: {
- _id: 'user1',
- firstName: 'Harve',
- lastName: 'Lance',
- },
- actionItemCategory: {
- _id: 'actionItemCategory1',
- name: 'ActionItemCategory 1',
- },
- preCompletionNotes: 'Pre Completion Notes',
- postCompletionNotes: 'Post Completion Notes',
- assignmentDate: '2024-02-14',
- dueDate: '2024-02-21',
- completionDate: '2024-02-21',
- isCompleted: false,
- assigner: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- event: {
- _id: 'event1',
- title: 'event 1',
- },
- creator: {
- _id: 'user0',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- },
- },
- ],
- },
- },
- },
- {
- request: {
- query: CREATE_ACTION_ITEM_MUTATION,
- variables: {
- actionItemCategoryId: 'actionItemCategory1',
- assigneeId: 'user1',
- preCompletionNotes: 'pre completion notes',
- dueDate: '2024-02-14',
- },
- },
- error: new Error('Mock Graphql Error'),
- },
- {
- request: {
- query: CREATE_ACTION_ITEM_MUTATION,
- variables: {
- eventId: 'event1',
- actionItemCategoryId: 'actionItemCategory1',
- assigneeId: 'user1',
- preCompletionNotes: 'pre completion notes',
- dueDate: '2024-02-14',
- },
- },
- error: new Error('Mock Graphql Error'),
- },
-];
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
index e377826a73..dde6b3120f 100644
--- a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
+++ b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
@@ -1,5 +1,5 @@
import { MockedProvider } from '@apollo/react-testing';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
import 'jest-location-mock';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
@@ -13,7 +13,7 @@ import i18nForTest from 'utils/i18nForTest';
import useLocalStorage from 'utils/useLocalstorage';
import OrganizationDashboard from './OrganizationDashboard';
import { EMPTY_MOCKS, ERROR_MOCKS, MOCKS } from './OrganizationDashboardMocks';
-import React from 'react';
+import React, { act } from 'react';
const { setItem } = useLocalStorage();
import type { InterfaceQueryOrganizationEventListItem } from 'utils/interfaces';
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
index c19cce6880..6927e4f874 100644
--- a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
+++ b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -11,11 +11,11 @@ import {
ORGANIZATION_EVENT_CONNECTION_LIST,
ORGANIZATION_POST_LIST,
} from 'GraphQl/Queries/Queries';
-import { ReactComponent as AdminsIcon } from 'assets/svgs/admin.svg';
-import { ReactComponent as BlockedUsersIcon } from 'assets/svgs/blockedUser.svg';
-import { ReactComponent as EventsIcon } from 'assets/svgs/events.svg';
-import { ReactComponent as PostsIcon } from 'assets/svgs/post.svg';
-import { ReactComponent as UsersIcon } from 'assets/svgs/users.svg';
+import AdminsIcon from 'assets/svgs/admin.svg?react';
+import BlockedUsersIcon from 'assets/svgs/blockedUser.svg?react';
+import EventsIcon from 'assets/svgs/events.svg?react';
+import PostsIcon from 'assets/svgs/post.svg?react';
+import UsersIcon from 'assets/svgs/users.svg?react';
import CardItem from 'components/OrganizationDashCards/CardItem';
import CardItemLoading from 'components/OrganizationDashCards/CardItemLoading';
import DashBoardCard from 'components/OrganizationDashCards/DashboardCard';
diff --git a/src/screens/OrganizationEvents/OrganizationEvents.tsx b/src/screens/OrganizationEvents/OrganizationEvents.tsx
index 2998e89c39..4c90777c6e 100644
--- a/src/screens/OrganizationEvents/OrganizationEvents.tsx
+++ b/src/screens/OrganizationEvents/OrganizationEvents.tsx
@@ -170,8 +170,8 @@ function organizationEvents(): JSX.Element {
endDate: dayjs(endDate).format('YYYY-MM-DD'),
allDay: alldaychecked,
location: formState.location,
- startTime: !alldaychecked ? formState.startTime + 'Z' : undefined,
- endTime: !alldaychecked ? formState.endTime + 'Z' : undefined,
+ startTime: !alldaychecked ? formState.startTime : undefined,
+ endTime: !alldaychecked ? formState.endTime : undefined,
recurrenceStartDate: recurringchecked
? dayjs(recurrenceStartDate).format('YYYY-MM-DD')
: undefined,
@@ -196,7 +196,7 @@ function organizationEvents(): JSX.Element {
});
if (createEventData) {
- toast.success(t('eventCreated'));
+ toast.success(t('eventCreated') as string);
refetchEvents();
hideCreateEventModal();
setFormState({
diff --git a/src/screens/OrganizationEvents/OrganizationEventsMocks.ts b/src/screens/OrganizationEvents/OrganizationEventsMocks.ts
index 3ff2d73d5a..4f844d33fa 100644
--- a/src/screens/OrganizationEvents/OrganizationEventsMocks.ts
+++ b/src/screens/OrganizationEvents/OrganizationEventsMocks.ts
@@ -106,8 +106,8 @@ export const MOCKS = [
startDate: '2022-03-28',
endDate: '2022-03-30',
allDay: false,
- startTime: '09:00:00Z',
- endTime: '17:00:00Z',
+ startTime: '09:00:00',
+ endTime: '17:00:00',
},
},
result: {
@@ -132,8 +132,8 @@ export const MOCKS = [
startDate: '2022-03-28',
endDate: '2022-03-30',
allDay: false,
- startTime: '09:00:00Z',
- endTime: '17:00:00Z',
+ startTime: '09:00:00',
+ endTime: '17:00:00',
recurrenceStartDate: '2022-03-28',
recurrenceEndDate: null,
frequency: 'DAILY',
@@ -162,8 +162,8 @@ export const MOCKS = [
startDate: '2022-03-28',
endDate: '2022-03-30',
allDay: false,
- startTime: '09:00:00Z',
- endTime: '17:00:00Z',
+ startTime: '09:00:00',
+ endTime: '17:00:00',
recurrenceStartDate: '2022-03-28',
recurrenceEndDate: null,
frequency: 'WEEKLY',
diff --git a/src/screens/OrganizationFundCampaign/CampaignDeleteModal.test.tsx b/src/screens/OrganizationFundCampaign/CampaignDeleteModal.test.tsx
deleted file mode 100644
index 7baf9bd933..0000000000
--- a/src/screens/OrganizationFundCampaign/CampaignDeleteModal.test.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import type { ApolloLink } from '@apollo/client';
-import { MockedProvider } from '@apollo/react-testing';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import type { RenderResult } from '@testing-library/react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { I18nextProvider } from 'react-i18next';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import { store } from 'state/store';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import i18nForTest from '../../utils/i18nForTest';
-import { StaticMockLink } from 'utils/StaticMockLink';
-import { toast } from 'react-toastify';
-import { MOCKS, MOCK_ERROR } from './OrganizationFundCampaignMocks';
-import CampaignDeleteModal, {
- type InterfaceDeleteCampaignModal,
-} from './CampaignDeleteModal';
-
-jest.mock('react-toastify', () => ({
- toast: {
- success: jest.fn(),
- error: jest.fn(),
- },
-}));
-
-const link1 = new StaticMockLink(MOCKS);
-const link2 = new StaticMockLink(MOCK_ERROR);
-const translations = JSON.parse(
- JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.fundCampaign),
-);
-
-const campaignProps: InterfaceDeleteCampaignModal = {
- isOpen: true,
- hide: jest.fn(),
- campaign: {
- _id: 'campaignId1',
- name: 'Campaign 1',
- fundingGoal: 100,
- startDate: new Date('2021-01-01'),
- endDate: new Date('2024-01-01'),
- currency: 'USD',
- createdAt: '2021-01-01',
- },
- refetchCampaign: jest.fn(),
-};
-const renderFundDeleteModal = (
- link: ApolloLink,
- props: InterfaceDeleteCampaignModal,
-): RenderResult => {
- return render(
-
-
+ {/* Table with Action Items */} + row._id}
+ slots={{
+ noRowsOverlay: () => (
+
+ {t('noActionItems')}
+
+ ),
+ }}
+ sx={dataGridStyle}
+ getRowClassName={() => `${styles.rowBackground}`}
+ autoHeight
+ rowHeight={65}
+ rows={actionItems.map((actionItem, index) => ({
+ id: index + 1,
+ ...actionItem,
+ }))}
+ columns={columns}
+ isRowSelectable={() => false}
+ />
-
+ {/* Item Modal (Create/Edit) */}
+
-
+ {/* Header with search, filter and Create Button */}
+
-
+
+
+ setSearchValue(e.target.value)}
+ onKeyUp={(e) => {
+ if (e.key === 'Enter') {
+ setSearchTerm(searchValue);
+ } else if (e.key === 'Backspace' && searchValue === '') {
+ setSearchTerm('');
+ }
+ }}
+ data-testid="searchBy"
+ />
+
+
+
+ setStatus(ItemStatus.Pending)}
+ data-testid="statusPending"
+ >
+ {tCommon('pending')}
+
+ setStatus(ItemStatus.Completed)}
+ data-testid="statusCompleted"
+ >
+ {tCommon('completed')}
+
+
+
+
+
+
+
-
+
+ setSearchBy('assignee')}
+ data-testid="assignee"
>
-
- handleSorting('Latest')}
- data-testid="latest"
- >
- {t('latest')}
-
- handleSorting('Earliest')}
- data-testid="earliest"
- >
- {t('earliest')}
-
-
-
-
-
+ setSearchBy('category')}
+ data-testid="category"
+ >
+ {t('category')}
+
+
+
+
+
-
+
+ setSortBy('dueDate_DESC')}
+ data-testid="dueDate_DESC"
>
-
- {actionItemCategories?.map((category, index) => (
- {
- setActionItemCategoryId(category._id);
- setActionItemCategoryName(category.name);
- }}
- >
- {category.name}
-
- ))}
-
-
-
-
+ setSortBy('dueDate_ASC')}
+ data-testid="dueDate_ASC"
+ >
+ {t('earliestDueDate')}
+
+
+
+
+
-
+
+ setStatus(null)}
+ data-testid="statusAll"
>
-
- handleStatusFilter('Active')}
- data-testid="activeActionItems"
- >
- {t('active')}
-
- handleStatusFilter('Completed')}
- data-testid="completedActionItems"
- >
- {t('completed')}
-
-
-
-
-
-
-
- {orderBy === 'Latest' ? t('latest') : t('earliest')}
-
-
- {actionItemCategoryName === ''
- ? t('actionItemCategory')
- : actionItemCategoryName}
-
-
- {t('actionItemCategory')}
-
-
-
- {actionItemStatus === '' ? t('status') : actionItemStatus}
-
- {t('status')}
-
-
- {!actionItemCategoryName && !actionItemStatus && (
-
-
-
+ {tCommon('all')}
+
+
- {tCommon('noFiltersApplied')}
-
- )}
-
- {actionItemCategoryName !== '' && (
-
- {actionItemCategoryName}
- {
- setActionItemCategoryName('');
- setActionItemCategoryId('');
- }}
- data-testid="clearActionItemCategoryFilter"
- />
-
- )}
-
- {actionItemStatus !== '' && (
-
- {actionItemStatus}
- setActionItemStatus('')}
- data-testid="clearActionItemStatusFilter"
- />
-
- )}
- + {/* Table with Action Items */} +
{t('deleteCampaign')}
- -{t('deleteCampaignMsg')}
-
@@ -440,6 +404,7 @@ const orgFundCampaign = (): JSX.Element => {
className={styles.orgFundCampaignButton}
onClick={() => handleOpenModal(null, 'create')}
data-testid="addCampaignBtn"
+ disabled={isArchived}
>
{t('addCampaign')}
@@ -474,21 +439,14 @@ const orgFundCampaign = (): JSX.Element => {
{/* Create Campaign ModalState */}
closeModal(ModalState.SAME)}
+ isOpen={modalState}
+ hide={() => setModalState(false)}
refetchCampaign={refetchCampaign}
fundId={fundId}
orgId={orgId}
campaign={campaign}
mode={campaignModalMode}
/>
-
- closeModal(ModalState.DELETE)}
- campaign={campaign}
- refetchCampaign={refetchCampaign}
- />
);
};
diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.test.tsx b/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.test.tsx
index 74f646f51a..9c169e355a 100644
--- a/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.test.tsx
+++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.test.tsx
@@ -173,22 +173,6 @@ describe('FundCampaigns Screen', () => {
);
});
- it('open and closes delete campaign modal', async () => {
- renderFundCampaign(link1);
-
- const deleteCampaignBtn = await screen.findAllByTestId('deleteCampaignBtn');
- await waitFor(() => expect(deleteCampaignBtn[0]).toBeInTheDocument());
- userEvent.click(deleteCampaignBtn[0]);
-
- await waitFor(() =>
- expect(screen.getByText(translations.deleteCampaign)).toBeInTheDocument(),
- );
- userEvent.click(screen.getByTestId('deleteCampaignCloseBtn'));
- await waitFor(() =>
- expect(screen.queryByTestId('deleteCampaignCloseBtn')).toBeNull(),
- );
- });
-
it('Search the Campaigns list by Name', async () => {
renderFundCampaign(link1);
const searchField = await screen.findByTestId('searchFullName');
diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampaignMocks.ts b/src/screens/OrganizationFundCampaign/OrganizationFundCampaignMocks.ts
index 6ec2521665..fa871c3593 100644
--- a/src/screens/OrganizationFundCampaign/OrganizationFundCampaignMocks.ts
+++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampaignMocks.ts
@@ -1,6 +1,5 @@
import {
CREATE_CAMPAIGN_MUTATION,
- DELETE_CAMPAIGN_MUTATION,
UPDATE_CAMPAIGN_MUTATION,
} from 'GraphQl/Mutations/CampaignMutation';
import { FUND_CAMPAIGN } from 'GraphQl/Queries/fundQueries';
@@ -18,6 +17,8 @@ export const MOCKS = [
result: {
data: {
getFundById: {
+ name: 'Fund 1',
+ isArchived: false,
campaigns: [
{
_id: 'campaignId1',
@@ -52,6 +53,8 @@ export const MOCKS = [
result: {
data: {
getFundById: {
+ name: 'Fund 1',
+ isArchived: false,
campaigns: [
{
_id: '2',
@@ -78,6 +81,8 @@ export const MOCKS = [
result: {
data: {
getFundById: {
+ name: 'Fund 1',
+ isArchived: false,
campaigns: [
{
_id: '1',
@@ -112,6 +117,8 @@ export const MOCKS = [
result: {
data: {
getFundById: {
+ name: 'Fund 1',
+ isArchived: false,
campaigns: [
{
_id: '2',
@@ -146,6 +153,8 @@ export const MOCKS = [
result: {
data: {
getFundById: {
+ name: 'Fund 1',
+ isArchived: false,
campaigns: [
{
_id: '2',
@@ -180,6 +189,8 @@ export const MOCKS = [
result: {
data: {
getFundById: {
+ name: 'Fund 1',
+ isArchived: false,
campaigns: [
{
_id: '1',
@@ -242,21 +253,6 @@ export const MOCKS = [
},
},
},
- {
- request: {
- query: DELETE_CAMPAIGN_MUTATION,
- variables: {
- id: 'campaignId1',
- },
- },
- result: {
- data: {
- removeFundraisingCampaign: {
- _id: 'campaignId1',
- },
- },
- },
- },
];
export const MOCK_ERROR = [
@@ -299,15 +295,6 @@ export const MOCK_ERROR = [
},
error: new Error('Mock graphql error'),
},
- {
- request: {
- query: DELETE_CAMPAIGN_MUTATION,
- variables: {
- id: 'campaignId1',
- },
- },
- error: new Error('Mock graphql error'),
- },
];
export const EMPTY_MOCKS = [
@@ -323,6 +310,8 @@ export const EMPTY_MOCKS = [
result: {
data: {
getFundById: {
+ name: 'Fund 1',
+ isArchived: false,
campaigns: [],
},
},
diff --git a/src/screens/OrganizationFunds/FundDeleteModal.test.tsx b/src/screens/OrganizationFunds/FundDeleteModal.test.tsx
deleted file mode 100644
index 41fcd3ec5e..0000000000
--- a/src/screens/OrganizationFunds/FundDeleteModal.test.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-import type { ApolloLink } from '@apollo/client';
-import { MockedProvider } from '@apollo/react-testing';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import type { RenderResult } from '@testing-library/react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { I18nextProvider } from 'react-i18next';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import { store } from 'state/store';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import i18nForTest from '../../utils/i18nForTest';
-import { StaticMockLink } from 'utils/StaticMockLink';
-import { toast } from 'react-toastify';
-import type { InterfaceDeleteFundModal } from './FundDeleteModal';
-import FundDeleteModal from './FundDeleteModal';
-import { MOCKS, MOCKS_ERROR } from './OrganizationFundsMocks';
-
-jest.mock('react-toastify', () => ({
- toast: {
- success: jest.fn(),
- error: jest.fn(),
- },
-}));
-
-const link1 = new StaticMockLink(MOCKS);
-const link2 = new StaticMockLink(MOCKS_ERROR);
-const translations = JSON.parse(
- JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.funds),
-);
-
-const fundProps: InterfaceDeleteFundModal = {
- isOpen: true,
- hide: jest.fn(),
- fund: {
- _id: 'fundId',
- name: 'Fund 1',
- refrenceNumber: '1111',
- taxDeductible: true,
- isArchived: false,
- isDefault: false,
- createdAt: '2024-06-22',
- organizationId: 'orgId',
- creator: {
- _id: 'creatorId1',
- firstName: 'John',
- lastName: 'Doe',
- },
- },
- refetchFunds: jest.fn(),
-};
-const renderFundDeleteModal = (
- link: ApolloLink,
- props: InterfaceDeleteFundModal,
-): RenderResult => {
- return render(
- {t('fundDelete')}
- -{t('deleteFundMsg')}
-
diff --git a/src/screens/UserPortal/Campaigns/CampaignsMocks.ts b/src/screens/UserPortal/Campaigns/CampaignsMocks.ts
index 7b91fac025..f64401bca5 100644
--- a/src/screens/UserPortal/Campaigns/CampaignsMocks.ts
+++ b/src/screens/UserPortal/Campaigns/CampaignsMocks.ts
@@ -1,6 +1,63 @@
import { USER_DETAILS } from 'GraphQl/Queries/Queries';
import { USER_FUND_CAMPAIGNS } from 'GraphQl/Queries/fundQueries';
+const userDetailsQuery = {
+ request: {
+ query: USER_DETAILS,
+ variables: {
+ id: 'userId',
+ },
+ },
+ result: {
+ data: {
+ user: {
+ user: {
+ _id: 'userId',
+ joinedOrganizations: [
+ {
+ _id: '6537904485008f171cf29924',
+ __typename: 'Organization',
+ },
+ ],
+ firstName: 'Harve',
+ lastName: 'Lance',
+ email: 'testuser1@example.com',
+ image: null,
+ createdAt: '2023-04-13T04:53:17.742Z',
+ birthDate: null,
+ educationGrade: null,
+ employmentStatus: null,
+ gender: null,
+ maritalStatus: null,
+ phone: null,
+ address: {
+ line1: 'Line1',
+ countryCode: 'CountryCode',
+ city: 'CityName',
+ state: 'State',
+ __typename: 'Address',
+ },
+ registeredEvents: [],
+ membershipRequests: [],
+ __typename: 'User',
+ },
+ appUserProfile: {
+ _id: '67078abd85008f171cf2991d',
+ adminFor: [],
+ isSuperAdmin: false,
+ appLanguageCode: 'en',
+ pluginCreationAllowed: true,
+ createdOrganizations: [],
+ createdEvents: [],
+ eventAdmin: [],
+ __typename: 'AppUserProfile',
+ },
+ __typename: 'UserData',
+ },
+ },
+ },
+};
+
export const MOCKS = [
{
request: {
@@ -173,62 +230,7 @@ export const MOCKS = [
},
},
},
- {
- request: {
- query: USER_DETAILS,
- variables: {
- id: 'userId',
- },
- },
- result: {
- data: {
- user: {
- user: {
- _id: 'userId',
- joinedOrganizations: [
- {
- _id: '6537904485008f171cf29924',
- __typename: 'Organization',
- },
- ],
- firstName: 'Harve',
- lastName: 'Lance',
- email: 'testuser1@example.com',
- image: null,
- createdAt: '2023-04-13T04:53:17.742Z',
- birthDate: null,
- educationGrade: null,
- employmentStatus: null,
- gender: null,
- maritalStatus: null,
- phone: null,
- address: {
- line1: 'Line1',
- countryCode: 'CountryCode',
- city: 'CityName',
- state: 'State',
- __typename: 'Address',
- },
- registeredEvents: [],
- membershipRequests: [],
- __typename: 'User',
- },
- appUserProfile: {
- _id: '67078abd85008f171cf2991d',
- adminFor: [],
- isSuperAdmin: false,
- appLanguageCode: 'en',
- pluginCreationAllowed: true,
- createdOrganizations: [],
- createdEvents: [],
- eventAdmin: [],
- __typename: 'AppUserProfile',
- },
- __typename: 'UserData',
- },
- },
- },
- },
+ userDetailsQuery,
];
export const EMPTY_MOCKS = [
@@ -249,62 +251,7 @@ export const EMPTY_MOCKS = [
},
},
},
- {
- request: {
- query: USER_DETAILS,
- variables: {
- id: 'userId',
- },
- },
- result: {
- data: {
- user: {
- user: {
- _id: 'userId',
- joinedOrganizations: [
- {
- _id: '6537904485008f171cf29924',
- __typename: 'Organization',
- },
- ],
- firstName: 'Harve',
- lastName: 'Lance',
- email: 'testuser1@example.com',
- image: null,
- createdAt: '2023-04-13T04:53:17.742Z',
- birthDate: null,
- educationGrade: null,
- employmentStatus: null,
- gender: null,
- maritalStatus: null,
- phone: null,
- address: {
- line1: 'Line1',
- countryCode: 'CountryCode',
- city: 'CityName',
- state: 'State',
- __typename: 'Address',
- },
- registeredEvents: [],
- membershipRequests: [],
- __typename: 'User',
- },
- appUserProfile: {
- _id: '67078abd85008f171cf2991d',
- adminFor: [],
- isSuperAdmin: false,
- appLanguageCode: 'en',
- pluginCreationAllowed: true,
- createdOrganizations: [],
- createdEvents: [],
- eventAdmin: [],
- __typename: 'AppUserProfile',
- },
- __typename: 'UserData',
- },
- },
- },
- },
+ userDetailsQuery,
];
export const USER_FUND_CAMPAIGNS_ERROR = [
@@ -321,4 +268,5 @@ export const USER_FUND_CAMPAIGNS_ERROR = [
},
error: new Error('Error fetching campaigns'),
},
+ userDetailsQuery,
];
diff --git a/src/screens/UserPortal/Campaigns/PledgeModal.tsx b/src/screens/UserPortal/Campaigns/PledgeModal.tsx
index 6ab2832c2f..d9076f52c8 100644
--- a/src/screens/UserPortal/Campaigns/PledgeModal.tsx
+++ b/src/screens/UserPortal/Campaigns/PledgeModal.tsx
@@ -166,7 +166,7 @@ const PledgeModal: React.FC = ({
...updatedFields,
},
});
- toast.success(t('pledgeUpdated'));
+ toast.success(t('pledgeUpdated') as string);
refetchPledge();
hide();
} catch (error: unknown) {
@@ -198,7 +198,7 @@ const PledgeModal: React.FC = ({
},
});
- toast.success(t('pledgeCreated'));
+ toast.success(t('pledgeCreated') as string);
refetchPledge();
setFormState({
pledgeUsers: [],
diff --git a/src/screens/UserPortal/Chat/Chat.test.tsx b/src/screens/UserPortal/Chat/Chat.test.tsx
index 66e6115ce7..4a0dfbcf4e 100644
--- a/src/screens/UserPortal/Chat/Chat.test.tsx
+++ b/src/screens/UserPortal/Chat/Chat.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider, useTranslation } from 'react-i18next';
@@ -2259,15 +2259,26 @@ describe('Testing Chat Screen [User Portal]', () => {
,
);
+ screen.debug();
+ await waitFor(() => {
+ const closeMenuBtn = screen.queryByTestId('closeMenu');
+ expect(closeMenuBtn).toBeInTheDocument();
+ if (closeMenuBtn) {
+ closeMenuBtn.click();
+ } else {
+ throw new Error('Close menu button not found');
+ }
+ });
- await wait();
-
- const closeMenubtn = screen.getByTestId('closeMenu');
- expect(closeMenubtn).toBeInTheDocument();
- closeMenubtn.click();
- const openMenuBtn = screen.getByTestId('openMenu');
- expect(openMenuBtn).toBeInTheDocument();
- openMenuBtn.click();
+ await waitFor(() => {
+ const openMenuBtn = screen.queryByTestId('openMenu');
+ expect(openMenuBtn).toBeInTheDocument();
+ if (openMenuBtn) {
+ openMenuBtn.click();
+ } else {
+ throw new Error('Open menu button not found');
+ }
+ });
});
test('Testing sidebar when the screen size is less than or equal to 820px', async () => {
@@ -2293,12 +2304,16 @@ describe('Testing Chat Screen [User Portal]', () => {
,
);
- await wait();
- expect(screen.getByText('My Organizations')).toBeInTheDocument();
- expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
-
- const chatBtn = screen.getByTestId('chatBtn');
-
- chatBtn.click();
+ screen.debug();
+ await waitFor(() => {
+ expect(screen.getByText('My Organizations')).toBeInTheDocument();
+ expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
+ });
+ await waitFor(() => {
+ const chatBtn = screen.getByTestId('chatBtn');
+ act(() => {
+ chatBtn.click();
+ });
+ });
});
});
diff --git a/src/screens/UserPortal/Chat/Chat.tsx b/src/screens/UserPortal/Chat/Chat.tsx
index edc02aec06..43e8f5ab61 100644
--- a/src/screens/UserPortal/Chat/Chat.tsx
+++ b/src/screens/UserPortal/Chat/Chat.tsx
@@ -8,7 +8,7 @@ import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
import ContactCard from 'components/UserPortal/ContactCard/ContactCard';
import ChatRoom from 'components/UserPortal/ChatRoom/ChatRoom';
import useLocalStorage from 'utils/useLocalstorage';
-import { ReactComponent as NewChat } from 'assets/svgs/newChat.svg';
+import NewChat from 'assets/svgs/newChat.svg?react';
import Accordion from 'react-bootstrap/Accordion';
import styles from './Chat.module.css';
import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar';
diff --git a/src/screens/UserPortal/Donate/Donate.test.tsx b/src/screens/UserPortal/Donate/Donate.test.tsx
index 63083bd297..c4d435415e 100644
--- a/src/screens/UserPortal/Donate/Donate.test.tsx
+++ b/src/screens/UserPortal/Donate/Donate.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
diff --git a/src/screens/UserPortal/Donate/Donate.tsx b/src/screens/UserPortal/Donate/Donate.tsx
index 84ad62a06a..c6e6d918d5 100644
--- a/src/screens/UserPortal/Donate/Donate.tsx
+++ b/src/screens/UserPortal/Donate/Donate.tsx
@@ -162,7 +162,7 @@ export default function donate(): JSX.Element {
},
});
refetch();
- toast.success(t(`success`));
+ toast.success(t(`success`) as string);
} catch (error: unknown) {
/* istanbul ignore next */
errorHandler(t, error);
diff --git a/src/screens/UserPortal/Events/Events.test.tsx b/src/screens/UserPortal/Events/Events.test.tsx
index 6de04ee172..e5ef6d2b03 100644
--- a/src/screens/UserPortal/Events/Events.test.tsx
+++ b/src/screens/UserPortal/Events/Events.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
@@ -107,8 +107,8 @@ const MOCKS = [
startDate: '2023-03-06',
endDate: '2023-03-06',
location: 'das',
- startTime: '00:40:00.000Z',
- endTime: '02:40:00.000Z',
+ startTime: '00:40:00.000',
+ endTime: '02:40:00.000',
allDay: false,
recurring: false,
isPublic: true,
@@ -199,8 +199,8 @@ const MOCKS = [
startDate: dayjs(new Date()).format('YYYY-MM-DD'),
endDate: dayjs(new Date()).format('YYYY-MM-DD'),
allDay: false,
- startTime: '08:00:00Z',
- endTime: '10:00:00Z',
+ startTime: '08:00:00',
+ endTime: '10:00:00',
},
},
result: {
diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx
index f39aae3cdd..d3fabf9469 100644
--- a/src/screens/UserPortal/Events/Events.tsx
+++ b/src/screens/UserPortal/Events/Events.tsx
@@ -115,14 +115,14 @@ export default function events(): JSX.Element {
endDate: dayjs(endDate).format('YYYY-MM-DD'),
allDay: isAllDay,
location: eventLocation,
- startTime: !isAllDay ? startTime + 'Z' : null,
- endTime: !isAllDay ? endTime + 'Z' : null,
+ startTime: !isAllDay ? startTime : null,
+ endTime: !isAllDay ? endTime : null,
},
});
/* istanbul ignore next */
if (createEventData) {
- toast.success(t('eventCreated'));
+ toast.success(t('eventCreated') as string);
refetch();
setEventTitle('');
setEventDescription('');
diff --git a/src/screens/UserPortal/Organizations/Organizations.test.tsx b/src/screens/UserPortal/Organizations/Organizations.test.tsx
index 87d0997409..163a755926 100644
--- a/src/screens/UserPortal/Organizations/Organizations.test.tsx
+++ b/src/screens/UserPortal/Organizations/Organizations.test.tsx
@@ -1,5 +1,5 @@
import { MockedProvider } from '@apollo/react-testing';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import userEvent from '@testing-library/user-event';
@@ -15,7 +15,7 @@ import { StaticMockLink } from 'utils/StaticMockLink';
import i18nForTest from 'utils/i18nForTest';
import useLocalStorage from 'utils/useLocalstorage';
import Organizations from './Organizations';
-import React from 'react';
+import React, { act } from 'react';
const { getItem } = useLocalStorage();
const MOCKS = [
@@ -440,7 +440,7 @@ describe('Testing Organizations Screen [User Portal]', () => {
expect(joinNowButtons.length).toBeGreaterThan(0);
});
- test('Mode is changed to created organizations', async () => {
+ test('Mode is changed to created organisations', async () => {
render(
@@ -476,14 +476,22 @@ describe('Testing Organizations Screen [User Portal]', () => {
,
);
- await wait();
-
- const closeMenubtn = screen.getByTestId('closeMenu');
- expect(closeMenubtn).toBeInTheDocument();
- closeMenubtn.click();
- const openMenuBtn = screen.getByTestId('openMenu');
- expect(openMenuBtn).toBeInTheDocument();
- openMenuBtn.click();
+ await waitFor(() => {
+ const closeMenuBtn = screen.getByTestId('closeMenu');
+ expect(closeMenuBtn).toBeInTheDocument();
+ });
+ await act(async () => {
+ const closeMenuBtn = screen.getByTestId('closeMenu');
+ closeMenuBtn.click();
+ });
+ await waitFor(() => {
+ const openMenuBtn = screen.getByTestId('openMenu');
+ expect(openMenuBtn).toBeInTheDocument();
+ });
+ await act(async () => {
+ const openMenuBtn = screen.getByTestId('openMenu');
+ openMenuBtn.click();
+ });
});
test('Testing sidebar when the screen size is less than or equal to 820px', async () => {
@@ -500,12 +508,15 @@ describe('Testing Organizations Screen [User Portal]', () => {
,
);
- await wait();
- expect(screen.getByText('My Organizations')).toBeInTheDocument();
- expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
+ await waitFor(() => {
+ expect(screen.getByText('My Organizations')).toBeInTheDocument();
+ expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
+ });
- const settingsBtn = screen.getByTestId('settingsBtn');
+ await act(async () => {
+ const settingsBtn = screen.getByTestId('settingsBtn');
- settingsBtn.click();
+ settingsBtn.click();
+ });
});
});
diff --git a/src/screens/UserPortal/People/People.test.tsx b/src/screens/UserPortal/People/People.test.tsx
index a233c20015..c978a0a5a3 100644
--- a/src/screens/UserPortal/People/People.test.tsx
+++ b/src/screens/UserPortal/People/People.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
import {
diff --git a/src/screens/UserPortal/Pledges/Pledge.test.tsx b/src/screens/UserPortal/Pledges/Pledge.test.tsx
index c9ba28ab1b..3d5eef94c2 100644
--- a/src/screens/UserPortal/Pledges/Pledge.test.tsx
+++ b/src/screens/UserPortal/Pledges/Pledge.test.tsx
@@ -126,20 +126,6 @@ describe('Testing User Pledge Screen', () => {
});
});
- it('should render the Campaign Pledge screen with error', async () => {
- renderMyPledges(link2);
- await waitFor(() => {
- expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
- });
- });
-
- it('renders the empty pledge component', async () => {
- renderMyPledges(link3);
- await waitFor(() =>
- expect(screen.getByText(translations.noPledges)).toBeInTheDocument(),
- );
- });
-
it('check if user image renders', async () => {
renderMyPledges(link1);
await waitFor(() => {
@@ -296,9 +282,11 @@ describe('Testing User Pledge Screen', () => {
expect(screen.getByTestId('searchPledges')).toBeInTheDocument();
});
- expect(screen.getByText('Harve Lance')).toBeInTheDocument();
- expect(screen.queryByText('Jeramy Gracia')).toBeNull();
- expect(screen.queryByText('Praise Norris')).toBeNull();
+ await waitFor(() => {
+ expect(screen.getByText('Harve Lance')).toBeInTheDocument();
+ expect(screen.queryByText('Jeramy Gracia')).toBeNull();
+ expect(screen.queryByText('Praise Norris')).toBeNull();
+ });
const moreContainer = await screen.findAllByTestId('moreContainer');
userEvent.click(moreContainer[0]);
@@ -350,4 +338,18 @@ describe('Testing User Pledge Screen', () => {
expect(screen.queryByTestId('pledgeModalCloseBtn')).toBeNull(),
);
});
+
+ it('should render the Campaign Pledge screen with error', async () => {
+ renderMyPledges(link2);
+ await waitFor(() => {
+ expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+ });
+ });
+
+ it('renders the empty pledge component', async () => {
+ renderMyPledges(link3);
+ await waitFor(() =>
+ expect(screen.getByText(translations.noPledges)).toBeInTheDocument(),
+ );
+ });
});
diff --git a/src/screens/UserPortal/Pledges/PledgesMocks.ts b/src/screens/UserPortal/Pledges/PledgesMocks.ts
index 9aa3780fbd..c7666987ff 100644
--- a/src/screens/UserPortal/Pledges/PledgesMocks.ts
+++ b/src/screens/UserPortal/Pledges/PledgesMocks.ts
@@ -1,11 +1,64 @@
-import {
- CREATE_PlEDGE,
- DELETE_PLEDGE,
- UPDATE_PLEDGE,
-} from 'GraphQl/Mutations/PledgeMutation';
+import { DELETE_PLEDGE } from 'GraphQl/Mutations/PledgeMutation';
import { USER_DETAILS } from 'GraphQl/Queries/Queries';
import { USER_PLEDGES } from 'GraphQl/Queries/fundQueries';
+const userDetailsQuery = {
+ request: {
+ query: USER_DETAILS,
+ variables: {
+ id: 'userId',
+ },
+ },
+ result: {
+ data: {
+ user: {
+ user: {
+ _id: 'userId',
+ joinedOrganizations: [
+ {
+ _id: '6537904485008f171cf29924',
+ __typename: 'Organization',
+ },
+ ],
+ firstName: 'Harve',
+ lastName: 'Lance',
+ email: 'testuser1@example.com',
+ image: null,
+ createdAt: '2023-04-13T04:53:17.742Z',
+ birthDate: null,
+ educationGrade: null,
+ employmentStatus: null,
+ gender: null,
+ maritalStatus: null,
+ phone: null,
+ address: {
+ line1: 'Line1',
+ countryCode: 'CountryCode',
+ city: 'CityName',
+ state: 'State',
+ __typename: 'Address',
+ },
+ registeredEvents: [],
+ membershipRequests: [],
+ __typename: 'User',
+ },
+ appUserProfile: {
+ _id: '67078abd85008f171cf2991d',
+ adminFor: [],
+ isSuperAdmin: false,
+ appLanguageCode: 'en',
+ pluginCreationAllowed: true,
+ createdOrganizations: [],
+ createdEvents: [],
+ eventAdmin: [],
+ __typename: 'AppUserProfile',
+ },
+ __typename: 'UserData',
+ },
+ },
+ },
+};
+
export const MOCKS = [
{
request: {
@@ -501,62 +554,7 @@ export const MOCKS = [
},
},
},
- {
- request: {
- query: USER_DETAILS,
- variables: {
- id: 'userId',
- },
- },
- result: {
- data: {
- user: {
- user: {
- _id: 'userId',
- joinedOrganizations: [
- {
- _id: '6537904485008f171cf29924',
- __typename: 'Organization',
- },
- ],
- firstName: 'Harve',
- lastName: 'Lance',
- email: 'testuser1@example.com',
- image: null,
- createdAt: '2023-04-13T04:53:17.742Z',
- birthDate: null,
- educationGrade: null,
- employmentStatus: null,
- gender: null,
- maritalStatus: null,
- phone: null,
- address: {
- line1: 'Line1',
- countryCode: 'CountryCode',
- city: 'CityName',
- state: 'State',
- __typename: 'Address',
- },
- registeredEvents: [],
- membershipRequests: [],
- __typename: 'User',
- },
- appUserProfile: {
- _id: '67078abd85008f171cf2991d',
- adminFor: [],
- isSuperAdmin: false,
- appLanguageCode: 'en',
- pluginCreationAllowed: true,
- createdOrganizations: [],
- createdEvents: [],
- eventAdmin: [],
- __typename: 'AppUserProfile',
- },
- __typename: 'UserData',
- },
- },
- },
- },
+ userDetailsQuery,
];
export const EMPTY_MOCKS = [
@@ -577,6 +575,7 @@ export const EMPTY_MOCKS = [
},
},
},
+ userDetailsQuery,
];
export const USER_PLEDGES_ERROR = [
@@ -593,4 +592,5 @@ export const USER_PLEDGES_ERROR = [
},
error: new Error('Error fetching pledges'),
},
+ userDetailsQuery,
];
diff --git a/src/screens/UserPortal/Posts/Posts.test.tsx b/src/screens/UserPortal/Posts/Posts.test.tsx
index da499403ea..aa5f03fdcf 100644
--- a/src/screens/UserPortal/Posts/Posts.test.tsx
+++ b/src/screens/UserPortal/Posts/Posts.test.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
import type { RenderResult } from '@testing-library/react';
-import { act, render, screen, waitFor, within } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import userEvent from '@testing-library/user-event';
import {
@@ -15,6 +15,7 @@ import { StaticMockLink } from 'utils/StaticMockLink';
import i18nForTest from 'utils/i18nForTest';
import Home from './Posts';
import useLocalStorage from 'utils/useLocalstorage';
+import { DELETE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
const { setItem } = useLocalStorage();
@@ -217,6 +218,17 @@ const MOCKS = [
},
},
},
+ {
+ request: {
+ query: DELETE_POST_MUTATION,
+ variables: { id: '6411e54835d7ba2344a78e29' },
+ },
+ result: {
+ data: {
+ removePost: { _id: '6411e54835d7ba2344a78e29' },
+ },
+ },
+ },
];
const link = new StaticMockLink(MOCKS, true);
@@ -350,10 +362,11 @@ describe('Testing Home Screen: User Portal', () => {
test('Checking if refetch works after deleting this post', async () => {
setItem('userId', '640d98d9eb6a743d75341067');
renderHomeScreen();
- await wait();
-
- userEvent.click(screen.getAllByTestId('dropdown')[1]);
- userEvent.click(screen.getByTestId('deletePost'));
+ expect(screen.queryAllByTestId('dropdown')).not.toBeNull();
+ const dropdowns = await screen.findAllByTestId('dropdown');
+ userEvent.click(dropdowns[1]);
+ const deleteButton = await screen.findByTestId('deletePost');
+ userEvent.click(deleteButton);
});
});
@@ -380,11 +393,7 @@ describe('HomeScreen with invalid orgId', () => {
,
);
-
- // Wait for the navigation to occur
- await waitFor(() => {
- const homeEl = screen.getByTestId('homeEl');
- expect(homeEl).toBeInTheDocument();
- });
+ const homeEl = await screen.findByTestId('homeEl');
+ expect(homeEl).toBeInTheDocument();
});
});
diff --git a/src/screens/UserPortal/Settings/Settings.test.tsx b/src/screens/UserPortal/Settings/Settings.test.tsx
index eccf59aaab..34aa3711bd 100644
--- a/src/screens/UserPortal/Settings/Settings.test.tsx
+++ b/src/screens/UserPortal/Settings/Settings.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
@@ -144,7 +144,7 @@ const resizeWindow = (width: number): void => {
};
async function wait(ms = 100): Promise {
- await act(() => {
+ await act(async () => {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
@@ -152,32 +152,37 @@ async function wait(ms = 100): Promise {
}
describe('Testing Settings Screen [User Portal]', () => {
- Object.defineProperty(window, 'matchMedia', {
- writable: true,
- value: jest.fn().mockImplementation((query) => ({
- matches: false,
- media: query,
- onchange: null,
- addListener: jest.fn(), // Deprecated
- removeListener: jest.fn(), // Deprecated
- addEventListener: jest.fn(),
- removeEventListener: jest.fn(),
- dispatchEvent: jest.fn(),
- })),
+ // Mock implementation of matchMedia
+ beforeAll(() => {
+ Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation((query) => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // Deprecated
+ removeListener: jest.fn(), // Deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+ });
});
test('Screen should be rendered properly', async () => {
- render(
-
-
-
-
-
-
-
- ,
- );
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
await wait();
@@ -185,17 +190,19 @@ describe('Testing Settings Screen [User Portal]', () => {
});
test('input works properly', async () => {
- render(
-
-
-
-
-
-
-
- ,
- );
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
await wait();
@@ -240,17 +247,19 @@ describe('Testing Settings Screen [User Portal]', () => {
});
test('resetChangesBtn works properly', async () => {
- render(
-
-
-
-
-
-
-
- ,
- );
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
await wait();
@@ -270,17 +279,19 @@ describe('Testing Settings Screen [User Portal]', () => {
});
test('resetChangesBtn works properly when the details are empty', async () => {
- render(
-
-
-
-
-
-
-
- ,
- );
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
await wait();
@@ -300,210 +311,64 @@ describe('Testing Settings Screen [User Portal]', () => {
});
test('sidebar', async () => {
- render(
-
-
-
-
-
-
-
- ,
- );
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
+ });
await wait();
const closeMenubtn = screen.getByTestId('closeMenu');
expect(closeMenubtn).toBeInTheDocument();
- closeMenubtn.click();
+ act(() => closeMenubtn.click());
const openMenuBtn = screen.getByTestId('openMenu');
expect(openMenuBtn).toBeInTheDocument();
- openMenuBtn.click();
+ act(() => openMenuBtn.click());
});
test('Testing sidebar when the screen size is less than or equal to 820px', async () => {
resizeWindow(800);
- render(
-
-
-
-
-
-
-
- ,
- );
- await wait();
- expect(screen.getByText('My Organizations')).toBeInTheDocument();
- expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
-
- const settingsBtn = screen.getByTestId('settingsBtn');
-
- settingsBtn.click();
- });
-
- test('updateUserDetails Mutation is triggered on button click', async () => {
- render(
-
-
-
-
-
-
-
- ,
- );
-
- await wait();
-
- userEvent.type(screen.getByTestId('inputFirstName'), 'Noble');
- await wait();
-
- userEvent.type(screen.getByTestId('inputLastName'), 'Mittal');
- await wait();
-
- userEvent.selectOptions(screen.getByTestId('inputGender'), 'OTHER');
- await wait();
-
- userEvent.type(screen.getByTestId('inputPhoneNumber'), '+174567890');
- await wait();
-
- fireEvent.change(screen.getByLabelText('Birth Date'), {
- target: { value: '2024-03-01' },
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+ ,
+ );
});
- await wait();
- userEvent.selectOptions(screen.getByTestId('inputGrade'), 'Graduate');
await wait();
- userEvent.selectOptions(screen.getByTestId('inputEmpStatus'), 'Unemployed');
- await wait();
+ screen.debug();
- userEvent.selectOptions(screen.getByTestId('inputMaritalStatus'), 'Single');
- await wait();
+ const openMenuBtn = screen.queryByTestId('openMenu');
+ console.log('Open Menu Button:', openMenuBtn);
+ expect(openMenuBtn).toBeInTheDocument();
- userEvent.type(screen.getByTestId('inputAddress'), 'random');
- await wait();
+ if (openMenuBtn) {
+ act(() => openMenuBtn.click());
+ }
- userEvent.type(screen.getByTestId('inputState'), 'random');
- await wait();
+ const closeMenuBtn = screen.queryByTestId('closeMenu');
+ console.log('Close Menu Button:', closeMenuBtn);
+ expect(closeMenuBtn).toBeInTheDocument();
- userEvent.click(screen.getByTestId('updateUserBtn'));
- await wait();
+ if (closeMenuBtn) {
+ act(() => closeMenuBtn.click());
+ }
});
-
- test('Marital Status dropdown value verification', async () => {
- render(
-
-
-
-
-
-
-
- ,
- );
-
- await wait();
-
- // SINGLE
- expect(
- screen.queryByRole('option', { name: mockMaritalStatusEnum[0].label }),
- ).toBeInTheDocument();
-
- userEvent.selectOptions(
- // Find the select element
- screen.getByTestId('inputMaritalStatus'),
- // Find and select the Single option
- screen.getByRole('option', { name: mockMaritalStatusEnum[0].label }),
- );
-
- expect(screen.getByTestId('inputMaritalStatus')).toHaveValue(
- mockMaritalStatusEnum[0].value,
- );
-
- // ENGAGED
- expect(
- screen.queryByRole('option', { name: mockMaritalStatusEnum[1].label }),
- ).toBeInTheDocument();
-
- userEvent.selectOptions(
- // Find the select element
- screen.getByTestId('inputMaritalStatus'),
- // Find and select the Engaged option
- screen.getByRole('option', { name: mockMaritalStatusEnum[1].label }),
- );
-
- expect(screen.getByTestId('inputMaritalStatus')).toHaveValue(
- mockMaritalStatusEnum[1].value,
- );
-
- // MARRIED
- expect(
- screen.queryByRole('option', { name: mockMaritalStatusEnum[2].label }),
- ).toBeInTheDocument();
-
- userEvent.selectOptions(
- // Find the select element
- screen.getByTestId('inputMaritalStatus'),
- // Find and select the Married option
- screen.getByRole('option', { name: mockMaritalStatusEnum[2].label }),
- );
-
- expect(screen.getByTestId('inputMaritalStatus')).toHaveValue(
- mockMaritalStatusEnum[2].value,
- );
-
- // DIVORCED
- expect(
- screen.queryByRole('option', { name: mockMaritalStatusEnum[3].label }),
- ).toBeInTheDocument();
-
- userEvent.selectOptions(
- // Find the select element
- screen.getByTestId('inputMaritalStatus'),
- // Find and select the Divorced option
- screen.getByRole('option', { name: mockMaritalStatusEnum[3].label }),
- );
-
- expect(screen.getByTestId('inputMaritalStatus')).toHaveValue(
- mockMaritalStatusEnum[3].value,
- );
-
- // WIDOWED
- expect(
- screen.queryByRole('option', { name: mockMaritalStatusEnum[4].label }),
- ).toBeInTheDocument();
-
- userEvent.selectOptions(
- // Find the select element
- screen.getByTestId('inputMaritalStatus'),
- // Find and select the Widowed option
- screen.getByRole('option', { name: mockMaritalStatusEnum[4].label }),
- );
-
- expect(screen.getByTestId('inputMaritalStatus')).toHaveValue(
- mockMaritalStatusEnum[4].value,
- );
-
- // SEPARATED
- expect(
- screen.queryByRole('option', { name: mockMaritalStatusEnum[5].label }),
- ).toBeInTheDocument();
-
- userEvent.selectOptions(
- // Find the select element
- screen.getByTestId('inputMaritalStatus'),
- // Find and select the Separated option
- screen.getByRole('option', { name: mockMaritalStatusEnum[5].label }),
- );
-
- expect(screen.getByTestId('inputMaritalStatus')).toHaveValue(
- mockMaritalStatusEnum[5].value,
- );
- }, 60000);
});
diff --git a/src/screens/UserPortal/Settings/Settings.tsx b/src/screens/UserPortal/Settings/Settings.tsx
index 31767d8bfb..8b80f8ea1d 100644
--- a/src/screens/UserPortal/Settings/Settings.tsx
+++ b/src/screens/UserPortal/Settings/Settings.tsx
@@ -99,7 +99,9 @@ export default function settings(): JSX.Element {
});
/* istanbul ignore next */
if (data) {
- toast.success(tCommon('updatedSuccessfully', { item: 'Profile' }));
+ toast.success(
+ tCommon('updatedSuccessfully', { item: 'Profile' }) as string,
+ );
setTimeout(() => {
window.location.reload();
}, 500);
diff --git a/src/screens/Users/Users.test.tsx b/src/screens/Users/Users.test.tsx
index f130ed1df9..65558e6ea7 100644
--- a/src/screens/Users/Users.test.tsx
+++ b/src/screens/Users/Users.test.tsx
@@ -428,22 +428,21 @@ describe('Testing Users screen', () => {
,
);
+ });
+ await wait();
- await wait();
-
- const searchBtn = screen.getByTestId('searchButton');
-
- const searchInput = screen.getByTestId(/searchByName/i);
+ const searchBtn = screen.getByTestId('searchButton');
+ const searchInput = screen.getByTestId(/searchByName/i);
+ await act(async () => {
// Clear the search input
userEvent.clear(searchInput);
-
// Search for a name that doesn't exist
userEvent.type(screen.getByTestId(/searchByName/i), 'NonexistentName');
userEvent.click(searchBtn);
-
- expect(screen.queryByText(/No User Found/i)).toBeInTheDocument();
});
+
+ expect(screen.queryByText(/No User Found/i)).toBeInTheDocument();
});
test('Testing User data is not present', async () => {
@@ -518,40 +517,63 @@ describe('Testing Users screen', () => {
,
);
+ });
+ await wait();
- await wait();
-
- const searchInput = screen.getByTestId('filter');
- expect(searchInput).toBeInTheDocument();
+ const searchInput = screen.getByTestId('filter');
+ expect(searchInput).toBeInTheDocument();
- const inputText = screen.getByTestId('filterUsers');
+ const inputText = screen.getByTestId('filterUsers');
+ await act(async () => {
fireEvent.click(inputText);
- const toggleText = screen.getByTestId('admin');
+ });
+
+ const toggleText = screen.getByTestId('admin');
+
+ await act(async () => {
fireEvent.click(toggleText);
+ });
- expect(searchInput).toBeInTheDocument();
+ expect(searchInput).toBeInTheDocument();
+ await act(async () => {
fireEvent.click(inputText);
- let toggleTite = screen.getByTestId('superAdmin');
+ });
+
+ let toggleTite = screen.getByTestId('superAdmin');
+
+ await act(async () => {
fireEvent.click(toggleTite);
+ });
- expect(searchInput).toBeInTheDocument();
+ expect(searchInput).toBeInTheDocument();
+ await act(async () => {
fireEvent.click(inputText);
- toggleTite = screen.getByTestId('user');
+ });
+
+ toggleTite = screen.getByTestId('user');
+
+ await act(async () => {
fireEvent.click(toggleTite);
+ });
- expect(searchInput).toBeInTheDocument();
+ expect(searchInput).toBeInTheDocument();
+ await act(async () => {
fireEvent.click(inputText);
- toggleTite = screen.getByTestId('cancel');
- fireEvent.click(toggleTite);
+ });
- await wait();
+ toggleTite = screen.getByTestId('cancel');
- expect(searchInput).toBeInTheDocument();
+ await act(async () => {
+ fireEvent.click(toggleTite);
});
+
+ await wait();
+
+ expect(searchInput).toBeInTheDocument();
});
test('check for rerendering', async () => {
@@ -620,37 +642,63 @@ describe('Testing Users screen', () => {
,
);
+ });
+ await wait();
- await wait();
+ const filterButton = screen.getByTestId('filterUsers');
- const filterButton = screen.getByTestId('filterUsers');
+ await act(async () => {
fireEvent.click(filterButton);
+ });
- const filterAdmin = screen.getByTestId('admin');
+ const filterAdmin = screen.getByTestId('admin');
+
+ await act(async () => {
fireEvent.click(filterAdmin);
- await wait();
- expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+ });
+ await wait();
+ expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+
+ await act(async () => {
fireEvent.click(filterButton);
- const filterSuperAdmin = screen.getByTestId('superAdmin');
+ });
+
+ const filterSuperAdmin = screen.getByTestId('superAdmin');
+
+ await act(async () => {
fireEvent.click(filterSuperAdmin);
- await wait();
- expect(screen.getByText('John Doe')).toBeInTheDocument();
+ });
+
+ await wait();
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ await act(async () => {
fireEvent.click(filterButton);
- const filterUser = screen.getByTestId('user');
+ });
+
+ const filterUser = screen.getByTestId('user');
+ await act(async () => {
fireEvent.click(filterUser);
- await wait();
- expect(screen.getByText('Jack Smith')).toBeInTheDocument();
+ });
+ await wait();
+ expect(screen.getByText('Jack Smith')).toBeInTheDocument();
+
+ await act(async () => {
fireEvent.click(filterButton);
- const filterCancel = screen.getByTestId('cancel');
+ });
+
+ const filterCancel = screen.getByTestId('cancel');
+
+ await act(async () => {
fireEvent.click(filterCancel);
- await wait();
- expect(screen.getByText('John Doe')).toBeInTheDocument();
- expect(screen.getByText('Jane Doe')).toBeInTheDocument();
- expect(screen.getByText('Jack Smith')).toBeInTheDocument();
});
+
+ await wait();
+ expect(screen.getByText('John Doe')).toBeInTheDocument();
+ expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+ expect(screen.getByText('Jack Smith')).toBeInTheDocument();
});
test('Users should be sorted and filtered correctly', async () => {
@@ -667,47 +715,63 @@ describe('Testing Users screen', () => {
,
);
+ });
+ await wait();
- await wait();
-
- // Check if the sorting and filtering logic was applied correctly
- const rows = screen.getAllByRole('row');
+ // Check if the sorting and filtering logic was applied correctly
+ const rows = screen.getAllByRole('row');
- const firstRow = rows[1];
- const secondRow = rows[2];
+ const firstRow = rows[1];
+ const secondRow = rows[2];
- expect(firstRow).toHaveTextContent('John Doe');
- expect(secondRow).toHaveTextContent('Jane Doe');
+ expect(firstRow).toHaveTextContent('John Doe');
+ expect(secondRow).toHaveTextContent('Jane Doe');
- await wait();
+ await wait();
- const inputText = screen.getByTestId('sortUsers');
+ const inputText = screen.getByTestId('sortUsers');
+ await act(async () => {
fireEvent.click(inputText);
- const toggleText = screen.getByTestId('oldest');
- fireEvent.click(toggleText);
+ });
+
+ const toggleText = screen.getByTestId('oldest');
+ await act(async () => {
+ fireEvent.click(toggleText);
fireEvent.click(inputText);
- const toggleTite = screen.getByTestId('newest');
+ });
+
+ const toggleTite = screen.getByTestId('newest');
+
+ await act(async () => {
fireEvent.click(toggleTite);
+ });
- // Verify the users are sorted by oldest
- await wait();
+ // Verify the users are sorted by oldest
+ await wait();
- const displayedUsers = screen.getAllByRole('row');
- expect(displayedUsers[1]).toHaveTextContent('John Doe'); // assuming User1 is the oldest
- expect(displayedUsers[displayedUsers.length - 1]).toHaveTextContent(
- 'Jack Smith',
- ); // assuming UserN is the newest
+ const displayedUsers = screen.getAllByRole('row');
+ expect(displayedUsers[1]).toHaveTextContent('John Doe'); // assuming User1 is the oldest
+ expect(displayedUsers[displayedUsers.length - 1]).toHaveTextContent(
+ 'Jack Smith',
+ ); // assuming UserN is the newest
- await wait();
+ await wait();
+ await act(async () => {
fireEvent.click(inputText);
- const toggleOld = screen.getByTestId('oldest');
- fireEvent.click(toggleOld);
+ });
+
+ const toggleOld = screen.getByTestId('oldest');
+ await act(async () => {
+ fireEvent.click(toggleOld);
fireEvent.click(inputText);
- const toggleNewest = screen.getByTestId('newest');
+ });
+
+ const toggleNewest = screen.getByTestId('newest');
+ await act(async () => {
fireEvent.click(toggleNewest);
});
});
diff --git a/src/screens/Users/Users.tsx b/src/screens/Users/Users.tsx
index 0e958e7bab..72acba5b5c 100644
--- a/src/screens/Users/Users.tsx
+++ b/src/screens/Users/Users.tsx
@@ -137,7 +137,7 @@ const Users = (): JSX.Element => {
}
if (dataOrgs.organizationsConnection.length === 0) {
- toast.warning(t('noOrgError'));
+ toast.warning(t('noOrgError') as string);
}
}, [dataOrgs]);
diff --git a/src/state/reducers/routesReducer.test.ts b/src/state/reducers/routesReducer.test.ts
index 8d8de8a5dd..8bdc1c069b 100644
--- a/src/state/reducers/routesReducer.test.ts
+++ b/src/state/reducers/routesReducer.test.ts
@@ -17,7 +17,6 @@ describe('Testing Routes reducer', () => {
{ name: 'Events', url: '/orgevents/undefined' },
{ name: 'Venues', url: '/orgvenues/undefined' },
{ name: 'Action Items', url: '/orgactionitems/undefined' },
- { name: 'Agenda Items Category', url: '/orgagendacategory/undefined' },
{ name: 'Posts', url: '/orgpost/undefined' },
{
name: 'Block/Unblock',
@@ -70,11 +69,6 @@ describe('Testing Routes reducer', () => {
comp_id: 'orgactionitems',
component: 'OrganizationActionItems',
},
- {
- name: 'Agenda Items Category',
- comp_id: 'orgagendacategory',
- component: 'OrganizationAgendaCategory',
- },
{ name: 'Posts', comp_id: 'orgpost', component: 'OrgPost' },
{ name: 'Block/Unblock', comp_id: 'blockuser', component: 'BlockUser' },
{
@@ -126,7 +120,6 @@ describe('Testing Routes reducer', () => {
{ name: 'Events', url: '/orgevents/orgId' },
{ name: 'Venues', url: '/orgvenues/orgId' },
{ name: 'Action Items', url: '/orgactionitems/orgId' },
- { name: 'Agenda Items Category', url: '/orgagendacategory/orgId' },
{ name: 'Posts', url: '/orgpost/orgId' },
{ name: 'Block/Unblock', url: '/blockuser/orgId' },
{ name: 'Advertisement', url: '/orgads/orgId' },
@@ -176,11 +169,6 @@ describe('Testing Routes reducer', () => {
comp_id: 'orgactionitems',
component: 'OrganizationActionItems',
},
- {
- name: 'Agenda Items Category',
- comp_id: 'orgagendacategory',
- component: 'OrganizationAgendaCategory',
- },
{ name: 'Posts', comp_id: 'orgpost', component: 'OrgPost' },
{ name: 'Block/Unblock', comp_id: 'blockuser', component: 'BlockUser' },
{
@@ -228,7 +216,6 @@ describe('Testing Routes reducer', () => {
{ name: 'Events', url: '/orgevents/undefined' },
{ name: 'Venues', url: '/orgvenues/undefined' },
{ name: 'Action Items', url: '/orgactionitems/undefined' },
- { name: 'Agenda Items Category', url: '/orgagendacategory/undefined' },
{ name: 'Posts', url: '/orgpost/undefined' },
{
name: 'Block/Unblock',
@@ -284,11 +271,6 @@ describe('Testing Routes reducer', () => {
comp_id: 'orgactionitems',
component: 'OrganizationActionItems',
},
- {
- name: 'Agenda Items Category',
- comp_id: 'orgagendacategory',
- component: 'OrganizationAgendaCategory',
- },
{ name: 'Posts', comp_id: 'orgpost', component: 'OrgPost' },
{ name: 'Block/Unblock', comp_id: 'blockuser', component: 'BlockUser' },
{
diff --git a/src/state/reducers/routesReducer.ts b/src/state/reducers/routesReducer.ts
index 878fe73099..5d50f5402d 100644
--- a/src/state/reducers/routesReducer.ts
+++ b/src/state/reducers/routesReducer.ts
@@ -77,11 +77,6 @@ const components: ComponentType[] = [
comp_id: 'orgactionitems',
component: 'OrganizationActionItems',
},
- {
- name: 'Agenda Items Category',
- comp_id: 'orgagendacategory',
- component: 'OrganizationAgendaCategory',
- },
{ name: 'Posts', comp_id: 'orgpost', component: 'OrgPost' },
{ name: 'Block/Unblock', comp_id: 'blockuser', component: 'BlockUser' },
{ name: 'Advertisement', comp_id: 'orgads', component: 'Advertisements' },
diff --git a/src/utils/errorHandler.tsx b/src/utils/errorHandler.tsx
index d65bb5f746..b7a22210a8 100644
--- a/src/utils/errorHandler.tsx
+++ b/src/utils/errorHandler.tsx
@@ -12,13 +12,13 @@ export const errorHandler = (a: unknown, error: unknown): void => {
if (error instanceof Error) {
switch (error.message) {
case 'Failed to fetch':
- toast.error(tErrors('talawaApiUnavailable'));
+ toast.error(tErrors('talawaApiUnavailable') as string);
break;
// Add more cases as needed
default:
toast.error(error.message);
}
} else {
- toast.error(tErrors('unknownError', { msg: error }));
+ toast.error(tErrors('unknownError', { msg: error }) as string);
}
};
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
index b0c0a1d79e..5d668c0038 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -11,6 +11,8 @@ export interface InterfaceActionItemCategoryInfo {
_id: string;
name: string;
isDisabled: boolean;
+ createdAt: string;
+ creator: { _id: string; firstName: string; lastName: string };
}
export interface InterfaceActionItemCategoryList {
@@ -23,18 +25,20 @@ export interface InterfaceActionItemInfo {
_id: string;
firstName: string;
lastName: string;
+ image: string | null;
};
assigner: {
_id: string;
firstName: string;
lastName: string;
+ image: string | null;
};
actionItemCategory: {
_id: string;
name: string;
};
preCompletionNotes: string;
- postCompletionNotes: string;
+ postCompletionNotes: string | null;
assignmentDate: Date;
dueDate: Date;
completionDate: Date;
@@ -42,12 +46,13 @@ export interface InterfaceActionItemInfo {
event: {
_id: string;
title: string;
- };
+ } | null;
creator: {
_id: string;
firstName: string;
lastName: string;
};
+ allotedHours: number | null;
}
export interface InterfaceActionItemList {
@@ -287,6 +292,8 @@ export interface InterfaceQueryOrganizationAdvertisementListItem {
}
export interface InterfaceQueryOrganizationFundCampaigns {
+ name: string;
+ isArchived: boolean;
campaigns: {
_id: string;
name: string;
@@ -306,6 +313,9 @@ export interface InterfaceUserCampaign {
currency: string;
}
export interface InterfaceQueryFundCampaignsPledges {
+ fundId: {
+ name: string;
+ };
name: string;
fundingGoal: number;
currency: string;
@@ -567,3 +577,8 @@ export interface InterfaceAgendaItemList {
export interface InterfaceMapType {
[key: string]: string;
}
+
+export interface InterfaceCustomFieldData {
+ type: string;
+ name: string;
+}
diff --git a/src/utils/timezoneUtils/dateTimeConfig.ts b/src/utils/timezoneUtils/dateTimeConfig.ts
new file mode 100644
index 0000000000..8d352bcde6
--- /dev/null
+++ b/src/utils/timezoneUtils/dateTimeConfig.ts
@@ -0,0 +1,28 @@
+// dateTimeConfig.ts
+
+export const dateTimeFields = {
+ directFields: [
+ 'createdAt',
+ 'birthDate',
+ 'updatedAt',
+ 'recurrenceStartDate',
+ 'recurrenceEndDate',
+ 'pluginCreatedBy',
+ 'dueDate',
+ 'completionDate',
+ 'startCursor',
+ 'endCursor',
+ ],
+ pairedFields: [
+ {
+ dateField: 'startDate',
+ timeField: 'startTime',
+ combinedField: 'startDateTime',
+ },
+ {
+ dateField: 'endDate',
+ timeField: 'endTime',
+ combinedField: 'endDateTime',
+ },
+ ],
+};
diff --git a/src/utils/timezoneUtils/dateTimeMiddleware.test.ts b/src/utils/timezoneUtils/dateTimeMiddleware.test.ts
new file mode 100644
index 0000000000..b14702b546
--- /dev/null
+++ b/src/utils/timezoneUtils/dateTimeMiddleware.test.ts
@@ -0,0 +1,226 @@
+import { requestMiddleware, responseMiddleware } from './dateTimeMiddleware';
+import type { Operation, FetchResult } from '@apollo/client/core';
+import { Observable } from '@apollo/client/core';
+import { gql } from '@apollo/client';
+import type { DocumentNode } from 'graphql';
+
+const DUMMY_QUERY: DocumentNode = gql`
+ query GetDummyData {
+ dummyData {
+ id
+ }
+ }
+`;
+
+describe('Date Time Middleware Tests', () => {
+ describe('Request Middleware', () => {
+ it('should convert local date and time to UTC format in request variables', () => {
+ const operation: Operation = {
+ query: DUMMY_QUERY,
+ operationName: 'GetDummyData',
+ variables: { startDate: '2023-09-01', startTime: '12:00:00' },
+ getContext: jest.fn(() => ({})),
+ setContext: jest.fn(),
+ extensions: {},
+ };
+
+ const forward = jest.fn(
+ (op) =>
+ new Observable((observer) => {
+ expect(op.variables['startDate']).toBe('2023-09-01');
+ expect(op.variables['startTime']).toMatch(
+ /\d{2}:\d{2}:\d{2}.\d{3}Z/,
+ );
+ observer.complete();
+ }),
+ );
+
+ const observable = requestMiddleware.request(operation, forward);
+ expect(observable).not.toBeNull();
+ observable?.subscribe(() => {
+ expect(forward).toHaveBeenCalled();
+ });
+ });
+ });
+
+ describe('Response Middleware', () => {
+ it('should convert UTC date and time to local format in response data', () => {
+ const testResponse: FetchResult = {
+ data: { createdAt: '2023-09-01T12:00:00.000Z' },
+ extensions: {},
+ context: {},
+ };
+
+ const operation: Operation = {
+ query: DUMMY_QUERY,
+ operationName: 'GetDummyData',
+ variables: {},
+ getContext: jest.fn(() => ({})),
+ setContext: jest.fn(),
+ extensions: {},
+ };
+
+ const forward = jest.fn(
+ () =>
+ new Observable((observer) => {
+ observer.next(testResponse);
+ observer.complete();
+ }),
+ );
+
+ const observable = responseMiddleware.request(operation, forward);
+ expect(observable).not.toBeNull();
+ return new Promise((resolve, reject) => {
+ observable?.subscribe({
+ next: (response: FetchResult) => {
+ if (!response.data) {
+ reject(new Error('Expected response.data to be defined'));
+ return;
+ }
+
+ // Now it's safe to assume response.data exists for the following expectations
+ expect(response.data['createdAt']).not.toBe(
+ '2023-09-01T12:00:00.000Z',
+ );
+ resolve();
+ },
+ error: reject,
+ });
+ }).then(() => {
+ expect(forward).toHaveBeenCalled();
+ });
+ });
+ });
+
+ describe('Date Time Middleware Edge Cases', () => {
+ it('should handle invalid date formats gracefully in request middleware', () => {
+ const operation: Operation = {
+ query: DUMMY_QUERY,
+ operationName: 'GetDummyData',
+ variables: { startDate: 'not-a-date', startTime: '25:99:99' },
+ getContext: jest.fn(() => ({})),
+ setContext: jest.fn(),
+ extensions: {},
+ };
+
+ const forward = jest.fn(
+ (op) =>
+ new Observable((observer) => {
+ expect(op.variables['startDate']).toBe('not-a-date');
+ expect(op.variables['startTime']).toBe('25:99:99');
+ observer.complete();
+ }),
+ );
+
+ const observable = requestMiddleware.request(operation, forward);
+ expect(observable).not.toBeNull();
+ observable?.subscribe(() => {
+ expect(forward).toHaveBeenCalled();
+ });
+ });
+
+ it('should not break when encountering invalid dates in response middleware', () => {
+ const testResponse: FetchResult = {
+ data: { createdAt: 'invalid-date-time' },
+ extensions: {},
+ context: {},
+ };
+
+ const operation: Operation = {
+ query: DUMMY_QUERY,
+ operationName: 'GetDummyData',
+ variables: {},
+ getContext: jest.fn(() => ({})),
+ setContext: jest.fn(),
+ extensions: {},
+ };
+
+ const forward = jest.fn(
+ () =>
+ new Observable((observer) => {
+ observer.next(testResponse);
+ observer.complete();
+ }),
+ );
+
+ const observable = responseMiddleware.request(operation, forward);
+
+ expect(observable).not.toBeNull();
+ return new Promise((resolve, reject) => {
+ observable?.subscribe({
+ next: (response: FetchResult) => {
+ // Ensure there's always an assertion
+ expect(response.data).toBeTruthy(); // This ensures `response.data` is defined and truthy
+
+ if (!response.data) {
+ // Explicitly throw an error if response.data is null or undefined
+ reject(new Error('Expected response.data to be defined'));
+ return;
+ }
+
+ // Now it's safe to assume response.data exists for the following expectations
+ expect(response.data['createdAt']).toBe('invalid-date-time');
+ resolve();
+ },
+ error: reject,
+ });
+ }).then(() => {
+ expect(forward).toHaveBeenCalled();
+ });
+ });
+ });
+
+ describe('Recursive Date Conversion in Nested Objects', () => {
+ it('should recursively convert date and time in deeply nested objects in request middleware', () => {
+ const operation: Operation = {
+ query: DUMMY_QUERY,
+ operationName: 'GetDummyData',
+ variables: {
+ event: {
+ startDate: '2023-10-01',
+ startTime: '08:00:00',
+ details: {
+ endDate: '2023-10-01',
+ endTime: '18:00:00',
+ additionalInfo: {
+ createdAt: '2023-10-01T08:00:00.000Z',
+ },
+ },
+ },
+ },
+ getContext: jest.fn(() => ({})),
+ setContext: jest.fn(),
+ extensions: {},
+ };
+
+ const forward = jest.fn(
+ (op) =>
+ new Observable((observer) => {
+ expect(op.variables.event.startDate).toBe('2023-10-01');
+ expect(op.variables.event.startTime).toMatch(
+ /\d{2}:\d{2}:\d{2}.\d{3}Z/,
+ );
+ expect(op.variables.event.details.endDate).toBe('2023-10-01');
+ expect(op.variables.event.details.endTime).toMatch(
+ /\d{2}:\d{2}:\d{2}.\d{3}Z/,
+ );
+ expect(op.variables.event.details.additionalInfo.createdAt).toMatch(
+ /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/,
+ );
+ observer.complete();
+ }),
+ );
+
+ const observable = requestMiddleware.request(operation, forward);
+ expect(observable).not.toBeNull();
+ return new Promise((resolve, reject) => {
+ observable?.subscribe({
+ complete: resolve,
+ error: reject,
+ });
+ }).then(() => {
+ expect(forward).toHaveBeenCalled();
+ });
+ });
+ });
+});
diff --git a/src/utils/timezoneUtils/dateTimeMiddleware.ts b/src/utils/timezoneUtils/dateTimeMiddleware.ts
new file mode 100644
index 0000000000..70fc20a026
--- /dev/null
+++ b/src/utils/timezoneUtils/dateTimeMiddleware.ts
@@ -0,0 +1,99 @@
+import { ApolloLink } from '@apollo/client/core';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { dateTimeFields } from './dateTimeConfig';
+
+// Extend dayjs with the necessary plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const combineDateTime = (date: string, time: string): string => {
+ return `${date}T${time}`;
+};
+
+const splitDateTime = (dateTimeStr: string): { date: string; time: string } => {
+ const dateTime = dayjs.utc(dateTimeStr);
+ return {
+ date: dateTime.format('YYYY-MM-DD'),
+ time: dateTime.format('HH:mm:ss.SSS[Z]'),
+ };
+};
+
+const convertUTCToLocal = (dateStr: string): string => {
+ if (dayjs(dateStr).isValid()) {
+ return dayjs.utc(dateStr).local().format('YYYY-MM-DDTHH:mm:ss.SSS');
+ }
+ return dateStr;
+};
+
+const convertLocalToUTC = (dateStr: string): string => {
+ if (dayjs(dateStr).isValid()) {
+ const result = dayjs(dateStr).utc().format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
+ return result;
+ }
+ return dateStr;
+};
+
+const traverseAndConvertDates = (
+ obj: Record,
+ convertFn: (dateStr: string) => string,
+ splitFn: (dateTimeStr: string) => { date: string; time: string },
+): void => {
+ if (typeof obj !== 'object' || obj === null) return;
+
+ Object.keys(obj).forEach((key) => {
+ const value = obj[key];
+
+ // Handle paired date and time fields
+ dateTimeFields.pairedFields.forEach(({ dateField, timeField }) => {
+ if (key === dateField && obj[timeField]) {
+ const combinedDateTime = combineDateTime(
+ obj[dateField] as string,
+ obj[timeField] as string,
+ );
+ const convertedDateTime = convertFn(combinedDateTime);
+ const { date, time } = splitFn(convertedDateTime);
+ obj[dateField] = date; // Restore the original date field
+ obj[timeField] = time; // Restore the original time field
+ }
+ });
+
+ // Convert simple date/time fields
+ if (dateTimeFields.directFields.includes(key)) {
+ obj[key] = convertFn(value as string);
+ }
+
+ if (typeof value === 'object' && value !== null) {
+ traverseAndConvertDates(
+ value as Record,
+ convertFn,
+ splitFn,
+ ); // Recursive call for nested objects/arrays
+ }
+ });
+};
+
+// Request middleware to convert local time to UTC time
+export const requestMiddleware = new ApolloLink((operation, forward) => {
+ traverseAndConvertDates(
+ operation.variables,
+ convertLocalToUTC,
+ splitDateTime,
+ );
+ return forward(operation);
+});
+
+// Response middleware to convert UTC time to local time
+export const responseMiddleware = new ApolloLink((operation, forward) => {
+ return forward(operation).map((response) => {
+ if (response.data) {
+ traverseAndConvertDates(
+ response.data as Record,
+ convertUTCToLocal,
+ splitDateTime,
+ );
+ }
+ return response;
+ });
+});
diff --git a/src/utils/timezoneUtils/index.ts b/src/utils/timezoneUtils/index.ts
new file mode 100644
index 0000000000..887072b20c
--- /dev/null
+++ b/src/utils/timezoneUtils/index.ts
@@ -0,0 +1,2 @@
+export * from './dateTimeConfig';
+export * from './dateTimeMiddleware';
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///