From ea9e47cbb4e82620bf2744698f41438b22152bd1 Mon Sep 17 00:00:00 2001
From: Tim Fischer <tim.fischer@uni-hamburg.de>
Date: Fri, 18 Oct 2024 14:31:58 +0000
Subject: [PATCH] add fetch all button

---
 frontend/src/components/tableSlice.ts         | 19 ++++++++-----------
 .../DocumentSearch/SearchDocumentTable.tsx    | 16 ++++++++++++++--
 .../search/DocumentSearch/searchSlice.ts      |  9 ++++++++-
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/tableSlice.ts b/frontend/src/components/tableSlice.ts
index eb2f5d7b2..973a99c6f 100644
--- a/frontend/src/components/tableSlice.ts
+++ b/frontend/src/components/tableSlice.ts
@@ -2,7 +2,6 @@ import { Draft, PayloadAction, createSelector } from "@reduxjs/toolkit";
 import {
   MRT_ColumnSizingState,
   MRT_DensityState,
-  MRT_PaginationState,
   MRT_RowSelectionState,
   MRT_SortingState,
   MRT_VisibilityState,
@@ -11,24 +10,21 @@ import {
 export interface TableState {
   searchQuery?: string;
   rowSelectionModel: MRT_RowSelectionState;
-  paginationModel: MRT_PaginationState;
   sortingModel: MRT_SortingState;
   columnVisibilityModel: MRT_VisibilityState;
   columnSizingModel: MRT_ColumnSizingState;
   gridDensityModel: MRT_DensityState;
+  fetchSize: number;
 }
 
 export const initialTableState: TableState = {
   // project state:
   searchQuery: "",
   rowSelectionModel: {},
-  paginationModel: {
-    pageIndex: 0,
-    pageSize: 10,
-  },
   sortingModel: [],
   columnVisibilityModel: {},
   columnSizingModel: {},
+  fetchSize: 20,
   // app state:
   gridDensityModel: "comfortable",
 };
@@ -37,6 +33,7 @@ export const tableReducer = {
   // query
   onSearchQueryChange: (state: Draft<TableState>, action: PayloadAction<string | undefined>) => {
     state.searchQuery = action.payload;
+    state.fetchSize = initialTableState.fetchSize;
   },
   // selection
   onRowSelectionChange: (state: Draft<TableState>, action: PayloadAction<MRT_RowSelectionState>) => {
@@ -45,10 +42,6 @@ export const tableReducer = {
   onClearRowSelection: (state: Draft<TableState>) => {
     state.rowSelectionModel = {};
   },
-  // pagination
-  onPaginationChange: (state: Draft<TableState>, action: PayloadAction<MRT_PaginationState>) => {
-    state.paginationModel = action.payload;
-  },
   // sorting
   onSortChange: (state: Draft<TableState>, action: PayloadAction<MRT_SortingState>) => {
     state.sortingModel = action.payload;
@@ -65,16 +58,20 @@ export const tableReducer = {
   onGridDensityChange: (state: Draft<TableState>, action: PayloadAction<MRT_DensityState>) => {
     state.gridDensityModel = action.payload;
   },
+  // fetch sizse
+  onFetchSizeChange: (state: Draft<TableState>, action: PayloadAction<number>) => {
+    state.fetchSize = action.payload;
+  },
 };
 
 // reset table state
 export const resetProjectTableState = (state: Draft<TableState>) => {
   state.searchQuery = initialTableState.searchQuery;
   state.rowSelectionModel = initialTableState.rowSelectionModel;
-  state.paginationModel = initialTableState.paginationModel;
   state.sortingModel = initialTableState.sortingModel;
   state.columnVisibilityModel = initialTableState.columnVisibilityModel;
   state.columnSizingModel = initialTableState.columnSizingModel;
+  state.fetchSize = initialTableState.fetchSize;
 };
 
 // selectors
diff --git a/frontend/src/views/search/DocumentSearch/SearchDocumentTable.tsx b/frontend/src/views/search/DocumentSearch/SearchDocumentTable.tsx
index 2d035ae94..c31f2edbf 100644
--- a/frontend/src/views/search/DocumentSearch/SearchDocumentTable.tsx
+++ b/frontend/src/views/search/DocumentSearch/SearchDocumentTable.tsx
@@ -1,4 +1,4 @@
-import { Box, Card, Toolbar, Typography } from "@mui/material";
+import { Box, Button, Card, Divider, Stack, Toolbar, Typography } from "@mui/material";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import parse from "html-react-parser";
 import {
@@ -42,7 +42,6 @@ import { SearchActions } from "./searchSlice.ts";
 // this has to match Search.tsx!
 const filterStateSelector = (state: RootState) => state.searchFilter;
 const filterName = "root";
-const fetchSize = 20;
 
 const flatMapData = (page: PaginatedElasticSearchDocumentHits) => page.hits;
 
@@ -152,6 +151,7 @@ function SearchDocumentTable({ projectId }: DocumentTableProps) {
   }, [tableInfo, user]);
 
   // search
+  const fetchSize = useAppSelector((state) => state.search.fetchSize);
   const filter = useAppSelector((state) => state.searchFilter.filter[filterName]);
   const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery<PaginatedElasticSearchDocumentHits>({
     queryKey: [
@@ -160,6 +160,7 @@ function SearchDocumentTable({ projectId }: DocumentTableProps) {
       searchQuery, // refetch when searchQuery changes
       filter, // refetch when columnFilters changes
       sortingModel, // refetch when sorting changes
+      fetchSize,
     ],
     queryFn: ({ pageParam }) =>
       SearchService.searchSdocs({
@@ -335,6 +336,17 @@ function SearchDocumentTable({ projectId }: DocumentTableProps) {
           style={{ flexGrow: 1 }}
           onScroll={(event) => fetchMoreOnScroll(event.target as HTMLDivElement)}
         />
+        <Box sx={{ p: 1 }}>
+          <Divider />
+          <Stack direction="row" alignItems="top" pt={0.5}>
+            <Typography variant="body2" color="textSecondary" pt={0.5} mr={1}>
+              Fetched {totalFetched} of {totalResults} documents
+            </Typography>
+            <Button size="small" onClick={() => dispatch(SearchActions.onFetchSizeChange(totalResults))}>
+              Fetch All
+            </Button>
+          </Stack>
+        </Box>
       </Card>
     </>
   );
diff --git a/frontend/src/views/search/DocumentSearch/searchSlice.ts b/frontend/src/views/search/DocumentSearch/searchSlice.ts
index 4eaa9c959..f6ca5e054 100644
--- a/frontend/src/views/search/DocumentSearch/searchSlice.ts
+++ b/frontend/src/views/search/DocumentSearch/searchSlice.ts
@@ -84,7 +84,14 @@ export const searchSlice = createSlice({
             };
           }
         }, {});
-      });
+      })
+      .addMatcher(
+        (action) => action.type.startsWith("searchFilter"),
+        (state) => {
+          console.log("SearchFilterActions dispatched! Resetting fetchSize.");
+          state.fetchSize = initialTableState.fetchSize;
+        },
+      );
   },
 });