Combine participants by role

src/components/Investigation/InvestigationWidget.js

-import axios from 'axios';
 import React, { Suspense } from 'react';
 import { Panel, Tab, Tabs } from 'react-bootstrap';
 import { NetworkErrorBoundary } from 'rest-hooks';
-import { getInvestigationUsersByInvestigationId } from '../../api/icat/icatPlus';
 import Loader from '../Loader';
-import ResponsiveTable from '../Table/ResponsiveTable';
 import SamplesTable from './SamplesTable';
+import ParticipantsPanel from './ParticipantsPanel';
 
-class InvestigationWidget extends React.Component {
-  constructor(props) {
-    super(props);
+function InvestigationWidget(props) {
+  const { investigation } = props;
 
-    this.state = {
-      investigationUsers: [],
-      fetched: false,
-      fetching: false,
-    };
-  }
-
-  componentDidMount() {
-    axios
-      .get(
-        getInvestigationUsersByInvestigationId(
-          this.props.sessionId,
-          this.props.investigation.id
-        )
-      )
-      .then((res) => {
-        this.setState({
-          investigationUsers: res.data,
-          fetching: false,
-          fetched: true,
-        });
-      })
-      .catch(() => {
-        this.setState({
-          fetching: false,
-          fetched: false,
-        });
-      });
-  }
-
-  getColumns() {
-    return [
-      {
-        text: 'id',
-        dataField: 'name',
-        hidden: true,
-      },
-      {
-        text: 'Name',
-        dataField: 'fullName',
-      },
-      {
-        text: 'Role',
-        dataField: 'role',
-      },
-    ];
-  }
-
-  render() {
-    return (
-      <Panel>
-        <Panel.Body>
-          <Tabs id="tabs">
-            <Tab style={{ margin: 30 }} eventKey={1} title="Participants">
-              <ResponsiveTable
-                keyField="name"
-                data={this.state.investigationUsers}
-                columns={this.getColumns()}
-              />
-            </Tab>
-            <Tab style={{ margin: 30 }} eventKey={2} title="Samples">
-              <Suspense fallback={<Loader message="Loading samples" />}>
-                <NetworkErrorBoundary>
-                  <SamplesTable investigationId={this.props.investigation.id} />
-                </NetworkErrorBoundary>
-              </Suspense>
-            </Tab>
-          </Tabs>
-        </Panel.Body>
-        <Panel.Footer></Panel.Footer>
-      </Panel>
-    );
-  }
+  return (
+    <Panel>
+      <Panel.Body>
+        <Tabs id="tabs">
+          <Tab style={{ margin: 30 }} eventKey={1} title="Participants">
+            <ParticipantsPanel investigationId={investigation.id} />
+          </Tab>
+          <Tab style={{ margin: 30 }} eventKey={2} title="Samples">
+            <Suspense fallback={<Loader message="Loading samples" />}>
+              <NetworkErrorBoundary>
+                <SamplesTable investigationId={investigation.id} />
+              </NetworkErrorBoundary>
+            </Suspense>
+          </Tab>
+        </Tabs>
+      </Panel.Body>
+      <Panel.Footer></Panel.Footer>
+    </Panel>
+  );
 }
 
 export default InvestigationWidget;

src/components/Investigation/ParticipantsPanel.js

+import React, { useEffect, useState } from 'react';
+import { Alert } from 'react-bootstrap';
+import { getInvestigationUsersByInvestigationId } from '../../api/icat/icatPlus';
+import { groupBy } from 'lodash-es';
+import axios from 'axios';
+import ResponsiveTable from '../Table/ResponsiveTable';
+import Loader from '../Loader';
+import { useSelector } from 'react-redux';
+
+function ParticipantsPanel(props) {
+  const { investigationId } = props;
+  const sessionId = useSelector((state) => state.user.sessionId);
+
+  const [state, setState] = useState({});
+  const { participants, fetching, error } = state;
+
+  useEffect(() => {
+    setState({ fetching: true });
+
+    axios
+      .get(getInvestigationUsersByInvestigationId(sessionId, investigationId))
+      .then((res) => groupBy(res.data, (user) => user.name))
+      .then((participantsById) => {
+        setState({
+          participants: Object.entries(participantsById).map(([id, users]) => ({
+            id,
+            name: users[0].fullName,
+            role: users.map((user) => user.role).join(', '),
+          })),
+        });
+      })
+      .catch(() => {
+        setState({ error: true });
+      });
+  }, [sessionId, investigationId]);
+
+  if (fetching) {
+    return <Loader message="Loading participants..." />;
+  }
+
+  if (error) {
+    return <Alert bsStyle="danger">Unable to retrieve participants</Alert>;
+  }
+
+  if (!participants) {
+    return null;
+  }
+
+  return (
+    <ResponsiveTable
+      keyField="id"
+      data={participants}
+      columns={[
+        { text: 'id', dataField: 'id', hidden: true, searchable: false },
+        { text: 'Name', dataField: 'name' },
+        { text: 'Role', dataField: 'role' },
+      ]}
+    />
+  );
+}
+
+export default ParticipantsPanel;

src/containers/LoginPage.js

@@ -30,8 +30,8 @@ function LoginPage() {
                 Create a new account
               </a>
             </ListGroupItem>
-            <li class="list-group-item">
-              <h4 class="list-group-item-heading">
+            <li className="list-group-item">
+              <h4 className="list-group-item-heading">
                 <a href="mailto:dataportal-feedback@esrf.fr">
                   I need further assistance
                 </a>