+
+
+ {/* 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
+
+
+
+
+
+ + {/* 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
new file mode 100644
index 0000000000..b1ec584f3b
--- /dev/null
+++ b/src/components/EventManagement/EventActionItems/useEventActionColumnConfig.tsx
@@ -0,0 +1,201 @@
+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/IconComponent/IconComponent.test.tsx b/src/components/IconComponent/IconComponent.test.tsx
index 686a8e6f75..4e31d9980d 100644
--- a/src/components/IconComponent/IconComponent.test.tsx
+++ b/src/components/IconComponent/IconComponent.test.tsx
@@ -35,6 +35,10 @@ const screenTestIdMap: Record
+
{/* Options List */}
-
{loading ? (
<>
- {tErrors('errorLoading', { entity: 'Organization' })}
+ Error Occured while loading the Organization
) : (
@@ -123,7 +123,6 @@ const leftDrawerOrg = ({
) : (
- {tCommon('menu')} -
+
diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css b/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css
new file mode 100644
index 0000000000..ac9f4a5900
--- /dev/null
+++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css
@@ -0,0 +1,33 @@
+.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
new file mode 100644
index 0000000000..d37bfeaaa0
--- /dev/null
+++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx
@@ -0,0 +1,378 @@
+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('disabledStatusToggle')); // Toggle the disabled status
+
+ userEvent.click(screen.getByTestId('formSubmitButton'));
+ });
+
+ await waitFor(() => {
+ expect(toast.success).toHaveBeenCalledWith(
+ 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).toHaveBeenCalledWith(
+ 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).toHaveBeenCalledWith(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).toHaveBeenCalledWith(translations.categoryDisabled);
+ });
+
+ await waitFor(() => {
+ userEvent.click(screen.getAllByTestId('disabilityStatusButton')[1]);
+ });
+
+ await waitFor(() => {
+ expect(toast.success).toHaveBeenCalledWith(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
new file mode 100644
index 0000000000..66d5381c6a
--- /dev/null
+++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx
@@ -0,0 +1,324 @@
+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)
+ const [disabledStatus, setDisabledStatus] = useState(false);
+
+ // 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: {
+ isDisabled: disabledStatus,
+ name,
+ organizationId: currentUrl,
+ },
+ });
+
+ setName('');
+ refetch();
+ setDisabledStatus(false);
+ setModalIsOpen(false);
+
+ toast.success(t('successfulCreation') as string);
+ } 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') as string); // 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') as string); // 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') as string)
+ : (t('categoryDisabled') as string),
+ ); // 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
new file mode 100644
index 0000000000..7021cd1e94
--- /dev/null
+++ b/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts
@@ -0,0 +1,182 @@
+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: {
+ isDisabled: false,
+ 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: {
+ isDisabled: false,
+ 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/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css b/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css
similarity index 100%
rename from src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css
rename to src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css
diff --git a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx b/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
similarity index 100%
rename from src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
rename to src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
diff --git a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx b/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
similarity index 97%
rename from src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
rename to src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
index dcb6992e21..8fc9da0290 100644
--- a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
+++ b/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
@@ -13,7 +13,14 @@ import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import EditOrgCustomFieldDropDown from 'components/EditCustomFieldDropDown/EditCustomFieldDropDown';
import { useParams } from 'react-router-dom';
-import type { InterfaceCustomFieldData } from 'utils/interfaces';
+
+/**
+ * Interface for custom field data
+ */
+export interface InterfaceCustomFieldData {
+ type: string;
+ name: string;
+}
/**
* Component for managing organization profile field settings
diff --git a/src/components/OrgSettings/ActionItemCategories/CategoryModal.test.tsx b/src/components/OrgSettings/ActionItemCategories/CategoryModal.test.tsx
deleted file mode 100644
index 39d4884e8b..0000000000
--- a/src/components/OrgSettings/ActionItemCategories/CategoryModal.test.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-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_ERROR } from './OrgActionItemCategoryMocks';
-import type { InterfaceActionItemCategoryModal } from './CategoryModal';
-import CategoryModal from './CategoryModal';
-import { toast } from 'react-toastify';
-
-jest.mock('react-toastify', () => ({
- 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
deleted file mode 100644
index 43018db0ab..0000000000
--- a/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-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
deleted file mode 100644
index 919421b0f2..0000000000
--- a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css
+++ /dev/null
@@ -1,138 +0,0 @@
-/* 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
deleted file mode 100644
index d3698bf346..0000000000
--- a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-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
deleted file mode 100644
index 49cf47dd49..0000000000
--- a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-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 = ({ 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/OrgSettings/General/OrgUpdate/OrgUpdate.module.css b/src/components/OrgUpdate/OrgUpdate.module.css
similarity index 100%
rename from src/components/OrgSettings/General/OrgUpdate/OrgUpdate.module.css
rename to src/components/OrgUpdate/OrgUpdate.module.css
diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx b/src/components/OrgUpdate/OrgUpdate.test.tsx
similarity index 100%
rename from src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx
rename to src/components/OrgUpdate/OrgUpdate.test.tsx
diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx b/src/components/OrgUpdate/OrgUpdate.tsx
similarity index 100%
rename from src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx
rename to src/components/OrgUpdate/OrgUpdate.tsx
diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdateMocks.ts b/src/components/OrgUpdate/OrgUpdateMocks.ts
similarity index 100%
rename from src/components/OrgSettings/General/OrgUpdate/OrgUpdateMocks.ts
rename to src/components/OrgUpdate/OrgUpdateMocks.ts
diff --git a/src/components/ProfileDropdown/ProfileDropdown.test.tsx b/src/components/ProfileDropdown/ProfileDropdown.test.tsx
index 82ce420aea..785f33ee92 100644
--- a/src/components/ProfileDropdown/ProfileDropdown.test.tsx
+++ b/src/components/ProfileDropdown/ProfileDropdown.test.tsx
@@ -9,6 +9,7 @@ import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
import useLocalStorage from 'utils/useLocalstorage';
import { I18nextProvider } from 'react-i18next';
import i18nForTest from 'utils/i18nForTest';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
const { setItem } = useLocalStorage();
const MOCKS = [
@@ -22,6 +23,19 @@ const MOCKS = [
},
},
},
+ {
+ request: {
+ query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ },
+ result: {
+ data: {
+ getCommunityData: {
+ timeout: 30,
+ },
+ },
+ },
+ delay: 1000,
+ },
];
jest.mock('react-toastify', () => ({
@@ -104,13 +118,16 @@ describe('ProfileDropdown Component', () => {
,
);
+
await act(async () => {
userEvent.click(screen.getByTestId('togDrop'));
});
userEvent.click(screen.getByTestId('logoutBtn'));
+
expect(global.window.location.pathname).toBe('/');
});
+
describe('Member screen routing testing', () => {
test('member screen', async () => {
render(
diff --git a/src/components/ProfileDropdown/ProfileDropdown.tsx b/src/components/ProfileDropdown/ProfileDropdown.tsx
index 27fb6951c7..059e5b910a 100644
--- a/src/components/ProfileDropdown/ProfileDropdown.tsx
+++ b/src/components/ProfileDropdown/ProfileDropdown.tsx
@@ -7,6 +7,7 @@ import styles from './ProfileDropdown.module.css';
import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
import { useMutation } from '@apollo/client';
import { useTranslation } from 'react-i18next';
+import useSession from 'utils/useSession';
/**
* Renders a profile dropdown menu for the user.
@@ -21,6 +22,7 @@ import { useTranslation } from 'react-i18next';
* @returns JSX.Element - The profile dropdown menu.
*/
const profileDropdown = (): JSX.Element => {
+ const { endSession } = useSession();
const { t: tCommon } = useTranslation('common');
const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
const { getItem } = useLocalStorage();
@@ -45,6 +47,7 @@ const profileDropdown = (): JSX.Element => {
console.error('Error revoking refresh token:', error);
}
localStorage.clear();
+ endSession();
navigate('/');
};
const MAX_NAME_LENGTH = 20;
diff --git a/src/components/UpdateSession/UpdateSession.css b/src/components/UpdateSession/UpdateSession.css
new file mode 100644
index 0000000000..073bbf973d
--- /dev/null
+++ b/src/components/UpdateSession/UpdateSession.css
@@ -0,0 +1,96 @@
+/* Card styles */
+.update-timeout-card {
+ width: 700px;
+ background: #ffffff;
+ border: none;
+ border-radius: 16px;
+ filter: drop-shadow(0px 4px 15.3px rgba(0, 0, 0, 0.08));
+ padding: 20px;
+}
+
+.update-timeout-card-header {
+ background: none;
+ padding: 16px;
+ border-bottom: none;
+}
+
+.update-timeout-card-title {
+ font-family: 'Lato', sans-serif;
+ font-weight: 600;
+ font-size: 24px;
+ color: #000000;
+}
+
+.update-timeout-card-body {
+ padding: 20px;
+}
+
+.update-timeout-current {
+ font-family: 'Lato', sans-serif;
+ font-weight: 400;
+ font-size: 16px;
+ color: #000000;
+ margin-bottom: 20px; /* Increased margin to create more space */
+}
+
+.update-timeout-label {
+ font-family: 'Lato', sans-serif;
+ font-weight: 400;
+ font-size: 16px;
+ color: #000000;
+ margin-bottom: 10px; /* Keep the same margin to maintain spacing with the slider */
+}
+
+.update-timeout-labels-container {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+}
+
+.update-timeout-value {
+ color: #14ae5c;
+ font-weight: bold;
+}
+
+.update-timeout-slider-labels {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.9rem;
+ color: #757575;
+}
+
+.update-timeout-button-container {
+ display: flex;
+ justify-content: right;
+ margin-top: 20px;
+}
+
+.update-timeout-button {
+ width: 112px;
+ height: 36px;
+ background: #31bb6b;
+ border-radius: 6px;
+ font-family: 'Lato', sans-serif;
+ font-weight: 500;
+ font-size: 16px;
+ color: #ffffff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ box-shadow: none;
+}
+
+.update-timeout-button:hover {
+ background-color: #28a745;
+ border-color: #28a745;
+ box-shadow: none;
+}
+
+.update-timeout-button:active {
+ transform: scale(0.98);
+}
+
+.update-timeout-slider-container {
+ position: relative;
+}
diff --git a/src/components/UpdateSession/UpdateSession.test.tsx b/src/components/UpdateSession/UpdateSession.test.tsx
new file mode 100644
index 0000000000..ce0a868820
--- /dev/null
+++ b/src/components/UpdateSession/UpdateSession.test.tsx
@@ -0,0 +1,346 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/client/testing';
+import {
+ render,
+ screen,
+ act,
+ within,
+ fireEvent,
+ waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import UpdateTimeout from './UpdateSession';
+import i18n from 'utils/i18nForTest';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
+import { UPDATE_SESSION_TIMEOUT } from 'GraphQl/Mutations/mutations';
+import { errorHandler } from 'utils/errorHandler';
+
+const MOCKS = [
+ {
+ request: {
+ query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ },
+ result: {
+ data: {
+ getCommunityData: {
+ timeout: 30,
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ },
+ result: {
+ data: {
+ getCommunityData: null,
+ },
+ },
+ },
+ {
+ request: {
+ query: UPDATE_SESSION_TIMEOUT,
+ variables: {
+ timeout: 30,
+ },
+ },
+ result: {
+ data: {
+ updateSessionTimeout: true,
+ },
+ },
+ },
+];
+
+async function wait(ms = 100): Promise {
+ await act(() => {
+ return new Promise((resolve) => {
+ setTimeout(resolve, ms);
+ });
+ });
+}
+
+jest.mock('react-toastify', () => ({
+ toast: {
+ success: jest.fn(),
+ warn: jest.fn(),
+ error: jest.fn(),
+ },
+}));
+
+jest.mock('utils/errorHandler', () => ({
+ errorHandler: jest.fn(),
+}));
+
+describe('Testing UpdateTimeout Component', () => {
+ let consoleWarnSpy: jest.SpyInstance;
+
+ beforeEach(() => {
+ consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test('Should handle minimum slider value correctly', async () => {
+ const mockOnValueChange = jest.fn();
+
+ render(
+
+ ,
+ );
+
+ const slider = await screen.findByTestId('slider-thumb');
+
+ // Simulate dragging to minimum value
+ userEvent.click(slider, {
+ // Simulate clicking on the slider to focus
+ clientX: -999, // Adjust the clientX to simulate different slider positions
+ });
+
+ expect(mockOnValueChange).toHaveBeenCalledWith(15); // Adjust based on slider min value
+ });
+
+ test('Should handle maximum slider value correctly', async () => {
+ const mockOnValueChange = jest.fn();
+
+ render(
+
+ ,
+ );
+
+ const slider = await screen.findByTestId('slider-thumb');
+
+ // Simulate dragging to maximum value
+ userEvent.click(slider, {
+ // Simulate clicking on the slider to focus
+ clientX: 999, // Adjust the clientX to simulate different slider positions
+ });
+
+ expect(mockOnValueChange).toHaveBeenCalledWith(60); // Adjust based on slider max value
+ });
+
+ test('Should not update value if an invalid value is passed', async () => {
+ const mockOnValueChange = jest.fn();
+
+ render(
+
+ ,
+ );
+
+ const slider = await screen.findByTestId('slider-thumb');
+
+ // Simulate invalid value handling
+ userEvent.click(slider, {
+ // Simulate clicking on the slider to focus
+ clientX: 0, // Adjust the clientX to simulate different slider positions
+ });
+
+ // Ensure onValueChange is not called with invalid values
+ expect(mockOnValueChange).not.toHaveBeenCalled();
+ });
+
+ test('Should update slider value on user interaction', async () => {
+ const mockOnValueChange = jest.fn();
+
+ render(
+
+ ,
+ );
+
+ // Wait for the slider to be present
+ const slider = await screen.findByTestId('slider-thumb');
+
+ // Simulate slider interaction
+ userEvent.type(slider, '45'); // Simulate typing value
+
+ // Assert that the callback was called with the expected value
+ expect(mockOnValueChange).toHaveBeenCalledWith(expect.any(Number)); // Adjust as needed
+ });
+
+ test('Components should render properly', async () => {
+ render(
+
+
+
+
+
+ ,
+ );
+
+ await wait();
+
+ // Use getAllByText to get all elements with "Update Timeout" text
+ const updateTimeoutElements = screen.getAllByText(/Update Timeout/i);
+ expect(updateTimeoutElements).toHaveLength(1); // Check if there are exactly 2 elements with this text
+
+ expect(screen.getByText(/Current Timeout/i)).toBeInTheDocument();
+ expect(screen.getByText(/15 min/i)).toBeInTheDocument();
+
+ // Locate the parent element first
+ const sliderLabelsContainer = screen.getByTestId('slider-labels');
+
+ // Use within to query inside the parent element
+ const sliderLabels = within(sliderLabelsContainer);
+
+ // Check for the specific text within the parent element
+ expect(sliderLabels.getByText('30 min')).toBeInTheDocument();
+
+ expect(screen.getByText(/45 min/i)).toBeInTheDocument();
+ expect(screen.getByText(/60 min/i)).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /Update/i })).toBeInTheDocument();
+ });
+
+ test('Should update session timeout', async () => {
+ render(
+
+
+
+
+
+ ,
+ );
+
+ await wait();
+
+ const submitButton = screen.getByTestId('update-button');
+ userEvent.click(submitButton);
+
+ // Wait for the toast success call
+
+ await wait();
+
+ expect(toast.success).toHaveBeenCalledWith(
+ expect.stringContaining('Successfully updated the Profile Details.'),
+ );
+ });
+
+ test('Should handle query errors', async () => {
+ const errorMocks = [
+ {
+ request: {
+ query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ },
+ error: new Error('An error occurred'),
+ },
+ ];
+
+ render(
+
+
+
+
+
+ ,
+ );
+
+ await wait();
+
+ expect(errorHandler).toHaveBeenCalled();
+ });
+
+ test('Should handle update errors', async () => {
+ const errorMocks = [
+ {
+ request: {
+ query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ },
+ result: {
+ data: {
+ getCommunityData: {
+ timeout: 30,
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ },
+ result: {
+ data: {
+ getCommunityData: null,
+ },
+ },
+ },
+ {
+ request: {
+ query: UPDATE_SESSION_TIMEOUT,
+ variables: { timeout: 30 },
+ },
+ error: new Error('An error occurred'),
+ },
+ ];
+
+ render(
+
+
+
+
+
+ ,
+ );
+
+ await wait();
+
+ const submitButton = screen.getByTestId('update-button');
+ userEvent.click(submitButton);
+
+ await wait();
+
+ expect(errorHandler).toHaveBeenCalled();
+ });
+
+ test('Should handle null community object gracefully', async () => {
+ render(
+
+
+
+
+
+ ,
+ );
+
+ await wait();
+
+ // Assertions to verify the component handles null community object correctly
+ // Use getAllByText to get all elements with "Update Timeout" text
+ const updateTimeoutElements = screen.getAllByText(/Update Timeout/i);
+ expect(updateTimeoutElements).toHaveLength(1); // Check if there are exactly 2 elements with this text
+
+ expect(screen.getByText(/Current Timeout/i)).toBeInTheDocument();
+
+ // Locate the parent element first
+ const sliderLabelsContainer = screen.getByTestId('slider-labels');
+
+ // Use within to query inside the parent element
+ const sliderLabels = within(sliderLabelsContainer);
+
+ // Check for the specific text within the parent element
+ expect(sliderLabels.getByText('15 min')).toBeInTheDocument();
+
+ expect(screen.getByText(/30 min/i)).toBeInTheDocument();
+ expect(screen.getByText(/45 min/i)).toBeInTheDocument();
+ expect(screen.getByText(/60 min/i)).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /Update/i })).toBeInTheDocument();
+
+ // Check if the component displays a default value or handles the null state appropriately
+ expect(screen.getByText(/No timeout set/i)).toBeInTheDocument();
+ });
+});
diff --git a/src/components/UpdateSession/UpdateSession.tsx b/src/components/UpdateSession/UpdateSession.tsx
new file mode 100644
index 0000000000..f49970ebaa
--- /dev/null
+++ b/src/components/UpdateSession/UpdateSession.tsx
@@ -0,0 +1,202 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card, Button, Form } from 'react-bootstrap';
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
+import { useMutation, useQuery } from '@apollo/client';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+import { UPDATE_SESSION_TIMEOUT } from 'GraphQl/Mutations/mutations';
+import './UpdateSession.css';
+import Loader from 'components/Loader/Loader';
+
+/**
+ * Component for updating the session timeout for a community.
+ *
+ * This component fetches the current session timeout value from the server
+ * and allows the user to update it using a slider.
+ *
+ * The component also handles form submission, making a mutation request to update the session timeout.
+ *
+ * @returns JSX.Element - The rendered component.
+ */
+
+interface TestInterfaceUpdateTimeoutProps {
+ onValueChange?: (value: number) => void;
+}
+
+const UpdateTimeout: React.FC = ({
+ onValueChange,
+}): JSX.Element => {
+ const { t } = useTranslation('translation', {
+ keyPrefix: 'communityProfile',
+ });
+
+ const [timeout, setTimeout] = useState(30);
+ const [communityTimeout, setCommunityTimeout] = useState(
+ 30,
+ ); // Timeout from database for the community
+
+ const {
+ data,
+ loading,
+ error: queryError,
+ } = useQuery(GET_COMMUNITY_SESSION_TIMEOUT_DATA);
+ const [uploadSessionTimeout] = useMutation(UPDATE_SESSION_TIMEOUT);
+
+ type TimeoutDataType = {
+ timeout: number;
+ };
+
+ /**
+ * Effect that fetches the current session timeout from the server and sets the initial state.
+ * If there is an error in fetching the data, it is handled using the error handler.
+ */
+ React.useEffect(() => {
+ if (queryError) {
+ errorHandler(t, queryError as Error);
+ }
+
+ const SessionTimeoutData: TimeoutDataType | undefined =
+ data?.getCommunityData;
+
+ if (SessionTimeoutData && SessionTimeoutData.timeout !== null) {
+ setCommunityTimeout(SessionTimeoutData.timeout);
+ setTimeout(SessionTimeoutData.timeout);
+ } else {
+ setCommunityTimeout(undefined); // Handle null or undefined data
+ }
+ }, [data, queryError]);
+
+ /**
+ * Handles changes to the slider value and updates the timeout state.
+ *
+ * @param e - The event triggered by slider movement.
+ */
+ const handleOnChange = (
+ e: Event | React.ChangeEvent,
+ ): void => {
+ if ('target' in e && e.target) {
+ const target = e.target as HTMLInputElement;
+ // Ensure the value is a number and not NaN
+ const value = parseInt(target.value, 10);
+ if (!Number.isNaN(value)) {
+ setTimeout(value);
+ if (onValueChange) {
+ onValueChange(value);
+ }
+ } else {
+ console.warn('Invalid timeout value:', target.value);
+ }
+ }
+ };
+
+ /**
+ * Handles form submission to update the session timeout.
+ * It makes a mutation request to update the timeout value on the server.
+ * If the update is successful, a success toast is shown, and the state is updated.
+ *
+ * @param e - The event triggered by form submission.
+ */
+ const handleOnSubmit = async (
+ e: React.FormEvent,
+ ): Promise => {
+ e.preventDefault();
+ try {
+ await uploadSessionTimeout({
+ variables: {
+ timeout: timeout,
+ },
+ });
+
+ toast.success(t('profileChangedMsg'));
+ setCommunityTimeout(timeout);
+ } catch (error: unknown) {
+ /* istanbul ignore next */
+ errorHandler(t, error as Error);
+ }
+ };
+
+ // Show a loader while the data is being fetched
+ if (loading) {
+ return
+
+
+
+
+
+
+
+ );
+};
+
+export default UpdateTimeout;
diff --git a/src/screens/CommunityProfile/CommunityProfile.tsx b/src/screens/CommunityProfile/CommunityProfile.tsx
index 02f8b8aca4..d96c923eb3 100644
--- a/src/screens/CommunityProfile/CommunityProfile.tsx
+++ b/src/screens/CommunityProfile/CommunityProfile.tsx
@@ -20,6 +20,7 @@ import {
import convertToBase64 from 'utils/convertToBase64';
import styles from './CommunityProfile.module.css';
import { errorHandler } from 'utils/errorHandler';
+import UpdateSession from '../../components/UpdateSession/UpdateSession';
/**
* `CommunityProfile` component allows users to view and update their community profile details.
@@ -208,212 +209,218 @@ const CommunityProfile = (): JSX.Element => {
}
return (
-
-
-
+
+
+ ('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.
*
@@ -122,16 +133,14 @@ const EventManagement = (): JSX.Element => {
const selected = tab === value;
const variant = selected ? 'success' : 'light';
const translatedText = t(value);
-
const className = selected
- ? 'px-4 d-flex align-items-center shadow'
- : 'text-secondary bg-white px-4 d-flex align-items-center rounded shadow';
+ ? 'px-4'
+ : 'text-secondary border-secondary-subtle px-4';
const props = {
variant,
className,
- style: { height: '2.5rem' },
size: 'sm' as 'sm' | 'lg',
- onClick: () => setTab(value),
+ onClick: () => handleClick(value),
'data-testid': `${value}Btn`,
};
@@ -143,102 +152,67 @@ const EventManagement = (): JSX.Element => {
);
};
- const handleBack = (): void => {
- /*istanbul ignore next*/
- userRole === 'USER'
- ? navigate(`/user/events/${orgId}`)
- : navigate(`/orgevents/${orgId}`);
- };
-
return (
- {
+ await act(() => {
+ return new Promise((resolve) => {
+ setTimeout(resolve, ms);
+ });
});
+}
- afterAll(() => {
- jest.clearAllMocks();
+const translations = JSON.parse(
+ JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.orgSettings),
+);
+
+afterEach(() => {
+ localStorage.clear();
+});
+
+describe('Organisation Settings Page', () => {
+ test('correct mock data should be queried', async () => {
+ const dataQuery1 = MOCKS[1]?.result?.data?.removeOrganization;
+ expect(dataQuery1).toEqual([
+ {
+ _id: 123,
+ },
+ ]);
});
- it('should redirect to fallback URL if URL params are undefined', async () => {
+ test('should render props and text elements test for the screen', async () => {
+ window.location.assign('/orgsetting/123');
+ setItem('SuperAdmin', true);
render(
-
-
+
+
-
-
}
- />
-
+ + {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')} +
+ +{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
deleted file mode 100644
index 10310a01e4..0000000000
--- a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategoryMocks.ts
+++ /dev/null
@@ -1,288 +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: '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/components/OrgSettings/General/GeneralSettings.tsx b/src/components/OrgSettings/General/GeneralSettings.tsx
deleted file mode 100644
index 4dbca1b6eb..0000000000
--- a/src/components/OrgSettings/General/GeneralSettings.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-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
-
-
- {/* 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')}
-
-
-
-
-
-
-
-
-
- {t('updateOrganization')}
-
-
- {t('otherSettings')}
-
-
- {t('changeLanguage')}
-
- {/* Render language change dropdown component */}
-
-
-
- {t('manageCustomFields')}
- Login Session Timeout
+
-
- {t('editProfile')}
- {t('communityProfileInfo')}
-
+
-
-
-
- {t(tab)}
-
-
- {/* Render dropdown items for each settings category */}
- {eventDashboardTabs.map(({ value, icon }, index) => (
- setTab(value)
- }
- className={`d-flex gap-2 ${tab === value && 'text-secondary'}`}
- >
- {icon} {t(value)}
-
- ))}
-
-
+
+
@@ -319,9 +310,11 @@ describe('Testing Forgot Password screen', () => {
);
userEvent.click(screen.getByText('Get OTP'));
- await waitFor(() => {
- expect(toast.warn).toHaveBeenCalledWith(translations.emailNotRegistered);
- });
+ await wait();
+
+ expect(
+ await screen.findByText(translations.emailNotRegistered),
+ ).toBeInTheDocument();
});
test('Testing forgot password functionality, when there is an error except unregistered email and api failure', async () => {
@@ -330,6 +323,7 @@ describe('Testing Forgot Password screen', () => {
+
@@ -337,9 +331,11 @@ describe('Testing Forgot Password screen', () => {
,
);
userEvent.click(screen.getByText('Get OTP'));
- await waitFor(() => {
- expect(toast.error).toHaveBeenCalledWith(translations.errorSendingMail);
- });
+ await wait();
+
+ expect(
+ await screen.findByText(translations.errorSendingMail),
+ ).toBeInTheDocument();
});
test('Testing forgot password functionality, when talawa api failed', async () => {
@@ -351,6 +347,7 @@ describe('Testing Forgot Password screen', () => {
+
@@ -365,11 +362,11 @@ describe('Testing Forgot Password screen', () => {
formData.email,
);
userEvent.click(screen.getByText('Get OTP'));
- await waitFor(() => {
- expect(toast.error).toHaveBeenCalledWith(
- translations.talawaApiUnavailable,
- );
- });
+ await wait();
+
+ expect(
+ await screen.findByText(translations.talawaApiUnavailable),
+ ).toBeInTheDocument();
});
test('Testing forgot password functionality, when otp token is not present', async () => {
diff --git a/src/screens/ForgotPassword/ForgotPassword.tsx b/src/screens/ForgotPassword/ForgotPassword.tsx
index 663960572b..5c5499b4f1 100644
--- a/src/screens/ForgotPassword/ForgotPassword.tsx
+++ b/src/screens/ForgotPassword/ForgotPassword.tsx
@@ -90,16 +90,20 @@ const ForgotPassword = (): JSX.Element => {
},
});
- setItem('otpToken', data.otp.otpToken);
- toast.success(t('OTPsent'));
- setShowEnterEmail(false);
+ if (data) {
+ setItem('otpToken', data.otp.otpToken);
+ toast.success(t('OTPsent') as string);
+ setShowEnterEmail(false);
+ }
} catch (error: unknown) {
- if ((error as Error).message === 'User not found') {
- toast.warn(tErrors('emailNotRegistered'));
- } else if ((error as Error).message === 'Failed to fetch') {
- toast.error(tErrors('talawaApiUnavailable'));
- } else {
- toast.error(tErrors('errorSendingMail'));
+ if (error instanceof Error) {
+ if (error.message === 'User not found') {
+ toast.warn(tErrors('emailNotRegistered') as string);
+ } else if (error.message === 'Failed to fetch') {
+ toast.error(tErrors('talawaApiUnavailable') as string);
+ } else {
+ toast.error(tErrors('errorSendingMail') as string);
+ }
}
}
};
diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx
index 3fb5993775..25e049e19d 100644
--- a/src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx
@@ -85,6 +85,17 @@ describe('Testing Campaign Pledge Screen', () => {
jest.clearAllMocks();
});
+ afterEach(() => {
+ cleanup();
+ });
+
+ it('should render the Campaign Pledge screen', async () => {
+ renderFundCampaignPledge(link1);
+ await waitFor(() => {
+ expect(screen.getByTestId('searchPledger')).toBeInTheDocument();
+ });
+ });
+
it('should redirect to fallback URL if URL params are undefined', async () => {
render(
@@ -111,13 +122,6 @@ describe('Testing Campaign Pledge Screen', () => {
});
});
- it('should render the Campaign Pledge screen', async () => {
- renderFundCampaignPledge(link1);
- await waitFor(() => {
- expect(screen.getByTestId('searchPledger')).toBeInTheDocument();
- });
- });
-
it('open and closes Create Pledge modal', async () => {
renderFundCampaignPledge(link1);
@@ -209,19 +213,6 @@ describe('Testing Campaign Pledge Screen', () => {
await waitFor(() => {
expect(screen.getByTestId('searchPledger')).toBeInTheDocument();
});
- const searchPledger = await screen.findByTestId('searchPledger');
- expect(searchPledger).toBeInTheDocument();
-
- fireEvent.click(screen.getByTestId('filter'));
- await waitFor(() => {
- expect(screen.getByTestId('amount_DESC')).toBeInTheDocument();
- });
- fireEvent.click(screen.getByTestId('amount_DESC'));
-
- await waitFor(() => {
- expect(screen.getByText('John Doe')).toBeInTheDocument();
- expect(screen.queryByText('Jane Doe')).toBeInTheDocument();
- });
expect(screen.getByText('John Doe')).toBeInTheDocument();
expect(screen.getByText('John Doe2')).toBeInTheDocument();
diff --git a/src/screens/FundCampaignPledge/PledgesMocks.ts b/src/screens/FundCampaignPledge/PledgesMocks.ts
index 2a583fa887..2e40e43282 100644
--- a/src/screens/FundCampaignPledge/PledgesMocks.ts
+++ b/src/screens/FundCampaignPledge/PledgesMocks.ts
@@ -6,48 +6,7 @@ import {
import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
import { FUND_CAMPAIGN_PLEDGE } from 'GraphQl/Queries/fundQueries';
-const memberList = {
- request: {
- query: MEMBERS_LIST,
- variables: {
- id: 'orgId',
- },
- },
- result: {
- data: {
- organizations: [
- {
- _id: 'orgId',
- members: [
- {
- createdAt: '2023-04-13T04:53:17.742Z',
- email: 'testuser4@example.com',
- firstName: 'John',
- image: 'img-url',
- lastName: 'Doe',
- organizationsBlockedBy: [],
- __typename: 'User',
- _id: '1',
- },
- {
- createdAt: '2024-04-13T04:53:17.742Z',
- email: 'testuser2@example.com',
- firstName: 'Anna',
- image: null,
- lastName: 'Bradley',
- organizationsBlockedBy: [],
- __typename: 'User',
- _id: '2',
- },
- ],
- },
- ],
- },
- },
-};
-
export const MOCKS = [
- memberList,
{
request: {
query: FUND_CAMPAIGN_PLEDGE,
@@ -84,6 +43,60 @@ export const MOCKS = [
lastName: 'Doe',
image: 'img-url',
},
+ {
+ _id: '2',
+ firstName: 'John',
+ lastName: 'Doe2',
+ image: 'img-url2',
+ },
+ {
+ _id: '3',
+ firstName: 'John',
+ lastName: 'Doe3',
+ image: 'img-url3',
+ },
+ {
+ _id: '4',
+ firstName: 'John',
+ lastName: 'Doe4',
+ image: 'img-url4',
+ },
+ {
+ _id: '5',
+ firstName: 'John',
+ lastName: 'Doe5',
+ image: 'img-url5',
+ },
+ {
+ _id: '6',
+ firstName: 'John',
+ lastName: 'Doe6',
+ image: 'img-url6',
+ },
+ {
+ _id: '7',
+ firstName: 'John',
+ lastName: 'Doe7',
+ image: 'img-url7',
+ },
+ {
+ _id: '8',
+ firstName: 'John',
+ lastName: 'Doe8',
+ image: 'img-url8',
+ },
+ {
+ _id: '9',
+ firstName: 'John',
+ lastName: 'Doe9',
+ image: 'img-url9',
+ },
+ {
+ _id: '10',
+ firstName: 'John',
+ lastName: 'Doe10',
+ image: null,
+ },
],
},
{
@@ -202,60 +215,6 @@ export const MOCKS = [
lastName: 'Doe',
image: null,
},
- {
- _id: '2',
- firstName: 'John',
- lastName: 'Doe2',
- image: 'img-url2',
- },
- {
- _id: '3',
- firstName: 'John',
- lastName: 'Doe3',
- image: 'img-url3',
- },
- {
- _id: '4',
- firstName: 'John',
- lastName: 'Doe4',
- image: 'img-url4',
- },
- {
- _id: '5',
- firstName: 'John',
- lastName: 'Doe5',
- image: 'img-url5',
- },
- {
- _id: '6',
- firstName: 'John',
- lastName: 'Doe6',
- image: 'img-url6',
- },
- {
- _id: '7',
- firstName: 'John',
- lastName: 'Doe7',
- image: 'img-url7',
- },
- {
- _id: '8',
- firstName: 'John',
- lastName: 'Doe8',
- image: 'img-url8',
- },
- {
- _id: '9',
- firstName: 'John',
- lastName: 'Doe9',
- image: 'img-url9',
- },
- {
- _id: '10',
- firstName: 'John',
- lastName: 'Doe10',
- image: null,
- },
],
},
{
@@ -356,7 +315,6 @@ export const MOCKS = [
];
export const MOCKS_FUND_CAMPAIGN_PLEDGE_ERROR = [
- memberList,
{
request: {
query: FUND_CAMPAIGN_PLEDGE,
@@ -372,7 +330,6 @@ export const MOCKS_FUND_CAMPAIGN_PLEDGE_ERROR = [
];
export const MOCKS_DELETE_PLEDGE_ERROR = [
- memberList,
{
request: {
query: DELETE_PLEDGE,
@@ -385,7 +342,6 @@ export const MOCKS_DELETE_PLEDGE_ERROR = [
];
export const EMPTY_MOCKS = [
- memberList,
{
request: {
query: FUND_CAMPAIGN_PLEDGE,
@@ -417,7 +373,45 @@ export const EMPTY_MOCKS = [
];
export const PLEDGE_MODAL_MOCKS = [
- memberList,
+ {
+ request: {
+ query: MEMBERS_LIST,
+ variables: {
+ id: 'orgId',
+ },
+ },
+ result: {
+ data: {
+ organizations: [
+ {
+ _id: 'orgId',
+ members: [
+ {
+ createdAt: '2023-04-13T04:53:17.742Z',
+ email: 'testuser4@example.com',
+ firstName: 'John',
+ image: 'img-url',
+ lastName: 'Doe',
+ organizationsBlockedBy: [],
+ __typename: 'User',
+ _id: '1',
+ },
+ {
+ createdAt: '2024-04-13T04:53:17.742Z',
+ email: 'testuser2@example.com',
+ firstName: 'Anna',
+ image: null,
+ lastName: 'Bradley',
+ organizationsBlockedBy: [],
+ __typename: 'User',
+ _id: '2',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ },
{
request: {
query: UPDATE_PLEDGE,
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
index 7d007a7112..2ed1e71c13 100644
--- a/src/screens/LoginPage/LoginPage.tsx
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -33,6 +33,7 @@ import { socialMediaLinks } from '../../constants';
import styles from './LoginPage.module.css';
import type { InterfaceQueryOrganizationListObject } from 'utils/interfaces';
import { Autocomplete, TextField } from '@mui/material';
+import useSession from 'utils/useSession';
import i18n from 'utils/i18n';
/**
@@ -41,6 +42,7 @@ import i18n from 'utils/i18n';
* register form.
*
*/
+
const loginPage = (): JSX.Element => {
const { t } = useTranslation('translation', { keyPrefix: 'loginPage' });
const { t: tCommon } = useTranslation('common');
@@ -110,6 +112,7 @@ const loginPage = (): JSX.Element => {
const isLoggedIn = getItem('IsLoggedIn');
if (isLoggedIn == 'TRUE') {
navigate(getItem('userId') !== null ? '/user/organizations' : '/orglist');
+ extendSession();
}
}, []);
@@ -126,7 +129,7 @@ const loginPage = (): JSX.Element => {
const [signup, { loading: signinLoading }] = useMutation(SIGNUP_MUTATION);
const [recaptcha] = useMutation(RECAPTCHA_MUTATION);
const { data: orgData } = useQuery(ORGANIZATION_LIST);
-
+ const { startSession, extendSession } = useSession();
useEffect(() => {
if (orgData) {
const options = orgData.organizations.map(
@@ -325,6 +328,7 @@ const loginPage = (): JSX.Element => {
}
navigate(role === 'admin' ? '/orglist' : '/user/organizations');
+ startSession();
} else {
toast.warn(tErrors('notFound') as string);
}
diff --git a/src/screens/OrgSettings/OrgSettings.mocks.ts b/src/screens/OrgSettings/OrgSettings.mocks.ts
deleted file mode 100644
index 02748dbf70..0000000000
--- a/src/screens/OrgSettings/OrgSettings.mocks.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import {
- ACTION_ITEM_CATEGORY_LIST,
- AGENDA_ITEM_CATEGORY_LIST,
- IS_SAMPLE_ORGANIZATION_QUERY,
- ORGANIZATION_CUSTOM_FIELDS,
- ORGANIZATIONS_LIST,
-} from 'GraphQl/Queries/Queries';
-
-export const MOCKS = [
- {
- request: {
- query: ORGANIZATIONS_LIST,
- variables: {
- id: 'orgId',
- },
- },
- result: {
- data: {
- organizations: [
- {
- _id: 'orgId',
- image: null,
- creator: {
- firstName: 'Wilt',
- lastName: 'Shepherd',
- email: 'testsuperadmin@example.com',
- __typename: 'User',
- },
- name: 'Unity Foundation',
- description:
- 'A foundation aimed at uniting the world and making it a better place for all.',
- address: {
- city: 'Bronx',
- countryCode: 'US',
- dependentLocality: 'Some Dependent Locality',
- line1: '123 Random Street',
- line2: 'Apartment 456',
- postalCode: '10451',
- sortingCode: 'ABC-123',
- state: 'NYC',
- __typename: 'Address',
- },
- userRegistrationRequired: false,
- visibleInSearch: true,
- members: [
- {
- _id: '64378abd85008f171cf2990d',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- email: 'testsuperadmin@example.com',
- __typename: 'User',
- },
- ],
- admins: [
- {
- _id: '64378abd85008f171cf2990d',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- email: 'testsuperadmin@example.com',
- createdAt: '2023-04-13T04:53:17.742Z',
- __typename: 'User',
- },
- ],
- membershipRequests: [],
- blockedUsers: [],
- __typename: 'Organization',
- },
- ],
- },
- },
- },
- {
- request: {
- query: ORGANIZATION_CUSTOM_FIELDS,
- variables: { customFieldsByOrganizationId: 'orgId' },
- },
- result: {
- data: {
- customFieldsByOrganization: [
- {
- _id: 'adsdasdsa334343yiu423434',
- type: 'fieldType',
- name: 'fieldName',
- },
- ],
- },
- },
- },
- {
- request: {
- query: IS_SAMPLE_ORGANIZATION_QUERY,
- variables: { isSampleOrganizationId: 'orgId' },
- },
- result: {
- data: {
- isSampleOrganization: false,
- },
- },
- },
-
- {
- request: {
- query: AGENDA_ITEM_CATEGORY_LIST,
- variables: { organizationId: 'orgId' },
- },
- result: {
- data: {
- agendaItemCategoriesByOrganization: [],
- },
- },
- },
- {
- request: {
- query: ACTION_ITEM_CATEGORY_LIST,
- variables: {
- organizationId: 'orgId',
- where: {
- name_contains: '',
- },
- orderBy: 'createdAt_DESC',
- },
- },
- result: {
- data: {
- actionItemCategoriesByOrganization: [
- {
- _id: 'actionItemCategoryId1',
- name: 'Test 3',
- isDisabled: false,
- createdAt: '2024-08-25',
- creator: {
- _id: '64378abd85008f171cf2990d',
- firstName: 'Wilt',
- lastName: 'Shepherd',
- __typename: 'User',
- },
- __typename: 'ActionItemCategory',
- },
- ],
- },
- },
- },
-];
diff --git a/src/screens/OrgSettings/OrgSettings.module.css b/src/screens/OrgSettings/OrgSettings.module.css
index 9952a9a459..6910ff49ad 100644
--- a/src/screens/OrgSettings/OrgSettings.module.css
+++ b/src/screens/OrgSettings/OrgSettings.module.css
@@ -1,6 +1,3 @@
-.headerBtn {
- box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-}
.settingsContainer {
min-height: 100vh;
}
diff --git a/src/screens/OrgSettings/OrgSettings.test.tsx b/src/screens/OrgSettings/OrgSettings.test.tsx
index a9aec5f33d..efe764da2f 100644
--- a/src/screens/OrgSettings/OrgSettings.test.tsx
+++ b/src/screens/OrgSettings/OrgSettings.test.tsx
@@ -1,107 +1,170 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import type { RenderResult } from '@testing-library/react';
import { render, screen, waitFor } from '@testing-library/react';
import 'jest-location-mock';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { DELETE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
import { store } from 'state/store';
import { StaticMockLink } from 'utils/StaticMockLink';
import i18nForTest from 'utils/i18nForTest';
import OrgSettings from './OrgSettings';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
import userEvent from '@testing-library/user-event';
-import type { ApolloLink } from '@apollo/client';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { MOCKS } from './OrgSettings.mocks';
-
-const link1 = new StaticMockLink(MOCKS);
-
-const renderOrganisationSettings = (link: ApolloLink): RenderResult => {
- return render(
-
-
-
-
-
-
-
}
- />
-
-
-
-
-
- ,
- );
-};
+import useLocalStorage from 'utils/useLocalstorage';
-describe('Organisation Settings Page', () => {
- beforeAll(() => {
- jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useParams: () => ({ orgId: 'orgId' }),
- }));
+const { setItem } = useLocalStorage();
+
+const MOCKS = [
+ {
+ request: {
+ query: ORGANIZATIONS_LIST,
+ },
+ result: {
+ data: {
+ organizations: [
+ {
+ _id: '123',
+ image: null,
+ name: 'Palisadoes',
+ description: 'Equitable Access to STEM Education Jobs',
+ location: 'Jamaica',
+ isPublic: true,
+ visibleInSearch: false,
+ creator: {
+ firstName: 'John',
+ lastName: 'Doe',
+ email: 'johndoe@example.com',
+ },
+ members: {
+ _id: '123',
+ firstName: 'John',
+ lastName: 'Doe',
+ email: 'johndoe@gmail.com',
+ },
+ admins: [
+ {
+ _id: '123',
+ firstName: 'John',
+ lastName: 'Doe',
+ email: 'johndoe@gmail.com',
+ },
+ ],
+ membershipRequests: {
+ _id: '456',
+ user: {
+ firstName: 'Sam',
+ lastName: 'Smith',
+ email: 'samsmith@gmail.com',
+ },
+ },
+ blockedUsers: [],
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: DELETE_ORGANIZATION_MUTATION,
+ },
+ result: {
+ data: {
+ removeOrganization: [
+ {
+ _id: 123,
+ },
+ ],
+ },
+ },
+ },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise
-
- {eventDashboardTabs.map(renderButton)}
-
-
-
+
+
-
-
-
- {/* Render content based on the selected settings category */}
- {(() => {
- switch (tab) {
- case 'dashboard':
- return (
-
);
};
diff --git a/src/screens/ForgotPassword/ForgotPassword.test.tsx b/src/screens/ForgotPassword/ForgotPassword.test.tsx
index be1b1706f8..b20dfbf767 100644
--- a/src/screens/ForgotPassword/ForgotPassword.test.tsx
+++ b/src/screens/ForgotPassword/ForgotPassword.test.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { act } from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen, waitFor } 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';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
-import { toast, ToastContainer } from 'react-toastify';
+import { ToastContainer } from 'react-toastify';
import { GENERATE_OTP_MUTATION } from 'GraphQl/Mutations/mutations';
import { store } from 'state/store';
@@ -19,14 +19,6 @@ import useLocalStorage from 'utils/useLocalstorage';
const { setItem, removeItem } = useLocalStorage();
-jest.mock('react-toastify', () => ({
- toast: {
- success: jest.fn(),
- error: jest.fn(),
- warn: jest.fn(),
- },
-}));
-
const MOCKS = [
{
request: {
@@ -167,9 +159,7 @@ describe('Testing Forgot Password screen', () => {
);
userEvent.click(screen.getByText('Get OTP'));
- await waitFor(() => {
- expect(toast.success).toHaveBeenCalled();
- });
+ await wait();
});
test('Testing forgot password functionality', async () => {
@@ -304,6 +294,7 @@ describe('Testing Forgot Password screen', () => {
+ {
+ /*istanbul ignore next*/
+ (() =>
+ userRole === 'USER'
+ ? navigate(`/user/events/${orgId}`)
+ : navigate(`/orgevents/${orgId}`))();
+ }}
+ className="mt-1"
+ />
+
+
+ {eventDashboardTabs.map(renderButton)}
+
+
+
+ );
+ case 'registrants':
+ return (
+
+
+ );
+ case 'eventActions':
+ return (
+ Event Registrants
+
+
+ );
+ case 'eventAgendas':
+ return (
+
+
+ );
+ case 'eventStats':
+ return (
+
+
+ );
+ }
+ })()}
-
- Event Statistics
+-
-
- );
- case 'registrants':
- return (
-
-
- );
- case 'eventActions':
- return (
- Event Registrants
-
-
- );
- case 'eventAgendas':
- return (
-
-
- );
- case 'eventStats':
- return (
-
-
- );
- }
- })()}
Event Statistics
-
-
-
-
- {t(tab)}
-
-
- {/* Render dropdown items for each settings category */}
- {settingtabs.map((setting, index) => (
-
+ ) => 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
new file mode 100644
index 0000000000..22725b5f56
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ActionItemDeleteModal.tsx
@@ -0,0 +1,70 @@
+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
new file mode 100644
index 0000000000..ae2043bf88
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ActionItemPreviewModal.tsx
@@ -0,0 +1,143 @@
+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
new file mode 100644
index 0000000000..f52da23530
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ActionItemUpdateModal.test.tsx
@@ -0,0 +1,235 @@
+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
new file mode 100644
index 0000000000..89a262fe0b
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx
@@ -0,0 +1,172 @@
+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
deleted file mode 100644
index 3d45e12a25..0000000000
--- a/src/screens/OrganizationActionItems/ItemDeleteModal.test.tsx
+++ /dev/null
@@ -1,120 +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 { 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
deleted file mode 100644
index 2526486993..0000000000
--- a/src/screens/OrganizationActionItems/ItemDeleteModal.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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
deleted file mode 100644
index 6901e16291..0000000000
--- a/src/screens/OrganizationActionItems/ItemModal.test.tsx
+++ /dev/null
@@ -1,373 +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,
- 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
deleted file mode 100644
index d7a38ee0df..0000000000
--- a/src/screens/OrganizationActionItems/ItemModal.tsx
+++ /dev/null
@@ -1,440 +0,0 @@
-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
deleted file mode 100644
index c1fee119cc..0000000000
--- a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.test.tsx
+++ /dev/null
@@ -1,173 +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 { 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
deleted file mode 100644
index 44ac0e63e6..0000000000
--- a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-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
deleted file mode 100644
index 13c208b854..0000000000
--- a/src/screens/OrganizationActionItems/ItemViewModal.test.tsx
+++ /dev/null
@@ -1,147 +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 { 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
deleted file mode 100644
index 84d9a3e7fe..0000000000
--- a/src/screens/OrganizationActionItems/ItemViewModal.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-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
deleted file mode 100644
index 0a324d39ac..0000000000
--- a/src/screens/OrganizationActionItems/OrganizationActionItem.mocks.ts
+++ /dev/null
@@ -1,482 +0,0 @@
-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
new file mode 100644
index 0000000000..acbb243e5d
--- /dev/null
+++ b/src/screens/OrganizationActionItems/OrganizationActionItemMocks.ts
@@ -0,0 +1,417 @@
+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 48720ac902..7a67362c8b 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
@@ -8,6 +8,26 @@
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;
@@ -26,6 +46,10 @@
margin-left: 5px;
}
+.dropdown {
+ display: block;
+}
+
.dropdownToggle {
margin-bottom: 0;
display: flex;
@@ -84,6 +108,10 @@ hr {
flex-direction: column;
}
+.organizationActionItemsContainer h2 {
+ margin: 0.6rem 0;
+}
+
.preview {
display: flex;
flex-direction: row;
@@ -100,6 +128,16 @@ 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;
@@ -107,127 +145,24 @@ hr {
color: var(--bs-gray-600);
}
-/* 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;
-}
+@media (max-width: 767px) {
+ .btnsContainer {
+ margin-bottom: 0;
+ display: flex;
+ flex-direction: column;
+ }
-.dropdown {
- background-color: white;
- border: 1px solid #31bb6b;
- position: relative;
- display: inline-block;
- color: #31bb6b;
-}
+ .btnsContainer .btnsBlock .dropdownToggle {
+ flex-grow: 1;
+ }
-/* 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;
-}
+ .btnsContainer button {
+ width: 100%;
+ }
-.avatarContainer {
- width: 28px;
- height: 26px;
+ .createActionItemButton {
+ position: absolute;
+ top: 1rem;
+ right: 2rem;
+ }
}
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
index c163ff9546..7a9060a892 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
@@ -1,23 +1,35 @@
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 type { RenderResult } from '@testing-library/react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+ render,
+ screen,
+ fireEvent,
+ waitFor,
+ act,
+ waitForElementToBeRemoved,
+} 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 { MemoryRouter, Route, Routes } from 'react-router-dom';
+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 { store } from 'state/store';
import { StaticMockLink } from 'utils/StaticMockLink';
-import i18n from 'utils/i18nForTest';
-import OrganizationActionItems from 'screens/OrganizationActionItems/OrganizationActionItems';
-import type { ApolloLink } from '@apollo/client';
+
+import OrganizationActionItems from './OrganizationActionItems';
import {
- MOCKS,
- MOCKS_EMPTY,
- MOCKS_ERROR,
-} from './OrganizationActionItem.mocks';
+ 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';
jest.mock('react-toastify', () => ({
toast: {
@@ -34,10 +46,29 @@ jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
};
});
-const link1 = new StaticMockLink(MOCKS);
-const link2 = new StaticMockLink(MOCKS_ERROR);
-const link3 = new StaticMockLink(MOCKS_EMPTY);
-const t = {
+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 = {
...JSON.parse(
JSON.stringify(
i18n.getDataByLanguage('en')?.translation.organizationActionItems ?? {},
@@ -47,331 +78,542 @@ const t = {
...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
};
-const renderOrganizationActionItems = (link: ApolloLink): RenderResult => {
- return render(
-
-
+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(
+
-
+
-
-
}
- />
-
+ {
- {/* Render buttons for each settings category */}
- {settingtabs.map((setting, index) => (
-
- ))}
-
-
- {/* Dropdown menu for selecting settings category */}
-
+
+
-
+ {/* Dropdown menu for selecting settings category */} +
+
+ {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 */}
- {(() => {
- switch (tab) {
- case 'general':
- return (
-
+
);
}
diff --git a/src/screens/OrganizationActionItems/ActionItemCreateModal.tsx b/src/screens/OrganizationActionItems/ActionItemCreateModal.tsx
new file mode 100644
index 0000000000..00284468f1
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ActionItemCreateModal.tsx
@@ -0,0 +1,167 @@
+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 */} +
+
-
- );
- case 'actionItemCategories':
- return (
-
-
- );
- case 'agendaItemCategories':
- return (
-
-
+
+
+ {/* Render organization update component if orgId is available */}
+ {orgId &&
+
+
+
+
+
+
+
+
+
+ {/* Render organization profile field settings component if orgId is available */}
+ {orgId &&
+
+
+
+ )}
+
+ {orgSetting === 'actionItemCategories' && (
+
+
+
+
+
+ {t('updateOrganization')}
+
+
+
+ {t('otherSettings')}
+
+
+ {t('changeLanguage')}
+
+ {/* Render language change dropdown component */}
+
+
+
+
+ {t('manageCustomFields')}
+
+
+
+
+ {t('actionItemCategories')}
- );
- }
- })()}
-
+ {/* 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')}
- -
-
- {tErrors('errorLoading', { entity: 'Action Items' })}
-
+
- {tErrors('errorLoading', { entity: 'Action Items' })}
-
- {`${actionItemsError.message}`}
-
+
+
);
}
- 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 (
-
+
+ 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}
+
+
- {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)}
- />
-
- );
- },
- },
- ];
+ const actionItemCategories =
+ actionItemCategoriesData?.actionItemCategoriesByOrganization.filter(
+ (category) => !category.isDisabled,
+ );
+
+ const actionItemOnly = actionItemsData?.actionItemsByOrganization.filter(
+ (item) => item.event == null,
+ );
return (
-
- {/* Header with search, filter and Create Button */}
-
- {
@@ -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/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.tsx
similarity index 93%
rename from src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
rename to src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.tsx
index 884371d862..ed75456b9f 100644
--- a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
+++ b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.tsx
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
-import type { ChangeEvent, FC } from 'react';
+import type { ChangeEvent } 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';
@@ -16,10 +17,6 @@ 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.
*
@@ -27,14 +24,14 @@ interface InterfaceAgendaCategoryProps {
*
* @returns The rendered component.
*/
-
-const organizationAgendaCategory: FC = ({
- orgId,
-}) => {
+function organizationAgendaCategory(): JSX.Element {
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);
@@ -59,7 +56,7 @@ const organizationAgendaCategory: FC = ({
error?: unknown | undefined;
refetch: () => void;
} = useQuery(AGENDA_ITEM_CATEGORY_LIST, {
- variables: { organizationId: orgId },
+ variables: { organizationId: currentUrl },
notifyOnNetworkStatusChange: true,
});
@@ -84,7 +81,7 @@ const organizationAgendaCategory: FC = ({
await createAgendaCategory({
variables: {
input: {
- organizationId: orgId,
+ organizationId: currentUrl,
name: formState.name,
description: formState.description,
},
@@ -135,7 +132,7 @@ const organizationAgendaCategory: FC = ({
}
return (
-
- closeModal(ModalState.STATUS)}
- actionItemsRefetch={actionItemsRefetch}
+ {/* Create Modal */}
+ closeModal(ModalState.VIEW)}
- item={actionItem}
- />
- )}
);
}
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItemsErrorMocks.ts b/src/screens/OrganizationActionItems/OrganizationActionItemsErrorMocks.ts
new file mode 100644
index 0000000000..bedba6572b
--- /dev/null
+++ b/src/screens/OrganizationActionItems/OrganizationActionItemsErrorMocks.ts
@@ -0,0 +1,266 @@
+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/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.test.tsx
similarity index 100%
rename from src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx
rename to src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.test.tsx
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.tsx
similarity index 100%
rename from src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx
rename to src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.tsx
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryDeleteModal.tsx
similarity index 100%
rename from src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx
rename to src/screens/OrganizationAgendaCategory/AgendaCategoryDeleteModal.tsx
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryPreviewModal.tsx
similarity index 100%
rename from src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx
rename to src/screens/OrganizationAgendaCategory/AgendaCategoryPreviewModal.tsx
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.test.tsx
similarity index 100%
rename from src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx
rename to src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.test.tsx
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.tsx
similarity index 100%
rename from src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx
rename to src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.tsx
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.module.css
similarity index 100%
rename from src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css
rename to src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.module.css
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.test.tsx
similarity index 96%
rename from src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx
rename to src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.test.tsx
index e05edc665d..732db13a74 100644
--- a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx
+++ b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.test.tsx
@@ -76,7 +76,7 @@ describe('Testing Agenda Categories Component', () => {
- setSearchValue(e.target.value)}
- onKeyUp={(e) => {
- if (e.key === 'Enter') {
- setSearchTerm(searchValue);
- } else if (e.key === 'Backspace' && searchValue === '') {
- setSearchTerm('');
- }
- }}
- data-testid="searchBy"
- />
-
-
-
- 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) */} - closeModal(ModalState.SAME)}
- orgId={orgId}
- actionItemsRefetch={actionItemsRefetch}
- actionItem={actionItem}
- editMode={modalMode === 'edit'}
- />
-
- closeModal(ModalState.DELETE)}
- actionItem={actionItem}
- actionItemsRefetch={actionItemsRefetch}
- />
+
-
-
-
-
-
- setSearchBy('assignee')}
- data-testid="assignee"
- >
- {t('assignee')}
-
- setSearchBy('category')}
- data-testid="category"
- >
- {t('category')}
-
-
-
-
-
+
- {/* Table with Action Items */}
-
+
-
+
+
+ handleSorting('Latest')}
+ data-testid="latest"
+ >
+ {t('latest')}
+
+ handleSorting('Earliest')}
+ data-testid="earliest"
+ >
+ {t('earliest')}
+
+
+
+
+
-
- setStatus(null)}
- data-testid="statusAll"
- >
- {tCommon('all')}
-
- setStatus(ItemStatus.Pending)}
- data-testid="statusPending"
+
- {tCommon('pending')}
-
- setStatus(ItemStatus.Completed)}
- data-testid="statusCompleted"
+
+ {actionItemCategories?.map((category, index) => (
+ {
+ setActionItemCategoryId(category._id);
+ setActionItemCategoryName(category.name);
+ }}
+ >
+ {category.name}
+
+ ))}
+
+
+
+
+
- {tCommon('completed')}
-
-
-
-
-
+
-
- setSortBy('dueDate_DESC')}
- data-testid="dueDate_DESC"
+
- {t('latestDueDate')}
-
- setSortBy('dueDate_ASC')}
- data-testid="dueDate_ASC"
- >
- {t('earliestDueDate')}
-
-
-
-
-
+
+ {orderBy === 'Latest' ? t('latest') : t('earliest')}
+
+
+ {actionItemCategoryName === ''
+ ? t('actionItemCategory')
+ : actionItemCategoryName}
+
+
+ {t('actionItemCategory')}
+
+
+
+
+ handleStatusFilter('Active')}
+ data-testid="activeActionItems"
+ >
+ {t('active')}
+
+ handleStatusFilter('Completed')}
+ data-testid="completedActionItems"
+ >
+ {t('completed')}
+
+
+
+
+
+
+ {actionItemStatus === '' ? t('status') : actionItemStatus}
+
+ {t('status')}
+
+
+ {!actionItemCategoryName && !actionItemStatus && (
+
+
+
+ {tCommon('noFiltersApplied')}
+
+ )}
+
+ {actionItemCategoryName !== '' && (
+
+ {actionItemCategoryName}
+ {
+ setActionItemCategoryName('');
+ setActionItemCategoryId('');
+ }}
+ data-testid="clearActionItemCategoryFilter"
+ />
+
+ )}
+
+ {actionItemStatus !== '' && (
+
+ {actionItemStatus}
+ setActionItemStatus('')}
+ data-testid="clearActionItemStatusFilter"
+ />
+
+ )}
+ - {/* Item Modal (Create/Edit) */} -
+
=>
+ new Promise((resolve) => setTimeout(resolve, ms));
+
+describe('useSession Hook', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ jest.spyOn(window, 'addEventListener').mockImplementation(jest.fn());
+ jest.spyOn(window, 'removeEventListener').mockImplementation(jest.fn());
+ Object.defineProperty(global, 'localStorage', {
+ value: {
+ clear: jest.fn(),
+ },
+ writable: true,
+ });
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ jest.useRealTimers();
+ jest.restoreAllMocks();
+ });
+
+ test('should handle visibility change to visible', async () => {
+ jest.useFakeTimers();
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ Object.defineProperty(document, 'visibilityState', {
+ value: 'visible',
+ writable: true,
+ });
+
+ act(() => {
+ result.current.startSession();
+ });
+
+ // Simulate visibility change
+ act(() => {
+ document.dispatchEvent(new Event('visibilitychange'));
+ });
+
+ act(() => {
+ jest.advanceTimersByTime(15 * 60 * 1000);
+ });
+
+ await waitFor(() => {
+ expect(window.addEventListener).toHaveBeenCalledWith(
+ 'mousemove',
+ expect.any(Function),
+ );
+ expect(window.addEventListener).toHaveBeenCalledWith(
+ 'keydown',
+ expect.any(Function),
+ );
+ expect(toast.warning).toHaveBeenCalledWith('sessionWarning');
+ });
+
+ jest.useRealTimers();
+ });
+
+ test('should handle visibility change to hidden and ensure no warning appears in 15 minutes', async () => {
+ jest.useFakeTimers();
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ Object.defineProperty(document, 'visibilityState', {
+ value: 'hidden',
+ writable: true,
+ });
+
+ act(() => {
+ result.current.startSession();
+ });
+
+ act(() => {
+ document.dispatchEvent(new Event('visibilitychange'));
+ });
+
+ act(() => {
+ jest.advanceTimersByTime(15 * 60 * 1000);
+ });
+
+ await waitFor(() => {
+ expect(window.removeEventListener).toHaveBeenCalledWith(
+ 'mousemove',
+ expect.any(Function),
+ );
+ expect(window.removeEventListener).toHaveBeenCalledWith(
+ 'keydown',
+ expect.any(Function),
+ );
+ expect(toast.warning).not.toHaveBeenCalled();
+ });
+
+ jest.useRealTimers();
+ });
+
+ test('should register event listeners on startSession', async () => {
+ const addEventListenerMock = jest.fn();
+ const originalWindowAddEventListener = window.addEventListener;
+ const originalDocumentAddEventListener = document.addEventListener;
+
+ window.addEventListener = addEventListenerMock;
+ document.addEventListener = addEventListenerMock;
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ act(() => {
+ result.current.startSession();
+ });
+
+ expect(addEventListenerMock).toHaveBeenCalledWith(
+ 'mousemove',
+ expect.any(Function),
+ );
+ expect(addEventListenerMock).toHaveBeenCalledWith(
+ 'keydown',
+ expect.any(Function),
+ );
+ expect(addEventListenerMock).toHaveBeenCalledWith(
+ 'visibilitychange',
+ expect.any(Function),
+ );
+
+ window.addEventListener = originalWindowAddEventListener;
+ document.addEventListener = originalDocumentAddEventListener;
+ });
+
+ test('should call handleLogout after session timeout', async () => {
+ jest.useFakeTimers();
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ act(() => {
+ result.current.startSession();
+ });
+
+ act(() => {
+ jest.advanceTimersByTime(31 * 60 * 1000);
+ });
+
+ await waitFor(() => {
+ expect(global.localStorage.clear).toHaveBeenCalled();
+ expect(toast.warning).toHaveBeenCalledTimes(2);
+ expect(toast.warning).toHaveBeenNthCalledWith(1, 'sessionWarning');
+ expect(toast.warning).toHaveBeenNthCalledWith(2, 'sessionLogout', {
+ autoClose: false,
+ });
+ });
+ });
+
+ test('should show a warning toast before session expiration', async () => {
+ jest.useFakeTimers();
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ act(() => {
+ result.current.startSession();
+ });
+
+ act(() => {
+ jest.advanceTimersByTime(15 * 60 * 1000);
+ });
+
+ await waitFor(() =>
+ expect(toast.warning).toHaveBeenCalledWith('sessionWarning'),
+ );
+
+ jest.useRealTimers();
+ });
+
+ test('should handle error when revoking token fails', async () => {
+ const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+
+ const errorMocks = [
+ {
+ request: {
+ query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ },
+ result: {
+ data: {
+ getCommunityData: {
+ timeout: 30,
+ },
+ },
+ },
+ delay: 1000,
+ },
+ {
+ request: {
+ query: REVOKE_REFRESH_TOKEN,
+ },
+ error: new Error('Failed to revoke refresh token'),
+ },
+ ];
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ act(() => {
+ result.current.startSession();
+ result.current.handleLogout();
+ });
+
+ await waitFor(() =>
+ expect(consoleErrorMock).toHaveBeenCalledWith(
+ 'Error revoking refresh token:',
+ expect.any(Error),
+ ),
+ );
+
+ consoleErrorMock.mockRestore();
+ });
+
+ test('should set session timeout based on fetched data', async () => {
+ jest.spyOn(global, 'setTimeout');
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ act(() => {
+ result.current.startSession();
+ });
+
+ expect(global.setTimeout).toHaveBeenCalled();
+ });
+
+ test('should call errorHandler on query error', async () => {
+ const errorMocks = [
+ {
+ request: {
+ query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ },
+ error: new Error('An error occurred'),
+ },
+ ];
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ act(() => {
+ result.current.startSession();
+ });
+
+ await waitFor(() => expect(errorHandler).toHaveBeenCalled());
+ });
+ //dfghjkjhgfds
+
+ test('should remove event listeners on endSession', async () => {
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ // Mock the removeEventListener functions for both window and document
+ const removeEventListenerMock = jest.fn();
+
+ // Temporarily replace the real methods with the mock
+ const originalWindowRemoveEventListener = window.removeEventListener;
+ const originalDocumentRemoveEventListener = document.removeEventListener;
+
+ window.removeEventListener = removeEventListenerMock;
+ document.removeEventListener = removeEventListenerMock;
+
+ // await waitForNextUpdate();
+
+ act(() => {
+ result.current.startSession();
+ });
+
+ act(() => {
+ result.current.endSession();
+ });
+
+ // Test that event listeners were removed
+ expect(removeEventListenerMock).toHaveBeenCalledWith(
+ 'mousemove',
+ expect.any(Function),
+ );
+ expect(removeEventListenerMock).toHaveBeenCalledWith(
+ 'keydown',
+ expect.any(Function),
+ );
+ expect(removeEventListenerMock).toHaveBeenCalledWith(
+ 'visibilitychange',
+ expect.any(Function),
+ );
+
+ // Restore the original removeEventListener functions
+ window.removeEventListener = originalWindowRemoveEventListener;
+ document.removeEventListener = originalDocumentRemoveEventListener;
+ });
+
+ test('should call initialize timers when session is still active when the user returns to the tab', async () => {
+ jest.useFakeTimers();
+ jest.spyOn(global, 'setTimeout').mockImplementation(jest.fn());
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }) => (
+
+ {children}
+
+ ),
+ });
+
+ jest.advanceTimersByTime(1000);
+
+ // Set initial visibility state to visible
+ Object.defineProperty(document, 'visibilityState', {
+ value: 'visible',
+ writable: true,
+ });
+
+ // Start the session
+ act(() => {
+ result.current.startSession();
+ jest.advanceTimersByTime(10 * 60 * 1000); // Fast-forward
+ });
+
+ // Simulate the user leaving the tab (set visibility to hidden)
+ Object.defineProperty(document, 'visibilityState', {
+ value: 'hidden',
+ writable: true,
+ });
+
+ act(() => {
+ document.dispatchEvent(new Event('visibilitychange'));
+ });
+
+ // Fast-forward time by more than the session timeout
+ act(() => {
+ jest.advanceTimersByTime(5 * 60 * 1000); // Fast-forward
+ });
+
+ // Simulate the user returning to the tab
+ Object.defineProperty(document, 'visibilityState', {
+ value: 'visible',
+ writable: true,
+ });
+
+ act(() => {
+ document.dispatchEvent(new Event('visibilitychange'));
+ });
+
+ jest.advanceTimersByTime(1000);
+
+ expect(global.setTimeout).toHaveBeenCalled();
+
+ // Restore real timers
+ jest.useRealTimers();
+ });
+
+ test('should call handleLogout when session expires due to inactivity away from tab', async () => {
+ jest.useFakeTimers(); // Use fake timers to control time
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }) => (
+
+ {children}
+
+ ),
+ });
+
+ jest.advanceTimersByTime(1000);
+
+ // Set initial visibility state to visible
+ Object.defineProperty(document, 'visibilityState', {
+ value: 'visible',
+ writable: true,
+ });
+
+ // Start the session
+ act(() => {
+ result.current.startSession();
+ jest.advanceTimersByTime(10 * 60 * 1000); // Fast-forward
+ });
+
+ // Simulate the user leaving the tab (set visibility to hidden)
+ Object.defineProperty(document, 'visibilityState', {
+ value: 'hidden',
+ writable: true,
+ });
+
+ act(() => {
+ document.dispatchEvent(new Event('visibilitychange'));
+ });
+
+ // Fast-forward time by more than the session timeout
+ act(() => {
+ jest.advanceTimersByTime(32 * 60 * 1000); // Fast-forward by 32 minutes
+ });
+
+ // Simulate the user returning to the tab
+ Object.defineProperty(document, 'visibilityState', {
+ value: 'visible',
+ writable: true,
+ });
+
+ act(() => {
+ document.dispatchEvent(new Event('visibilitychange'));
+ });
+
+ jest.advanceTimersByTime(250);
+
+ await waitFor(() => {
+ expect(global.localStorage.clear).toHaveBeenCalled();
+ expect(toast.warning).toHaveBeenCalledWith('sessionLogout', {
+ autoClose: false,
+ });
+ });
+
+ // Restore real timers
+ jest.useRealTimers();
+ });
+
+ test('should handle logout and revoke token', async () => {
+ jest.useFakeTimers();
+
+ const { result } = renderHook(() => useSession(), {
+ wrapper: ({ children }: { children?: ReactNode }) => (
+
+ {children}
+
+ ),
+ });
+
+ act(() => {
+ result.current.startSession();
+ result.current.handleLogout();
+ });
+
+ await waitFor(() => {
+ expect(global.localStorage.clear).toHaveBeenCalled();
+ expect(toast.warning).toHaveBeenCalledWith('sessionLogout', {
+ autoClose: false,
+ });
+ });
+
+ jest.useRealTimers();
+ });
+});
diff --git a/src/utils/useSession.tsx b/src/utils/useSession.tsx
new file mode 100644
index 0000000000..4279e7c850
--- /dev/null
+++ b/src/utils/useSession.tsx
@@ -0,0 +1,164 @@
+import { useMutation, useQuery } from '@apollo/client';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
+import { t } from 'i18next';
+import { useEffect, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+
+type UseSessionReturnType = {
+ startSession: () => void;
+ endSession: () => void;
+ handleLogout: () => void;
+ extendSession: () => void; //for when logged in already, simply extend session
+};
+
+/**
+ * Custom hook for managing user session timeouts in a React application.
+ *
+ * This hook handles:
+ * - Starting and ending the user session.
+ * - Displaying a warning toast at half of the session timeout duration.
+ * - Logging the user out and displaying a session expiration toast when the session times out.
+ * - Automatically resetting the timers when user activity is detected.
+ * - Pausing session timers when the tab is inactive and resuming them when it becomes active again.
+ *
+ * @returns UseSessionReturnType - An object with methods to start and end the session, and to handle logout.
+ */
+const useSession = (): UseSessionReturnType => {
+ const { t: tCommon } = useTranslation('common');
+
+ let startTime: number;
+ let timeoutDuration: number;
+ const [sessionTimeout, setSessionTimeout] = useState(30);
+ // const sessionTimeout = 30;
+ const sessionTimerRef = useRef(null);
+ const warningTimerRef = useRef(null);
+ const navigate = useNavigate();
+
+ const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
+ const { data, error: queryError } = useQuery(
+ GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ );
+
+ useEffect(() => {
+ if (queryError) {
+ errorHandler(t, queryError as Error);
+ } else {
+ const sessionTimeoutData = data?.getCommunityData;
+ if (sessionTimeoutData) {
+ setSessionTimeout(sessionTimeoutData.timeout);
+ }
+ }
+ }, [data, queryError]);
+
+ const resetTimers = (): void => {
+ if (sessionTimerRef.current) clearTimeout(sessionTimerRef.current);
+ if (warningTimerRef.current) clearTimeout(warningTimerRef.current);
+ };
+
+ const endSession = (): void => {
+ resetTimers();
+ window.removeEventListener('mousemove', extendSession);
+ window.removeEventListener('keydown', extendSession);
+ document.removeEventListener('visibilitychange', handleVisibilityChange);
+ };
+
+ const handleLogout = async (): Promise => {
+ try {
+ await revokeRefreshToken();
+ } catch (error) {
+ console.error('Error revoking refresh token:', error);
+ // toast.error('Failed to revoke session. Please try again.');
+ }
+ localStorage.clear();
+ endSession();
+ navigate('/');
+ toast.warning(tCommon('sessionLogout'), { autoClose: false });
+ };
+
+ const initializeTimers = (
+ timeLeft?: number,
+ warningTimeLeft?: number,
+ ): void => {
+ const warningTime = warningTimeLeft ?? sessionTimeout / 2;
+ const sessionTimeoutInMilliseconds =
+ (timeLeft || sessionTimeout) * 60 * 1000;
+ const warningTimeInMilliseconds = warningTime * 60 * 1000;
+
+ timeoutDuration = sessionTimeoutInMilliseconds;
+ startTime = Date.now();
+
+ warningTimerRef.current = setTimeout(() => {
+ toast.warning(tCommon('sessionWarning'));
+ }, warningTimeInMilliseconds);
+
+ sessionTimerRef.current = setTimeout(async () => {
+ await handleLogout();
+ }, sessionTimeoutInMilliseconds);
+ };
+
+ const extendSession = (): void => {
+ resetTimers();
+ initializeTimers();
+ };
+
+ const startSession = (): void => {
+ resetTimers();
+ initializeTimers();
+ window.removeEventListener('mousemove', extendSession);
+ window.removeEventListener('keydown', extendSession);
+ document.removeEventListener('visibilitychange', handleVisibilityChange);
+ window.addEventListener('mousemove', extendSession);
+ window.addEventListener('keydown', extendSession);
+ document.addEventListener('visibilitychange', handleVisibilityChange);
+ };
+
+ const handleVisibilityChange = async (): Promise => {
+ if (document.visibilityState === 'hidden') {
+ window.removeEventListener('mousemove', extendSession);
+ window.removeEventListener('keydown', extendSession);
+ resetTimers(); // Optionally reset timers to prevent them from running in the background
+ } else if (document.visibilityState === 'visible') {
+ window.removeEventListener('mousemove', extendSession);
+ window.removeEventListener('keydown', extendSession); // Ensure no duplicates
+ window.addEventListener('mousemove', extendSession);
+ window.addEventListener('keydown', extendSession);
+
+ // Calculate remaining time now that the tab is active again
+ const elapsedTime = Date.now() - startTime;
+ const remainingTime = timeoutDuration - elapsedTime;
+
+ const remainingSessionTime = Math.max(remainingTime, 0); // Ensures the remaining time is non-negative and measured in ms;
+
+ if (remainingSessionTime > 0) {
+ // Calculate remaining warning time only if session time is positive
+ const remainingWarningTime = Math.max(remainingSessionTime / 2, 0);
+ initializeTimers(
+ remainingSessionTime / 60 / 1000,
+ remainingWarningTime / 60 / 1000,
+ );
+ } else {
+ // Handle session expiration immediately if time has run out
+ await handleLogout();
+ }
+ }
+ };
+
+ useEffect(() => {
+ return () => {
+ endSession();
+ };
+ }, []);
+
+ return {
+ startSession,
+ endSession,
+ handleLogout,
+ extendSession,
+ };
+};
+
+export default useSession;
@@ -182,6 +179,6 @@ const organizationAgendaCategory: FC = ({
/>
);
-};
+}
export default organizationAgendaCategory;
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryErrorMocks.ts
similarity index 100%
rename from src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts
rename to src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryErrorMocks.ts
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryMocks.ts
similarity index 100%
rename from src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts
rename to src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryMocks.ts
diff --git a/src/screens/UserPortal/Campaigns/Campaigns.test.tsx b/src/screens/UserPortal/Campaigns/Campaigns.test.tsx
index 17b7eec4d5..443d643cff 100644
--- a/src/screens/UserPortal/Campaigns/Campaigns.test.tsx
+++ b/src/screens/UserPortal/Campaigns/Campaigns.test.tsx
@@ -155,17 +155,14 @@ 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(() => {
- expect(detailContainer).toBeInTheDocument();
- expect(detailContainer2).toBeInTheDocument();
+ const detailContainer = screen.getByTestId('detailContainer1');
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');
@@ -294,6 +291,18 @@ 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);
@@ -309,16 +318,4 @@ 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/CampaignsMocks.ts b/src/screens/UserPortal/Campaigns/CampaignsMocks.ts
index f64401bca5..7b91fac025 100644
--- a/src/screens/UserPortal/Campaigns/CampaignsMocks.ts
+++ b/src/screens/UserPortal/Campaigns/CampaignsMocks.ts
@@ -1,63 +1,6 @@
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: {
@@ -230,7 +173,62 @@ export const MOCKS = [
},
},
},
- 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 EMPTY_MOCKS = [
@@ -251,7 +249,62 @@ export const EMPTY_MOCKS = [
},
},
},
- 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 USER_FUND_CAMPAIGNS_ERROR = [
@@ -268,5 +321,4 @@ export const USER_FUND_CAMPAIGNS_ERROR = [
},
error: new Error('Error fetching campaigns'),
},
- userDetailsQuery,
];
diff --git a/src/screens/UserPortal/Pledges/Pledge.test.tsx b/src/screens/UserPortal/Pledges/Pledge.test.tsx
index 3d5eef94c2..ecdd25a1d3 100644
--- a/src/screens/UserPortal/Pledges/Pledge.test.tsx
+++ b/src/screens/UserPortal/Pledges/Pledge.test.tsx
@@ -126,6 +126,20 @@ 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(() => {
@@ -338,18 +352,4 @@ 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 c7666987ff..9aa3780fbd 100644
--- a/src/screens/UserPortal/Pledges/PledgesMocks.ts
+++ b/src/screens/UserPortal/Pledges/PledgesMocks.ts
@@ -1,64 +1,11 @@
-import { DELETE_PLEDGE } from 'GraphQl/Mutations/PledgeMutation';
+import {
+ CREATE_PlEDGE,
+ DELETE_PLEDGE,
+ UPDATE_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: {
@@ -554,7 +501,62 @@ export const MOCKS = [
},
},
},
- 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 EMPTY_MOCKS = [
@@ -575,7 +577,6 @@ export const EMPTY_MOCKS = [
},
},
},
- userDetailsQuery,
];
export const USER_PLEDGES_ERROR = [
@@ -592,5 +593,4 @@ export const USER_PLEDGES_ERROR = [
},
error: new Error('Error fetching pledges'),
},
- userDetailsQuery,
];
diff --git a/src/state/reducers/routesReducer.test.ts b/src/state/reducers/routesReducer.test.ts
index 8bdc1c069b..8d8de8a5dd 100644
--- a/src/state/reducers/routesReducer.test.ts
+++ b/src/state/reducers/routesReducer.test.ts
@@ -17,6 +17,7 @@ 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',
@@ -69,6 +70,11 @@ 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' },
{
@@ -120,6 +126,7 @@ 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' },
@@ -169,6 +176,11 @@ 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' },
{
@@ -216,6 +228,7 @@ 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',
@@ -271,6 +284,11 @@ 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 5d50f5402d..878fe73099 100644
--- a/src/state/reducers/routesReducer.ts
+++ b/src/state/reducers/routesReducer.ts
@@ -77,6 +77,11 @@ 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/interfaces.ts b/src/utils/interfaces.ts
index 495234a5a1..3bdf2a7d98 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -11,8 +11,6 @@ export interface InterfaceActionItemCategoryInfo {
_id: string;
name: string;
isDisabled: boolean;
- createdAt: string;
- creator: { _id: string; firstName: string; lastName: string };
}
export interface InterfaceActionItemCategoryList {
@@ -25,20 +23,18 @@ 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 | null;
+ postCompletionNotes: string;
assignmentDate: Date;
dueDate: Date;
completionDate: Date;
@@ -46,13 +42,12 @@ export interface InterfaceActionItemInfo {
event: {
_id: string;
title: string;
- } | null;
+ };
creator: {
_id: string;
firstName: string;
lastName: string;
};
- allotedHours: number | null;
}
export interface InterfaceActionItemList {
@@ -566,8 +561,3 @@ export interface InterfaceAgendaItemList {
export interface InterfaceMapType {
[key: string]: string;
}
-
-export interface InterfaceCustomFieldData {
- type: string;
- name: string;
-}
diff --git a/src/utils/useSession.test.tsx b/src/utils/useSession.test.tsx
new file mode 100644
index 0000000000..32287ccbb0
--- /dev/null
+++ b/src/utils/useSession.test.tsx
@@ -0,0 +1,544 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { toast } from 'react-toastify';
+import useSession from './useSession';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import { errorHandler } from 'utils/errorHandler';
+import { BrowserRouter } from 'react-router-dom';
+
+jest.mock('react-toastify', () => ({
+ toast: {
+ info: jest.fn(),
+ warning: jest.fn(),
+ error: jest.fn(),
+ },
+}));
+
+jest.mock('utils/errorHandler', () => ({
+ errorHandler: jest.fn(),
+}));
+
+jest.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}));
+
+const MOCKS = [
+ {
+ request: {
+ query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+ },
+ result: {
+ data: {
+ getCommunityData: {
+ timeout: 30,
+ },
+ },
+ },
+ delay: 100,
+ },
+ {
+ request: {
+ query: REVOKE_REFRESH_TOKEN,
+ },
+ result: {
+ data: {
+ revokeRefreshTokenForUser: true,
+ },
+ },
+ },
+];
+
+const wait = (ms: number): Promise