Date to filter investigations is now persisted in the URL

src/components/Investigation/InvestigationTable.js

-import React, { useState } from 'react';
-import { Col, Glyphicon, Grid, Row } from 'react-bootstrap';
+import React from 'react';
+import { Glyphicon } from 'react-bootstrap';
 import moment from 'moment';
-import {
-  DATASET_COUNT,
-  FILE_COUNT,
-  VOLUME,
-} from '../../constants/parameterTypes';
 import DOIBadge from '../doi/DOIBadge';
 import ResponsiveTable from '../Table/ResponsiveTable';
 import InvestigationWidget from './InvestigationWidget';
-import { beamlineFormatter, dateFormatter, nameFormatter } from './utils';
-import { stringifyBytesSize } from '../../helpers';
+import {
+  beamlineFormatter,
+  dateFormatter,
+  nameFormatter,
+  experimentFormatter,
+  datasetCountFormatter,
+  fileCountFormatter,
+} from './utils';
 import InvestigationDateFilter from './InvestigationDateFilter';
 import styles from './InvestigationTable.module.css';
-
-function volumeFormatter(cell, investigation) {
-  const volume = investigation.parameters.find((o) => o.name === VOLUME);
-  if (volume && volume.value && volume.value !== 0) {
-    return stringifyBytesSize(volume.value);
-  }
-}
-
-function experimentFormatter(cell, investigation, rowIndex, extraData) {
-  return (
-    <Grid style={{ textAlign: 'center' }}>
-      <Row className="show-grid">
-        <Col xs={12} md={12}>
-          {nameFormatter(
-            investigation,
-            extraData.props.withProposalLinks,
-            extraData.props.user.isAdministrator
-          )}
-        </Col>
-      </Row>
-      <Row className="show-grid">
-        <Col xs={12} md={12}>
-          <span style={{ fontWeight: 'bold' }}>
-            {beamlineFormatter(investigation, investigation.visitId)}
-          </span>
-        </Col>
-      </Row>
-      <Row className="show-grid">
-        <Col xs={12}>
-          <div style={{ color: 'gray', fontStyle: 'italic' }}>
-            {investigation.summary}
-          </div>
-        </Col>
-      </Row>
-      <Row className="show-grid" style={{ fontSize: 10 }}>
-        <Col xs={12}>
-          <DOIBadge doi={investigation.doi} />
-        </Col>
-      </Row>
-    </Grid>
-  );
-}
-
-/**
- * This looks into the parameters of the investigation
- */
-function getParameter(investigation, parameterName) {
-  const parameter = investigation.parameters.find(
-    (o) => o.name === parameterName
-  );
-  if (parameter && parameter.value) {
-    return parameter.value;
-  }
-}
-
-function fileCountFormatter(cell, investigation) {
-  const fileCount = getParameter(investigation, FILE_COUNT);
-
-  if (!fileCount) {
-    return undefined;
-  }
-
-  return (
-    <span style={{ width: 50, textAlign: 'right', float: 'left' }}>
-      {fileCount}
-    </span>
-  );
-}
-
-function datasetCountFormatter(cell, investigation) {
-  const datasetCount = investigation.parameters.find(
-    (o) => o.name === DATASET_COUNT
-  );
-  if (datasetCount && datasetCount.value) {
-    return (
-      <>
-        <span style={{ width: 40, textAlign: 'right', float: 'left' }}>
-          {datasetCount.value}
-        </span>
-        <span
-          style={{
-            width: 70,
-            marginLeft: 5,
-            float: 'left',
-            fontStyle: 'italic',
-            color: '#999',
-            fontSize: 12,
-          }}
-        >
-          ({volumeFormatter(cell, investigation)})
-        </span>
-      </>
-    );
-  }
-}
+import { useHistory, useLocation } from 'react-router';
+import { useQuery } from '../../helpers/hooks';
 
 function getLgHeaderStyle(width, hidden) {
   return {
@@ -143,13 +51,10 @@ function getColumns(props) {
     {
       text: 'Proposal',
       dataField: 'name',
-      formatter: (_, investigation, __, props) =>
-        nameFormatter(
-          investigation,
-          props.withProposalLinks,
-          props.user.isAdministrator
-        ),
-      formatExtraData: props,
+      formatter: (_, investigation, __, showLink) =>
+        nameFormatter(investigation, showLink),
+      formatExtraData:
+        props.withProposalLinks || props.user.isUserAdministrator,
       sort: true,
       hidden: false,
       headerStyle: () => ({ width: '50%', textAlign: 'center' }),
@@ -231,7 +136,32 @@ function getColumns(props) {
 
 function InvestigationTable(props) {
   const { expanded, user, investigations } = props;
-  const [selectedDate, setSelectedDate] = useState();
+
+  const history = useHistory();
+  const query = useQuery();
+  const location = useLocation();
+
+  const dateForFiltering = query.has('date')
+    ? moment(query.get('date'), moment.HTML5_FMT.DATE)
+    : undefined;
+
+  function handleDateChange(date) {
+    const newQuery = new URLSearchParams(query);
+
+    if (date) {
+      newQuery.set('date', moment(date).format(moment.HTML5_FMT.DATE));
+    } else {
+      newQuery.delete('date');
+    }
+
+    history.replace(`${location.pathname}?${newQuery.toString()}`);
+  }
+
+  function handleDateClear() {
+    const newQuery = new URLSearchParams(query);
+    newQuery.delete('date');
+    history.replace(`${location.pathname}?${newQuery.toString()}`);
+  }
 
   const expandRow = {
     showExpandColumn: true,
@@ -265,15 +195,19 @@ function InvestigationTable(props) {
     ),
   };
 
-  function dateFilter(investigation) {
+  function isInvestigationMatching(investigation) {
+    if (!dateForFiltering) {
+      return true;
+    }
+
     return investigation.endDate
-      ? selectedDate.isBetween(
+      ? dateForFiltering.isBetween(
           investigation.startDate,
           investigation.endDate,
           'day',
           '[]'
         )
-      : selectedDate.isSame(investigation.startDate, 'day');
+      : dateForFiltering.isSame(investigation.startDate, 'day');
   }
 
   return (
@@ -281,13 +215,13 @@ function InvestigationTable(props) {
       <div className={styles.wrapper}>
         <InvestigationDateFilter
           rootClassName={styles.filter}
-          value={selectedDate && selectedDate.toDate()}
-          onDayChange={(date) => setSelectedDate(moment(date))}
-          onClear={() => setSelectedDate(undefined)}
+          value={dateForFiltering && dateForFiltering.toDate()}
+          onDayChange={handleDateChange}
+          onClear={handleDateClear}
         />
       </div>
       <ResponsiveTable
-        data={selectedDate ? investigations.filter(dateFilter) : investigations}
+        data={investigations.filter(isInvestigationMatching)}
         columns={getColumns(props)}
         expandRow={expandRow}
       />

src/components/Investigation/utils.js

 import React from 'react';
-import { Button, Glyphicon } from 'react-bootstrap';
+import { Button, Grid, Row, Col, Glyphicon } from 'react-bootstrap';
 import moment from 'moment';
+import {
+  DATASET_COUNT,
+  FILE_COUNT,
+  VOLUME,
+} from '../../constants/parameterTypes';
 import { Link } from 'react-router-dom';
 import { INVESTIGATION_DATE_FORMAT } from '../../constants';
+import DOIBadge from '../doi/DOIBadge';
+import { stringifyBytesSize } from '../../helpers';
 
 export function getInstrumentName(investigation) {
   if (!investigation) {
@@ -25,20 +32,111 @@ export function beamlineFormatter(investigation, placeHolder = '') {
   return instrumentName ? instrumentName.toUpperCase() : placeHolder;
 }
 
-export function nameFormatter(
-  investigation,
-  withProposalLinks,
-  isUserAdministrator
-) {
-  if (withProposalLinks || isUserAdministrator) {
+export function nameFormatter(investigation, showLink) {
+  if (!showLink) {
+    return <span style={{ fontWeight: 'bold' }}>{investigation.name}</span>;
+  }
+  return (
+    <Link to={`/investigation/${investigation.id}/datasets`}>
+      <Button bsSize="xsmall" style={{ width: 120, textAlign: 'left' }}>
+        <Glyphicon glyph="circle-arrow-right" />
+        <span style={{ marginLeft: 10 }}>{investigation.name} </span>
+      </Button>
+    </Link>
+  );
+}
+
+export function volumeFormatter(cell, 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, extraData) {
+  return (
+    <Grid style={{ textAlign: 'center' }}>
+      <Row className="show-grid">
+        <Col xs={12} md={12}>
+          {nameFormatter(
+            investigation,
+            extraData.props.withProposalLinks ||
+              extraData.props.user.isAdministrator
+          )}
+        </Col>
+      </Row>
+      <Row className="show-grid">
+        <Col xs={12} md={12}>
+          <span style={{ fontWeight: 'bold' }}>
+            {beamlineFormatter(investigation, investigation.visitId)}
+          </span>
+        </Col>
+      </Row>
+      <Row className="show-grid">
+        <Col xs={12}>
+          <div style={{ color: 'gray', fontStyle: 'italic' }}>
+            {investigation.summary}
+          </div>
+        </Col>
+      </Row>
+      <Row className="show-grid" style={{ fontSize: 10 }}>
+        <Col xs={12}>
+          <DOIBadge doi={investigation.doi} />
+        </Col>
+      </Row>
+    </Grid>
+  );
+}
+
+/**
+ * This looks into the parameters of the investigation
+ */
+export function getParameter(investigation, parameterName) {
+  const parameter = investigation.parameters.find(
+    (o) => o.name === parameterName
+  );
+  if (parameter && parameter.value) {
+    return parameter.value;
+  }
+}
+
+export function fileCountFormatter(cell, investigation) {
+  const fileCount = getParameter(investigation, FILE_COUNT);
+
+  if (!fileCount) {
+    return undefined;
+  }
+
+  return (
+    <span style={{ width: 50, textAlign: 'right', float: 'left' }}>
+      {fileCount}
+    </span>
+  );
+}
+
+export function datasetCountFormatter(cell, investigation) {
+  const datasetCount = investigation.parameters.find(
+    (o) => o.name === DATASET_COUNT
+  );
+  if (datasetCount && datasetCount.value) {
     return (
-      <Link to={`/investigation/${investigation.id}/datasets`}>
-        <Button bsSize="xsmall" style={{ width: 120, textAlign: 'left' }}>
-          <Glyphicon glyph="circle-arrow-right" />
-          <span style={{ marginLeft: 10 }}>{investigation.name} </span>
-        </Button>
-      </Link>
+      <>
+        <span style={{ width: 40, textAlign: 'right', float: 'left' }}>
+          {datasetCount.value}
+        </span>
+        <span
+          style={{
+            width: 70,
+            marginLeft: 5,
+            float: 'left',
+            fontStyle: 'italic',
+            color: '#999',
+            fontSize: 12,
+          }}
+        >
+          ({volumeFormatter(cell, investigation)})
+        </span>
+      </>
     );
   }
-  return <span style={{ fontWeight: 'bold' }}>{investigation.name}</span>;
 }