UIIN-2890: React v19: refactor away from default props for functional…

… components (#2673)

CHANGELOG.md

@@ -6,6 +6,7 @@
 * *BREAKING* Rename quick-marc routes from `bib` to `bibliographic` and `duplicate` to `derive`. Refs UIIN-3120.
 * *BREAKING* Provide necessary props for browse lookup facets. Remove the facets state reset functionality. Refs UIIN-3099.
 * Add permission for "Share local instance" option on Member tenants. Refs UIIN-3140.
+* React v19: refactor away from default props for functional components. Refs UIIN-2890.
 
 ## [12.0.3] (IN PROGRESS)
 

src/Instance/HoldingsList/Holding/Holding.js

@@ -15,19 +15,19 @@ const Holding = ({
   holding,
   onViewHolding,
   onAddItem,
-  holdings,
-  draggable,
-  droppable,
+  holdings = [],
+  draggable = false,
+  droppable = false,
   selectHoldingsForDrag,
   isHoldingDragSelected,
-  isDraggable,
-  isItemsDroppable,
+  isDraggable = false,
+  isItemsDroppable = true,
   tenantId,
   showViewHoldingsButton,
   showAddItemButton,
   isBarcodeAsHotlink,
   instanceId,
-  pathToAccordionsState,
+  pathToAccordionsState = [],
 }) => {
   return (
     <div>
@@ -94,9 +94,4 @@ Holding.propTypes = {
   pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 };
 
-Holding.defaultProps = {
-  isItemsDroppable: true,
-  pathToAccordionsState: [],
-};
-
 export default Holding;

src/Instance/HoldingsList/Holding/HoldingContainer.js

@@ -51,7 +51,7 @@ const DraggableHolding = ({
   showAddItemButton,
   isBarcodeAsHotlink,
   instanceId,
-  pathToAccordionsState,
+  pathToAccordionsState = [],
   ...rest
 }) => {
   const rowStyles = useMemo(() => (
@@ -115,8 +115,6 @@ DraggableHolding.propTypes = {
   pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 };
 
-DraggableHolding.defaultProps = { pathToAccordionsState: [] };
-
 const HoldingContainer = ({
   location,
   history,
@@ -125,11 +123,11 @@ const HoldingContainer = ({
   isBarcodeAsHotlink,
   instance,
   holding,
-  isDraggable,
+  isDraggable = false,
   holdingIndex,
   draggingHoldingsCount,
   tenantId,
-  pathToAccordionsState,
+  pathToAccordionsState = [],
   ...rest
 }) => {
   const stripes = useStripes();
@@ -202,6 +200,4 @@ HoldingContainer.propTypes = {
   pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 };
 
-HoldingContainer.defaultProps = { pathToAccordionsState: [] };
-
 export default withRouter(HoldingContainer);

src/Instance/HoldingsList/HoldingsList.js

@@ -5,14 +5,14 @@ import { HoldingContainer } from './Holding';
 
 const HoldingsList = ({
   instance,
-  holdings,
+  holdings = [],
   tenantId,
   showViewHoldingsButton,
   showAddItemButton,
   isBarcodeAsHotlink,
-  pathToAccordionsState,
-  draggable,
-  droppable,
+  pathToAccordionsState = [],
+  draggable = false,
+  droppable = false,
 }) => holdings.map(holding => (
   <HoldingContainer
     key={`items_${holding.id}`}
@@ -41,9 +41,4 @@ HoldingsList.propTypes = {
   droppable: PropTypes.bool,
 };
 
-HoldingsList.defaultProps = {
-  holdings: [],
-  pathToAccordionsState: [],
-};
-
 export default HoldingsList;

src/Instance/HoldingsList/HoldingsListContainer.js

@@ -10,9 +10,9 @@ import { useInstanceHoldingsQuery } from '../../providers';
 
 const HoldingsListContainer = ({
   instance,
-  isHoldingsMove,
   tenantId,
-  pathToAccordionsState,
+  isHoldingsMove = false,
+  pathToAccordionsState = [],
   ...rest
 }) => {
   const stripes = useStripes();
@@ -57,6 +57,4 @@ HoldingsListContainer.propTypes = {
   pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 };
 
-HoldingsListContainer.defaultProps = { pathToAccordionsState: [] };
-
 export default HoldingsListContainer;

src/Instance/InstanceDetails/InstanceAdministrativeView/InstanceAdministrativeView.js

@@ -36,11 +36,11 @@ import StatisticalCodesList from './StatisticalCodesList';
 
 const InstanceAdministrativeView = ({
   id,
-  instance,
-  instanceStatuses,
-  issuanceModes,
-  statisticalCodes,
-  statisticalCodeTypes,
+  instance = {},
+  instanceStatuses = [],
+  issuanceModes = [],
+  statisticalCodes = [],
+  statisticalCodeTypes = [],
 }) => {
   const { search } = useLocation();
 
@@ -212,12 +212,4 @@ InstanceAdministrativeView.propTypes = {
   statisticalCodeTypes: PropTypes.arrayOf(PropTypes.object),
 };
 
-InstanceAdministrativeView.defaultProps = {
-  instance: {},
-  instanceStatuses: [],
-  issuanceModes: [],
-  statisticalCodes: [],
-  statisticalCodeTypes: [],
-};
-
 export default InstanceAdministrativeView;

src/Instance/InstanceDetails/InstanceAdministrativeView/StatisticalCodesList.js

@@ -31,7 +31,7 @@ const columnWidths = {
 };
 
 const StatisticalCodesList = ({
-  statisticalCodes,
+  statisticalCodes = [],
 }) => {
   const intl = useIntl();
 
@@ -57,8 +57,4 @@ StatisticalCodesList.propTypes = {
   statisticalCodes: PropTypes.arrayOf(PropTypes.object),
 };
 
-StatisticalCodesList.defaultProps = {
-  statisticalCodes: [],
-};
-
 export default StatisticalCodesList;

src/Instance/InstanceDetails/InstanceClassificationView/InstanceClassificationView.js

@@ -47,8 +47,8 @@ const classificationsRowFormatter = {
 
 const InstanceClassificationView = ({
   id,
-  classifications,
-  classificationTypes,
+  classifications = [],
+  classificationTypes = [],
 }) => {
   const intl = useIntl();
 
@@ -100,9 +100,4 @@ InstanceClassificationView.propTypes = {
   classificationTypes: PropTypes.arrayOf(PropTypes.object),
 };
 
-InstanceClassificationView.defaultProps = {
-  classifications: [],
-  classificationTypes: [],
-};
-
 export default InstanceClassificationView;

src/Instance/InstanceDetails/InstanceContributorsView/InstanceContributorsView.js

@@ -35,11 +35,11 @@ const columnWidths = {
 
 const InstanceContributorsView = ({
   id,
-  contributors,
-  contributorTypes,
-  contributorNameTypes,
   source,
-  segment,
+  contributors = [],
+  contributorTypes = [],
+  contributorNameTypes = [],
+  segment = '',
 }) => {
   const intl = useIntl();
 
@@ -103,17 +103,11 @@ const InstanceContributorsView = ({
 
 InstanceContributorsView.propTypes = {
   id: PropTypes.string.isRequired,
+  source: PropTypes.string.isRequired,
   contributors: PropTypes.arrayOf(PropTypes.object),
   contributorTypes: PropTypes.arrayOf(PropTypes.object),
   contributorNameTypes: PropTypes.arrayOf(PropTypes.object),
-  source: PropTypes.string.isRequired,
   segment: PropTypes.string,
 };
 
-InstanceContributorsView.defaultProps = {
-  contributors: [],
-  contributorTypes: [],
-  contributorNameTypes: [],
-};
-
 export default InstanceContributorsView;

src/Instance/InstanceDetails/InstanceDescriptiveView/DescriptiveFormatsList.js

@@ -36,8 +36,8 @@ const columnWidths = {
 };
 
 const DescriptiveFormatsList = ({
-  formats,
-  resourceFormats,
+  formats = [],
+  resourceFormats = [],
 }) => {
   const intl = useIntl();
 
@@ -79,9 +79,4 @@ DescriptiveFormatsList.propTypes = {
   resourceFormats: PropTypes.arrayOf(PropTypes.object),
 };
 
-DescriptiveFormatsList.defaultProps = {
-  formats: [],
-  resourceFormats: [],
-};
-
 export default DescriptiveFormatsList;

src/Instance/InstanceDetails/InstanceDescriptiveView/DescriptivePublicationsList.js

@@ -36,7 +36,7 @@ const columnWidths = {
 };
 
 const DescriptivePublicationsList = ({
-  publications,
+  publications = [],
 }) => {
   const intl = useIntl();
 
@@ -61,8 +61,4 @@ DescriptivePublicationsList.propTypes = {
   publications: PropTypes.arrayOf(PropTypes.object),
 };
 
-DescriptivePublicationsList.defaultProps = {
-  publications: [],
-};
-
 export default DescriptivePublicationsList;

src/Instance/InstanceDetails/InstanceDescriptiveView/InstanceDescriptiveView.js

@@ -23,11 +23,11 @@ import {
 
 const InstanceDescriptiveView = ({
   id,
-  instance,
-  resourceTypes,
-  resourceFormats,
-  natureOfContentTerms,
-  instanceDateTypes,
+  instance = {},
+  resourceTypes = [],
+  resourceFormats = [],
+  natureOfContentTerms = [],
+  instanceDateTypes = [],
 }) => {
   const resourceType = useMemo(() => {
     return resourceTypes.find(type => type.id === instance.instanceTypeId) || {};
@@ -169,12 +169,4 @@ InstanceDescriptiveView.propTypes = {
   instanceDateTypes: PropTypes.arrayOf(PropTypes.object),
 };
 
-InstanceDescriptiveView.defaultProps = {
-  instance: {},
-  resourceTypes: [],
-  resourceFormats: [],
-  natureOfContentTerms: [],
-  instanceDateTypes: [],
-};
-
 export default InstanceDescriptiveView;

src/Instance/InstanceDetails/InstanceDetails.js

@@ -72,13 +72,13 @@ const accordions = {
 
 const InstanceDetails = forwardRef(({
   children,
-  instance,
   onClose,
   actionMenu,
-  tagsEnabled,
   mutateInstance,
-  userTenantPermissions,
-  isShared,
+  instance = {},
+  userTenantPermissions = [],
+  tagsEnabled = false,
+  isShared = false,
   ...rest
 }, ref) => {
   const intl = useIntl();
@@ -316,9 +316,9 @@ const InstanceDetails = forwardRef(({
 });
 
 InstanceDetails.propTypes = {
+  onClose: PropTypes.func.isRequired,
   children: PropTypes.node,
   actionMenu: PropTypes.func,
-  onClose: PropTypes.func.isRequired,
   mutateInstance: PropTypes.func,
   instance: PropTypes.object,
   tagsToggle: PropTypes.func,
@@ -327,10 +327,4 @@ InstanceDetails.propTypes = {
   isShared: PropTypes.bool,
 };
 
-InstanceDetails.defaultProps = {
-  instance: {},
-  tagsEnabled: false,
-  isShared: false,
-};
-
 export default InstanceDetails;

src/Instance/InstanceDetails/InstanceElecAccessView/InstanceElecAccessView.js

@@ -59,8 +59,8 @@ const getFormatter = (elAccessRelationshipsMap) => ({
 
 const InstanceElecAccessView = ({
   id,
-  electronicAccessLines,
-  electronicAccessRelationships,
+  electronicAccessLines = [],
+  electronicAccessRelationships = [],
 }) => {
   const intl = useIntl();
 
@@ -101,9 +101,4 @@ InstanceElecAccessView.propTypes = {
   electronicAccessRelationships: PropTypes.arrayOf(PropTypes.object),
 };
 
-InstanceElecAccessView.defaultProps = {
-  electronicAccessLines: [],
-  electronicAccessRelationships: [],
-};
-
 export default InstanceElecAccessView;

src/Instance/InstanceDetails/InstanceIdentifiersView/InstanceIdentifiersView.js

@@ -34,8 +34,8 @@ const formatter = {
 
 const InstanceIdentifiersView = ({
   id,
-  identifiers,
-  identifierTypes,
+  identifiers = [],
+  identifierTypes = [],
 }) => {
   const intl = useIntl();
 
@@ -87,9 +87,4 @@ InstanceIdentifiersView.propTypes = {
   identifierTypes: PropTypes.arrayOf(PropTypes.object),
 };
 
-InstanceIdentifiersView.defaultProps = {
-  identifiers: [],
-  identifierTypes: [],
-};
-
 export default InstanceIdentifiersView;