Pagination for files & folder page under dataset (#797)

Author: ddey2

frontend/src/actions/dataset.js

@@ -104,11 +104,13 @@ export function removeDatasetUserRole(datasetId, username) {
 
 export const RECEIVE_FILES_IN_DATASET = "RECEIVE_FILES_IN_DATASET";
 
-export function fetchFilesInDataset(datasetId, folderId) {
+export function fetchFilesInDataset(datasetId, folderId, skip, limit) {
 	return (dispatch) => {
 		return V2.DatasetsService.getDatasetFilesApiV2DatasetsDatasetIdFilesGet(
 			datasetId,
-			folderId
+			folderId,
+			skip,
+			limit
 		)
 			.then((json) => {
 				dispatch({
@@ -119,19 +121,21 @@ export function fetchFilesInDataset(datasetId, folderId) {
 			})
 			.catch((reason) => {
 				dispatch(
-					handleErrors(reason, fetchFilesInDataset(datasetId, folderId))
+					handleErrors(reason, fetchFilesInDataset(datasetId, folderId, skip, limit))
 				);
 			});
 	};
 }
 
 export const RECEIVE_FOLDERS_IN_DATASET = "RECEIVE_FOLDERS_IN_DATASET";
 
-export function fetchFoldersInDataset(datasetId, parentFolder) {
+export function fetchFoldersInDataset(datasetId, parentFolder, skip, limit) {
 	return (dispatch) => {
 		return V2.DatasetsService.getDatasetFoldersApiV2DatasetsDatasetIdFoldersGet(
 			datasetId,
-			parentFolder
+			parentFolder,
+			skip,
+			limit
 		)
 			.then((json) => {
 				dispatch({
@@ -142,7 +146,7 @@ export function fetchFoldersInDataset(datasetId, parentFolder) {
 			})
 			.catch((reason) => {
 				dispatch(
-					handleErrors(reason, fetchFoldersInDataset(datasetId, parentFolder))
+					handleErrors(reason, fetchFoldersInDataset(datasetId, parentFolder, skip, limit))
 				);
 			});
 	};

frontend/src/components/datasets/Dataset.tsx

@@ -1,6 +1,6 @@
 // lazy loading
 import React, { useEffect, useState } from "react";
-import { Box, Button, Grid, Stack, Tab, Tabs, Typography } from "@mui/material";
+import {Box, Button, ButtonGroup, Grid, Stack, Tab, Tabs, Typography} from "@mui/material";
 import { useParams, useSearchParams } from "react-router-dom";
 import { RootState } from "../../types/data";
 import { useDispatch, useSelector } from "react-redux";
@@ -27,7 +27,7 @@ import {
 import Layout from "../Layout";
 import { ActionsMenu } from "./ActionsMenu";
 import { DatasetDetails } from "./DatasetDetails";
-import { FormatListBulleted, InsertDriveFile } from "@material-ui/icons";
+import {ArrowBack, ArrowForward, FormatListBulleted, InsertDriveFile} from "@material-ui/icons";
 import { Listeners } from "../listeners/Listeners";
 import AssessmentIcon from "@mui/icons-material/Assessment";
 import HistoryIcon from "@mui/icons-material/History";
@@ -69,11 +69,12 @@ export const Dataset = (): JSX.Element => {
 	const listFilesInDataset = (
 		datasetId: string | undefined,
 		folderId: string | null
-	) => dispatch(fetchFilesInDataset(datasetId, folderId));
+		, skip: number | undefined, limit: number | undefined) => dispatch(fetchFilesInDataset(datasetId, folderId, skip, limit));
 	const listFoldersInDataset = (
 		datasetId: string | undefined,
-		parentFolder: string | null
-	) => dispatch(fetchFoldersInDataset(datasetId, parentFolder));
+		parentFolder: string | null,
+		skip: number | undefined, limit: number | undefined
+	) => dispatch(fetchFoldersInDataset(datasetId, parentFolder, skip, limit));
 	const listDatasetAbout = (datasetId: string | undefined) =>
 		dispatch(fetchDatasetAbout(datasetId));
 	const listDatasetMetadata = (datasetId: string | undefined) =>
@@ -100,14 +101,40 @@ export const Dataset = (): JSX.Element => {
 
 	const [paths, setPaths] = useState([]);
 
+	// TODO add option to determine limit number; default show 20 files each time
+	const [currPageNum, setCurrPageNum] = useState<number>(0);
+	const [limit] = useState<number>(10);
+	const [skip, setSkip] = useState<number | undefined>(0);
+	const [prevDisabled, setPrevDisabled] = useState<boolean>(true);
+	const [nextDisabled, setNextDisabled] = useState<boolean>(false);
+	const filesInDataset = useSelector((state: RootState) => state.dataset.files);
+	const foldersInDataset = useSelector((state: RootState) => state.folder.folders);
+
 	// component did mount list all files in dataset
 	useEffect(() => {
-		listFilesInDataset(datasetId, folderId);
-		listFoldersInDataset(datasetId, folderId);
+		listFilesInDataset(datasetId, folderId, skip, limit);
+		listFoldersInDataset(datasetId, folderId, skip, limit);
 		listDatasetAbout(datasetId);
 		getFolderPath(folderId);
 	}, [searchParams]);
 
+	useEffect(() => {
+		// disable flipping if reaches the last page
+		if (filesInDataset.length < limit && foldersInDataset.length < limit)
+			setNextDisabled(true);
+		else
+			setNextDisabled(false);
+	}, [filesInDataset]);
+
+	useEffect(() => {
+		if (skip !== null && skip !== undefined) {
+			listFilesInDataset(datasetId, folderId, skip, limit);
+			listFoldersInDataset(datasetId, folderId, skip, limit);
+			if (skip === 0) setPrevDisabled(true);
+			else setPrevDisabled(false);
+		}
+	}, [skip]);
+
 	// for breadcrumb
 	useEffect(() => {
 		// for breadcrumb
@@ -132,6 +159,20 @@ export const Dataset = (): JSX.Element => {
 		setPaths(tmpPaths);
 	}, [about, folderPath]);
 
+		// for pagination keep flipping until the return dataset is less than the limit
+	const previous = () => {
+		if (currPageNum - 1 >= 0) {
+			setSkip((currPageNum - 1) * limit);
+			setCurrPageNum(currPageNum - 1);
+		}
+	};
+	const next = () => {
+		if (filesInDataset.length === limit || foldersInDataset.length === limit) {
+			setSkip((currPageNum + 1) * limit);
+			setCurrPageNum(currPageNum + 1);
+		}
+	};
+
 	const handleTabChange = (
 		_event: React.ChangeEvent<{}>,
 		newTabIndex: number
@@ -359,6 +400,27 @@ export const Dataset = (): JSX.Element => {
 					<TabPanel value={selectedTabIndex} index={6}>
 						<SharingTab datasetId={datasetId} />
 					</TabPanel>
+					<Box display="flex" justifyContent="center" sx={{ m: 1 }}>
+						<ButtonGroup
+								variant="contained"
+								aria-label="previous next buttons"
+							>
+								<Button
+									aria-label="previous"
+									onClick={previous}
+									disabled={prevDisabled}
+								>
+									<ArrowBack /> Prev
+								</Button>
+								<Button
+									aria-label="next"
+									onClick={next}
+									disabled={nextDisabled}
+								>
+									Next <ArrowForward />
+								</Button>
+						</ButtonGroup>
+					</Box>
 				</Grid>
 				<Grid item>
 					<DatasetDetails details={about} />