From c662a76e7e8269da03332955cccd87f717b542a2 Mon Sep 17 00:00:00 2001 From: Konstantina Stoikou Date: Thu, 2 Apr 2020 11:40:56 +0200 Subject: [PATCH] global: fix componentDidMount and add links to next/previous journal in series (#787) * global: fix componentDidMount in details js files and add links to next/previous journal in series * fixes #769 --- .../Order/OrderDetails/OrderDetails.js | 14 ++--- .../Vendor/VendorDetails/VendorDetails.js | 14 ++--- .../DocumentDetails/DocumentDetails.js | 17 +++--- .../DocumentRequestDetails.js | 16 +++--- .../EItem/EItemDetails/EItemDetails.js | 8 +++ .../BorrowingRequestDetails.js | 16 +++--- .../ILL/LibraryDetails/LibraryDetails.js | 16 +++--- .../Item/ItemDetails/ItemDetails.js | 13 ++--- .../Loan/LoanDetails/LoanDetails.js | 15 +++-- .../Series/SeriesDetails/SeriesDetails.js | 14 ++--- .../DocumentsDetails/DocumentsDetails.js | 20 +++---- .../Series/SeriesDetails/SeriesDetails.js | 15 +++-- .../SeriesDetails/SeriesPanel/SeriesPanel.js | 3 +- .../SeriesPanel/SeriesSequences.js | 57 +++++++++++++++++++ .../Series/SeriesDetails/SeriesPanel/index.js | 6 ++ 15 files changed, 151 insertions(+), 93 deletions(-) create mode 100644 ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/SeriesSequences.js diff --git a/ui/src/pages/backoffice/Acquisition/Order/OrderDetails/OrderDetails.js b/ui/src/pages/backoffice/Acquisition/Order/OrderDetails/OrderDetails.js index b71a25fde..b93244e26 100644 --- a/ui/src/pages/backoffice/Acquisition/Order/OrderDetails/OrderDetails.js +++ b/ui/src/pages/backoffice/Acquisition/Order/OrderDetails/OrderDetails.js @@ -11,7 +11,6 @@ import { Sticky, Menu, } from 'semantic-ui-react'; -import history from '@history'; import { CopyButton, Loader, Error } from '@components'; import { OrderInformation } from './OrderInformation'; import { OrderStatistics } from './OrderStatistics'; @@ -208,16 +207,15 @@ export default class OrderDetails extends React.Component { } componentDidMount() { - this.unlisten = history.listen(loc => { - if (loc.state && loc.state.pid && loc.state.type === 'Order') { - this.props.fetchOrderDetails(loc.state.pid); - } - }); this.props.fetchOrderDetails(this.props.match.params.orderPid); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const orderPid = this.props.match.params.orderPid; + const samePidFromRouter = prevProps.match.params.orderPid === orderPid; + if (!samePidFromRouter) { + this.props.fetchOrderDetails(orderPid); + } } render() { diff --git a/ui/src/pages/backoffice/Acquisition/Vendor/VendorDetails/VendorDetails.js b/ui/src/pages/backoffice/Acquisition/Vendor/VendorDetails/VendorDetails.js index 9bc1a4165..aee5915e6 100644 --- a/ui/src/pages/backoffice/Acquisition/Vendor/VendorDetails/VendorDetails.js +++ b/ui/src/pages/backoffice/Acquisition/Vendor/VendorDetails/VendorDetails.js @@ -10,7 +10,6 @@ import { Icon, Grid, } from 'semantic-ui-react'; -import history from '@history'; import { CopyButton, Loader, Error } from '@components'; import { VendorInformation } from './VendorInformation'; import { @@ -150,16 +149,15 @@ export default class VendorDetails extends React.Component { } componentDidMount() { - this.unlisten = history.listen(loc => { - if (loc.state && loc.state.pid && loc.state.type === 'Vendor') { - this.props.fetchVendorDetails(loc.state.pid); - } - }); this.props.fetchVendorDetails(this.props.match.params.vendorPid); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const vendorPid = this.props.match.params.vendorPid; + const samePidFromRouter = prevProps.match.params.vendorPid === vendorPid; + if (!samePidFromRouter) { + this.props.fetchVendorDetails(vendorPid); + } } render() { diff --git a/ui/src/pages/backoffice/Document/DocumentDetails/DocumentDetails.js b/ui/src/pages/backoffice/Document/DocumentDetails/DocumentDetails.js index 035fb5d0b..0b9aaa59c 100644 --- a/ui/src/pages/backoffice/Document/DocumentDetails/DocumentDetails.js +++ b/ui/src/pages/backoffice/Document/DocumentDetails/DocumentDetails.js @@ -3,7 +3,6 @@ import { DocumentHeader } from './DocumentHeader'; import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Container, Divider, Grid, Ref, Sticky } from 'semantic-ui-react'; -import history from '@history'; import { Loader, Error } from '@components'; import { DocumentMetadata, @@ -31,16 +30,16 @@ export default class DocumentDetails extends Component { } componentDidMount() { - this.unlisten = history.listen(loc => { - if (loc.state && loc.state.pid && loc.state.type === 'Document') { - this.fetchDocumentDetails(loc.state.pid); - } - }); - this.fetchDocumentDetails(this.props.match.params.documentPid); + this.props.fetchDocumentDetails(this.props.match.params.documentPid); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const documentPid = this.props.match.params.documentPid; + const samePidFromRouter = + prevProps.match.params.documentPid === documentPid; + if (!samePidFromRouter) { + this.props.fetchDocumentsDetails(documentPid); + } } render() { diff --git a/ui/src/pages/backoffice/DocumentRequest/DocumentRequestDetails/DocumentRequestDetails.js b/ui/src/pages/backoffice/DocumentRequest/DocumentRequestDetails/DocumentRequestDetails.js index c56377448..91090c868 100644 --- a/ui/src/pages/backoffice/DocumentRequest/DocumentRequestDetails/DocumentRequestDetails.js +++ b/ui/src/pages/backoffice/DocumentRequest/DocumentRequestDetails/DocumentRequestDetails.js @@ -11,20 +11,18 @@ import { export default class DocumentRequestDetails extends Component { componentDidMount() { - this.unlisten = this.props.history.listen(location => { - if (location.state && location.state.documentRequestPid) { - this.props.fetchDocumentRequestDetails( - location.state.documentRequestPid - ); - } - }); this.props.fetchDocumentRequestDetails( this.props.match.params.documentRequestPid ); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const documentRequestPid = this.props.match.params.documentRequestPid; + const samePidFromRouter = + prevProps.match.params.documentRequestPid === documentRequestPid; + if (!samePidFromRouter) { + this.props.fetchDocumentRequestDetails(documentRequestPid); + } } render() { diff --git a/ui/src/pages/backoffice/EItem/EItemDetails/EItemDetails.js b/ui/src/pages/backoffice/EItem/EItemDetails/EItemDetails.js index 605bd43a0..0a394fdfc 100644 --- a/ui/src/pages/backoffice/EItem/EItemDetails/EItemDetails.js +++ b/ui/src/pages/backoffice/EItem/EItemDetails/EItemDetails.js @@ -16,6 +16,14 @@ export default class EItemDetails extends Component { this.props.fetchEItemDetails(this.props.match.params.eitemPid); } + componentDidUpdate(prevProps) { + const eitemPid = this.props.match.params.eitemPid; + const samePidFromRouter = prevProps.match.params.eitemPid === eitemPid; + if (!samePidFromRouter) { + this.props.fetchEItemDetails(eitemPid); + } + } + render() { const { isLoading, error, data } = this.props; return ( diff --git a/ui/src/pages/backoffice/ILL/BorrowingRequestDetails/BorrowingRequestDetails.js b/ui/src/pages/backoffice/ILL/BorrowingRequestDetails/BorrowingRequestDetails.js index 3a6d63096..6937c3042 100644 --- a/ui/src/pages/backoffice/ILL/BorrowingRequestDetails/BorrowingRequestDetails.js +++ b/ui/src/pages/backoffice/ILL/BorrowingRequestDetails/BorrowingRequestDetails.js @@ -11,18 +11,18 @@ export default class BorrowingRequestDetails extends Component { } componentDidMount() { - this.unlisten = this.props.history.listen(location => { - if (location.state && location.state.borrowingRequestPid) { - this.fetchBorrowingRequestDetails(location.state.borrowingRequestPid); - } - }); - this.fetchBorrowingRequestDetails( + this.props.fetchBorrowingRequestDetails( this.props.match.params.borrowingRequestPid ); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const borrowingRequestPid = this.props.match.params.borrowingRequestPid; + const samePidFromRouter = + prevProps.match.params.borrowingRequestPid === borrowingRequestPid; + if (!samePidFromRouter) { + this.props.fetchBorrowingRequestDetails(borrowingRequestPid); + } } render() { diff --git a/ui/src/pages/backoffice/ILL/LibraryDetails/LibraryDetails.js b/ui/src/pages/backoffice/ILL/LibraryDetails/LibraryDetails.js index f788ea1bc..2781bf867 100644 --- a/ui/src/pages/backoffice/ILL/LibraryDetails/LibraryDetails.js +++ b/ui/src/pages/backoffice/ILL/LibraryDetails/LibraryDetails.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Container } from 'semantic-ui-react'; -import history from '@history'; import { Loader, Error } from '@components'; import { LibraryMetadata } from './components'; @@ -13,16 +12,15 @@ export default class LibraryDetails extends Component { } componentDidMount() { - this.unlisten = history.listen(loc => { - if (loc.state && loc.state.pid && loc.state.type === 'Library') { - this.fetchLibraryDetails(loc.state.pid); - } - }); - this.fetchLibraryDetails(this.props.match.params.libraryPid); + this.props.fetchLibraryDetails(this.props.match.params.libraryPid); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const libraryPid = this.props.match.params.libraryPid; + const samePidFromRouter = prevProps.match.params.libraryPid === libraryPid; + if (!samePidFromRouter) { + this.props.fetchLibraryDetails(libraryPid); + } } render() { diff --git a/ui/src/pages/backoffice/Item/ItemDetails/ItemDetails.js b/ui/src/pages/backoffice/Item/ItemDetails/ItemDetails.js index 9dc4977e7..0ba45bcd2 100644 --- a/ui/src/pages/backoffice/Item/ItemDetails/ItemDetails.js +++ b/ui/src/pages/backoffice/Item/ItemDetails/ItemDetails.js @@ -18,16 +18,15 @@ export default class ItemDetails extends Component { } componentDidMount() { - this.unlisten = this.props.history.listen(location => { - if (location.state && location.state.itemPid) { - this.props.fetchItemDetails(location.state.itemPid); - } - }); this.props.fetchItemDetails(this.props.match.params.itemPid); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const itemPid = this.props.match.params.itemPid; + const samePidFromRouter = prevProps.match.params.itemPid === itemPid; + if (!samePidFromRouter) { + this.props.fetchItemDetails(itemPid); + } } render() { diff --git a/ui/src/pages/backoffice/Loan/LoanDetails/LoanDetails.js b/ui/src/pages/backoffice/Loan/LoanDetails/LoanDetails.js index 6bebd8b38..1fac398fc 100644 --- a/ui/src/pages/backoffice/Loan/LoanDetails/LoanDetails.js +++ b/ui/src/pages/backoffice/Loan/LoanDetails/LoanDetails.js @@ -11,16 +11,15 @@ export default class LoanDetails extends Component { } componentDidMount() { - this.unlisten = this.props.history.listen(location => { - if (location.state && location.state.loanPid) { - this.fetchLoanDetails(location.state.loanPid); - } - }); - this.fetchLoanDetails(this.props.match.params.loanPid); + this.props.fetchLoanDetails(this.props.match.params.loanPid); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const loanPid = this.props.match.params.loanPid; + const samePidFromRouter = prevProps.match.params.loanPid === loanPid; + if (!samePidFromRouter) { + this.props.fetchLoanDetails(loanPid); + } } render() { diff --git a/ui/src/pages/backoffice/Series/SeriesDetails/SeriesDetails.js b/ui/src/pages/backoffice/Series/SeriesDetails/SeriesDetails.js index c6af19f4e..45648f874 100644 --- a/ui/src/pages/backoffice/Series/SeriesDetails/SeriesDetails.js +++ b/ui/src/pages/backoffice/Series/SeriesDetails/SeriesDetails.js @@ -17,7 +17,6 @@ import { } from 'semantic-ui-react'; import { Loader, Error } from '@components'; import { SeriesDocuments, SeriesMultipartMonographs } from './components'; -import history from '@history'; import isEmpty from 'lodash/isEmpty'; export default class SeriesDetails extends Component { @@ -28,16 +27,15 @@ export default class SeriesDetails extends Component { } componentDidMount() { - this.unlisten = history.listen(loc => { - if (loc.state && loc.state.pid && loc.state.type === 'Series') { - this.props.fetchSeriesDetails(loc.state.pid); - } - }); this.props.fetchSeriesDetails(this.props.match.params.seriesPid); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const seriesPid = this.props.match.params.seriesPid; + const samePidFromRouter = prevProps.match.params.seriesPid === seriesPid; + if (!samePidFromRouter) { + this.props.fetchSeriesDetails(seriesPid); + } } seriesPanels = () => { diff --git a/ui/src/pages/frontsite/Documents/DocumentsDetails/DocumentsDetails.js b/ui/src/pages/frontsite/Documents/DocumentsDetails/DocumentsDetails.js index 870e176c1..04eb6c1c9 100644 --- a/ui/src/pages/frontsite/Documents/DocumentsDetails/DocumentsDetails.js +++ b/ui/src/pages/frontsite/Documents/DocumentsDetails/DocumentsDetails.js @@ -23,15 +23,19 @@ export default class DocumentsDetails extends Component { } componentDidMount() { - this.unlisten = this.props.history.listen(location => { - if (location.state && location.state.documentPid) { - this.fetchDocumentsDetails(location.state.documentPid); - } - }); - this.fetchDocumentsDetails(this.props.match.params.documentPid); + this.props.fetchDocumentsDetails(this.props.match.params.documentPid); this.documentViewed(); } + componentDidUpdate(prevProps) { + const documentPid = this.props.match.params.documentPid; + const samePidFromRouter = + prevProps.match.params.documentPid === documentPid; + if (!samePidFromRouter) { + this.props.fetchDocumentsDetails(documentPid); + } + } + documentViewed = async () => { try { await documentApi.viewEvent(this.props.match.params.documentPid); @@ -40,10 +44,6 @@ export default class DocumentsDetails extends Component { } }; - componentWillUnmount() { - this.unlisten(); - } - onSearchClick = () => { const query = encodeURIComponent(this.state.searchQuery); goTo(FrontSiteRoutes.documentsListWithQuery(query)); diff --git a/ui/src/pages/frontsite/Series/SeriesDetails/SeriesDetails.js b/ui/src/pages/frontsite/Series/SeriesDetails/SeriesDetails.js index 020872626..22d4d56ad 100644 --- a/ui/src/pages/frontsite/Series/SeriesDetails/SeriesDetails.js +++ b/ui/src/pages/frontsite/Series/SeriesDetails/SeriesDetails.js @@ -1,5 +1,4 @@ import { AuthenticationGuard } from '@authentication/components'; -import isEmpty from 'lodash/isEmpty'; import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; @@ -12,6 +11,7 @@ import { Breadcrumbs } from '@pages/frontsite/components'; import { SeriesPanel } from './SeriesPanel'; import { SeriesLiteratureSearch } from '@pages/frontsite/components/Series'; import { SeriesMetadata } from './SeriesMetadata'; +import isEmpty from 'lodash/isEmpty'; export default class SeriesDetails extends React.Component { constructor(props) { @@ -22,16 +22,15 @@ export default class SeriesDetails extends React.Component { } componentDidMount() { - this.unlisten = this.props.history.listen(location => { - if (location.state && location.state.seriesPid) { - this.props.fetchSeriesDetails(location.state.seriesPid); - } - }); this.props.fetchSeriesDetails(this.props.match.params.seriesPid); } - componentWillUnmount() { - this.unlisten(); + componentDidUpdate(prevProps) { + const seriesPid = this.props.match.params.seriesPid; + const samePidFromRouter = prevProps.match.params.seriesPid === seriesPid; + if (!samePidFromRouter) { + this.props.fetchSeriesDetails(seriesPid); + } } breadcrumbs = () => [ diff --git a/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/SeriesPanel.js b/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/SeriesPanel.js index 592d7a57a..40eebc05f 100644 --- a/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/SeriesPanel.js +++ b/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/SeriesPanel.js @@ -7,7 +7,7 @@ import { ILSParagraphPlaceholder, } from '@components/ILSPlaceholder'; import { SeriesTitle, SeriesAccess } from '@pages/frontsite/components/Series'; -import { SeriesPanelMobile } from './index'; +import { SeriesPanelMobile, SeriesSequences } from './index'; import { SeriesAuthors, SeriesImage } from '@components/Series'; import { Abstract } from '@components'; @@ -49,6 +49,7 @@ export default class SeriesPanel extends Component { + diff --git a/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/SeriesSequences.js b/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/SeriesSequences.js new file mode 100644 index 000000000..5dbfd1a3c --- /dev/null +++ b/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/SeriesSequences.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react'; +import { Header, List, Segment } from 'semantic-ui-react'; +import PropTypes from 'prop-types'; +import { FrontSiteRoutes } from '@routes/urls'; +import { Link } from 'react-router-dom'; +import isEmpty from 'lodash/isEmpty'; + +export default class SeriesSequences extends Component { + renderSequenceLinks = sequences => { + return ( + <> + + {sequences.map((sequence, idx) => ( + + + + {sequence.title} + + + + ))} + {' '} + + ); + }; + + render() { + const { relations } = this.props; + if ( + isEmpty(relations) || + (isEmpty(relations.next) && isEmpty(relations.previous)) + ) + return null; + + return ( + +
Read more
+ {!isEmpty(relations.next) && ( + <> + This series is continued by: + {this.renderSequenceLinks(relations.next)} + + )} + {!isEmpty(relations.previous) && ( + <> + This series continues the following: + {this.renderSequenceLinks(relations.previous)} + + )} + + ); + } +} + +SeriesSequences.propTypes = { + relations: PropTypes.object, +}; diff --git a/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/index.js b/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/index.js index a41eb714f..9dd156b8b 100644 --- a/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/index.js +++ b/ui/src/pages/frontsite/Series/SeriesDetails/SeriesPanel/index.js @@ -1,6 +1,7 @@ import { connect } from 'react-redux'; import SeriesPanelComponent from './SeriesPanel'; import SeriesPanelMobileComponent from './SeriesPanelMobile'; +import SeriesSequencesComponent from './SeriesSequences'; const mapStateToProps = state => ({ series: state.seriesDetailsFront.data, @@ -16,3 +17,8 @@ export const SeriesPanelMobile = connect( mapStateToProps, null )(SeriesPanelMobileComponent); + +export const SeriesSequences = connect( + mapStateToProps, + null +)(SeriesSequencesComponent);