Rename variables, clean up code

CruGlobal · Jun 26, 2024 · 6faebdc · 6faebdc
1 parent 6a5db31
commit 6faebdc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 52 deletions.
diff --git a/src/components/Tool/MergeContacts/ContactPair.tsx b/src/components/Tool/MergeContacts/ContactPair.tsx
@@ -154,8 +154,8 @@ const ContactItem: React.FC<ContactItemProps> = ({
   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 (
     <Card
       className={`
@@ -183,18 +183,18 @@ const ContactItem: React.FC<ContactItemProps> = ({
               onClick={(e) => {
                 e.stopPropagation();
                 handleContactNameClick(
-                  personType
+                  isPersonType
                     ? contact.contactId
-                    : contactType
+                    : isContactType
                     ? contact.id
                     : null,
                 );
               }}
             >
               <InlineTypography variant="subtitle1">
-                {personType
+                {isPersonType
                   ? `${contact.firstName} ${contact.lastName}`
-                  : contactType
+                  : isContactType
                   ? contact.name
                   : null}
               </InlineTypography>
@@ -207,7 +207,7 @@ const ContactItem: React.FC<ContactItemProps> = ({
           </>
         }
         subheader={
-          contactType && (
+          isContactType && (
             <Typography variant="subtitle2">
               {contact?.status && contactPartnershipStatus[contact?.status]}
             </Typography>
@@ -216,13 +216,13 @@ const ContactItem: React.FC<ContactItemProps> = ({
         className={classes.minimalPadding}
       />
       <CardContent className={classes.minimalPadding}>
-        {contactType && contact.primaryAddress && (
+        {isContactType && contact.primaryAddress && (
           <Typography variant="body2">
             {`${contact?.primaryAddress?.street} 
             ${contact?.primaryAddress?.city}, ${contact?.primaryAddress?.state} ${contact?.primaryAddress?.postalCode}`}
           </Typography>
         )}
-        {contactType && (
+        {isContactType && (
           <Typography variant="body2">
             <Trans
               defaults="<bold>Source:</bold> {{where}}"
@@ -232,7 +232,7 @@ const ContactItem: React.FC<ContactItemProps> = ({
             />
           </Typography>
         )}
-        {personType && contact.primaryPhoneNumber && (
+        {isPersonType && contact.primaryPhoneNumber && (
           <Box>
             <InlineTypography variant="body2">
               {`${contact?.primaryPhoneNumber?.number}`}
@@ -249,7 +249,7 @@ const ContactItem: React.FC<ContactItemProps> = ({
             </Tooltip>
           </Box>
         )}
-        {personType && contact.primaryEmailAddress && (
+        {isPersonType && contact.primaryEmailAddress && (
           <Box>
             <InlineTypography variant="body2">
               {`${contact?.primaryEmailAddress?.email}`}

diff --git 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<Props> = ({
   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<Props> = ({
     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<Props> = ({
             <Typography variant="h4">{t('Merge Contacts')}</Typography>
             <Divider className={classes.divider} />
           </Grid>
-          {showing > 0 ? (
+          {duplicatesDisplayedCount ? (
             <>
               <Grid item xs={12}>
                 <Box
@@ -164,11 +163,11 @@ const MergeContacts: React.FC<Props> = ({
                   </Typography>
                 </Box>
               </Grid>
-              <MemoizedStickyConfirmButtons
+              <StickyConfirmButtons
                 accountListId={accountListId}
                 loading={loading}
                 updating={updating}
-                showing={showing}
+                duplicatesDisplayedCount={duplicatesDisplayedCount}
                 disabled={disabled}
                 totalCount={totalCount}
                 confirmAction={mergeContacts}

diff --git a/src/components/Tool/MergeContacts/StickyConfirmButtons.tsx b/src/components/Tool/MergeContacts/StickyConfirmButtons.tsx
@@ -6,13 +6,33 @@ import { LoadingSpinner } from 'src/components/Settings/Organization/LoadingSpin
 import theme from 'src/theme';
 import { ActionType } from './MergeContacts';
 
+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',
+  },
+}));
 interface StickyConfirmButtonsProps {
   accountListId: string;
   confirmAction: () => void;
   disabled: boolean;
   loading: boolean;
   setActions: Dispatch<SetStateAction<Record<string, ActionType>>>;
-  showing: number;
+  duplicatesDisplayedCount: number;
   totalCount: number;
   updating: boolean;
 }
@@ -22,30 +42,10 @@ export const StickyConfirmButtons: React.FC<StickyConfirmButtonsProps> = ({
   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<StickyConfirmButtonsProps> = ({
       <Box>
         <Typography>
           <Trans
-            defaults="<i>Showing <bold>{{showing}}</bold> of <bold>{{totalCount}}</bold></i>"
+            defaults="<i>Showing <bold>{{duplicatesDisplayedCount}}</bold> of <bold>{{totalCount}}</bold></i>"
             shouldUnescape
             values={{
-              showing,
+              duplicatesDisplayedCount,
               totalCount,
             }}
             components={{ bold: <strong />, i: <i /> }}

diff --git 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<Props> = ({
   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<Props> = ({
     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<Props> = ({
             <Typography variant="h4">{t('Merge People')}</Typography>
             <Divider className={classes.divider} />
           </Grid>
-          {showing > 0 ? (
+          {duplicatesDisplayedCount ? (
             <>
               <Grid item xs={12}>
                 <Box
@@ -167,11 +165,11 @@ const MergePeople: React.FC<Props> = ({
                   </Typography>
                 </Box>
               </Grid>
-              <MemoizedStickyConfirmButtons
+              <StickyConfirmButtons
                 accountListId={accountListId}
                 loading={loading}
                 updating={updating}
-                showing={showing}
+                duplicatesDisplayedCount={duplicatesDisplayedCount}
                 disabled={disabled}
                 totalCount={totalCount}
                 confirmAction={mergePeople}