Load data collections from Open Data page and remove badge

src/App.js

@@ -28,7 +28,6 @@ import { doLogOut, doSilentRefreshFromSSO } from './actions/login';
 import keycloak from './keycloak';
 import Menu from './components/Menu/Menu';
 import { fetchAllInvestigations } from './actions/investigations';
-import { fetchDataCollections } from './actions/datacollections';
 import { useQuery } from './helpers/hooks';
 import PageNotFound from './containers/PageNotFound';
 import LoadingBoundary from './components/LoadingBoundary';
@@ -47,7 +46,6 @@ function App() {
   useEffect(() => {
     if (user.sessionId) {
       dispatch(fetchAllInvestigations(user.sessionId));
-      dispatch(fetchDataCollections(user.sessionId));
     }
   }, [dispatch, user.sessionId]);
 

src/actions/datacollections.js

-import axios from 'axios';
 import { getDataCollections } from '../api/icat-plus/catalogue';
 import { FETCH_DATACOLLECTIONS } from '../constants/actionTypes';
 
 export function fetchDataCollections(sessionId) {
   return {
     type: FETCH_DATACOLLECTIONS,
-    payload: axios.get(getDataCollections(sessionId)),
+    payload: getDataCollections(sessionId),
   };
 }

src/api/icat-plus/catalogue.js

+import axios from 'axios';
 import ICATPLUS from '../../config/icatPlus';
 
 export function getFilesByDatasetId(sessionId, datasetIds) {
@@ -45,7 +46,7 @@ export function getDatasetStatus(sessionId, datasetIds) {
 }
 
 export function getDataCollections(sessionId) {
-  return `${ICATPLUS.server}/catalogue/${sessionId}/datacollection`;
+  return axios.get(`${ICATPLUS.server}/catalogue/${sessionId}/datacollection`);
 }
 
 export function getInvestigationUsersByInvestigationId(

src/components/DataCollection/DataCollectionTable.js

@@ -15,15 +15,15 @@ class DataCollectionTable extends React.Component {
     return <DOIBadge doi={cell} />;
   }
 
-  titleFormatter(cell, datacollection) {
-    const title = datacollection.parameters.find((o) => o.name === TITLE);
+  titleFormatter(_, collection) {
+    const title = collection.parameters.find((o) => o.name === TITLE);
     if (title && title.value) {
       return title.value;
     }
   }
 
-  nameFormatter(cell, datacollection) {
-    const names = datacollection.parameters.find(
+  nameFormatter(_, collection) {
+    const names = collection.parameters.find(
       (o) => o.name === INVESTIGATION_NAMES
     );
     if (names && names.value) {
@@ -38,7 +38,7 @@ class DataCollectionTable extends React.Component {
       }
 
       return (
-        <Link to={`/public/${datacollection.doi}`}>
+        <Link to={`/public/${collection.doi}`}>
           <Button bsSize="xsmall" style={{ width: 120, textAlign: 'left' }}>
             <Glyphicon glyph="circle-arrow-right" />
             <span style={{ marginLeft: 10 }}>{short} </span>
@@ -48,8 +48,8 @@ class DataCollectionTable extends React.Component {
     }
   }
 
-  beamlineFormatter(cell, datacollection) {
-    const names = datacollection.parameters.find(
+  beamlineFormatter(_, collection) {
+    const names = collection.parameters.find(
       (o) => o.name === INSTRUMENT_NAMES
     );
     if (names && names.value) {
@@ -61,39 +61,35 @@ class DataCollectionTable extends React.Component {
     return <Label bsStyle="primary">RELEASED</Label>;
   }
 
-  datasetCountFormmater(cell, datacolletion) {
-    return datacolletion.dataCollectionDatasets.length;
+  datasetCountFormmater(_, collection) {
+    return collection.dataCollectionDatasets.length;
   }
 
-  dataCollectionFormatter(cell, datacolletion, rowIndex, extraData) {
+  dataCollectionFormatter(cell, collection, _, extraData) {
     return (
       <Grid style={{ textAlign: 'center' }}>
         <Row className="show-grid">
           <Col xs={12} md={12}>
-            {extraData.nameFormatter(cell, datacolletion, extraData)}
+            {extraData.nameFormatter(cell, collection, extraData)}
           </Col>
         </Row>
         <Row className="show-grid">
           <Col xs={12} md={12}>
-            {extraData.beamlineFormatter(cell, datacolletion, extraData)}
+            {extraData.beamlineFormatter(cell, collection, extraData)}
           </Col>
         </Row>
         <Row className="show-grid">
           <Col xs={12}>
             <div style={{ color: 'gray', fontStyle: 'italic' }}>
               {' '}
-              {extraData.titleFormatter(cell, datacolletion, extraData)}
+              {extraData.titleFormatter(cell, collection, extraData)}
             </div>
           </Col>
         </Row>
         <Row className="show-grid" style={{ fontSize: 10 }}>
           <Col xs={12}>
             <span>
-              {extraData.doiFormatter(
-                datacolletion.doi,
-                datacolletion,
-                extraData
-              )}
+              {extraData.doiFormatter(collection.doi, collection, extraData)}
             </span>
           </Col>
         </Row>
@@ -192,10 +188,7 @@ class DataCollectionTable extends React.Component {
 
   render() {
     return (
-      <ResponsiveTable
-        data={this.props.datacollections}
-        columns={this.getColumns()}
-      />
+      <ResponsiveTable data={this.props.data} columns={this.getColumns()} />
     );
   }
 }

src/components/Menu/Menu.js

@@ -14,7 +14,6 @@ import styles from './Menu.module.css';
 function Menu() {
   const user = useSelector((state) => state.user);
   const myInvestigations = useSelector((state) => state.myInvestigations);
-  const datacollections = useSelector((state) => state.datacollections);
   const investigations = useSelector((state) => state.investigations);
   const selection = useSelector((state) => state.selection);
   const scientistInstrumentInvestigations = useSelector(
@@ -86,17 +85,6 @@ function Menu() {
               <LinkContainer to="/public">
                 <NavItem eventKey={3} href="/public">
                   Open Data
-                  {datacollections.fetching ? (
-                    <Glyphicon
-                      style={{ marginLeft: 10 }}
-                      className="spin"
-                      glyph="repeat"
-                    />
-                  ) : (
-                    <span className="badge" style={{ marginLeft: 10 }}>
-                      {datacollections.data.length}
-                    </span>
-                  )}
                 </NavItem>
               </LinkContainer>
             )}

src/containers/DataCollectionsContainer.js

-import React from 'react';
-import { useSelector } from 'react-redux';
-import DataCollectionTable from '../components/DataCollection/DataCollectionTable';
-import Loader from '../components/Loader';
-
-function DataCollectionsContainer(props) {
-  const { filterFunction } = props;
-  const { data, fetching } = useSelector((state) => state.datacollections);
-
-  if (fetching) {
-    return <Loader inPanel />;
-  }
-
-  return (
-    <DataCollectionTable
-      datacollections={filterFunction ? filterFunction(data) : data}
-    />
-  );
-}
-
-export default DataCollectionsContainer;

src/containers/OpenDataPage.js

 import React, { useEffect } from 'react';
 import { Panel, Glyphicon } from 'react-bootstrap';
 import InvestigationsContainer from './InvestigationsContainer';
-import DataCollectionsContainer from './DataCollectionsContainer';
 import { useSelector, useDispatch } from 'react-redux';
 import { setBreadCrumbs } from '../actions/breadcrumbs';
+import Loader from '../components/Loader';
+import DataCollectionTable from '../components/DataCollection/DataCollectionTable';
+import { fetchDataCollections } from '../actions/datacollections';
 
 function OpenDataPage() {
+  const sessionId = useSelector((state) => state.user.sessionId);
+  const { data, fetching, fetched } = useSelector(
+    (state) => state.datacollections
+  );
   const releasedInvestigations = useSelector(
     (state) => state.releasedInvestigations
   );
@@ -13,20 +19,23 @@ function OpenDataPage() {
 
   useEffect(() => {
     dispatch(setBreadCrumbs([{ name: 'Open Data' }]));
-  }, [dispatch]);
 
-  const filterPublications = (data) =>
-    data.filter((o) =>
-      o.parameters.some(
-        (p) => p.name === 'instrumentNames' && p.value !== 'PUBLISHER'
-      )
-    );
-  const filterNotPublications = (data) =>
-    data.filter((o) =>
-      o.parameters.some(
-        (p) => p.name === 'instrumentNames' && p.value === 'PUBLISHER'
-      )
-    );
+    if (sessionId && !fetched) {
+      dispatch(fetchDataCollections(sessionId));
+    }
+  }, [dispatch, fetched, sessionId]);
+
+  const publications = data?.filter((collection) =>
+    collection.parameters.some(
+      (p) => p.name === 'instrumentNames' && p.value !== 'PUBLISHER'
+    )
+  );
+
+  const documents = data?.filter((collection) =>
+    collection.parameters.some(
+      (p) => p.name === 'instrumentNames' && p.value === 'PUBLISHER'
+    )
+  );
 
   return (
     <div className="app__inner">
@@ -39,7 +48,11 @@ function OpenDataPage() {
         </Panel.Heading>
 
         <Panel.Body>
-          <DataCollectionsContainer filterFunction={filterPublications} />
+          {fetching ? (
+            <Loader inPanel message="Loading collections..." />
+          ) : (
+            <DataCollectionTable data={publications} />
+          )}
         </Panel.Body>
       </Panel>
 
@@ -52,7 +65,11 @@ function OpenDataPage() {
         </Panel.Heading>
 
         <Panel.Body>
-          <DataCollectionsContainer filterFunction={filterNotPublications} />
+          {fetching ? (
+            <Loader inPanel message="Loading documents..." />
+          ) : (
+            <DataCollectionTable data={documents} />
+          )}
         </Panel.Body>
       </Panel>