feat: #3353 remove pagination form study page table

kids-first · Jun 29, 2021 · 5271fb2 · 5271fb2
1 parent 1a37467
commit 5271fb2
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 42 deletions.
diff --git a/src/pages/studies/Sidebar.tsx b/src/pages/studies/Sidebar.tsx
@@ -11,17 +11,11 @@ import SidebarFilters from './SidebarFilters';
 import styles from './Sidebar.module.scss';
 
 type StudiesProps = {
-  onChange: () => void;
   filters: ISqonGroupFilter;
 };
 type OwnProps = SidebarData & StudiesProps;
 
-const StudiesFiltersSider = ({
-  studiesResults,
-  studiesMappingResults,
-  onChange,
-  filters,
-}: OwnProps) => {
+const StudiesFiltersSider = ({ studiesResults, studiesMappingResults, filters }: OwnProps) => {
   const [collapsed, setCollapsed] = useState<boolean>(false);
   return (
     <div className={styles.sider} data-collapsed={collapsed}>
@@ -35,7 +29,6 @@ const StudiesFiltersSider = ({
         <ScrollView className={styles.scrollView}>
           {!collapsed && (
             <SidebarFilters
-              onChange={onChange}
               studiesResults={studiesResults}
               studiesMappingResults={studiesMappingResults}
               filters={filters}

diff --git a/src/pages/studies/SidebarFilters.tsx b/src/pages/studies/SidebarFilters.tsx
@@ -40,7 +40,6 @@ const keyEnhanceBooleanOnly = (key: string) => {
 };
 
 type StudiesProps = {
-  onChange: () => void;
   filters: ISqonGroupFilter;
 };
 type OwnProps = SidebarData & StudiesProps;
@@ -55,7 +54,7 @@ const sqon = {
   op: 'and',
 };
 
-const SidebarFilters = ({ studiesResults, studiesMappingResults, onChange, filters }: OwnProps) => {
+const SidebarFilters = ({ studiesResults, studiesMappingResults, filters }: OwnProps) => {
   const data = studiesResults;
   const options: ItemProps[] = [];
 
@@ -126,7 +125,6 @@ const SidebarFilters = ({ studiesResults, studiesMappingResults, onChange, filte
             filterGroup={filterGroup}
             filters={filters}
             onChange={(fg, f) => {
-              onChange();
               updateFilters(history, fg, f);
             }}
             selectedFilters={selectedFilters}

diff --git a/src/pages/studies/StudyPageContainer.tsx b/src/pages/studies/StudyPageContainer.tsx
@@ -7,7 +7,7 @@ import StudyIcon from 'icons/StudyIconSvg';
 import history from 'services/history';
 import { StudiesPageContainerData } from 'store/graphql/studies/actions';
 
-import StudyTableContainer, { PaginationType } from './StudyTableContainer';
+import StudyTableContainer from './StudyTableContainer';
 import {
   getQueryBuilderCache,
   setQueryBuilderCache,
@@ -17,13 +17,12 @@ import {
 
 import styles from './StudiesPageContainer.module.scss';
 
-type StudyPageContainerProps = StudiesPageContainerData & PaginationType;
+type StudyPageContainerProps = StudiesPageContainerData;
 
 const StudyPageContainer = ({
   studiesResults,
   studiesMappingResults,
   filters,
-  pagination,
 }: StudyPageContainerProps) => {
   const total = studiesResults?.data?.hits?.total || 0;
 
@@ -53,7 +52,7 @@ const StudyPageContainer = ({
         <StudyTableContainer
           data={studiesResults.data}
           loading={studiesResults.loading}
-          pagination={pagination}
+          total={total}
         />
       </StackLayout>
     </StackLayout>

diff --git a/src/pages/studies/StudyTableContainer.tsx b/src/pages/studies/StudyTableContainer.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { Table, Typography } from 'antd';
-import { TablePaginationConfig } from 'antd/lib/table';
 
 import { createQueryInCohortBuilder, DispatchStoryPage } from 'store/actionCreators/studyPage';
 import { StudiesResults } from 'store/graphql/studies/actions';
@@ -28,30 +27,24 @@ const mapState = (state: RootState): StudyTableContainerState => ({
 const connector = connect(mapState, mapDispatch);
 
 type PropsFromRedux = ConnectedProps<typeof connector>;
-export type PaginationType = {
-  pagination: TablePaginationConfig;
-};
 
-type Props = StudiesResults & PropsFromRedux & PaginationType;
+type Props = StudiesResults & PropsFromRedux & { total: number };
 
 const StudyTable = (props: Props) => {
-  const { pagination } = props;
-  const { current: currentPage, total: itemTotal = 0, pageSize: itemPerPage = 10 } = pagination;
-
   const tableData = generateTableData(props);
-  const pageRange = `${currentPage}-${itemTotal > itemPerPage ? itemPerPage : itemTotal}`;
+  const { total } = props;
 
   return (
     <div>
       <div className={styles.tableHeader}>
-        Showing <Text strong>{pageRange}</Text>
+        Showing <Text strong>{total}</Text>
         <span> out of </span>
-        <Text strong>{itemTotal}</Text>
+        <Text strong>{total}</Text>
       </div>
       <Table
         columns={studiesColumns(props.currentVirtualStudy, props.onClickStudyLink)}
         dataSource={tableData || []}
-        pagination={pagination}
+        pagination={false}
       />
     </div>
   );

diff --git a/src/pages/studies/studies.tsx b/src/pages/studies/studies.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import ScrollView from '@ferlab/ui/core/layout/ScrollView';
 import { Layout } from 'antd';
 
@@ -11,16 +11,15 @@ import { useFilters } from './utils';
 
 import styles from './studies.module.scss';
 
-const studiesPerPage = 10;
+const MAX_NUMBER_STUDIES = 1000;
 
 const Studies = () => {
   const { filters } = useFilters();
-  const [currentPage, setCurrentPage] = useState(1);
 
   let studiesResults = useGetStudiesPageData({
     sqon: filters,
-    first: studiesPerPage,
-    offset: (currentPage - 1) * studiesPerPage,
+    first: MAX_NUMBER_STUDIES,
+    offset: 0,
   });
 
   let studiesMappingResults = useGetExtendedMappings('studies');
@@ -30,7 +29,6 @@ const Studies = () => {
       <Sidebar
         studiesMappingResults={studiesMappingResults}
         studiesResults={studiesResults}
-        onChange={() => setCurrentPage(1)}
         filters={filters}
       />
       <ScrollView className={styles.scrollContent}>
@@ -39,15 +37,6 @@ const Studies = () => {
             studiesResults={studiesResults}
             studiesMappingResults={studiesMappingResults}
             filters={filters}
-            pagination={{
-              current: currentPage,
-              pageSize: studiesPerPage,
-              total: studiesResults.data?.hits.total || 0,
-              onChange: (page: number) => {
-                setCurrentPage(page);
-              },
-              size: 'small',
-            }}
           />
         </PageContent>
       </ScrollView>