From 11a89686d94a42323525ef7469d64f34d2dfd2e4 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Mon, 22 Apr 2024 10:57:12 -0400 Subject: [PATCH 1/4] Preventing React destroying the component tree on every render due to component types being recreated. Also updating lots of calls to Task Modal --- pages/accountLists/[accountListId].page.tsx | 5 +- .../tasks/[[...contactId]].page.tsx | 17 ++- .../ContactDetailsMoreActions.tsx | 9 +- .../ContactTaskRow/ContactTaskRow.tsx | 13 ++- .../ContactTasksTab/ContactTasksTab.tsx | 9 +- .../NullState/ContactTasksTabNullState.tsx | 5 +- .../Contacts/ContactFlow/ContactFlow.tsx | 3 +- .../ContactUncompletedTasksCount.tsx | 5 +- .../ThisWeek/PartnerCare/PartnerCare.tsx | 15 ++- .../TasksDueThisWeek/TasksDueThisWeek.tsx | 5 +- .../NavTools/AddMenuPanel/AddMenuPanel.tsx | 9 +- .../Primary/TopBar/Items/AddMenu/AddMenu.tsx | 9 +- .../Shared/Filters/NullState/NullState.tsx | 5 +- .../ContactsMassActionsDropdown.tsx | 9 +- .../Form/Complete/TaskModalCompleteForm.tsx | 3 +- .../Modal/Form/LogForm/TaskModalLogForm.tsx | 3 +- .../Task/Modal/Form/TaskModalForm.tsx | 3 +- src/components/Task/Modal/TaskModal.tsx | 107 +++++++++--------- .../Task/Modal/TaskModalProvider.tsx | 12 +- src/components/Task/Status/Status.tsx | 5 +- 20 files changed, 142 insertions(+), 109 deletions(-) diff --git a/pages/accountLists/[accountListId].page.tsx b/pages/accountLists/[accountListId].page.tsx index 5b0a6d93c..14a3394d4 100644 --- a/pages/accountLists/[accountListId].page.tsx +++ b/pages/accountLists/[accountListId].page.tsx @@ -9,6 +9,7 @@ import { AddMenuItemsEnum, renderDialog, } from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; import useTaskModal from 'src/hooks/useTaskModal'; import makeSsrClient from 'src/lib/apollo/ssrClient'; @@ -55,10 +56,10 @@ const AccountListIdPage = ({ setDialogOpen(true); break; case 'AddTask': - openTaskModal({ view: 'add' }); + openTaskModal({ view: TaskModalEnum.Add }); break; case 'AddLogTask': - openTaskModal({ view: 'log' }); + openTaskModal({ view: TaskModalEnum.Log }); break; } }, [modal]); diff --git a/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx index 4d8cac804..f5ccf7be9 100644 --- a/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx +++ b/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx @@ -22,6 +22,7 @@ import { ListHeader, headerHeight, } from 'src/components/Shared/Header/ListHeader'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { TaskRow } from 'src/components/Task/TaskRow/TaskRow'; import { TaskFilterSetInput } from 'src/graphql/types.generated'; import { useGetTaskIdsForMassSelectionQuery } from 'src/hooks/GetIdsForMassSelection.generated'; @@ -346,8 +347,12 @@ const TasksPage: React.FC = () => { buttonGroup={ openTaskModal({ view: 'add' })} - onMouseEnter={() => preloadTaskModal('add')} + onClick={() => + openTaskModal({ view: TaskModalEnum.Add }) + } + onMouseEnter={() => + preloadTaskModal(TaskModalEnum.Add) + } variant="text" startIcon={} > @@ -355,8 +360,12 @@ const TasksPage: React.FC = () => { {t('Add Task')} openTaskModal({ view: 'log' })} - onMouseEnter={() => preloadTaskModal('log')} + onClick={() => + openTaskModal({ view: TaskModalEnum.Log }) + } + onMouseEnter={() => + preloadTaskModal(TaskModalEnum.Log) + } variant="text" startIcon={} > diff --git a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx index ef6fad0d2..859205973 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx @@ -22,6 +22,7 @@ import { DynamicCreateMultipleContacts, preloadCreateMultipleContacts, } from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/Items/CreateMultipleContacts/DynamicCreateMultipleContacts'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { StatusEnum } from 'src/graphql/types.generated'; import useTaskModal from '../../../../../hooks/useTaskModal'; import Modal from '../../../../common/Modal/Modal'; @@ -230,12 +231,12 @@ export const ContactDetailsMoreAcitions: React.FC< icon: , onClick: () => { openTaskModal({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: [contactId] }, }); setAnchorEl(undefined); }, - onMouseEnter: () => preloadTaskModal('add'), + onMouseEnter: () => preloadTaskModal(TaskModalEnum.Add), }, { visibility: true, @@ -243,12 +244,12 @@ export const ContactDetailsMoreAcitions: React.FC< icon: , onClick: () => { openTaskModal({ - view: 'log', + view: TaskModalEnum.Log, defaultValues: { contactIds: [contactId] }, }); setAnchorEl(undefined); }, - onMouseEnter: () => preloadTaskModal('log'), + onMouseEnter: () => preloadTaskModal(TaskModalEnum.Log), }, { visibility: status !== StatusEnum.NeverAsk, diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.tsx index 7f36f2ed3..897d7c50e 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.tsx @@ -3,6 +3,7 @@ import { Box, Checkbox, Skeleton, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; import { DateTime } from 'luxon'; import { useTranslation } from 'react-i18next'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import useTaskModal from 'src/hooks/useTaskModal'; import { getLocalizedTaskType } from 'src/utils/functions/getLocalizedTaskType'; import theme from '../../../../../theme'; @@ -106,21 +107,21 @@ export const ContactTaskRow: React.FC = ({ openTaskModal({ taskId: task?.id, showCompleteForm: true, - view: 'complete', + view: TaskModalEnum.Complete, }); }; const handleCommentButtonPressed = () => { openTaskModal({ taskId: task?.id, - view: 'comments', + view: TaskModalEnum.Comments, }); }; const handleSubjectPressed = () => { openTaskModal({ taskId: task?.id, - view: 'edit', + view: TaskModalEnum.Edit, }); }; @@ -166,12 +167,12 @@ export const ContactTaskRow: React.FC = ({ preloadTaskModal('complete')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Complete)} /> preloadTaskModal('edit')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Edit)} > {getLocalizedTaskType(t, activityType)} {subject} @@ -186,7 +187,7 @@ export const ContactTaskRow: React.FC = ({ isComplete={isComplete} numberOfComments={comments?.totalCount} onClick={handleCommentButtonPressed} - onMouseEnter={() => preloadTaskModal('comments')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Comments)} detailsPage /> diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx index b48380af5..8cec33a24 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx @@ -9,6 +9,7 @@ import { InfiniteList } from 'src/components/InfiniteList/InfiniteList'; import { ListHeaderCheckBoxState } from 'src/components/Shared/Header/ListHeader'; import { StarFilterButton } from 'src/components/Shared/Header/StarFilterButton/StarFilterButton'; import { TasksMassActionsDropdown } from 'src/components/Shared/MassActions/TasksMassActionsDropdown'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { TaskFilterSetInput } from 'src/graphql/types.generated'; import { useGetTaskIdsForMassSelectionQuery } from 'src/hooks/GetIdsForMassSelection.generated'; import useTaskModal from 'src/hooks/useTaskModal'; @@ -161,11 +162,11 @@ export const ContactTasksTab: React.FC = ({ openTaskModal({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: [contactId] }, }) } - onMouseEnter={() => preloadTaskModal('add')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Add)} > {t('add task')} @@ -173,14 +174,14 @@ export const ContactTasksTab: React.FC = ({ openTaskModal({ - view: 'log', + view: TaskModalEnum.Log, defaultValues: { completedAt: DateTime.local().toISO(), contactIds: [contactId], }, }) } - onMouseEnter={() => preloadTaskModal('log')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Log)} > {t('log task')} diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/NullState/ContactTasksTabNullState.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/NullState/ContactTasksTabNullState.tsx index 14c1be4c5..55b9e2c3f 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/NullState/ContactTasksTabNullState.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/NullState/ContactTasksTabNullState.tsx @@ -5,6 +5,7 @@ import { Button, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; import { NullStateBox } from 'src/components/Shared/Filters/NullState/NullStateBox'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import useTaskModal from 'src/hooks/useTaskModal'; const AddTaskButton = styled(Button)(({ theme }) => ({ @@ -39,11 +40,11 @@ export const ContactTasksTabNullState: React.FC< variant="contained" onClick={() => openTaskModal({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: [contactId] }, }) } - onMouseEnter={() => preloadTaskModal('add')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Add)} > {t('Add New Task')} diff --git a/src/components/Contacts/ContactFlow/ContactFlow.tsx b/src/components/Contacts/ContactFlow/ContactFlow.tsx index 13f571d1e..0e48b3dfa 100644 --- a/src/components/Contacts/ContactFlow/ContactFlow.tsx +++ b/src/components/Contacts/ContactFlow/ContactFlow.tsx @@ -5,6 +5,7 @@ import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { useTranslation } from 'react-i18next'; import { ContactsDocument } from 'pages/accountLists/[accountListId]/contacts/Contacts.generated'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { ActivityTypeEnum, ContactFilterSetInput, @@ -123,7 +124,7 @@ export const ContactFlow: React.FC = ({ }); if (status.id && taskStatuses[status.id]) { openTaskModal({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { activityType: taskStatuses[status.id], contactIds: [id], diff --git a/src/components/Contacts/ContactUncompletedTasksCount/ContactUncompletedTasksCount.tsx b/src/components/Contacts/ContactUncompletedTasksCount/ContactUncompletedTasksCount.tsx index 9235b3561..1226e4fa7 100644 --- a/src/components/Contacts/ContactUncompletedTasksCount/ContactUncompletedTasksCount.tsx +++ b/src/components/Contacts/ContactUncompletedTasksCount/ContactUncompletedTasksCount.tsx @@ -3,6 +3,7 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; import { Box, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import useTaskModal from 'src/hooks/useTaskModal'; interface ContactUncompletedTasksCountProps { @@ -29,13 +30,13 @@ export const ContactUncompletedTasksCount: React.FC< titleAccess={t('Log Task')} onClick={() => openTaskModal({ - view: 'log', + view: TaskModalEnum.Log, defaultValues: { contactIds: [contactId], }, }) } - onMouseEnter={() => preloadTaskModal('log')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Log)} /> { - openTaskModal({ taskId, view: 'edit' }); + openTaskModal({ taskId, view: TaskModalEnum.Edit }); }; const handleChange = ( @@ -164,7 +165,7 @@ const PartnerCare = ({ GetThisWeekQuery['reportsPeopleWithBirthdays']['periods'][0]['people'][0], ) => { openTaskModal({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: [person.parentContact.id], subject: @@ -178,7 +179,11 @@ const PartnerCare = ({ const handleCompleteClick = ({ id: taskId, }: GetThisWeekQuery['prayerRequestTasks']['nodes'][0]): void => { - openTaskModal({ taskId, showCompleteForm: true, view: 'complete' }); + openTaskModal({ + taskId, + showCompleteForm: true, + view: TaskModalEnum.Complete, + }); }; const mergedBirthdays = @@ -467,7 +472,9 @@ const PartnerCare = ({ person, ) } - onMouseEnter={() => preloadTaskModal('add')} + onMouseEnter={() => + preloadTaskModal(TaskModalEnum.Add) + } > diff --git a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx index 62fb05e3e..61357fd7a 100644 --- a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx +++ b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx @@ -19,6 +19,7 @@ import { DateTime } from 'luxon'; import { useTranslation } from 'react-i18next'; import { makeStyles } from 'tss-react/mui'; import { useLoadConstantsQuery } from 'src/components/Constants/LoadConstants.generated'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { ActivityTypeEnum } from 'src/graphql/types.generated'; import { useLocale } from 'src/hooks/useLocale'; import useTaskModal from 'src/hooks/useTaskModal'; @@ -96,7 +97,7 @@ const TasksDueThisWeek = ({ const handleClick = ({ id: taskId, }: GetThisWeekQuery['dueTasks']['nodes'][0]): void => { - openTaskModal({ taskId, view: 'edit' }); + openTaskModal({ taskId, view: TaskModalEnum.Edit }); }; return ( @@ -156,7 +157,7 @@ const TasksDueThisWeek = ({ button data-testid={`TasksDueThisWeekListItem-${task.id}`} onClick={(): void => handleClick(task)} - onMouseEnter={() => preloadTaskModal('edit')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Edit)} > { text: 'Add Task', icon: ListIcon, onClick: () => { - openTaskModal({ view: 'add' }); + openTaskModal({ view: TaskModalEnum.Add }); }, - onMouseEnter: () => preloadTaskModal('add'), + onMouseEnter: () => preloadTaskModal(TaskModalEnum.Add), }, { text: 'Log Task', icon: EditIcon, onClick: () => { - openTaskModal({ view: 'log' }); + openTaskModal({ view: TaskModalEnum.Log }); }, - onMouseEnter: () => preloadTaskModal('log'), + onMouseEnter: () => preloadTaskModal(TaskModalEnum.Log), }, ]; diff --git a/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx index bab5c0624..c853712bf 100644 --- a/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx @@ -8,6 +8,7 @@ import PersonIcon from '@mui/icons-material/Person'; import { Box, IconButton, ListItemText, Menu, MenuItem } from '@mui/material'; import { styled } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { useAccountListId } from '../../../../../../hooks/useAccountListId'; import useTaskModal from '../../../../../../hooks/useTaskModal'; import Modal from '../../../../../common/Modal/Modal'; @@ -224,19 +225,19 @@ const AddMenu = ({ isInDrawer = false }: AddMenuProps): ReactElement => { text: 'Add Task', icon: , onClick: () => { - openTaskModal({ view: 'add' }); + openTaskModal({ view: TaskModalEnum.Add }); setAnchorEl(undefined); }, - onMouseEnter: () => preloadTaskModal('add'), + onMouseEnter: () => preloadTaskModal(TaskModalEnum.Add), }, { text: 'Log Task', icon: , onClick: () => { - openTaskModal({ view: 'log' }); + openTaskModal({ view: TaskModalEnum.Log }); setAnchorEl(undefined); }, - onMouseEnter: () => preloadTaskModal('log'), + onMouseEnter: () => preloadTaskModal(TaskModalEnum.Log), }, ]; diff --git a/src/components/Shared/Filters/NullState/NullState.tsx b/src/components/Shared/Filters/NullState/NullState.tsx index 2cf47e14d..c38d576ae 100644 --- a/src/components/Shared/Filters/NullState/NullState.tsx +++ b/src/components/Shared/Filters/NullState/NullState.tsx @@ -4,6 +4,7 @@ import Icon from '@mdi/react'; import { Box, Button, Typography } from '@mui/material'; import { Trans, useTranslation } from 'react-i18next'; import { preloadCreateContact } from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/Items/CreateContact/DynamicCreateContact'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { ContactFilterSetInput, TaskFilterSetInput, @@ -26,7 +27,7 @@ const CreateButton: React.FC = ({ page }) => { const handleCreateClick = () => { if (page === 'task') { - openTaskModal({ view: 'add' }); + openTaskModal({ view: TaskModalEnum.Add }); } else { setContactsDialogOpen(true); } @@ -34,7 +35,7 @@ const CreateButton: React.FC = ({ page }) => { const handleCreateHover = () => { if (page === 'task') { - preloadTaskModal('add'); + preloadTaskModal(TaskModalEnum.Add); } else { preloadCreateContact(); } diff --git a/src/components/Shared/MassActions/ContactsMassActionsDropdown.tsx b/src/components/Shared/MassActions/ContactsMassActionsDropdown.tsx index 580adabe9..64670756d 100644 --- a/src/components/Shared/MassActions/ContactsMassActionsDropdown.tsx +++ b/src/components/Shared/MassActions/ContactsMassActionsDropdown.tsx @@ -38,6 +38,7 @@ import { DynamicMassActionsRemoveTagsModal, preloadMassActionsRemoveTagsModal, } from 'src/components/Contacts/MassActions/RemoveTags/DynamicMassActionsRemoveTagsModal'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { StatusEnum } from 'src/graphql/types.generated'; import useTaskModal from 'src/hooks/useTaskModal'; import { useAccountListId } from '../../../hooks/useAccountListId'; @@ -193,12 +194,12 @@ export const ContactsMassActionsDropdown: React.FC< { openTaskModal({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: selectedIds }, }); handleClose(); }} - onMouseEnter={() => preloadTaskModal('add')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Add)} > {t('Add Task')} @@ -206,12 +207,12 @@ export const ContactsMassActionsDropdown: React.FC< divider onClick={() => { openTaskModal({ - view: 'log', + view: TaskModalEnum.Log, defaultValues: { contactIds: selectedIds }, }); handleClose(); }} - onMouseEnter={() => preloadTaskModal('log')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Log)} > {t('Log Task')} diff --git a/src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.tsx b/src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.tsx index b6cf1db98..9ba10acb8 100644 --- a/src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.tsx +++ b/src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.tsx @@ -30,6 +30,7 @@ import { getLocalizedTaskType } from 'src/utils/functions/getLocalizedTaskType'; import useTaskModal from '../../../../../hooks/useTaskModal'; import { DateTimeFieldPair } from '../../../../common/DateTimePickers/DateTimeFieldPair'; import { useCreateTaskCommentMutation } from '../../Comments/Form/CreateTaskComment.generated'; +import { TaskModalEnum } from '../../TaskModal'; import { GetTaskForTaskModalQuery } from '../../TaskModalTask.generated'; import { FormFieldsGridContainer } from '../Container/FormFieldsGridContainer'; import { ActivityTypeAutocomplete } from '../Inputs/ActivityTypeAutocomplete/ActivityTypeAutocomplete'; @@ -124,7 +125,7 @@ const TaskModalCompleteForm = ({ onClose(); if (attributes.nextAction) { openTaskModal({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { subject: task.subject, activityType: attributes.nextAction, diff --git a/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx b/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx index d6ac9890b..eb5e1aa92 100644 --- a/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx +++ b/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.tsx @@ -40,6 +40,7 @@ import { dispatch } from 'src/lib/analytics'; import { nullableDateTime } from 'src/lib/formikHelpers'; import { getLocalizedResultString } from 'src/utils/functions/getLocalizedResultStrings'; import { DateTimeFieldPair } from '../../../../common/DateTimePickers/DateTimeFieldPair'; +import { TaskModalEnum } from '../../TaskModal'; import { FormFieldsGridContainer } from '../Container/FormFieldsGridContainer'; import { ActivityTypeAutocomplete } from '../Inputs/ActivityTypeAutocomplete/ActivityTypeAutocomplete'; import { AssigneeAutocomplete } from '../Inputs/ActivityTypeAutocomplete/AssigneeAutocomplete/AssigneeAutocomplete'; @@ -138,7 +139,7 @@ const TaskModalLogForm = ({ onClose(); if (attributes.nextAction) { openTaskModal({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { subject: attributes.subject, activityType: attributes.nextAction, diff --git a/src/components/Task/Modal/Form/TaskModalForm.tsx b/src/components/Task/Modal/Form/TaskModalForm.tsx index 62436ca62..25ce341ee 100644 --- a/src/components/Task/Modal/Form/TaskModalForm.tsx +++ b/src/components/Task/Modal/Form/TaskModalForm.tsx @@ -50,6 +50,7 @@ import { import { getLocalizedResultString } from 'src/utils/functions/getLocalizedResultStrings'; import theme from '../../../../theme'; import { DateTimeFieldPair } from '../../../common/DateTimePickers/DateTimeFieldPair'; +import { TaskModalEnum } from '../TaskModal'; import { GetTaskForTaskModalQuery } from '../TaskModalTask.generated'; import { FormFieldsGridContainer } from './Container/FormFieldsGridContainer'; import { ActivityTypeAutocomplete } from './Inputs/ActivityTypeAutocomplete/ActivityTypeAutocomplete'; @@ -198,7 +199,7 @@ const TaskModalForm = ({ onClose(); if (attributes.nextAction && attributes.nextAction !== task?.nextAction) { openTaskModal({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { subject: attributes.subject, activityType: attributes.nextAction, diff --git a/src/components/Task/Modal/TaskModal.tsx b/src/components/Task/Modal/TaskModal.tsx index fc5c8a5c0..b3f3d334f 100644 --- a/src/components/Task/Modal/TaskModal.tsx +++ b/src/components/Task/Modal/TaskModal.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useState } from 'react'; +import React, { ReactElement, useMemo, useState } from 'react'; import { DialogContent, Typography } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { TaskCreateInput, TaskUpdateInput } from 'src/graphql/types.generated'; @@ -11,10 +11,17 @@ import { DynamicTaskModalForm } from './Form/DynamicTaskModalForm'; import { DynamicTaskModalLogForm } from './Form/LogForm/DynamicTaskModalLogForm'; import { useGetTaskForTaskModalQuery } from './TaskModalTask.generated'; +export enum TaskModalEnum { + Comments = 'comments', + Log = 'log', + Add = 'add', + Complete = 'complete', + Edit = 'edit', +} export interface TaskModalProps { taskId?: string; onClose?: () => void; - view: 'comments' | 'log' | 'add' | 'complete' | 'edit'; + view: TaskModalEnum; showCompleteForm?: boolean; defaultValues?: Partial; } @@ -32,7 +39,7 @@ const TaskModal = ({ variables: { accountListId: accountListId ?? '', taskId: taskId ?? '', - includeComments: view === 'comments', + includeComments: view === TaskModalEnum.Comments, }, skip: !taskId, onCompleted: () => setOpen(true), @@ -45,69 +52,63 @@ const TaskModal = ({ const task = data?.task; - const renderTitle = (): string => { + const title = useMemo((): string => { switch (view) { - case 'complete': + case TaskModalEnum.Complete: return t('Complete Task'); - case 'comments': + case TaskModalEnum.Comments: return t('Task Comments'); - case 'log': + case TaskModalEnum.Log: return t('Log Task'); - case 'edit': + case TaskModalEnum.Edit: return t('Edit Task'); default: return t('Add Task'); } - }; - - const renderView = (): ReactElement => { - switch (view) { - case 'complete': - if (task) { - return ( - - ); - } - case 'comments': - return ( - - ); - case 'log': - return ( - - ); - default: - return ( - - ); - } - }; + }, [view]); return loading ? ( ) : ( - + {accountListId ? ( - renderView() + <> + {view === TaskModalEnum.Complete && task && ( + + )} + {view === TaskModalEnum.Comments && ( + + )} + {view === TaskModalEnum.Log && ( + + )} + {[ + TaskModalEnum.Complete, + TaskModalEnum.Comments, + TaskModalEnum.Log, + ].indexOf(view) === -1 && ( + + )} + ) : ( diff --git a/src/components/Task/Modal/TaskModalProvider.tsx b/src/components/Task/Modal/TaskModalProvider.tsx index 82155a040..3f9170194 100644 --- a/src/components/Task/Modal/TaskModalProvider.tsx +++ b/src/components/Task/Modal/TaskModalProvider.tsx @@ -5,7 +5,7 @@ import { preloadTaskModalCommentsList } from './Comments/DynamicTaskModalComment import { preloadTaskModalCompleteForm } from './Form/Complete/DynamicTaskModalCompleteForm'; import { preloadTaskModalForm } from './Form/DynamicTaskModalForm'; import { preloadTaskModalLogForm } from './Form/LogForm/DynamicTaskModalLogForm'; -import TaskModal, { TaskModalProps } from './TaskModal'; +import TaskModal, { TaskModalEnum, TaskModalProps } from './TaskModal'; import TaskModalContext from './TaskModalContext'; interface Props { @@ -14,7 +14,7 @@ interface Props { export interface TaskModalProviderContext { openTaskModal: (props: TaskModalProps) => void; - preloadTaskModal: (view: TaskModalProps['view']) => void; + preloadTaskModal: (view: TaskModalEnum) => void; taskModals: TaskModalPropsWithId[]; } @@ -53,12 +53,12 @@ const TaskModalProvider = ({ children }: Props): ReactElement => { ]); } }; - const preloadTaskModal = (view: TaskModalProps['view']) => { - if (view === 'complete') { + const preloadTaskModal = (view: TaskModalEnum) => { + if (view === TaskModalEnum.Complete) { preloadTaskModalCompleteForm(); - } else if (view === 'comments') { + } else if (view === TaskModalEnum.Comments) { preloadTaskModalCommentsList(); - } else if (view === 'log') { + } else if (view === TaskModalEnum.Log) { preloadTaskModalLogForm(); } else { preloadTaskModalForm(); diff --git a/src/components/Task/Status/Status.tsx b/src/components/Task/Status/Status.tsx index b63929750..479645d70 100644 --- a/src/components/Task/Status/Status.tsx +++ b/src/components/Task/Status/Status.tsx @@ -7,6 +7,7 @@ import { DateTime } from 'luxon'; import { useTranslation } from 'react-i18next'; import { makeStyles } from 'tss-react/mui'; import useTaskModal from 'src/hooks/useTaskModal'; +import { TaskModalEnum } from '../Modal/TaskModal'; const TaskCompleteButton = styled(IconButton)(({ theme }) => ({ border: `2px solid ${theme.palette.mpdxGreen.main}`, @@ -107,13 +108,13 @@ const CompleteButton = ({ const handleClick = ( event: React.MouseEvent, ): void => { - taskId && openTaskModal({ taskId, view: 'complete' }); + taskId && openTaskModal({ taskId, view: TaskModalEnum.Complete }); event.stopPropagation(); }; return ( preloadTaskModal('complete')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Complete)} > From 9088c3d5053cfdd4c4822cbb986999353fdaf69d Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Mon, 22 Apr 2024 10:57:40 -0400 Subject: [PATCH 2/4] Fix imports --- .../ContactDetailsMoreActions.tsx | 4 ++-- .../ContactTaskRow/ContactTaskRow.tsx | 6 +++--- .../ContactTasksTab/ContactTasksTab.tsx | 4 ++-- .../ThisWeek/PartnerCare/PartnerCare.tsx | 8 ++++---- .../TasksDueThisWeek/TasksDueThisWeek.tsx | 6 +++--- .../NavBar/NavTools/AddMenuPanel/AddMenuPanel.tsx | 6 +++--- .../Primary/TopBar/Items/AddMenu/AddMenu.tsx | 6 +++--- .../Shared/Filters/NullState/NullState.tsx | 12 ++++++------ src/components/Task/Modal/TaskModal.tsx | 2 +- src/components/Task/TaskRow/TaskRow.tsx | 15 ++++++++------- 10 files changed, 35 insertions(+), 34 deletions(-) diff --git a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx index 859205973..dddf16a65 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx @@ -23,9 +23,9 @@ import { preloadCreateMultipleContacts, } from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/Items/CreateMultipleContacts/DynamicCreateMultipleContacts'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; +import Modal from 'src/components/common/Modal/Modal'; import { StatusEnum } from 'src/graphql/types.generated'; -import useTaskModal from '../../../../../hooks/useTaskModal'; -import Modal from '../../../../common/Modal/Modal'; +import useTaskModal from 'src/hooks/useTaskModal'; import { ContactDetailContext, ContactDetailsType, diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.tsx index 897d7c50e..5a7cb9b69 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.tsx @@ -4,11 +4,11 @@ import { styled } from '@mui/material/styles'; import { DateTime } from 'luxon'; import { useTranslation } from 'react-i18next'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; +import { TaskRowFragment } from 'src/components/Task/TaskRow/TaskRow.generated'; +import { StarredItemIcon } from 'src/components/common/StarredItemIcon/StarredItemIcon'; import useTaskModal from 'src/hooks/useTaskModal'; +import theme from 'src/theme'; import { getLocalizedTaskType } from 'src/utils/functions/getLocalizedTaskType'; -import theme from '../../../../../theme'; -import { TaskRowFragment } from '../../../../Task/TaskRow/TaskRow.generated'; -import { StarredItemIcon } from '../../../../common/StarredItemIcon/StarredItemIcon'; import { DeleteTaskIconButton } from '../DeleteTaskIconButton/DeleteTaskIconButton'; import { StarTaskIconButton } from '../StarTaskIconButton/StarTaskIconButton'; import { TaskCommentsButton } from './TaskCommentsButton/TaskCommentsButton'; diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx index 8cec33a24..f98c02e06 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx @@ -10,11 +10,11 @@ import { ListHeaderCheckBoxState } from 'src/components/Shared/Header/ListHeader import { StarFilterButton } from 'src/components/Shared/Header/StarFilterButton/StarFilterButton'; import { TasksMassActionsDropdown } from 'src/components/Shared/MassActions/TasksMassActionsDropdown'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; +import { SearchBox } from 'src/components/common/SearchBox/SearchBox'; import { TaskFilterSetInput } from 'src/graphql/types.generated'; import { useGetTaskIdsForMassSelectionQuery } from 'src/hooks/GetIdsForMassSelection.generated'; +import { useMassSelection } from 'src/hooks/useMassSelection'; import useTaskModal from 'src/hooks/useTaskModal'; -import { useMassSelection } from '../../../../hooks/useMassSelection'; -import { SearchBox } from '../../../common/SearchBox/SearchBox'; import { ContactTaskRow } from './ContactTaskRow/ContactTaskRow'; import { useContactTasksTabQuery } from './ContactTasksTab.generated'; import { ContactTasksTabNullState } from './NullState/ContactTasksTabNullState'; diff --git a/src/components/Dashboard/ThisWeek/PartnerCare/PartnerCare.tsx b/src/components/Dashboard/ThisWeek/PartnerCare/PartnerCare.tsx index fa1e9e977..24bfc982d 100644 --- a/src/components/Dashboard/ThisWeek/PartnerCare/PartnerCare.tsx +++ b/src/components/Dashboard/ThisWeek/PartnerCare/PartnerCare.tsx @@ -25,15 +25,15 @@ import { import { styled } from '@mui/material/styles'; import { motion } from 'framer-motion'; import { useTranslation } from 'react-i18next'; +import AnimatedCard from 'src/components/AnimatedCard'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { Contact, PersonWithParentContact } from 'src/graphql/types.generated'; import { useLocale } from 'src/hooks/useLocale'; import useTaskModal from 'src/hooks/useTaskModal'; +import illustration4 from 'src/images/drawkit/grape/drawkit-grape-pack-illustration-4.svg'; +import illustration7 from 'src/images/drawkit/grape/drawkit-grape-pack-illustration-7.svg'; +import { dayMonthFormat, numberFormat } from 'src/lib/intlFormat'; import theme from 'src/theme'; -import illustration4 from '../../../../images/drawkit/grape/drawkit-grape-pack-illustration-4.svg'; -import illustration7 from '../../../../images/drawkit/grape/drawkit-grape-pack-illustration-7.svg'; -import { dayMonthFormat, numberFormat } from '../../../../lib/intlFormat'; -import AnimatedCard from '../../../AnimatedCard'; import { GetThisWeekQuery } from '../GetThisWeek.generated'; const CardContainer = styled(AnimatedCard)(({ theme }) => ({ diff --git a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx index 61357fd7a..0f6ffd716 100644 --- a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx +++ b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx @@ -18,16 +18,16 @@ import { motion } from 'framer-motion'; import { DateTime } from 'luxon'; import { useTranslation } from 'react-i18next'; import { makeStyles } from 'tss-react/mui'; +import AnimatedCard from 'src/components/AnimatedCard'; import { useLoadConstantsQuery } from 'src/components/Constants/LoadConstants.generated'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; +import TaskStatus from 'src/components/Task/Status'; import { ActivityTypeEnum } from 'src/graphql/types.generated'; import { useLocale } from 'src/hooks/useLocale'; import useTaskModal from 'src/hooks/useTaskModal'; +import illustration8 from 'src/images/drawkit/grape/drawkit-grape-pack-illustration-8.svg'; import { numberFormat } from 'src/lib/intlFormat'; import { constantIdFromActivityType } from 'src/utils/tasks/taskActivity'; -import illustration8 from '../../../../images/drawkit/grape/drawkit-grape-pack-illustration-8.svg'; -import AnimatedCard from '../../../AnimatedCard'; -import TaskStatus from '../../../Task/Status'; import { GetThisWeekQuery } from '../GetThisWeek.generated'; const useStyles = makeStyles()((theme: Theme) => ({ diff --git a/src/components/Layouts/Primary/NavBar/NavTools/AddMenuPanel/AddMenuPanel.tsx b/src/components/Layouts/Primary/NavBar/NavTools/AddMenuPanel/AddMenuPanel.tsx index de85dd8de..c71833819 100644 --- a/src/components/Layouts/Primary/NavBar/NavTools/AddMenuPanel/AddMenuPanel.tsx +++ b/src/components/Layouts/Primary/NavBar/NavTools/AddMenuPanel/AddMenuPanel.tsx @@ -11,11 +11,11 @@ import { AddMenuItemsEnum, renderDialog, } from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu'; +import { preloadAddDonation } from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/Items/AddDonation/DynamicAddDonation'; +import { preloadCreateContact } from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/Items/CreateContact/DynamicCreateContact'; +import { preloadCreateMultipleContacts } from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/Items/CreateMultipleContacts/DynamicCreateMultipleContacts'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import useTaskModal from 'src/hooks/useTaskModal'; -import { preloadAddDonation } from '../../../TopBar/Items/AddMenu/Items/AddDonation/DynamicAddDonation'; -import { preloadCreateContact } from '../../../TopBar/Items/AddMenu/Items/CreateContact/DynamicCreateContact'; -import { preloadCreateMultipleContacts } from '../../../TopBar/Items/AddMenu/Items/CreateMultipleContacts/DynamicCreateMultipleContacts'; import { LeafButton, LeafListItem, Title } from '../../StyledComponents'; type MenuContent = { diff --git a/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx index c853712bf..8c454de29 100644 --- a/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx @@ -9,9 +9,9 @@ import { Box, IconButton, ListItemText, Menu, MenuItem } from '@mui/material'; import { styled } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; -import { useAccountListId } from '../../../../../../hooks/useAccountListId'; -import useTaskModal from '../../../../../../hooks/useTaskModal'; -import Modal from '../../../../../common/Modal/Modal'; +import Modal from 'src/components/common/Modal/Modal'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import useTaskModal from 'src/hooks/useTaskModal'; import { DynamicAddDonation, preloadAddDonation, diff --git a/src/components/Shared/Filters/NullState/NullState.tsx b/src/components/Shared/Filters/NullState/NullState.tsx index c38d576ae..18057b330 100644 --- a/src/components/Shared/Filters/NullState/NullState.tsx +++ b/src/components/Shared/Filters/NullState/NullState.tsx @@ -3,18 +3,18 @@ import { mdiFormatListBulleted, mdiHome } from '@mdi/js'; import Icon from '@mdi/react'; import { Box, Button, Typography } from '@mui/material'; import { Trans, useTranslation } from 'react-i18next'; +import { + AddMenuItemsEnum, + renderDialog, +} from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu'; import { preloadCreateContact } from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/Items/CreateContact/DynamicCreateContact'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { ContactFilterSetInput, TaskFilterSetInput, } from 'src/graphql/types.generated'; -import useTaskModal from '../../../../hooks/useTaskModal'; -import theme from '../../../../theme'; -import { - AddMenuItemsEnum, - renderDialog, -} from '../../../Layouts/Primary/TopBar/Items/AddMenu/AddMenu'; +import useTaskModal from 'src/hooks/useTaskModal'; +import theme from 'src/theme'; import { NullStateBox } from './NullStateBox'; interface CreateButtonProps { diff --git a/src/components/Task/Modal/TaskModal.tsx b/src/components/Task/Modal/TaskModal.tsx index b3f3d334f..310690283 100644 --- a/src/components/Task/Modal/TaskModal.tsx +++ b/src/components/Task/Modal/TaskModal.tsx @@ -2,7 +2,7 @@ import React, { ReactElement, useMemo, useState } from 'react'; import { DialogContent, Typography } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { TaskCreateInput, TaskUpdateInput } from 'src/graphql/types.generated'; -import { useAccountListId } from '../../../hooks/useAccountListId'; +import { useAccountListId } from 'src/hooks/useAccountListId'; import Loading from '../../Loading'; import Modal from '../../common/Modal/Modal'; import { DynamicTaskModalCommentsList } from './Comments/DynamicTaskModalCommentsList'; diff --git a/src/components/Task/TaskRow/TaskRow.tsx b/src/components/Task/TaskRow/TaskRow.tsx index f1c8b9bbc..878653373 100644 --- a/src/components/Task/TaskRow/TaskRow.tsx +++ b/src/components/Task/TaskRow/TaskRow.tsx @@ -17,6 +17,7 @@ import { TaskCompleteButton } from '../../Contacts/ContactDetails/ContactTasksTa import { TaskDate } from '../../Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskDate/TaskDate'; import { DeleteTaskIconButton } from '../../Contacts/ContactDetails/ContactTasksTab/DeleteTaskIconButton/DeleteTaskIconButton'; import { StarTaskIconButton } from '../../Contacts/ContactDetails/ContactTasksTab/StarTaskIconButton/StarTaskIconButton'; +import { TaskModalEnum } from '../Modal/TaskModal'; import { TaskRowFragment } from './TaskRow.generated'; const SubjectWrapOuter = styled(Box)(({ theme }) => ({ @@ -119,20 +120,20 @@ export const TaskRow: React.FC = ({ } = task; const handleCompleteButtonPressed = () => { - openTaskModal({ taskId: task?.id, view: 'complete' }); + openTaskModal({ taskId: task?.id, view: TaskModalEnum.Complete }); }; const handleCommentButtonPressed = () => { openTaskModal({ taskId, - view: 'comments', + view: TaskModalEnum.Comments, }); }; const handleSubjectPressed = () => { openTaskModal({ taskId, - view: 'edit', + view: TaskModalEnum.Edit, }); }; @@ -176,7 +177,7 @@ export const TaskRow: React.FC = ({ preloadTaskModal('complete')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Complete)} /> @@ -196,7 +197,7 @@ export const TaskRow: React.FC = ({ handleSubjectPressed(); e.stopPropagation(); }} - onMouseEnter={() => preloadTaskModal('edit')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Edit)} > {activityType ? getLocalizedTaskType(t, activityType) : ''} @@ -245,7 +246,7 @@ export const TaskRow: React.FC = ({ isComplete={isComplete} numberOfComments={comments?.totalCount} onClick={handleCommentButtonPressed} - onMouseEnter={() => preloadTaskModal('comments')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Comments)} /> @@ -257,7 +258,7 @@ export const TaskRow: React.FC = ({ isComplete={isComplete} numberOfComments={comments?.totalCount} onClick={handleCommentButtonPressed} - onMouseEnter={() => preloadTaskModal('comments')} + onMouseEnter={() => preloadTaskModal(TaskModalEnum.Comments)} small /> From bb9bc2273361b74ffc0f5a3be020e334b35c121f Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Mon, 22 Apr 2024 12:17:58 -0400 Subject: [PATCH 3/4] Adding Enum to tests --- .../ContactDetailsMoreActions.test.tsx | 5 +++-- .../ContactTaskRow/ContactTaskRow.test.tsx | 7 ++++--- .../ContactTasksTab/ContactTasksTab.test.tsx | 5 +++-- .../NullState/ContactTasksTabNullState.test.tsx | 3 ++- src/components/Contacts/ContactRow/ContactRow.test.tsx | 3 ++- .../Dashboard/ThisWeek/PartnerCare/PartnerCare.test.tsx | 9 +++++---- .../ThisWeek/TasksDueThisWeek/TasksDueThisWeek.test.tsx | 3 ++- .../Primary/TopBar/Items/AddMenu/AddMenu.test.tsx | 3 ++- .../Shared/Filters/NullState/NullState.test.tsx | 5 +++-- .../MassActions/ContactsMassActionsDropdown.test.tsx | 5 +++-- .../Modal/Form/Complete/TaskModalCompleteForm.test.tsx | 3 ++- .../Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx | 3 ++- src/components/Task/Modal/Form/TaskModalForm.test.tsx | 3 ++- src/components/Task/Status/Status.test.tsx | 3 ++- src/components/Task/TaskRow/TaskRow.test.tsx | 7 ++++--- 15 files changed, 41 insertions(+), 26 deletions(-) diff --git a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.test.tsx b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.test.tsx index 33cc151a5..a9743db75 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.test.tsx @@ -6,6 +6,7 @@ import { SnackbarProvider } from 'notistack'; import TestRouter from '__tests__/util/TestRouter'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; import { ContactsWrapper } from 'pages/accountLists/[accountListId]/contacts/ContactsWrapper'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { StatusEnum } from 'src/graphql/types.generated'; import useTaskModal from '../../../../../hooks/useTaskModal'; import theme from '../../../../../theme'; @@ -102,7 +103,7 @@ describe('ContactDetailsMoreActions', () => { await waitFor(() => expect(getByText('Add Task')).toBeInTheDocument()); userEvent.click(getByText('Add Task')); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: [contactId], }, @@ -135,7 +136,7 @@ describe('ContactDetailsMoreActions', () => { await waitFor(() => expect(getByText('Log Task')).toBeInTheDocument()); userEvent.click(getByText('Log Task')); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'log', + view: TaskModalEnum.Log, defaultValues: { contactIds: [contactId], }, diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.test.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.test.tsx index ce7e9c185..e5288d00b 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.test.tsx @@ -3,6 +3,7 @@ import { ThemeProvider } from '@mui/material/styles'; import { render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { GqlMockedProvider, gqlMock } from '__tests__/util/graphqlMocking'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { ActivityTypeEnum, ResultEnum } from 'src/graphql/types.generated'; import useTaskModal from '../../../../../hooks/useTaskModal'; import theme from '../../../../../theme'; @@ -139,7 +140,7 @@ describe('ContactTaskRow', () => { expect(await findByText(task.subject)).toBeVisible(); userEvent.click(getByRole('img', { hidden: true, name: 'Check Icon' })); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'complete', + view: TaskModalEnum.Complete, taskId: task.id, showCompleteForm: true, }); @@ -169,7 +170,7 @@ describe('ContactTaskRow', () => { expect(await findByText(task.subject)).toBeVisible(); userEvent.click(getByText(task.subject)); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'edit', + view: TaskModalEnum.Edit, taskId: task.id, }); }); @@ -199,7 +200,7 @@ describe('ContactTaskRow', () => { userEvent.click(getByRole('img', { hidden: true, name: 'Comment Icon' })); expect(openTaskModal).toHaveBeenCalledWith({ taskId: task.id, - view: 'comments', + view: TaskModalEnum.Comments, }); }); diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.test.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.test.tsx index 57bdc55cb..33b147505 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.test.tsx @@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'; import { DateTime } from 'luxon'; import { VirtuosoMockContext } from 'react-virtuoso'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { useAccountListId } from 'src/hooks/useAccountListId'; import useTaskModal from '../../../../hooks/useTaskModal'; import theme from '../../../../theme'; @@ -139,7 +140,7 @@ describe('ContactTasksTab', () => { userEvent.click(getByText('add task')); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: [contactId], }, @@ -178,7 +179,7 @@ describe('ContactTasksTab', () => { ); userEvent.click(getByText('log task')); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'log', + view: TaskModalEnum.Log, defaultValues: { completedAt: DateTime.local().toISO(), contactIds: [contactId], diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/NullState/ContactTasksTabNullState.test.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/NullState/ContactTasksTabNullState.test.tsx index df9bceb55..b143d20c4 100644 --- a/src/components/Contacts/ContactDetails/ContactTasksTab/NullState/ContactTasksTabNullState.test.tsx +++ b/src/components/Contacts/ContactDetails/ContactTasksTab/NullState/ContactTasksTabNullState.test.tsx @@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'; import { SnackbarProvider } from 'notistack'; import TestWrapper from '__tests__/util/TestWrapper'; import { render, waitFor } from '__tests__/util/testingLibraryReactMock'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import useTaskModal from '../../../../../hooks/useTaskModal'; import theme from '../../../../../theme'; import { ContactTasksTabNullState } from './ContactTasksTabNullState'; @@ -42,7 +43,7 @@ describe('ContactTasksTabNullState', () => { ).toBeInTheDocument(); userEvent.click(getByText('Add New Task')); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: [contactId] }, }); }); diff --git a/src/components/Contacts/ContactRow/ContactRow.test.tsx b/src/components/Contacts/ContactRow/ContactRow.test.tsx index 81204b97c..cf66fb488 100644 --- a/src/components/Contacts/ContactRow/ContactRow.test.tsx +++ b/src/components/Contacts/ContactRow/ContactRow.test.tsx @@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event'; import TestRouter from '__tests__/util/TestRouter'; import { GqlMockedProvider, gqlMock } from '__tests__/util/graphqlMocking'; import { ContactsWrapper } from 'pages/accountLists/[accountListId]/contacts/ContactsWrapper'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import theme from 'src/theme'; import useTaskModal from '../../../hooks/useTaskModal'; import { ContactRow } from './ContactRow'; @@ -127,7 +128,7 @@ describe('ContactsRow', () => { userEvent.click(taskButton); // TODO: Find a way to check that click event was pressed. expect(openTaskModal).toHaveBeenCalledWith({ - view: 'log', + view: TaskModalEnum.Log, defaultValues: { contactIds: ['test-id'], }, diff --git a/src/components/Dashboard/ThisWeek/PartnerCare/PartnerCare.test.tsx b/src/components/Dashboard/ThisWeek/PartnerCare/PartnerCare.test.tsx index 53f6d54c6..3dc0e690f 100644 --- a/src/components/Dashboard/ThisWeek/PartnerCare/PartnerCare.test.tsx +++ b/src/components/Dashboard/ThisWeek/PartnerCare/PartnerCare.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { ThemeProvider } from '@mui/material/styles'; import userEvent from '@testing-library/user-event'; import { fireEvent, render } from '__tests__/util/testingLibraryReactMock'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { ActivityTypeEnum } from 'src/graphql/types.generated'; import useTaskModal from '../../../../hooks/useTaskModal'; import theme from '../../../../theme'; @@ -196,7 +197,7 @@ describe('PartnerCare', () => { userEvent.click(task1Element); expect(openTaskModal).toHaveBeenCalledWith({ taskId: 'task_1', - view: 'edit', + view: TaskModalEnum.Edit, }); expect(getByTestId('PartnerCarePrayerListItem-task_2').textContent).toEqual( 'Roger Parker, Sarah Parkeron the boat to see uncle johnny', @@ -242,7 +243,7 @@ describe('PartnerCare', () => { expect(openTaskModal).toHaveBeenCalledWith({ taskId: 'task_1', showCompleteForm: true, - view: 'complete', + view: TaskModalEnum.Complete, }); }); @@ -270,7 +271,7 @@ describe('PartnerCare', () => { queryAllByRole('button', { hidden: true, name: 'Complete' })[0], ); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: ['contact'], subject: "John Doe's Birthday", @@ -300,7 +301,7 @@ describe('PartnerCare', () => { queryAllByRole('button', { hidden: true, name: 'Complete' })[2], ); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: ['contact'], subject: "John and Sarah, Doe's Anniversary", diff --git a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.test.tsx b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.test.tsx index 0e033b2ca..ad0980db9 100644 --- a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.test.tsx +++ b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.test.tsx @@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; import { render } from '__tests__/util/testingLibraryReactMock'; import { LoadConstantsQuery } from 'src/components/Constants/LoadConstants.generated'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { ActivityTypeEnum } from 'src/graphql/types.generated'; import useTaskModal from '../../../../hooks/useTaskModal'; import theme from '../../../../theme'; @@ -136,7 +137,7 @@ describe('TasksDueThisWeek', () => { ); userEvent.click(task1Element); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'edit', + view: TaskModalEnum.Edit, taskId: 'task_1', }); expect( diff --git a/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.test.tsx b/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.test.tsx index 417604d02..188910103 100644 --- a/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.test.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.test.tsx @@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event'; import { SnackbarProvider } from 'notistack'; import TestRouter from '__tests__/util/TestRouter'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import useTaskModal from '../../../../../../hooks/useTaskModal'; import theme from '../../../../../../theme'; import AddMenu from './AddMenu'; @@ -101,7 +102,7 @@ describe('AddMenu', () => { await waitFor(() => expect(getByText('Add Task')).toBeInTheDocument()); userEvent.click(getByText('Add Task')); await waitFor(() => - expect(openTaskModal).toHaveBeenCalledWith({ view: 'add' }), + expect(openTaskModal).toHaveBeenCalledWith({ view: TaskModalEnum.Add }), ); }); }); diff --git a/src/components/Shared/Filters/NullState/NullState.test.tsx b/src/components/Shared/Filters/NullState/NullState.test.tsx index 673097488..a815ec755 100644 --- a/src/components/Shared/Filters/NullState/NullState.test.tsx +++ b/src/components/Shared/Filters/NullState/NullState.test.tsx @@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'; import { SnackbarProvider } from 'notistack'; import TestWrapper from '__tests__/util/TestWrapper'; import { render, waitFor } from '__tests__/util/testingLibraryReactMock'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import useTaskModal from '../../../../hooks/useTaskModal'; import theme from '../../../../theme'; import NullState from './NullState'; @@ -109,7 +110,7 @@ describe('NullState', () => { expect(getByTestId('task-null-state')).toBeInTheDocument(); userEvent.click(getByText('Add new task')); await waitFor(() => - expect(openTaskModal).toHaveBeenCalledWith({ view: 'add' }), + expect(openTaskModal).toHaveBeenCalledWith({ view: TaskModalEnum.Add }), ); }); @@ -141,7 +142,7 @@ describe('NullState', () => { expect(changeFilters).toHaveBeenCalled(); userEvent.click(getByText('Add new task')); await waitFor(() => - expect(openTaskModal).toHaveBeenCalledWith({ view: 'add' }), + expect(openTaskModal).toHaveBeenCalledWith({ view: TaskModalEnum.Add }), ); }); }); diff --git a/src/components/Shared/MassActions/ContactsMassActionsDropdown.test.tsx b/src/components/Shared/MassActions/ContactsMassActionsDropdown.test.tsx index 14ca92adb..738f1418e 100644 --- a/src/components/Shared/MassActions/ContactsMassActionsDropdown.test.tsx +++ b/src/components/Shared/MassActions/ContactsMassActionsDropdown.test.tsx @@ -8,6 +8,7 @@ import { SnackbarProvider } from 'notistack'; import TestRouter from '__tests__/util/TestRouter'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; import { ContactsProvider } from 'src/components/Contacts/ContactsContext/ContactsContext'; +import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { AppSettingsProvider } from 'src/components/common/AppSettings/AppSettingsProvider'; import { useAccountListId } from 'src/hooks/useAccountListId'; import theme from 'src/theme'; @@ -197,7 +198,7 @@ describe('ContactsMassActionsDropdown', () => { expect(getByText('Add Task')).toBeInTheDocument(); userEvent.click(getByText('Add Task')); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { contactIds: selectedIds }, }); }); @@ -211,7 +212,7 @@ describe('ContactsMassActionsDropdown', () => { expect(getByText('Log Task')).toBeInTheDocument(); userEvent.click(getByText('Log Task')); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'log', + view: TaskModalEnum.Log, defaultValues: { contactIds: selectedIds }, }); }); diff --git a/src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.test.tsx b/src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.test.tsx index 8cc1296a5..be3ee971d 100644 --- a/src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.test.tsx +++ b/src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.test.tsx @@ -12,6 +12,7 @@ import { import { dispatch } from 'src/lib/analytics'; import useTaskModal from '../../../../../hooks/useTaskModal'; import { GetThisWeekDefaultMocks } from '../../../../Dashboard/ThisWeek/ThisWeek.mock'; +import { TaskModalEnum } from '../../TaskModal'; import { CompleteTaskDocument } from './CompleteTask.generated'; import TaskModalCompleteForm from './TaskModalCompleteForm'; import { @@ -191,7 +192,7 @@ describe('TaskModalCompleteForm', () => { userEvent.click(getByText('Save')); await waitFor(() => expect(openTaskModal).toHaveBeenCalledWith({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { subject: task.subject, activityType: ActivityTypeEnum.Appointment, diff --git a/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx b/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx index 8d2b08eac..e6f058416 100644 --- a/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx +++ b/src/components/Task/Modal/Form/LogForm/TaskModalLogForm.test.tsx @@ -11,6 +11,7 @@ import { GetUserQuery } from 'src/components/User/GetUser.generated'; import { ActivityTypeEnum } from 'src/graphql/types.generated'; import useTaskModal from 'src/hooks/useTaskModal'; import { dispatch } from 'src/lib/analytics'; +import { TaskModalEnum } from '../../TaskModal'; import { ContactOptionsQuery } from '../Inputs/ContactsAutocomplete/ContactsAutocomplete.generated'; import { TagOptionsQuery } from '../Inputs/TagsAutocomplete/TagsAutocomplete.generated'; import TaskModalLogForm from './TaskModalLogForm'; @@ -353,7 +354,7 @@ describe('TaskModalLogForm', () => { userEvent.click(getByText('Save')); await waitFor(() => expect(onClose).toHaveBeenCalled()); expect(openTaskModal).toHaveBeenCalledWith({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { subject: 'Subject', activityType: ActivityTypeEnum.Call, diff --git a/src/components/Task/Modal/Form/TaskModalForm.test.tsx b/src/components/Task/Modal/Form/TaskModalForm.test.tsx index a9dc24af4..388d755bd 100644 --- a/src/components/Task/Modal/Form/TaskModalForm.test.tsx +++ b/src/components/Task/Modal/Form/TaskModalForm.test.tsx @@ -11,6 +11,7 @@ import { AssigneeOptionsQuery } from 'src/components/Contacts/ContactDetails/Con import { GetUserQuery } from 'src/components/User/GetUser.generated'; import { ActivityTypeEnum } from 'src/graphql/types.generated'; import useTaskModal from 'src/hooks/useTaskModal'; +import { TaskModalEnum } from '../TaskModal'; import { ContactOptionsQuery } from './Inputs/ContactsAutocomplete/ContactsAutocomplete.generated'; import { TagOptionsQuery } from './Inputs/TagsAutocomplete/TagsAutocomplete.generated'; import TaskModalForm from './TaskModalForm'; @@ -402,7 +403,7 @@ describe('TaskModalForm', () => { await waitFor(() => expect(openTaskModal).toHaveBeenCalledWith({ - view: 'add', + view: TaskModalEnum.Add, defaultValues: { subject: mockCompletedTask.subject, activityType: ActivityTypeEnum.Appointment, diff --git a/src/components/Task/Status/Status.test.tsx b/src/components/Task/Status/Status.test.tsx index 90470979f..f140bf725 100644 --- a/src/components/Task/Status/Status.test.tsx +++ b/src/components/Task/Status/Status.test.tsx @@ -4,6 +4,7 @@ import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import useTaskModal from '../../../hooks/useTaskModal'; import theme from '../../../theme'; +import { TaskModalEnum } from '../Modal/TaskModal'; import TaskStatus from '.'; jest.mock('../../../hooks/useTaskModal'); @@ -67,7 +68,7 @@ describe('TaskStatus', () => { userEvent.click(getByRole('button')); expect(openTaskModal).toHaveBeenCalledWith({ taskId: 'task-1', - view: 'complete', + view: TaskModalEnum.Complete, }); }); }); diff --git a/src/components/Task/TaskRow/TaskRow.test.tsx b/src/components/Task/TaskRow/TaskRow.test.tsx index fee703d89..72db44fe3 100644 --- a/src/components/Task/TaskRow/TaskRow.test.tsx +++ b/src/components/Task/TaskRow/TaskRow.test.tsx @@ -6,6 +6,7 @@ import { GqlMockedProvider, gqlMock } from '__tests__/util/graphqlMocking'; import { ResultEnum } from 'src/graphql/types.generated'; import useTaskModal from '../../../hooks/useTaskModal'; import theme from '../../../theme'; +import { TaskModalEnum } from '../Modal/TaskModal'; import { TaskRow } from './TaskRow'; import { TaskRowFragment, TaskRowFragmentDoc } from './TaskRow.generated'; @@ -236,7 +237,7 @@ describe('TaskRow', () => { userEvent.click(getByRole('img', { hidden: true, name: 'Check Icon' })); expect(openTaskModal).toHaveBeenCalledWith({ taskId: task.id, - view: 'complete', + view: TaskModalEnum.Complete, }); }); @@ -293,7 +294,7 @@ describe('TaskRow', () => { userEvent.click(getByRole('img', { hidden: true, name: 'Comment Icon' })); expect(openTaskModal).toHaveBeenCalledWith({ taskId: task.id, - view: 'comments', + view: TaskModalEnum.Comments, }); }); @@ -323,7 +324,7 @@ describe('TaskRow', () => { userEvent.click(getByTestId('subject-wrap')); expect(openTaskModal).toHaveBeenCalledWith({ taskId: task.id, - view: 'edit', + view: TaskModalEnum.Edit, }); }); }); From e146bdccb9cdc24ae27425dd04019f33ac310ad2 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 30 Apr 2024 14:24:09 -0400 Subject: [PATCH 4/4] Adding tests to TaskModal --- src/components/Task/Modal/TaskModal.test.tsx | 196 +++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 src/components/Task/Modal/TaskModal.test.tsx diff --git a/src/components/Task/Modal/TaskModal.test.tsx b/src/components/Task/Modal/TaskModal.test.tsx new file mode 100644 index 000000000..c39e38558 --- /dev/null +++ b/src/components/Task/Modal/TaskModal.test.tsx @@ -0,0 +1,196 @@ +import React from 'react'; +import { ThemeProvider } from '@mui/material/styles'; +import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { render, waitFor, within } from '@testing-library/react'; +import { SnackbarProvider } from 'notistack'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; +import { ActivityTypeEnum, ResultEnum } from 'src/graphql/types.generated'; +import useTaskModal from 'src/hooks/useTaskModal'; +import theme from 'src/theme'; +import TaskModal, { TaskModalEnum } from './TaskModal'; +import { GetTaskForTaskModalQuery } from './TaskModalTask.generated'; + +jest.mock('src/hooks/useTaskModal'); + +const openTaskModal = jest.fn(); +beforeEach(() => { + (useTaskModal as jest.Mock).mockReturnValue({ + openTaskModal, + preloadTaskModal: jest.fn(), + }); +}); + +const accountListId = 'abc'; +const taskId = 'taskId'; +const defaultValues = { subject: 'defaultSubject' }; +const router = { + query: { accountListId }, + isReady: true, +}; + +const completedTask = { + task: { + id: 'id', + activityType: ActivityTypeEnum.PrayerRequest, + subject: 'New Task', + location: null, + startAt: '2023-08-18T17:26:52Z', + completedAt: '2024-01-18T19:36:55Z', + result: ResultEnum.Done, + nextAction: ActivityTypeEnum.TextMessage, + tagList: [], + user: null, + notificationTimeBefore: null, + notificationType: null, + notificationTimeUnit: null, + contacts: { + nodes: [ + { + id: '8638ad97-1ad5-4e31-b43a-6f5652d7571c', + name: 'contact name', + }, + ], + }, + }, +}; + +type TaskModalComponentProps = { + view: TaskModalEnum; + GetTaskForTaskModalMock: GetTaskForTaskModalQuery; + taskId?: string; +}; + +const TaskModalComponent = ({ + GetTaskForTaskModalMock, + taskId, + view, +}: TaskModalComponentProps) => ( + + + + + + mocks={{ + GetTaskForTaskModal: GetTaskForTaskModalMock, + }} + > + + + + + + +); + +describe('TaskModal', () => { + it('Show Complete Task Form', async () => { + const { getByRole } = render( + , + ); + + await waitFor(() => { + expect( + getByRole('heading', { name: 'Complete Task' }), + ).toBeInTheDocument(); + }); + await waitFor(() => { + const dialog = getByRole('dialog', { + name: 'Complete Task', + }); + expect(within(dialog).getByText('Prayer Request')).toBeInTheDocument(); + }); + }); + + it('Show Comments Form', async () => { + const { getByRole } = render( + , + ); + + await waitFor(() => { + expect( + getByRole('heading', { name: 'Task Comments' }), + ).toBeInTheDocument(); + }); + await waitFor(() => { + expect( + getByRole('button', { + name: 'Add Comment', + }), + ).toBeInTheDocument(); + }); + }); + + it('Show Log Form', async () => { + const { getByRole, getByText } = render( + , + ); + + await waitFor(() => { + expect(getByRole('heading', { name: 'Log Task' })).toBeInTheDocument(); + }); + + await waitFor(() => { + expect(getByText('defaultSubject')).toBeInTheDocument(); + expect(getByText('Show More')).toBeInTheDocument(); + }); + }); + + it('Show Default Form', async () => { + const { getByRole } = render( + , + ); + + await waitFor(() => { + expect(getByRole('heading', { name: 'Add Task' })).toBeInTheDocument(); + }); + + await waitFor(() => { + const dialog = getByRole('dialog', { + name: 'Add Task', + }); + expect(within(dialog).getByText('Notifications')).toBeInTheDocument(); + }); + }); +});