Add fragments to fix typing issue for react children

Seems like JSX.Element expects a single child. React.ReactNode as a type for children did not work either. So I did it the alternative way and added fragments.
City-of-Helsinki · Aug 16, 2024 · 643ee4e · 643ee4e
1 parent 3a90d62
commit 643ee4e
Show file tree

Hide file tree

Showing 69 changed files with 1,052 additions and 19 deletions.
diff --git a/src/contacts/components/ContactAuditLog.tsx b/src/contacts/components/ContactAuditLog.tsx
@@ -12,10 +12,10 @@ import { getApiResponseCount, getApiResponseMaxPage, getApiResponseResults } fro
 import { getAuditLogByContact, getIsFetchingByContact } from "@/auditLog/selectors";
 import type { AuditLogList } from "@/auditLog/types";
 type Props = {
-  auditLogList: AuditLogList;
+  auditLogList?: AuditLogList;
   contactId: string;
-  fetchAuditLogByContact: (...args: Array<any>) => any;
-  isFetching: boolean;
+  fetchAuditLogByContact?: (...args: Array<any>) => any;
+  isFetching?: boolean;
 };
 type State = {
   activePage: number;

diff --git a/src/contacts/components/ContactPage.tsx b/src/contacts/components/ContactPage.tsx
@@ -441,7 +441,13 @@ class ContactPage extends Component<Props, State> {
                   {ContactFieldTitles.BASIC_INFO}
                 </Title>
                 <Divider />
-                {isEditMode ? <Authorization allow={isMethodAllowed(contactMethods, Methods.PATCH)} errorComponent={<AuthorizationError text={PermissionMissingTexts.GENERAL} />}> <ContactEdit /></Authorization> : <ContactReadonly contact={contact} />}
+                {isEditMode ? (
+                  <Authorization allow={isMethodAllowed(contactMethods, Methods.PATCH)} errorComponent={<AuthorizationError text={PermissionMissingTexts.GENERAL} />}>
+                    <ContactEdit />
+                  </Authorization>
+                ) : (
+                  <ContactReadonly contact={contact} />
+                )}
               </ContentContainer>
             </TabPane>
 
@@ -462,23 +468,27 @@ class ContactPage extends Component<Props, State> {
             <TabPane>
               <ContentContainer>
                 <Authorization allow={hasPermissions(usersPermissions, UsersPermissions.VIEW_CREDITDECISION)} errorComponent={<AuthorizationError text={PermissionMissingTexts.GENERAL} />}>
+                  <>
                   <Title enableUiDataEdit={isEditMode} uiDataKey={getUiDataContactKey(ContactFieldPaths.CREDIT_DECISION)}>
                     {ContactFieldTitles.CREDIT_DECISION}
                   </Title>
                   <Divider />
                   <CreditDecisionTemplate contactType={contact.type} contactId={contactId} />
+                  </>
                 </Authorization>
               </ContentContainer>
             </TabPane>
 
             <TabPane>
               <ContentContainer>
                 <Authorization allow={hasPermissions(usersPermissions, UsersPermissions.VIEW_CONTACT)} errorComponent={<AuthorizationError text={PermissionMissingTexts.GENERAL} />}>
+                  <>
                   <Title enableUiDataEdit={isEditMode} uiDataKey={getUiDataContactKey(ContactFieldPaths.AUDIT_LOG)}>
                     {ContactFieldTitles.AUDIT_LOG}
                   </Title>
                   <Divider />
                   <ContactAuditLog contactId={contactId} />
+                  </>
                 </Authorization>
               </ContentContainer>
             </TabPane>

diff --git a/src/contacts/components/forms/ContactForm.tsx b/src/contacts/components/forms/ContactForm.tsx
@@ -274,12 +274,14 @@ class ContactForm extends Component<Props> {
               </Column>
               <Column small={12} medium={6} large={4}>
                 <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.SERVICE_UNIT)}>
+                  <>
                   <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.SERVICE_UNIT)}>
                     {ContactFieldTitles.SERVICE_UNIT}
                   </FormTextTitle>
                   <FormText>
                     {initialValues.service_unit ? initialValues.service_unit.name || '-' : userActiveServiceUnit && userActiveServiceUnit.name || '-'}
                   </FormText>
+                  </>
                 </Authorization>
               </Column>
               {type === ContactTypes.PERSON && <Column small={12} medium={6} large={4}>

diff --git a/src/contacts/components/templates/ContactTemplate.tsx b/src/contacts/components/templates/ContactTemplate.tsx
@@ -31,98 +31,120 @@ const ContactTemplate = ({
         <Row>
           <Column small={12} medium={6} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.TYPE)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.TYPE)}>
                 {ContactFieldTitles.TYPE}
               </FormTextTitle>
               <FormText>{getLabelOfOption(typeOptions, contact.type) || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
           {contact.type === ContactTypes.PERSON && <Column small={12} medium={6} large={4}>
               <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.LAST_NAME)}>
+                <>
                 <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.LAST_NAME)}>
                   {ContactFieldTitles.LAST_NAME}
                 </FormTextTitle>
                 <FormText>{contact.last_name || '-'}</FormText>
+                </>
               </Authorization>
             </Column>}
           {contact.type === ContactTypes.PERSON && <Column small={12} medium={6} large={4}>
               <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.FIRST_NAME)}>
+                <>
                 <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.FIRST_NAME)}>
                   {ContactFieldTitles.FIRST_NAME}
                 </FormTextTitle>
                 <FormText>{contact.first_name || '-'}</FormText>
+                </>
               </Authorization>
             </Column>}
           {contact.type && contact.type !== ContactTypes.PERSON && <Column small={12} medium={6} large={8}>
               <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.NAME)}>
+                <>
                 <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.NAME)}>
                   {ContactFieldTitles.NAME}
                 </FormTextTitle>
                 <FormText>{contact.name || '-'}</FormText>
+                </>
               </Authorization>
             </Column>}
         </Row>
         <Row>
           <Column>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.CARE_OF)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.CARE_OF)}>
                 {ContactFieldTitles.CARE_OF}
               </FormTextTitle>
               <FormText>{contact.care_of || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
         </Row>
         <Row>
           <Column>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.ADDRESS)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.ADDRESS)}>
                 {ContactFieldTitles.ADDRESS}
               </FormTextTitle>
               <FormText>{contact.address || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
         </Row>
         <Row>
           <Column small={12} medium={4} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.POSTAL_CODE)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.POSTAL_CODE)}>
                 {ContactFieldTitles.POSTAL_CODE}
               </FormTextTitle>
               <FormText>{contact.postal_code || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
           <Column small={12} medium={4} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.CITY)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.CITY)}>
                 {ContactFieldTitles.CITY}
               </FormTextTitle>
               <FormText>{contact.city || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
           <Column small={12} medium={4} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.COUNTRY)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.COUNTRY)}>
                 {ContactFieldTitles.COUNTRY}
               </FormTextTitle>
               <FormText>{getLabelOfOption(countryOptions, contact.country) || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
         </Row>
         <Row>
           <Column small={12} medium={6} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.PHONE)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.PHONE)}>
                 {ContactFieldTitles.PHONE}
               </FormTextTitle>
               <FormText>{contact.phone || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
           <Column small={12} medium={6} large={8}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.EMAIL)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.EMAIL)}>
                 {ContactFieldTitles.EMAIL}
               </FormTextTitle>
               <FormText>{contact.email || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
         </Row>
@@ -131,78 +153,96 @@ const ContactTemplate = ({
         <Row>
           {contact.type === ContactTypes.PERSON && <Column small={12} medium={6} large={4}>
               <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.NATIONAL_IDENTIFICATION_NUMBER)}>
+                <>
                 <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.NATIONAL_IDENTIFICATION_NUMBER)}>
                   {ContactFieldTitles.NATIONAL_IDENTIFICATION_NUMBER}
                 </FormTextTitle>
                 <FormText>{contact.national_identification_number || '-'}</FormText>
+                </>
               </Authorization>
             </Column>}
           {contact.type && contact.type !== ContactTypes.PERSON && <Column small={12} medium={6} large={4}>
               <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.BUSINESS_ID)}>
+                <>
                 <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.BUSINESS_ID)}>
                   {ContactFieldTitles.BUSINESS_ID}
                 </FormTextTitle>
                 <FormText>{contact.business_id || '-'}</FormText>
+                </>
               </Authorization>
             </Column>}
           <Column small={12} medium={6} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.LANGUAGE)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.LANGUAGE)}>
                 {ContactFieldTitles.LANGUAGE}
               </FormTextTitle>
               <FormText>{getLabelOfOption(languageOptions, contact.language) || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
           <Column small={12} medium={6} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.SAP_CUSTOMER_NUMBER)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.SAP_CUSTOMER_NUMBER)}>
                 {ContactFieldTitles.SAP_CUSTOMER_NUMBER}
               </FormTextTitle>
               <FormText>{contact.sap_customer_number || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
         </Row>
         <Row>
           <Column small={12} medium={6} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.PARTNER_CODE)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.PARTNER_CODE)}>
                 {ContactFieldTitles.PARTNER_CODE}
               </FormTextTitle>
               <FormText>{contact.partner_code || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
           <Column small={12} medium={6} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.ELECTRONIC_BILLING_ADDRESS)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.ELECTRONIC_BILLING_ADDRESS)}>
                 {ContactFieldTitles.ELECTRONIC_BILLING_ADDRESS}
               </FormTextTitle>
               <FormText>{contact.electronic_billing_address || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
           <Column small={12} medium={6} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.ID)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.ID)}>
                 {ContactFieldTitles.ID}
               </FormTextTitle>
               <FormText>{contact.id || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
         </Row>
         <Row>
           <Column small={12} medium={6} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.IS_LESSOR)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.IS_LESSOR)}>
                 {ContactFieldTitles.IS_LESSOR}
               </FormTextTitle>
               <FormText>{contact.is_lessor ? 'Kyllä' : 'Ei'}</FormText>
+              </>
             </Authorization>
           </Column>
           <Column small={12} medium={6} large={4}>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.SERVICE_UNIT)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.SERVICE_UNIT)}>
                 {ContactFieldTitles.SERVICE_UNIT}
               </FormTextTitle>
               <FormText>{contact.service_unit && contact.service_unit.name ? contact.service_unit.name : '-'}</FormText>
+              </>
             </Authorization>
           </Column>
           {contact.type === ContactTypes.PERSON && <Column small={12} medium={6} large={4}>
@@ -215,10 +255,12 @@ const ContactTemplate = ({
         <Row>
           <Column>
             <Authorization allow={isFieldAllowedToRead(attributes, ContactFieldPaths.NOTE)}>
+              <>
               <FormTextTitle uiDataKey={getUiDataContactKey(ContactFieldPaths.NOTE)}>
                 {ContactFieldTitles.NOTE}
               </FormTextTitle>
               <FormText>{contact.note || '-'}</FormText>
+              </>
             </Authorization>
           </Column>
         </Row>

diff --git a/src/infillDevelopment/components/InfillDevelopmentPage.tsx b/src/infillDevelopment/components/InfillDevelopmentPage.tsx
@@ -463,12 +463,14 @@ class InfillDevelopmentPage extends Component<Props, State> {
             <TabPane>
               <ContentContainer>
                 <Authorization allow={isFieldAllowedToRead(infillDevelopmentAttributes, InfillDevelopmentCompensationLeasesFieldPaths.LEASE)} errorComponent={<AuthorizationError text={PermissionMissingTexts.GENERAL} />}>
+                  <>
                   <Title enableUiDataEdit={isEditMode} uiDataKey={getUiDataInfillDevelopmentKey(InfillDevelopmentCompensationFieldPaths.MAP)}>
                     {InfillDevelopmentCompensationFieldTitles.MAP}
                   </Title>
                   <Divider />
 
                   <SingleInfillDevelopmentMap />
+                  </>
                 </Authorization>
               </ContentContainer>
             </TabPane>

diff --git a/src/infillDevelopment/components/forms/InfillDevelopmentForm.tsx b/src/infillDevelopment/components/forms/InfillDevelopmentForm.tsx
@@ -123,10 +123,12 @@ class InfillDevelopmentForm extends Component<Props> {
           </Row>
 
           <Authorization allow={isFieldAllowedToRead(infillDevelopmentAttributes, InfillDevelopmentCompensationLeasesFieldPaths.INFILL_DEVELOPMENT_COMPENSATION_LEASES)}>
+            <>
             <SubTitle enableUiDataEdit uiDataKey={getUiDataInfillDevelopmentKey(InfillDevelopmentCompensationLeasesFieldPaths.INFILL_DEVELOPMENT_COMPENSATION_LEASES)}>
               {InfillDevelopmentCompensationLeasesFieldTitles.INFILL_DEVELOPMENT_COMPENSATION_LEASES}
             </SubTitle>
             <FieldArray component={LeaseItemsEdit} infillDevelopment={infillDevelopment} isSaveClicked={isSaveClicked} name={`infill_development_compensation_leases`} />
+            </>
           </Authorization>
         </GreenBox>
       </form>;