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
inveniosoftware · Apr 2, 2020 · c662a76 · c662a76
1 parent 18edc43
commit c662a76
Show file tree

Hide file tree

Showing 15 changed files with 151 additions and 93 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {
                 </Grid.Column>
                 <Grid.Column width={5}>
                   <SeriesAccess />
+                  <SeriesSequences relations={series.metadata.relations} />
                 </Grid.Column>
               </Grid.Row>
             </Grid>