Merge pull request #920 from CruGlobal/allow-react-to-compare-compone…

…nt-types-on-render

No Jira - Allow react to compare component types on render

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';
@@ -57,10 +58,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]);

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,17 +347,25 @@ const TasksPage: React.FC = () => {
                     buttonGroup={
                       <Hidden xsDown>
                         <TaskHeaderButton
-                          onClick={() => openTaskModal({ view: 'add' })}
-                          onMouseEnter={() => preloadTaskModal('add')}
+                          onClick={() =>
+                            openTaskModal({ view: TaskModalEnum.Add })
+                          }
+                          onMouseEnter={() =>
+                            preloadTaskModal(TaskModalEnum.Add)
+                          }
                           variant="text"
                           startIcon={<TaskAddIcon />}
                         >
                           <Hidden smUp>{t('Add')}</Hidden>
                           <Hidden smDown>{t('Add Task')}</Hidden>
                         </TaskHeaderButton>
                         <TaskHeaderButton
-                          onClick={() => openTaskModal({ view: 'log' })}
-                          onMouseEnter={() => preloadTaskModal('log')}
+                          onClick={() =>
+                            openTaskModal({ view: TaskModalEnum.Log })
+                          }
+                          onMouseEnter={() =>
+                            preloadTaskModal(TaskModalEnum.Log)
+                          }
                           variant="text"
                           startIcon={<TaskCheckIcon />}
                         >

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],
       },

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx

@@ -22,9 +22,10 @@ import {
   DynamicCreateMultipleContacts,
   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,
@@ -230,25 +231,25 @@ export const ContactDetailsMoreAcitions: React.FC<
       icon: <ListIcon />,
       onClick: () => {
         openTaskModal({
-          view: 'add',
+          view: TaskModalEnum.Add,
           defaultValues: { contactIds: [contactId] },
         });
         setAnchorEl(undefined);
       },
-      onMouseEnter: () => preloadTaskModal('add'),
+      onMouseEnter: () => preloadTaskModal(TaskModalEnum.Add),
     },
     {
       visibility: true,
       text: 'Log Task',
       icon: <EditIcon />,
       onClick: () => {
         openTaskModal({
-          view: 'log',
+          view: TaskModalEnum.Log,
           defaultValues: { contactIds: [contactId] },
         });
         setAnchorEl(undefined);
       },
-      onMouseEnter: () => preloadTaskModal('log'),
+      onMouseEnter: () => preloadTaskModal(TaskModalEnum.Log),
     },
     {
       visibility: status !== StatusEnum.NeverAsk,

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,
       });
     });
 

src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/ContactTaskRow.tsx

@@ -3,11 +3,12 @@ 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 { 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';
@@ -106,21 +107,21 @@ export const ContactTaskRow: React.FC<ContactTaskRowProps> = ({
     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<ContactTaskRowProps> = ({
         <TaskCompleteButton
           isComplete={isComplete}
           onClick={handleCompleteButtonPressed}
-          onMouseEnter={() => preloadTaskModal('complete')}
+          onMouseEnter={() => preloadTaskModal(TaskModalEnum.Complete)}
         />
       </TaskItemWrap>
       <SubjectWrap
         onClick={handleSubjectPressed}
-        onMouseEnter={() => preloadTaskModal('edit')}
+        onMouseEnter={() => preloadTaskModal(TaskModalEnum.Edit)}
       >
         <TaskType>{getLocalizedTaskType(t, activityType)}</TaskType>
         <TaskDescription>{subject}</TaskDescription>
@@ -186,7 +187,7 @@ export const ContactTaskRow: React.FC<ContactTaskRowProps> = ({
           isComplete={isComplete}
           numberOfComments={comments?.totalCount}
           onClick={handleCommentButtonPressed}
-          onMouseEnter={() => preloadTaskModal('comments')}
+          onMouseEnter={() => preloadTaskModal(TaskModalEnum.Comments)}
           detailsPage
         />
 

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],

src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx

@@ -9,11 +9,12 @@ 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 { 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';
@@ -163,26 +164,26 @@ export const ContactTasksTab: React.FC<ContactTasksTabProps> = ({
             <TaskButton
               onClick={() =>
                 openTaskModal({
-                  view: 'add',
+                  view: TaskModalEnum.Add,
                   defaultValues: { contactIds: [contactId] },
                 })
               }
-              onMouseEnter={() => preloadTaskModal('add')}
+              onMouseEnter={() => preloadTaskModal(TaskModalEnum.Add)}
             >
               <AddTaskButtonIcon />
               <TaskButtonText>{t('add task')}</TaskButtonText>
             </TaskButton>
             <TaskButton
               onClick={() =>
                 openTaskModal({
-                  view: 'log',
+                  view: TaskModalEnum.Log,
                   defaultValues: {
                     completedAt: DateTime.local().toISO(),
                     contactIds: [contactId],
                   },
                 })
               }
-              onMouseEnter={() => preloadTaskModal('log')}
+              onMouseEnter={() => preloadTaskModal(TaskModalEnum.Log)}
             >
               <LogTaskButtonIcon />
               <TaskButtonText>{t('log task')}</TaskButtonText>

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] },
     });
   });

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')}
       </AddTaskButton>

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<Props> = ({
     });
     if (status.id && taskStatuses[status.id]) {
       openTaskModal({
-        view: 'add',
+        view: TaskModalEnum.Add,
         defaultValues: {
           activityType: taskStatuses[status.id],
           contactIds: [id],

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'],
       },

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)}
       />
       <Box ml={2}>
         <Typography