Updating the useGetPledgeOrDonation hook to return a object and use a…

… useMemo and Making hook take one object instead of 3 arguments
CruGlobal · Aug 30, 2024 · aad2fc4 · aad2fc4
1 parent d1ac4fd
commit aad2fc4
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 101 deletions.
diff --git a/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.tsx b/src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.tsx
@@ -22,7 +22,6 @@ import {
 import { StarContactIconButton } from 'src/components/Contacts/StarContactIconButton/StarContactIconButton';
 import { useGetPledgeOrDonation } from 'src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation';
 import { StatusEnum } from 'src/graphql/types.generated';
-import { useLocale } from 'src/hooks/useLocale';
 import theme from 'src/theme';
 import { getLocalizedContactStatus } from 'src/utils/functions/getLocalizedContactStatus';
 import {
@@ -94,7 +93,6 @@ export const ContactFlowRow: React.FC<Props> = ({
 }) => {
   const { id, name, starred } = contact;
   const { t } = useTranslation();
-  const locale = useLocale();
   const {
     appealId,
     isRowChecked: isChecked,
@@ -104,7 +102,7 @@ export const ContactFlowRow: React.FC<Props> = ({
   const [deletePledgeModalOpen, setDeletePledgeModalOpen] = useState(false);
 
   const { pledgeValues, amountAndFrequency, pledgeDonations, pledgeOverdue } =
-    useGetPledgeOrDonation(appealStatus, contact, appealId ?? '', locale);
+    useGetPledgeOrDonation({ appealStatus, contact, appealId: appealId ?? '' });
 
   const [{ isDragging }, drag, preview] = useDrag(
     () => ({
@@ -188,7 +186,11 @@ export const ContactFlowRow: React.FC<Props> = ({
                 {appealStatus === AppealStatusEnum.Processed &&
                   pledgeDonations?.map((donation, idx) => (
                     <Typography key={`${donation}-${idx}`} variant="body2">
-                      {amountAndFrequency} {donation}
+                      <AmountAndFrequency
+                        amountAndFrequency={amountAndFrequency}
+                        pledgeOverdue={pledgeOverdue}
+                      />{' '}
+                      {donation}
                     </Typography>
                   ))}
               </Box>

diff --git a/src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx b/src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx
@@ -19,7 +19,6 @@ import {
 } from 'src/components/Contacts/ContactRow/ContactRow';
 import { preloadContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel';
 import { useGetPledgeOrDonation } from 'src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation';
-import { useLocale } from 'src/hooks/useLocale';
 import theme from 'src/theme';
 import {
   AppealStatusEnum,
@@ -79,7 +78,6 @@ export const ContactRow: React.FC<Props> = ({
     setContactFocus: onContactSelected,
     toggleSelectionById: onContactCheckToggle,
   } = React.useContext(AppealsContext) as AppealsType;
-  const locale = useLocale();
   const [createPledgeModalOpen, setPledgeModalOpen] = useState(false);
   const [deletePledgeModalOpen, setDeletePledgeModalOpen] = useState(false);
   const [addExcludedContactModalOpen, setAddExcludedContactModalOpen] =
@@ -93,7 +91,11 @@ export const ContactRow: React.FC<Props> = ({
   const { id: contactId, name } = contact;
 
   const { pledgeValues, amountAndFrequency, pledgeDonations, pledgeOverdue } =
-    useGetPledgeOrDonation(appealStatus, contact, appealId ?? '', locale);
+    useGetPledgeOrDonation({
+      appealStatus,
+      contact,
+      appealId: appealId ?? '',
+    });
 
   const handleCreatePledge = () => {
     setPledgeModalOpen(true);
@@ -200,7 +202,11 @@ export const ContactRow: React.FC<Props> = ({
                 {appealStatus === AppealStatusEnum.Processed &&
                   pledgeDonations?.map((donation, idx) => (
                     <Typography key={`${donation}-${idx}`} component="span">
-                      {amountAndFrequency} {donation}
+                      <AmountAndFrequency
+                        amountAndFrequency={amountAndFrequency}
+                        pledgeOverdue={pledgeOverdue}
+                      />
+                      {donation}
                     </Typography>
                   ))}
               </Box>

diff --git a/src/components/Tool/Appeal/Shared/AmountAndFrequency/AmountAndFrequency.tsx b/src/components/Tool/Appeal/Shared/AmountAndFrequency/AmountAndFrequency.tsx
@@ -2,21 +2,20 @@ import { UseGetPledgeOrDonation } from 'src/components/Tool/Appeal/Shared/useGet
 import theme from 'src/theme';
 
 export const AmountAndFrequency: React.FC<
-  Omit<UseGetPledgeOrDonation, 'pledgeValues' | 'pledgeDonations'>
+  Pick<UseGetPledgeOrDonation, 'amountAndFrequency' | 'pledgeOverdue'>
 > = ({ amountAndFrequency, pledgeOverdue }) => {
-  const amount = amountAndFrequency?.length ? amountAndFrequency[0] : '';
-  const dateString =
-    amountAndFrequency?.length === 2 ? (
-      <span
-        style={{
-          color: pledgeOverdue ? theme.palette.statusDanger.main : 'inherit',
-        }}
-      >
-        {amountAndFrequency[1]}
-      </span>
-    ) : (
-      ''
-    );
+  const amount = amountAndFrequency?.amount ?? '';
+  const dateString = amountAndFrequency?.dateOrFrequency ? (
+    <span
+      style={{
+        color: pledgeOverdue ? theme.palette.statusDanger.main : 'inherit',
+      }}
+    >
+      {amountAndFrequency?.dateOrFrequency}
+    </span>
+  ) : (
+    ''
+  );
   return (
     <>
       {amount} {dateString}

diff --git a/src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation.test.ts b/src/components/Tool/Appeal/Shared/useGetPledgeOrDonation/useGetPledgeOrDonation.test.ts
@@ -7,43 +7,53 @@ const appealId = 'appealId';
 describe('useGetPledgeOrDonation', () => {
   it('returns the normal donation amount when in appeal status Asked', () => {
     const { result } = renderHook(() =>
-      useGetPledgeOrDonation(AppealStatusEnum.Asked, defaultContact, appealId),
+      useGetPledgeOrDonation({
+        appealStatus: AppealStatusEnum.Asked,
+        contact: defaultContact,
+        appealId: appealId,
+      }),
     );
 
-    expect(result.current.amountAndFrequency).toEqual(['CA$500', 'Monthly']);
+    expect(result.current.amountAndFrequency).toEqual({
+      amount: 'CA$500',
+      dateOrFrequency: 'Monthly',
+    });
 
     expect(result.current.pledgeDonations).toBeNull();
     expect(result.current.pledgeValues).toBeUndefined();
   });
 
   it('returns the normal donation amount when in appeal status Excluded', () => {
     const { result } = renderHook(() =>
-      useGetPledgeOrDonation(
-        AppealStatusEnum.Excluded,
-        defaultContact,
-        appealId,
-      ),
+      useGetPledgeOrDonation({
+        appealStatus: AppealStatusEnum.Excluded,
+        contact: defaultContact,
+        appealId: appealId,
+      }),
     );
 
-    expect(result.current.amountAndFrequency).toEqual(['CA$500', 'Monthly']);
+    expect(result.current.amountAndFrequency).toEqual({
+      amount: 'CA$500',
+      dateOrFrequency: 'Monthly',
+    });
 
     expect(result.current.pledgeDonations).toBeNull();
     expect(result.current.pledgeValues).toBeUndefined();
   });
 
   it('returns the pledge when in appeal status Committed', () => {
     const { result } = renderHook(() =>
-      useGetPledgeOrDonation(
-        AppealStatusEnum.NotReceived,
-        defaultContact,
-        appealId,
-      ),
+      useGetPledgeOrDonation({
+        appealStatus: AppealStatusEnum.NotReceived,
+        contact: defaultContact,
+        appealId: appealId,
+      }),
     );
 
-    expect(result.current.amountAndFrequency).toEqual([
-      '$3,000',
-      '(Aug 8, 2024)',
-    ]);
+    expect(result.current.amountAndFrequency).toEqual({
+      amount: '$3,000',
+      dateOrFrequency: '(Aug 8, 2024)',
+    });
 
     expect(result.current.pledgeDonations).toBeNull();
     expect(result.current.pledgeValues).toEqual({
@@ -57,17 +67,17 @@ describe('useGetPledgeOrDonation', () => {
 
   it('returns the pledge when in appeal status Received', () => {
     const { result } = renderHook(() =>
-      useGetPledgeOrDonation(
-        AppealStatusEnum.ReceivedNotProcessed,
-        defaultContact,
-        appealId,
-      ),
+      useGetPledgeOrDonation({
+        appealStatus: AppealStatusEnum.ReceivedNotProcessed,
+        contact: defaultContact,
+        appealId: appealId,
+      }),
     );
 
-    expect(result.current.amountAndFrequency).toEqual([
-      '$3,000',
-      '(Aug 8, 2024)',
-    ]);
+    expect(result.current.amountAndFrequency).toEqual({
+      amount: '$3,000',
+      dateOrFrequency: '(Aug 8, 2024)',
+    });
 
     expect(result.current.pledgeDonations).toBeNull();
     expect(result.current.pledgeValues).toEqual({
@@ -81,14 +91,17 @@ describe('useGetPledgeOrDonation', () => {
 
   it('returns the donations to appeal when in appeal status Given', () => {
     const { result } = renderHook(() =>
-      useGetPledgeOrDonation(
-        AppealStatusEnum.Processed,
-        defaultContact,
-        appealId,
-      ),
+      useGetPledgeOrDonation({
+        appealStatus: AppealStatusEnum.Processed,
+        contact: defaultContact,
+        appealId: appealId,
+      }),
     );
 
-    expect(result.current.amountAndFrequency).toEqual(['$3,000']);
+    expect(result.current.amountAndFrequency).toEqual({
+      amount: '$3,000',
+      dateOrFrequency: '',
+    });
 
     expect(result.current.pledgeDonations).toEqual(['($50) (Jun 25, 2019)']);
     expect(result.current.pledgeValues).toEqual({
@@ -117,12 +130,16 @@ describe('useGetPledgeOrDonation', () => {
         ],
       };
       const { result } = renderHook(() =>
-        useGetPledgeOrDonation(AppealStatusEnum.NotReceived, contact, appealId),
+        useGetPledgeOrDonation({
+          appealStatus: AppealStatusEnum.NotReceived,
+          contact: contact,
+          appealId: appealId,
+        }),
       );
-      expect(result.current.amountAndFrequency).toEqual([
-        '$3,000',
-        '(Aug 8, 2001)',
-      ]);
+      expect(result.current.amountAndFrequency).toEqual({
+        amount: '$3,000',
+        dateOrFrequency: '(Aug 8, 2001)',
+      });
       expect(result.current.pledgeOverdue).toEqual(true);
     });
 
@@ -147,7 +164,11 @@ describe('useGetPledgeOrDonation', () => {
         },
       };
       const { result } = renderHook(() =>
-        useGetPledgeOrDonation(AppealStatusEnum.Processed, contact, appealId),
+        useGetPledgeOrDonation({
+          appealStatus: AppealStatusEnum.Processed,
+          contact: contact,
+          appealId: appealId,
+        }),
       );
       expect(result.current.pledgeDonations).toEqual(['($50) (Jun 25, 2001)']);
       expect(result.current.pledgeOverdue).toEqual(false);