diff --git a/src/components/Tool/MergeContacts/ContactPair.tsx b/src/components/Tool/MergeContacts/ContactPair.tsx index 6af2e6a69..cab5c1598 100644 --- a/src/components/Tool/MergeContacts/ContactPair.tsx +++ b/src/components/Tool/MergeContacts/ContactPair.tsx @@ -154,8 +154,8 @@ const ContactItem: React.FC = ({ const handleContactNameClick = (contactId) => { setContactFocus(contactId); }; - const personType = contact.__typename === 'Person'; - const contactType = contact.__typename === 'Contact'; + const isPersonType = contact.__typename === 'Person'; + const isContactType = contact.__typename === 'Contact'; return ( = ({ onClick={(e) => { e.stopPropagation(); handleContactNameClick( - personType + isPersonType ? contact.contactId - : contactType + : isContactType ? contact.id : null, ); }} > - {personType + {isPersonType ? `${contact.firstName} ${contact.lastName}` - : contactType + : isContactType ? contact.name : null} @@ -207,7 +207,7 @@ const ContactItem: React.FC = ({ } subheader={ - contactType && ( + isContactType && ( {contact?.status && contactPartnershipStatus[contact?.status]} @@ -216,13 +216,13 @@ const ContactItem: React.FC = ({ className={classes.minimalPadding} /> - {contactType && contact.primaryAddress && ( + {isContactType && contact.primaryAddress && ( {`${contact?.primaryAddress?.street} ${contact?.primaryAddress?.city}, ${contact?.primaryAddress?.state} ${contact?.primaryAddress?.postalCode}`} )} - {contactType && ( + {isContactType && ( = ({ /> )} - {personType && contact.primaryPhoneNumber && ( + {isPersonType && contact.primaryPhoneNumber && ( {`${contact?.primaryPhoneNumber?.number}`} @@ -249,7 +249,7 @@ const ContactItem: React.FC = ({ )} - {personType && contact.primaryEmailAddress && ( + {isPersonType && contact.primaryEmailAddress && ( {`${contact?.primaryEmailAddress?.email}`} diff --git a/src/components/Tool/MergeContacts/MergeContacts.tsx b/src/components/Tool/MergeContacts/MergeContacts.tsx index 4296fb029..d9c8bf2b9 100644 --- a/src/components/Tool/MergeContacts/MergeContacts.tsx +++ b/src/components/Tool/MergeContacts/MergeContacts.tsx @@ -1,4 +1,4 @@ -import React, { memo, useMemo, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { Box, CircularProgress, @@ -67,12 +67,11 @@ const MergeContacts: React.FC = ({ const { appName } = useGetAppSettings(); const [contactsMerge, { loading: updating }] = useMassActionsMergeMutation(); const disabled = useMemo( - () => updating || Object.entries(actions).length === 0, + () => updating || !Object.entries(actions).length, [actions, updating], ); const totalCount = data?.contactDuplicates.totalCount || 0; - const showing = data?.contactDuplicates.nodes.length || 0; - const MemoizedStickyConfirmButtons = memo(StickyConfirmButtons); + const duplicatesDisplayedCount = data?.contactDuplicates.nodes.length || 0; const updateActions = (id1: string, id2: string, action: string): void => { if (!updating) { @@ -96,7 +95,7 @@ const MergeContacts: React.FC = ({ const mergeActions = Object.entries(actions).filter( (action) => action[1].action === 'merge', ); - if (mergeActions.length > 0) { + if (mergeActions.length) { const winnersAndLosers: { winnerId: string; loserId: string }[] = mergeActions.map((action) => { return { winnerId: action[0], loserId: action[1].mergeId || '' }; @@ -141,7 +140,7 @@ const MergeContacts: React.FC = ({ {t('Merge Contacts')} - {showing > 0 ? ( + {duplicatesDisplayedCount ? ( <> = ({ - ({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + backgroundColor: 'white', + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(2), + marginBottom: theme.spacing(2), + position: 'sticky', + top: '64px', + zIndex: '100', + borderBottom: '1px solid', + borderBottomColor: theme.palette.cruGrayLight.main, + [theme.breakpoints.down('sm')]: { + flexDirection: 'column', + alignItems: 'start', + top: '56px', + }, +})); interface StickyConfirmButtonsProps { accountListId: string; confirmAction: () => void; disabled: boolean; loading: boolean; setActions: Dispatch>>; - showing: number; + duplicatesDisplayedCount: number; totalCount: number; updating: boolean; } @@ -22,30 +42,10 @@ export const StickyConfirmButtons: React.FC = ({ disabled, loading, setActions, - showing, + duplicatesDisplayedCount, totalCount, updating, }) => { - const ButtonHeaderBox = styled(Box)(() => ({ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - backgroundColor: 'white', - paddingTop: theme.spacing(2), - paddingBottom: theme.spacing(2), - marginBottom: theme.spacing(2), - position: 'sticky', - top: '64px', - zIndex: '100', - borderBottom: '1px solid', - borderBottomColor: theme.palette.cruGrayLight.main, - [theme.breakpoints.down('sm')]: { - flexDirection: 'column', - alignItems: 'start', - top: '56px', - }, - })); const { t } = useTranslation(); const handleConfirmAndContinue = async () => { @@ -62,10 +62,10 @@ export const StickyConfirmButtons: React.FC = ({ , i: }} diff --git a/src/components/Tool/MergePeople/MergePeople.tsx b/src/components/Tool/MergePeople/MergePeople.tsx index fa281b4fd..4eab3baed 100644 --- a/src/components/Tool/MergePeople/MergePeople.tsx +++ b/src/components/Tool/MergePeople/MergePeople.tsx @@ -1,4 +1,4 @@ -import React, { memo, useMemo, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { Box, CircularProgress, @@ -69,13 +69,11 @@ const MergePeople: React.FC = ({ const { appName } = useGetAppSettings(); const [peopleMerge, { loading: updating }] = useMergePeopleBulkMutation(); const disabled = useMemo( - () => updating || Object.entries(actions).length === 0, + () => updating || !Object.entries(actions).length, [actions, updating], ); const totalCount = data?.personDuplicates.totalCount || 0; - const showing = data?.personDuplicates.nodes.length || 0; - - const MemoizedStickyConfirmButtons = memo(StickyConfirmButtons); + const duplicatesDisplayedCount = data?.personDuplicates.nodes.length || 0; const updateActions = (id1: string, id2: string, action: string): void => { if (!updating) { @@ -99,7 +97,7 @@ const MergePeople: React.FC = ({ const mergeActions = Object.entries(actions).filter( (action) => action[1].action === 'merge', ); - if (mergeActions.length > 0) { + if (mergeActions.length) { const winnersAndLosers: { winnerId: string; loserId: string }[] = mergeActions.map((action) => { return { winnerId: action[0], loserId: action[1].mergeId || '' }; @@ -144,7 +142,7 @@ const MergePeople: React.FC = ({ {t('Merge People')} - {showing > 0 ? ( + {duplicatesDisplayedCount ? ( <> = ({ -