typescript fixes

Author: reldredge71

src/components/Contacts/ContactDetails/ContactDetails.tsx

@@ -52,7 +52,10 @@ export const ContactDetails: React.FC<Props> = ({
 
   const [selectedTabIndex, setSelectedTabIndex] = React.useState(0);
 
-  const handleChange = (event: React.ChangeEvent, newIndex: number) => {
+  const handleChange = (
+    _event: React.ChangeEvent<Record<string, unknown>>,
+    newIndex: number,
+  ) => {
     setSelectedTabIndex(newIndex);
   };
 

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

@@ -73,7 +73,7 @@ export const ContactDetailsHeader: React.FC<Props> = ({
   const { t } = useTranslation();
 
   return (
-    <Box style={{ padding: 24 }}>
+    <Box style={{ padding: 24, backgroundColor: 'transparent' }}>
       <HeaderBar>
         <ContactAvatar src={data?.contact?.avatar || ''} />
         <HeaderBarContactWrap>

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.stories.tsx

@@ -20,5 +20,5 @@ export const Default = (): ReactElement => {
 };
 
 export const Loading = (): ReactElement => {
-  return <ContactHeaderAddressSection loading={true} contact={null} />;
+  return <ContactHeaderAddressSection loading={true} contact={undefined} />;
 };

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.test.tsx

@@ -14,18 +14,20 @@ const contact = gqlMock<ContactDetailsHeaderFragment>(
 describe('ContactHeaderAddressSection', () => {
   it('should show loading state', async () => {
     const { queryByText } = render(
-      <ContactHeaderAddressSection loading={true} contact={null} />,
+      <ContactHeaderAddressSection loading={true} contact={undefined} />,
     );
 
-    expect(queryByText(contact.primaryAddress.street)).toBeNull();
+    expect(queryByText(contact.primaryAddress?.street || '')).toBeNull();
   });
 
   it('should render with contact details', async () => {
     const { queryByText } = render(
       <ContactHeaderAddressSection loading={false} contact={contact} />,
     );
 
-    expect(queryByText(contact.greeting)).toBeInTheDocument();
-    expect(queryByText(contact.primaryAddress.street)).toBeInTheDocument();
+    expect(queryByText(contact.greeting || '')).toBeInTheDocument();
+    expect(
+      queryByText(contact.primaryAddress?.street || ''),
+    ).toBeInTheDocument();
   });
 });

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.tsx

@@ -40,10 +40,10 @@ export const ContactHeaderAddressSection = ({
         <TextSkeleton variant="text" />
       </ContactHeaderSection>
     );
-  } else if (contact) {
+  } else if (contact && contact.primaryAddress) {
     const {
       greeting,
-      primaryAddress: { street, city, state, postalCode } = {},
+      primaryAddress: { street, city, state, postalCode },
     } = contact;
 
     if (!!greeting && !!street && !!city && !!state && !!postalCode) {

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderEmailSection.stories.tsx

@@ -20,5 +20,5 @@ export const Default = (): ReactElement => {
 };
 
 export const Loading = (): ReactElement => {
-  return <ContactHeaderEmailSection loading={true} contact={null} />;
+  return <ContactHeaderEmailSection loading={true} contact={undefined} />;
 };

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderEmailSection.test.tsx

@@ -14,11 +14,11 @@ const contact = gqlMock<ContactDetailsHeaderFragment>(
 describe('ContactHeaderEmailSection', () => {
   it('should show loading state', async () => {
     const { queryByText } = render(
-      <ContactHeaderEmailSection loading={true} contact={null} />,
+      <ContactHeaderEmailSection loading={true} contact={undefined} />,
     );
 
     expect(
-      queryByText(contact.primaryPerson.primaryEmailAddress.email),
+      queryByText(contact.primaryPerson?.primaryEmailAddress?.email || ''),
     ).toBeNull();
   });
 
@@ -28,7 +28,7 @@ describe('ContactHeaderEmailSection', () => {
     );
 
     expect(
-      queryByText(contact.primaryPerson.primaryEmailAddress.email),
+      queryByText(contact.primaryPerson?.primaryEmailAddress?.email || ''),
     ).toBeInTheDocument();
   });
 });

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderEmailSection.tsx

@@ -35,9 +35,15 @@ export const ContactHeaderEmailSection = ({
         <TextSkeleton variant="text" />
       </ContactHeaderSection>
     );
-  } else if (contact) {
+  } else if (
+    contact &&
+    contact.primaryPerson &&
+    contact.primaryPerson.primaryEmailAddress
+  ) {
     const {
-      primaryPerson: { primaryEmailAddress: { email } = {} } = {},
+      primaryPerson: {
+        primaryEmailAddress: { email },
+      },
     } = contact;
 
     if (!!email) {

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderPhoneSection.stories.tsx

@@ -20,5 +20,5 @@ export const Default = (): ReactElement => {
 };
 
 export const Loading = (): ReactElement => {
-  return <ContactHeaderPhoneSection loading={true} contact={null} />;
+  return <ContactHeaderPhoneSection loading={true} contact={undefined} />;
 };

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderPhoneSection.test.tsx

@@ -14,11 +14,11 @@ const contact = gqlMock<ContactDetailsHeaderFragment>(
 describe('ContactHeaderPhoneSection', () => {
   it('should show loading state', async () => {
     const { queryByText } = render(
-      <ContactHeaderPhoneSection loading={true} contact={null} />,
+      <ContactHeaderPhoneSection loading={true} contact={undefined} />,
     );
 
     expect(
-      queryByText(contact.primaryPerson.primaryPhoneNumber.number),
+      queryByText(contact.primaryPerson?.primaryPhoneNumber?.number || ''),
     ).toBeNull();
   });
 
@@ -28,7 +28,7 @@ describe('ContactHeaderPhoneSection', () => {
     );
 
     expect(
-      queryByText(contact.primaryPerson.primaryPhoneNumber.number),
+      queryByText(contact.primaryPerson?.primaryPhoneNumber?.number || ''),
     ).toBeInTheDocument();
   });
 });