UIORGS-434 UIORGS-433 preparation for react 19

CHANGELOG.md

@@ -9,6 +9,8 @@
 * Add "Duplicate" integration action to organization integration view. Refs UIORGS-441.
 * *BREAKING* Add number generator for vendor code including settings page. Refs UIORGS-336, UIORGS-337.
 * Enhancement help text on Settings > Organizations > Number generator options. Refs UIORGS-453.
+* React v19: refactor away from react-test-renderer. Refs UIORGS-433.
+* React v19: refactor away from default props for functional components. Refs UIORGS-434.
 
 ## [5.2.0](https://github.com/folio-org/ui-organizations/tree/v5.2.0) (2024-10-31)
 [Full Changelog](https://github.com/folio-org/ui-organizations/compare/v5.1.1...v5.2.0)

package.json

@@ -369,7 +369,6 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-router-prop-types": "^1.0.4",
-    "react-test-renderer": "^16.5.1",
     "redux": "^4.0.0",
     "regenerator-runtime": "^0.13.3"
   },

src/ContactPeople/ContactPerson/ContactPerson.js

@@ -13,7 +13,7 @@ import ContactPersonPhones from './ContactPersonPhones';
 import ContactPersonEmails from './ContactPersonEmails';
 import ContactPersonURLs from './ContactPersonURLs';
 
-const ContactPerson = ({ contact, categories, withCollapsing }) => {
+const ContactPerson = ({ contact, categories = [], withCollapsing = true }) => {
   const addresses = hydrateAddresses(categories, contact.addresses);
   const emails = mixCategories(categories, contact.emails);
   const phoneNumbers = mixCategories(categories, contact.phoneNumbers);
@@ -61,9 +61,4 @@ ContactPerson.propTypes = {
   withCollapsing: PropTypes.bool,
 };
 
-ContactPerson.defaultProps = {
-  categories: [],
-  withCollapsing: true,
-};
-
 export default ContactPerson;

src/ContactPeople/ContactPerson/ContactPersonAddresses/ContactPersonAddresses.js

@@ -8,7 +8,11 @@ import ContactPersonAddress from './ContactPersonAddress';
 
 const renderAddressFn = (address, i) => <ContactPersonAddress address={address} key={i} />;
 
-const ContactPersonAddresses = ({ addresses, withCollapsing, renderAddress }) => {
+const ContactPersonAddresses = ({
+  addresses = [],
+  withCollapsing = true,
+  renderAddress = renderAddressFn,
+}) => {
   if (!addresses.length) return null;
 
   const renderHeader = () => (
@@ -39,10 +43,4 @@ ContactPersonAddresses.propTypes = {
   renderAddress: PropTypes.func,
 };
 
-ContactPersonAddresses.defaultProps = {
-  addresses: [],
-  withCollapsing: true,
-  renderAddress: renderAddressFn,
-};
-
 export default ContactPersonAddresses;

src/ContactPeople/ContactPerson/ContactPersonDetails/ContactPersonDetails.js

@@ -8,13 +8,13 @@ import { LANG_LABEL_BY_CODE } from '@folio/stripes-acq-components';
 import ContactPersonSection from '../ContactPersonSection';
 
 const ContactPersonDetails = ({
-  categories,
+  categories = '',
   firstName,
-  isInactive,
-  language,
+  isInactive = false,
+  language = '',
   lastName,
   notes,
-  prefix,
+  prefix = '',
 }) => {
   const renderHeader = () => (
     <FormattedMessage id="ui-organizations.contactPeople.name" />
@@ -86,11 +86,4 @@ ContactPersonDetails.propTypes = {
   notes: PropTypes.string,
 };
 
-ContactPersonDetails.defaultProps = {
-  prefix: '',
-  language: '',
-  isInactive: false,
-  categories: '',
-};
-
 export default ContactPersonDetails;

src/ContactPeople/ContactPerson/ContactPersonEmails/ContactPersonEmails.js

@@ -39,7 +39,7 @@ const renderEmail = email => (
   </ContactPersonItem>
 );
 
-const ContactPersonEmails = ({ emails, withCollapsing }) => {
+const ContactPersonEmails = ({ emails = [], withCollapsing = true }) => {
   if (!emails.length) return null;
 
   const renderHeader = () => (
@@ -69,9 +69,4 @@ ContactPersonEmails.propTypes = {
   withCollapsing: PropTypes.bool,
 };
 
-ContactPersonEmails.defaultProps = {
-  emails: [],
-  withCollapsing: true,
-};
-
 export default ContactPersonEmails;

src/ContactPeople/ContactPerson/ContactPersonItem/ContactPersonItem.js

@@ -6,7 +6,7 @@ import { LayoutHeader } from '@folio/stripes/components';
 
 import css from './ContactPersonItem.css';
 
-const ContactPersonItem = ({ children, isPrimary }) => {
+const ContactPersonItem = ({ children, isPrimary = false }) => {
   const title = <FormattedMessage id={`ui-organizations.${isPrimary ? 'primaryItem' : 'alternateItem'}`} />;
 
   return (
@@ -24,8 +24,4 @@ ContactPersonItem.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-ContactPersonItem.defaultProps = {
-  isPrimary: false,
-};
-
 export default ContactPersonItem;

src/ContactPeople/ContactPerson/ContactPersonPhones/ContactPersonPhones.js

@@ -39,7 +39,7 @@ const renderPhone = phone => (
   </ContactPersonItem>
 );
 
-const ContactPersonPhones = ({ phones, withCollapsing }) => {
+const ContactPersonPhones = ({ phones = [], withCollapsing = true }) => {
   if (!phones.length) return null;
 
   const renderHeader = () => (
@@ -69,9 +69,4 @@ ContactPersonPhones.propTypes = {
   withCollapsing: PropTypes.bool,
 };
 
-ContactPersonPhones.defaultProps = {
-  phones: [],
-  withCollapsing: true,
-};
-
 export default ContactPersonPhones;

src/ContactPeople/ContactPerson/ContactPersonURLs/ContactPersonURLs.js

@@ -50,7 +50,7 @@ const renderURL = url => (
   </ContactPersonItem>
 );
 
-const ContactPersonURLs = ({ urls, withCollapsing }) => {
+const ContactPersonURLs = ({ urls = [], withCollapsing = true }) => {
   if (!urls.length) return null;
 
   const renderHeader = () => (
@@ -80,9 +80,4 @@ ContactPersonURLs.propTypes = {
   withCollapsing: PropTypes.bool,
 };
 
-ContactPersonURLs.defaultProps = {
-  urls: [],
-  withCollapsing: true,
-};
-
 export default ContactPersonURLs;

src/Organizations/OrganizationDetails/OrganizationAccounts/OrganizationAccounts.js

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { OrganizationAccount } from './OrganizationAccount';
 
-const OrganizationAccounts = ({ accounts }) => {
+const OrganizationAccounts = ({ accounts = [] }) => {
   if (!accounts.length) {
     return (
       <p>
@@ -40,8 +40,4 @@ OrganizationAccounts.propTypes = {
   accounts: PropTypes.arrayOf(PropTypes.object),
 };
 
-OrganizationAccounts.defaultProps = {
-  accounts: [],
-};
-
 export default OrganizationAccounts;

src/Organizations/OrganizationDetails/OrganizationAgreements/OrganizationAgreements.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import OrganizationAgreement from './OrganizationAgreement';
 
-const OrganizationAgreements = ({ agreements }) => {
+const OrganizationAgreements = ({ agreements = [] }) => {
   if (!agreements.length) {
     return (
       <p>
@@ -37,8 +37,4 @@ OrganizationAgreements.propTypes = {
   agreements: PropTypes.arrayOf(PropTypes.object),
 };
 
-OrganizationAgreements.defaultProps = {
-  agreements: [],
-};
-
 export default OrganizationAgreements;

src/Organizations/OrganizationDetails/OrganizationContactInfo/OrganizationContactInfo.js

@@ -25,7 +25,7 @@ const filterByCatId = (catId) => ({ categories = [] }) => {
     : categories.includes(catId);
 };
 
-const OrganizationContactInfo = ({ organization, vendorCategories }) => {
+const OrganizationContactInfo = ({ organization, vendorCategories = [] }) => {
   if (!organization) {
     return (
       <div style={{ paddingTop: '1rem' }}><Icon icon="spinner-ellipsis" width="100px" /></div>
@@ -82,8 +82,4 @@ OrganizationContactInfo.propTypes = {
   vendorCategories: PropTypes.arrayOf(PropTypes.object),
 };
 
-OrganizationContactInfo.defaultProps = {
-  vendorCategories: [],
-};
-
 export default OrganizationContactInfo;

src/Organizations/OrganizationDetails/OrganizationContactPeople/OrganizationContactPeople.js

@@ -51,7 +51,11 @@ const getResultsFormatter = ({ intl, vendorCategories }) => ({
 
 const alignRowProps = { alignLastColToEnd: true };
 
-const OrganizationContactPeople = ({ vendorCategories, contacts, openContact }) => {
+const OrganizationContactPeople = ({
+  vendorCategories = [],
+  contacts = [],
+  openContact,
+}) => {
   const intl = useIntl();
 
   const resultsFormatter = useMemo(() => {
@@ -77,9 +81,4 @@ OrganizationContactPeople.propTypes = {
   openContact: PropTypes.func.isRequired,
 };
 
-OrganizationContactPeople.defaultProps = {
-  vendorCategories: [],
-  contacts: [],
-};
-
 export default OrganizationContactPeople;

src/Organizations/OrganizationDetails/OrganizationContactPeople/OrganizationContactPeopleContainer.js

@@ -19,7 +19,7 @@ export const OrganizationContactPeopleContainer = ({
   history,
   match,
   mutator,
-  vendorCategories,
+  vendorCategories = [],
 }) => {
   const organizationId = match.params.id;
   const [contacts, setContacts] = useState([]);
@@ -87,8 +87,4 @@ OrganizationContactPeopleContainer.propTypes = {
   vendorCategories: PropTypes.arrayOf(PropTypes.object),
 };
 
-OrganizationContactPeopleContainer.defaultProps = {
-  vendorCategories: [],
-};
-
 export default withRouter(stripesConnect(OrganizationContactPeopleContainer));

src/Organizations/OrganizationDetails/OrganizationDetails.js

@@ -88,9 +88,9 @@ const OrganizationDetails = ({
   onViewExportLog,
   onUpdate,
   organization,
-  organizationCategories,
+  organizationCategories = [],
   integrationConfigs,
-  isBankingInformationEnabled,
+  isBankingInformationEnabled = false,
   organizationTypes,
 }) => {
   const stripes = useStripes();
@@ -483,9 +483,4 @@ OrganizationDetails.propTypes = {
   organizationTypes: PropTypes.arrayOf(PropTypes.object),
 };
 
-OrganizationDetails.defaultProps = {
-  organizationCategories: [],
-  isBankingInformationEnabled: false,
-};
-
 export default OrganizationDetails;

src/Organizations/OrganizationDetails/OrganizationSummary/OrganizationSummary.js

@@ -19,12 +19,12 @@ import { ORGANIZATION_SECTIONS } from '../../constants';
 
 const OrganizationSummary = ({
   acqUnitIds,
-  aliases,
+  aliases = [],
   code,
   description,
   erpCode,
-  isVendor,
-  isDonor,
+  isVendor = false,
+  isDonor = false,
   language,
   metadata,
   name,
@@ -155,10 +155,4 @@ OrganizationSummary.propTypes = {
   organizationTypes: PropTypes.arrayOf(PropTypes.string),
 };
 
-OrganizationSummary.defaultProps = {
-  aliases: [],
-  isVendor: false,
-  isDonor: false,
-};
-
 export default OrganizationSummary;

src/Organizations/OrganizationDetails/OrganizationVendorInfo/OrganizationVendorInfo.js

@@ -14,7 +14,7 @@ import { PAYMENT_METHOD_LABELS } from '@folio/stripes-acq-components';
 
 const OrganizationVendorInfo = ({
   paymentMethod,
-  vendorCurrencies,
+  vendorCurrencies = [],
   claimingInterval,
   discountPercent,
   expectedActivationInterval,
@@ -25,7 +25,7 @@ const OrganizationVendorInfo = ({
   taxId,
   taxPercentage,
   isLiableForVat,
-  isExportToAccounting,
+  isExportToAccounting = true,
 }) => {
   const vendorCurrenciesString = vendorCurrencies
     .map(currency => {
@@ -161,9 +161,4 @@ OrganizationVendorInfo.propTypes = {
   isExportToAccounting: PropTypes.bool,
 };
 
-OrganizationVendorInfo.defaultProps = {
-  vendorCurrencies: [],
-  isExportToAccounting: false,
-};
-
 export default OrganizationVendorInfo;

src/Organizations/OrganizationForm/OrganizationForm.js

@@ -41,12 +41,14 @@ import {
   MAP_FIELD_ACCORDION,
 } from '../constants';
 
+const defaultPaneTitle = <FormattedMessage id="ui-organizations.createOrg.title" />;
+
 const OrganizationForm = ({
   pristine,
   submitting,
   handleSubmit,
   initialValues,
-  paneTitle,
+  paneTitle = defaultPaneTitle,
   cancelForm,
   values: formValues,
   form,
@@ -275,10 +277,6 @@ OrganizationForm.propTypes = {
   form: PropTypes.object,
 };
 
-OrganizationForm.defaultProps = {
-  paneTitle: <FormattedMessage id="ui-organizations.createOrg.title" />,
-};
-
 export default stripesForm({
   keepDirtyOnReinitialize: true,
   navigationCheck: true,

src/Organizations/OrganizationsList/OrganizationsList.js

@@ -81,11 +81,11 @@ const getResultsFormatter = ({ search }) => ({
 });
 
 const OrganizationsList = ({
-  isLoading,
+  isLoading = false,
   onNeedMoreData,
   resetData,
-  organizations,
-  organizationsCount,
+  organizations = [],
+  organizationsCount = 0,
   refreshList,
   resultsPaneTitleRef,
   pagination,
@@ -279,10 +279,4 @@ OrganizationsList.propTypes = {
   pagination: PropTypes.object,
 };
 
-OrganizationsList.defaultProps = {
-  organizationsCount: 0,
-  isLoading: false,
-  organizations: [],
-};
-
 export default OrganizationsList;