Remove InvestigationContainer and refactor InvestigationTable props

src/components/Investigation/InvestigationTable.js

@@ -16,6 +16,7 @@ import InvestigationDateFilter from './InvestigationDateFilter';
 import styles from './InvestigationTable.module.css';
 import { useHistory, useLocation } from 'react-router';
 import { useQuery } from '../../helpers/hooks';
+import { useSelector } from 'react-redux';
 
 function getLgHeaderStyle(width, hidden) {
   return {
@@ -26,7 +27,7 @@ function getLgHeaderStyle(width, hidden) {
   };
 }
 
-function getColumns(props) {
+function getColumns({ showProposalLinks, showInvestigationStats, showFiles }) {
   return [
     {
       text: 'id',
@@ -36,8 +37,8 @@ function getColumns(props) {
     {
       text: 'Experiment',
       dataField: 'name',
-      formatter: experimentFormatter,
-      formatExtraData: props,
+      formatter: (_, investigation) =>
+        experimentFormatter(investigation, showProposalLinks),
       sort: true,
       hidden: false,
       headerStyle: () => ({ width: '50%', textAlign: 'center' }),
@@ -51,10 +52,8 @@ function getColumns(props) {
     {
       text: 'Proposal',
       dataField: 'name',
-      formatter: (_, investigation, __, showLink) =>
-        nameFormatter(investigation, showLink),
-      formatExtraData:
-        props.withProposalLinks || props.user.isUserAdministrator,
+      formatter: (_, investigation) =>
+        nameFormatter(investigation, showProposalLinks),
       sort: true,
       hidden: false,
       headerStyle: () => ({ width: '50%', textAlign: 'center' }),
@@ -101,21 +100,15 @@ function getColumns(props) {
       text: 'Datasets',
       dataField: 'datasets',
       formatter: datasetCountFormatter,
-      responsiveHeaderStyle: getLgHeaderStyle(
-        130,
-        !props.showInvestigationStats
-      ),
+      responsiveHeaderStyle: getLgHeaderStyle(130, !showInvestigationStats),
     },
     {
       text: 'Files',
-      hidden: !props.user.isAdministrator,
+      hidden: !showFiles,
       dataField: 'dummy-1',
       isDummyField: true,
       formatter: fileCountFormatter,
-      responsiveHeaderStyle: getLgHeaderStyle(
-        80,
-        !props.showInvestigationStats
-      ),
+      responsiveHeaderStyle: getLgHeaderStyle(80, !showInvestigationStats),
     },
     {
       text: 'Release',
@@ -135,7 +128,13 @@ function getColumns(props) {
 }
 
 function InvestigationTable(props) {
-  const { expanded, user, investigations } = props;
+  const {
+    investigations,
+    showProposalLinks = false,
+    showInvestigationStats = false,
+  } = props;
+
+  const user = useSelector((state) => state.user);
 
   const history = useHistory();
   const query = useQuery();
@@ -165,7 +164,6 @@ function InvestigationTable(props) {
 
   const expandRow = {
     showExpandColumn: true,
-    expanded,
     expandColumnPosition: 'right',
     expandHeaderColumnRenderer: ({ isAnyExpands }) => {
       if (isAnyExpands) {
@@ -222,7 +220,11 @@ function InvestigationTable(props) {
       </div>
       <ResponsiveTable
         data={investigations.filter(isInvestigationMatching)}
-        columns={getColumns(props)}
+        columns={getColumns({
+          showProposalLinks: showProposalLinks || user.isAdministrator,
+          showInvestigationStats,
+          showFiles: user.isAdministrator,
+        })}
         expandRow={expandRow}
       />
     </>

src/components/Investigation/utils.js

@@ -46,22 +46,19 @@ export function nameFormatter(investigation, showLink) {
   );
 }
 
-export function volumeFormatter(cell, investigation) {
+export function volumeFormatter(_, investigation) {
   const volume = investigation.parameters.find((o) => o.name === VOLUME);
   if (volume && volume.value && volume.value !== 0) {
     return stringifyBytesSize(volume.value);
   }
 }
 
-export function experimentFormatter(cell, investigation, rowIndex, props) {
+export function experimentFormatter(investigation, showLink) {
   return (
     <Grid style={{ textAlign: 'center' }}>
       <Row className="show-grid">
         <Col xs={12} md={12}>
-          {nameFormatter(
-            investigation,
-            props.withProposalLinks || props.user.isAdministrator
-          )}
+          {nameFormatter(investigation, showLink)}
         </Col>
       </Row>
       <Row className="show-grid">
@@ -99,7 +96,7 @@ export function getParameter(investigation, parameterName) {
   }
 }
 
-export function fileCountFormatter(cell, investigation) {
+export function fileCountFormatter(_, investigation) {
   const fileCount = getParameter(investigation, FILE_COUNT);
 
   if (!fileCount) {

src/components/Table/ResponsiveTable.js

@@ -97,7 +97,7 @@ class ResponsiveTable extends React.Component {
               pagination={paginationFactory(this.props.pageOptions)}
               rowEvents={this.props.rowEvents}
               rowClasses={this.props.rowClasses}
-              noDataIndication="This is no data to display"
+              noDataIndication="No data to display"
               {...baseProps}
             />
           </>

src/containers/BeamlineDataPage.js

 import React, { useEffect } from 'react';
-import InvestigationsContainer from './InvestigationsContainer';
 import { Panel, Glyphicon } from 'react-bootstrap';
 import { useSelector, useDispatch } from 'react-redux';
 import { setBreadCrumbs } from '../actions/breadcrumbs';
 import { useParams } from 'react-router';
 import { filterInvestigations } from '../helpers';
+import Loader from '../components/Loader';
+import InvestigationTable from '../components/Investigation/InvestigationTable';
 
 function BeamlineDataPage() {
   const scientistInstrumentInvestigations = useSelector(
@@ -36,11 +37,15 @@ function BeamlineDataPage() {
           </Panel.Title>
         </Panel.Heading>
         <Panel.Body>
-          <InvestigationsContainer
-            investigations={beamlineInvestigations}
-            showInvestigationStats
-            withProposalLinks
-          />
+          {beamlineInvestigations.fetching ? (
+            <Loader inPanel message="Loading investigations..." />
+          ) : (
+            <InvestigationTable
+              investigations={beamlineInvestigations}
+              showInvestigationStats
+              showProposalLinks
+            />
+          )}
         </Panel.Body>
       </Panel>
     </div>

src/containers/ClosedDataPage.js

 import React, { useEffect } from 'react';
-import InvestigationsContainer from './InvestigationsContainer';
 import { Panel, Glyphicon } from 'react-bootstrap';
 import { useSelector, useDispatch } from 'react-redux';
 import { setBreadCrumbs } from '../actions/breadcrumbs';
+import Loader from '../components/Loader';
+import InvestigationTable from '../components/Investigation/InvestigationTable';
 
 function ClosedDataPage() {
   const isAdministrator = useSelector((state) => state.user.isAdministrator);
@@ -24,11 +25,14 @@ function ClosedDataPage() {
           </Panel.Title>
         </Panel.Heading>
         <Panel.Body>
-          <InvestigationsContainer
-            investigations={investigations}
-            showInvestigationStats={isAdministrator}
-            inPanel
-          />
+          {investigations.fetching ? (
+            <Loader inPanel message="Loading investigations..." />
+          ) : (
+            <InvestigationTable
+              investigations={investigations.data}
+              showInvestigationStats={isAdministrator}
+            />
+          )}
         </Panel.Body>
       </Panel>
     </div>

src/containers/InvestigationsContainer.js

-import React from 'react';
-import { useSelector } from 'react-redux';
-import InvestigationTable from '../components/Investigation/InvestigationTable';
-import Loader from '../components/Loader';
-
-function InvestigationsContainer(props) {
-  const {
-    investigations,
-    showInvestigationStats = false,
-    withProposalLinks = false,
-    inPanel = false,
-  } = props;
-  const user = useSelector((state) => state.user);
-
-  if (!investigations) {
-    return null;
-  }
-
-  if (investigations.fetching) {
-    return <Loader inPanel={inPanel} message="Loading investigations..." />;
-  }
-
-  if (investigations.data.length === 0) {
-    return (
-      <p style={{ marginBottom: 0, fontStyle: 'italic' }}>Nothing to display</p>
-    );
-  }
-
-  return (
-    <InvestigationTable
-      user={user}
-      investigations={investigations.data}
-      showInvestigationStats={showInvestigationStats}
-      withProposalLinks={withProposalLinks}
-    />
-  );
-}
-
-export default InvestigationsContainer;

src/containers/MyDataPage.js

@@ -3,7 +3,8 @@ import { Panel, Glyphicon } from 'react-bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
 import { setBreadCrumbs } from '../actions/breadcrumbs';
 import { filterInvestigations } from '../helpers';
-import InvestigationsContainer from './InvestigationsContainer';
+import Loader from '../components/Loader';
+import InvestigationTable from '../components/Investigation/InvestigationTable';
 
 const INDUSTRY_PROPOSAL_REGEX = /^(IX|FX|IN|IM)/;
 
@@ -25,7 +26,6 @@ function MyDataPage() {
       inv.visitId === 'PROPOSAL' && INDUSTRY_PROPOSAL_REGEX.test(inv.name)
   ); // TODO replace with `inv.type !== "PROPOSAL"` when available
 
-  // Otherwise, display the user's investigations
   return (
     <div className="app__inner">
       <Panel bsStyle="primary">
@@ -36,12 +36,15 @@ function MyDataPage() {
           </Panel.Title>
         </Panel.Heading>
         <Panel.Body>
-          <InvestigationsContainer
-            investigations={mySessions}
-            showInvestigationStats
-            withProposalLinks
-            inPanel
-          />
+          {mySessions.fetching ? (
+            <Loader inPanel message="Loading investigations..." />
+          ) : (
+            <InvestigationTable
+              investigations={mySessions.data}
+              showInvestigationStats
+              showProposalLinks
+            />
+          )}
         </Panel.Body>
       </Panel>
       {myIndustryProposals.data.length > 0 && (
@@ -57,12 +60,15 @@ function MyDataPage() {
               You may create parcels for the proposals below if no sessions have
               been scheduled for them.
             </p>
-            <InvestigationsContainer
-              investigations={myIndustryProposals}
-              showInvestigationStats
-              withProposalLinks
-              inPanel
-            />
+            {myIndustryProposals.fetching ? (
+              <Loader inPanel message="Loading proposals..." />
+            ) : (
+              <InvestigationTable
+                investigations={myIndustryProposals.data}
+                showInvestigationStats
+                showProposalLinks
+              />
+            )}
           </Panel.Body>
         </Panel>
       )}

src/containers/OpenDataPage.js

 import React, { useEffect } from 'react';
 import { Panel, Glyphicon } from 'react-bootstrap';
-import InvestigationsContainer from './InvestigationsContainer';
 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';
+import InvestigationTable from '../components/Investigation/InvestigationTable';
 
 function OpenDataPage() {
   const sessionId = useSelector((state) => state.user.sessionId);
@@ -82,13 +82,15 @@ function OpenDataPage() {
         </Panel.Heading>
 
         <Panel.Body>
-          <InvestigationsContainer
-            investigations={releasedInvestigations}
-            showInvestigationStats
-            withProposalLinks
-            isOpenData
-            inPanel
-          />
+          {releasedInvestigations.fetching ? (
+            <Loader inPanel message="Loading investigations..." />
+          ) : (
+            <InvestigationTable
+              investigations={releasedInvestigations.data}
+              showInvestigationStats
+              showProposalLinks
+            />
+          )}
         </Panel.Body>
       </Panel>
     </div>