#507 wip - pagination investigations table

src/components/Investigation/InvestigationDateFilter.js

@@ -25,6 +25,7 @@ function InvestigationDateFilter(props) {
     onClear,
     instrumentName,
     showStatisticsMenu,
+    placeHolder,
   } = props;
 
   return (
@@ -32,7 +33,7 @@ function InvestigationDateFilter(props) {
       <DayPickerInput
         inputProps={{ className: styles.dateFilterInput }}
         value={value}
-        placeholder=" Filter by date"
+        placeholder={placeHolder ? placeHolder : 'Filter by date'}
         format={INVESTIGATION_DATE_FORMAT}
         formatDate={formatDate}
         parseDate={parseDate}

src/components/Investigation/InvestigationTable.js

 import React from 'react';
-import { Glyphicon } from 'react-bootstrap';
+import { Glyphicon, Col, Grid, Row } from 'react-bootstrap';
 import moment from 'moment';
 import DOIBadge from '../doi/DOIBadge';
 import ResponsiveTable from '../Table/ResponsiveTable';
@@ -15,10 +15,10 @@ import {
 } from './utils';
 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';
 import { INVESTIGATION_DATE_FORMAT } from '../../constants';
+import { useResource } from 'rest-hooks';
+import InvestigationResource from '../../resources/investigation';
 
 function getLgHeaderStyle(width, hidden) {
   return {
@@ -148,40 +148,78 @@ function getColumns({ showProposalLinks, showInvestigationStats, showFiles }) {
 
 function InvestigationTable(props) {
   const {
-    investigations,
     withProposalLinks = false,
     withInvestigationStats = false,
     showStatisticsMenu = false,
     instrumentName,
+    filter,
   } = props;
 
+  const [sizePerPage, setSizePerPage] = React.useState(25);
+  const [page, setPage] = React.useState(1);
+  const [search, setSearch] = React.useState('');
+  const [startDate, setStartDate] = React.useState(undefined);
+  const [endDate, setEndDate] = React.useState(undefined);
+
+  let fetchingParams = {
+    limit: sizePerPage,
+    skip: sizePerPage * (page - 1),
+  };
+  if (filter) {
+    fetchingParams = { ...fetchingParams, filter };
+  }
+  if (search && search.length > 0) {
+    fetchingParams = { ...fetchingParams, search: search.toString() };
+  }
+  if (startDate) {
+    fetchingParams = {
+      ...fetchingParams,
+      startDate: moment(startDate).format('YYYY-MM-DD'),
+    };
+  }
+  if (endDate) {
+    fetchingParams = {
+      ...fetchingParams,
+      endDate: moment(endDate).format('YYYY-MM-DD'),
+    };
+  }
+
+  console.log(fetchingParams);
+  const data = useResource(InvestigationResource.listShape(), fetchingParams);
+
+  const totalSize = data && data.length > 0 ? data[0].meta?.page?.total : 0;
+
   const user = useSelector((state) => state.user);
   const { sessionId, isAdministrator } = user;
 
-  const history = useHistory();
-  const query = useQuery();
-  const location = useLocation();
+  function handleStartDateChange(date) {
+    setStartDate(date);
+    setPage(1);
+  }
 
-  const dateForFiltering = query.has('date')
-    ? moment(query.get('date'), moment.HTML5_FMT.DATE)
-    : undefined;
+  function handleEndDateChange(date) {
+    setEndDate(date);
+    setPage(1);
+  }
 
-  function handleDateChange(date) {
-    const newQuery = new URLSearchParams(query);
+  function handleStartDateClear() {
+    setStartDate(undefined);
+    setPage(1);
+  }
 
-    if (date) {
-      newQuery.set('date', moment(date).format(moment.HTML5_FMT.DATE));
-    } else {
-      newQuery.delete('date');
-    }
+  function handleEndDateClear() {
+    setEndDate(undefined);
+    setPage(1);
+  }
 
-    history.replace(`${location.pathname}?${newQuery.toString()}`);
+  function handleTableChange(page, sizePerPage) {
+    setPage(page);
+    setSizePerPage(sizePerPage);
   }
 
-  function handleDateClear() {
-    const newQuery = new URLSearchParams(query);
-    newQuery.delete('date');
-    history.replace(`${location.pathname}?${newQuery.toString()}`);
+  function onSearch(query) {
+    setSearch(query);
+    setPage(1);
   }
 
   const expandRow = {
@@ -216,51 +254,58 @@ function InvestigationTable(props) {
     ),
   };
 
-  function isInvestigationMatching(investigation) {
-    if (!dateForFiltering) {
-      return true;
-    }
-
-    return investigation.endDate
-      ? dateForFiltering.isBetween(
-          investigation.startDate,
-          investigation.endDate,
-          'day',
-          '[]'
-        )
-      : dateForFiltering.isSame(investigation.startDate, 'day');
-  }
-
   return (
-    <>
-      <div className={styles.wrapper}>
-        <InvestigationDateFilter
-          rootClassName={styles.filter}
-          value={dateForFiltering && dateForFiltering.toDate()}
-          onDayChange={handleDateChange}
-          onClear={handleDateClear}
-          showStatisticsMenu={showStatisticsMenu}
-          instrumentName={instrumentName}
+    <Grid fluid>
+      <Row>
+        <Col md={2} sm={3} xs={12}>
+          <InvestigationDateFilter
+            rootClassName={styles.filter}
+            placeHolder={'startDate'}
+            value={startDate}
+            onDayChange={handleStartDateChange}
+            onClear={handleStartDateClear}
+            showStatisticsMenu={showStatisticsMenu}
+            instrumentName={instrumentName}
+          />
+        </Col>
+        <Col md={2} sm={3} xs={12}>
+          <InvestigationDateFilter
+            rootClassName={styles.filter}
+            placeHolder={'endDate'}
+            value={endDate}
+            onDayChange={handleEndDateChange}
+            onClear={handleEndDateClear}
+            showStatisticsMenu={showStatisticsMenu}
+            instrumentName={instrumentName}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <ResponsiveTable
+          data={data}
+          pageOptions={{
+            showTotal: true,
+            sizePerPageList: [
+              { text: '1', value: 1 },
+              { text: '25', value: 25 },
+              { text: '50', value: 50 },
+              { text: '100', value: 100 },
+            ],
+            sizePerPage,
+            totalSize,
+          }}
+          columns={getColumns({
+            showProposalLinks: withProposalLinks || isAdministrator,
+            showInvestigationStats: withInvestigationStats || isAdministrator,
+            showFiles: isAdministrator,
+          })}
+          expandRow={expandRow}
+          handleTableChange={handleTableChange}
+          onSearch={onSearch}
+          delay={750}
         />
-      </div>
-      <ResponsiveTable
-        data={investigations.filter(isInvestigationMatching)}
-        pageOptions={{
-          showTotal: true,
-          sizePerPageList: [
-            { text: '25', value: 25 },
-            { text: '50', value: 50 },
-            { text: '100', value: 100 },
-          ],
-        }}
-        columns={getColumns({
-          showProposalLinks: withProposalLinks || isAdministrator,
-          showInvestigationStats: withInvestigationStats || isAdministrator,
-          showFiles: isAdministrator,
-        })}
-        expandRow={expandRow}
-      />
-    </>
+      </Row>
+    </Grid>
   );
 }
 

src/components/Investigation/InvestigationTable.module.css

-.wrapper {
-  position: relative;
-}
-
 @media (min-width: 50em) {
   .filter {
     display: flex;

src/components/Table/ResponsiveTable.js

@@ -51,6 +51,7 @@ export default function ResponsiveTable(props) {
     pageOptions,
     rowEvents,
     rowClasses,
+    delay,
   } = props;
 
   function onColumnMatch({ searchText, value, column, row }) {
@@ -65,6 +66,12 @@ export default function ResponsiveTable(props) {
     );
   }
 
+  function handleTableChange(type, { page, sizePerPage }) {
+    if (props.handleTableChange) {
+      props.handleTableChange(page, sizePerPage);
+    }
+  }
+
   return (
     <ToolkitProvider
       keyField={keyField || 'id'}
@@ -92,24 +99,26 @@ export default function ResponsiveTable(props) {
             <div className={styles.search}>
               <SearchBar
                 searchText={searchProps.searchText}
+                delay={delay ? delay : 250}
                 onSearch={(query) => {
+                  searchProps.onSearch(query);
                   if (onSearch) {
                     onSearch(query);
                   }
-                  searchProps.onSearch(query);
                 }}
               />
             </div>
           </div>
           <BootstrapTable2
+            remote
+            pagination={paginationFactory(pageOptions)}
+            onTableChange={handleTableChange}
             striped
             hover
             condensed
-            showTotal
             defaultSorted={defaultSorted}
             selectRow={selectRow}
             expandRow={expandRow}
-            pagination={paginationFactory(pageOptions)}
             rowEvents={rowEvents}
             rowClasses={rowClasses}
             noDataIndication="No data to display"

src/containers/ClosedData/EmbargoedInvestigationsTable.js

 import React from 'react';
-import { useResource } from 'rest-hooks';
 import InvestigationTable from '../../components/Investigation/InvestigationTable';
-import InvestigationResource from '../../resources/investigation';
 
 function EmbargoedInvestigationsTable() {
-  const investigations = useResource(InvestigationResource.listShape(), {
-    filter: 'embargoed',
-  });
-
-  return <InvestigationTable investigations={investigations} />;
+  return <InvestigationTable filter="embargoed" />;
 }
 
 export default EmbargoedInvestigationsTable;

src/containers/OpenData/ReleasedInvestigationsTable.js

 import React from 'react';
-import { useResource } from 'rest-hooks';
 import InvestigationTable from '../../components/Investigation/InvestigationTable';
-import InvestigationResource from '../../resources/investigation';
 
 function ReleasedInvestigationsTable() {
-  const investigations = useResource(InvestigationResource.listShape(), {
-    filter: 'released',
-  });
-
   return (
     <InvestigationTable
-      investigations={investigations}
+      filter="released"
       withInvestigationStats
       withProposalLinks
     />