From 30c64d2200a5a22479bf2b5103f2d1cdef62a1cd Mon Sep 17 00:00:00 2001 From: Denys Bohdan Date: Wed, 27 Nov 2024 10:41:11 +0100 Subject: [PATCH] STSMACOM-878 Fetch updaters in `` on `props.metadata` changes. (#1543) `` component may initially mount with `metadata.createdByUserId` and `metadata.updatedByUserId` empty, so it won't make a call to fetch updaters. But when `metadata` props later change - the component should make additional calls to fetch users. https://github.com/user-attachments/assets/4a1a1bf5-0509-464f-8142-02396ccf6ea0 [STSMACOM-878](https://folio-org.atlassian.net/browse/STSMACOM-878) (cherry picked from commit cc948c9a51866026f52fcd3f31a97442dc97aadd) --- CHANGELOG.md | 4 + lib/ViewMetaData/ViewMetaData.js | 197 ++++++++++++++++--------------- 2 files changed, 103 insertions(+), 98 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 92064cde6..b0f86869d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Change history for stripes-smart-components +## 9.2.5 IN PROGRESS + +* Fetch updaters in `` on `props.metadata` changes. Fixes STSMACOM-878. + ## [9.2.4](https://github.com/folio-org/stripes-smart-components/tree/v9.2.4) (2024-12-02) [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v9.2.3...v9.2.4) diff --git a/lib/ViewMetaData/ViewMetaData.js b/lib/ViewMetaData/ViewMetaData.js index 9cf43f0d3..b535976c4 100644 --- a/lib/ViewMetaData/ViewMetaData.js +++ b/lib/ViewMetaData/ViewMetaData.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback, useEffect } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { get } from 'lodash'; @@ -6,112 +6,113 @@ import { get } from 'lodash'; import { MetaSection } from '@folio/stripes-components'; import { stripesConnect } from '@folio/stripes-core'; -class ViewMetaData extends React.Component { - static manifest = Object.freeze({ - updaters: { - type: 'okapi', - records: 'users', - path: 'users', - params: (_q, _p, _r, _l, props) => { - const cId = get(props, 'metadata.createdByUserId'); - const uId = get(props, 'metadata.updatedByUserId'); - - const userIds = []; - if (cId && cId !== props.systemId) userIds.push(cId); - if (uId && uId !== props.systemId) userIds.push(uId); - const query = [ - ...new Set(userIds.map(i => `id==${i}`)) - ].join(' or '); - - return query ? { query } : null; - }, - permissionsRequired: ['users.collection.get'], - }, - }); - - static propTypes = { - contentId: PropTypes.string, - headingLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]), - id: PropTypes.string, - inlineLayout: PropTypes.bool, - metadata: PropTypes.object, - mutator: PropTypes.shape({ - updaters: PropTypes.object, - }).isRequired, - noBackGround: PropTypes.bool, - resources: PropTypes.shape({ - updaters: PropTypes.object, - }).isRequired, - showUserLink: PropTypes.bool, - stripes: PropTypes.shape({ - hasPerm: PropTypes.func.isRequired, - }).isRequired, - systemId: PropTypes.string, - systemUser: PropTypes.oneOfType([ - PropTypes.shape({ - id: PropTypes.string, - personal: PropTypes.shape({ - firstName: PropTypes.string, - lastName: PropTypes.string, - middleName: PropTypes.string, - }), - }), - PropTypes.node, - ]), - useAccordion: PropTypes.bool, - children: PropTypes.func, - }; +const ViewMetaData = ({ + contentId, + headingLevel, + id, + inlineLayout, + mutator, + noBackGround, + resources, + systemId, + useAccordion, + children, + metadata = {}, + systemUser = , + showUserLink = true, +}) => { + useEffect(() => { + if (!metadata.createdByUserId && !metadata.updatedByUserId) { + return; + } - static defaultProps = { - metadata: {}, - systemUser: , - showUserLink: true, - }; + mutator.updaters.GET(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [metadata.createdByUserId, metadata.updatedByUserId]); - renderUser = (userId) => { - const { systemId, systemUser } = this.props; + const renderUser = useCallback((userId) => { if (systemId && systemId === userId) { return systemUser; } - const updaters = (this.props.resources.updaters || {}).records || []; + const updaters = (resources.updaters || {}).records || []; return updaters.find(r => r.id === userId); + }, [resources.updaters, systemId, systemUser]); + + if (children) { + return children({ + lastUpdatedBy : renderUser(metadata.updatedByUserId) + }); } - render() { - const { - metadata, - headingLevel, - id, - contentId, - showUserLink, - noBackGround, - useAccordion, - inlineLayout, - children, - } = this.props; + return ( + + ); +}; - if (children) { - return children({ - lastUpdatedBy : this.renderUser(metadata.updatedByUserId) - }); - } - return ( - - ); - } -} +ViewMetaData.manifest = Object.freeze({ + updaters: { + type: 'okapi', + records: 'users', + path: 'users', + params: (_q, _p, _r, _l, props) => { + const cId = get(props, 'metadata.createdByUserId'); + const uId = get(props, 'metadata.updatedByUserId'); + + const userIds = []; + if (cId && cId !== props.systemId) userIds.push(cId); + if (uId && uId !== props.systemId) userIds.push(uId); + const query = [ + ...new Set(userIds.map(i => `id==${i}`)) + ].join(' or '); + + return query ? { query } : null; + }, + permissionsRequired: ['users.collection.get'], + accumulate: true, + }, +}); + +ViewMetaData.propTypes = { + contentId: PropTypes.string, + headingLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]), + id: PropTypes.string, + inlineLayout: PropTypes.bool, + metadata: PropTypes.object, + mutator: PropTypes.shape({ + updaters: PropTypes.object, + }).isRequired, + noBackGround: PropTypes.bool, + resources: PropTypes.shape({ + updaters: PropTypes.object, + }).isRequired, + showUserLink: PropTypes.bool, + systemId: PropTypes.string, + systemUser: PropTypes.oneOfType([ + PropTypes.shape({ + id: PropTypes.string, + personal: PropTypes.shape({ + firstName: PropTypes.string, + lastName: PropTypes.string, + middleName: PropTypes.string, + }), + }), + PropTypes.node, + ]), + useAccordion: PropTypes.bool, + children: PropTypes.func, +}; export default stripesConnect(ViewMetaData);