1053 pagination doesnt update on deleting files in a dataset (#1060)

* update reducer

* delete file should work now

* update dataset use effect to listen to dataset change

* update dataset delete

* delete groups

* metadata deletion

* fix delete api keys

* add a delete button right next to group

Author: longshuicy

frontend/src/components/Explore.tsx

@@ -31,6 +31,9 @@ export const Explore = (): JSX.Element => {
 	const datasets = useSelector(
 		(state: RootState) => state.dataset.datasets.data
 	);
+	const deletedDataset = useSelector(
+		(state: RootState) => state.dataset.deletedDataset
+	);
 	const pageMetadata = useSelector(
 		(state: RootState) => state.dataset.datasets.metadata
 	);
@@ -44,15 +47,10 @@ export const Explore = (): JSX.Element => {
 	const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 	const [errorOpen, setErrorOpen] = useState(false);
 
-	// component did mount
-	useEffect(() => {
-		listDatasets(0, limit, mine);
-	}, []);
-
 	// Admin mode will fetch all datasets
 	useEffect(() => {
-		listDatasets(0, limit, mine);
-	}, [adminMode]);
+		listDatasets((currPageNum - 1) * limit, limit, mine);
+	}, [adminMode, deletedDataset]);
 
 	// switch tabs
 	const handleTabChange = (

frontend/src/components/apikeys/ApiKey.tsx

@@ -34,6 +34,10 @@ export function ApiKeys() {
 	const pageMetadata = useSelector(
 		(state: RootState) => state.user.apiKeys.metadata
 	);
+	const deletedApiKey = useSelector(
+		(state: RootState) => state.user.deletedApiKey
+	);
+	const hashedKey = useSelector((state: RootState) => state.user.hashedKey);
 
 	// TODO add option to determine limit number; default show 5 tokens each time
 	const [currPageNum, setCurrPageNum] = useState<number>(1);
@@ -44,8 +48,8 @@ export function ApiKeys() {
 
 	// component did mount
 	useEffect(() => {
-		listApiKeys(0, limit);
-	}, []);
+		listApiKeys((currPageNum - 1) * limit, limit);
+	}, [deletedApiKey, hashedKey]);
 
 	const handlePageChange = (_: ChangeEvent<unknown>, value: number) => {
 		const newSkip = (value - 1) * limit;

frontend/src/components/datasets/Dataset.tsx

@@ -3,17 +3,17 @@ import React, { ChangeEvent, useEffect, useState } from "react";
 import {
 	Box,
 	Button,
+	Dialog,
+	DialogContent,
+	DialogTitle,
 	Grid,
+	IconButton,
+	Link,
 	Pagination,
 	Stack,
 	Tab,
 	Tabs,
 	Typography,
-	Link,
-	IconButton,
-	DialogTitle,
-	DialogContent,
-	Dialog,
 } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
 import { useParams, useSearchParams } from "react-router-dom";
@@ -28,7 +28,7 @@ import { fetchFolderPath } from "../../actions/folder";
 
 import { a11yProps, TabPanel } from "../tabs/TabComponent";
 import FilesTable from "../files/FilesTable";
-import { LicenseOption, MetadataIn } from "../../openapi/v2";
+import { MetadataIn } from "../../openapi/v2";
 import { DisplayMetadata } from "../metadata/DisplayMetadata";
 import { DisplayListenerMetadata } from "../metadata/DisplayListenerMetadata";
 import { EditMetadata } from "../metadata/EditMetadata";
@@ -51,18 +51,13 @@ import ShareIcon from "@mui/icons-material/Share";
 import BuildIcon from "@mui/icons-material/Build";
 import { ExtractionHistoryTab } from "../listeners/ExtractionHistoryTab";
 import { SharingTab } from "../sharing/SharingTab";
-import RoleChip from "../auth/RoleChip";
 import { TabStyle } from "../../styles/Styles";
 import { ErrorModal } from "../errors/ErrorModal";
 import { Visualization } from "../visualizations/Visualization";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import config from "../../app.config";
 import { EditLicenseModal } from "./EditLicenseModal";
-import { V2 } from "../../openapi";
-import {
-	fetchStandardLicenses,
-	fetchStandardLicenseUrl,
-} from "../../utils/licenses";
+import { fetchStandardLicenseUrl } from "../../utils/licenses";
 import { authCheck } from "../../utils/common";
 
 export const Dataset = (): JSX.Element => {
@@ -143,6 +138,13 @@ export const Dataset = (): JSX.Element => {
 	);
 	const adminMode = useSelector((state: RootState) => state.user.adminMode);
 	const license = useSelector((state: RootState) => state.dataset.license);
+	const deletedFile = useSelector(
+		(state: RootState) => state.dataset.deletedFile
+	);
+	const deletedFolder = useSelector(
+		(state: RootState) => state.dataset.deletedFolder
+	);
+
 	const [standardLicenseUrl, setStandardLicenseUrl] = useState<string>("");
 	const fetchStandardLicenseUrlData = async (license_id: string) => {
 		try {
@@ -170,6 +172,16 @@ export const Dataset = (): JSX.Element => {
 		getMetadatDefinitions(null, 0, 100);
 	}, [searchParams, adminMode, about.license_id]);
 
+	useEffect(() => {
+		fetchFoldersFilesInDataset(
+			datasetId,
+			folderId,
+			(currPageNum - 1) * limit,
+			limit
+		);
+		listDatasetAbout(datasetId);
+	}, [deletedFile, deletedFolder]);
+
 	// for breadcrumb
 	useEffect(() => {
 		// for breadcrumb

frontend/src/components/groups/Groups.tsx

@@ -6,6 +6,7 @@ import {
 	DialogContent,
 	DialogTitle,
 	Grid,
+	IconButton,
 	Link as MuiLink,
 	Pagination,
 } from "@mui/material";
@@ -30,6 +31,8 @@ import { CreateGroup } from "./CreateGroup";
 import { ErrorModal } from "../errors/ErrorModal";
 import { GenericSearchBox } from "../search/GenericSearchBox";
 import config from "../../app.config";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DeleteGroupModal from "./DeleteGroupModal";
 
 export function Groups() {
 	// Redux connect equivalent
@@ -46,6 +49,9 @@ export function Groups() {
 	const pageMetadata = useSelector(
 		(state: RootState) => state.group.groups.metadata
 	);
+	const deletedGroup = useSelector(
+		(state: RootState) => state.group.deletedGroup
+	);
 	const adminMode = useSelector((state: RootState) => state.user.adminMode);
 
 	// TODO add option to determine limit number; default show 5 groups each time
@@ -54,11 +60,13 @@ export function Groups() {
 	const [searchTerm, setSearchTerm] = useState<string>("");
 	const [createGroupOpen, setCreateGroupOpen] = useState<boolean>(false);
 	const [errorOpen, setErrorOpen] = useState(false);
+	const [deleteGroupConfirmOpen, setDeleteGroupConfirmOpen] = useState(false);
+	const [selectedGroupId, setSelectedGroupId] = useState("");
 
 	// component did mount
 	useEffect(() => {
 		listGroups((currPageNum - 1) * limit, limit);
-	}, [adminMode]);
+	}, [adminMode, deletedGroup]);
 
 	// search while typing
 	useEffect(() => {
@@ -79,6 +87,11 @@ export function Groups() {
 		<Layout>
 			{/*Error Message dialogue*/}
 			<ErrorModal errorOpen={errorOpen} setErrorOpen={setErrorOpen} />
+			<DeleteGroupModal
+				deleteGroupConfirmOpen={deleteGroupConfirmOpen}
+				setDeleteGroupConfirmOpen={setDeleteGroupConfirmOpen}
+				groupId={selectedGroupId}
+			/>
 			<div className="outer-container">
 				{/*create new group*/}
 				<Dialog
@@ -150,6 +163,7 @@ export function Groups() {
 										>
 											<GroupsIcon />
 										</TableCell>
+										<TableCell align="left" />
 									</TableRow>
 								</TableHead>
 								<TableBody>
@@ -176,6 +190,22 @@ export function Groups() {
 												<TableCell scope="row" key={group.id} align="left">
 													{group.users !== undefined ? group.users.length : 0}
 												</TableCell>
+												<TableCell
+													scope="row"
+													key={`${group.id}-delete`}
+													align="left"
+												>
+													<IconButton
+														aria-label="delete"
+														size="small"
+														onClick={() => {
+															setSelectedGroupId(group.id);
+															setDeleteGroupConfirmOpen(true);
+														}}
+													>
+														<DeleteIcon fontSize="small" />
+													</IconButton>
+												</TableCell>
 											</TableRow>
 										);
 									})}

frontend/src/components/metadata/MetadataDefinitions.tsx

@@ -53,6 +53,9 @@ export function MetadataDefinitions() {
 	const pageMetadata = useSelector(
 		(state: RootState) => state.metadata.metadataDefinitionList.metadata
 	);
+	const deletedMetadataDefinition = useSelector(
+		(state: RootState) => state.metadata.deletedMetadataDefinition
+	);
 	const adminMode = useSelector((state: RootState) => state.user.adminMode);
 
 	// TODO add option to determine limit number; default show 5 metadata definitions each time
@@ -75,15 +78,10 @@ export function MetadataDefinitions() {
 	// Error msg dialog
 	const [errorOpen, setErrorOpen] = useState(false);
 
-	// component did mount
-	useEffect(() => {
-		listMetadataDefinitions(null, 0, limit);
-	}, []);
-
 	// Admin mode will fetch all datasets
 	useEffect(() => {
 		listMetadataDefinitions(null, (currPageNum - 1) * limit, limit);
-	}, [adminMode]);
+	}, [adminMode, deletedMetadataDefinition]);
 
 	// search
 	useEffect(() => {

frontend/src/reducers/dataset.ts

@@ -5,7 +5,6 @@ import {
 	FOLDER_UPDATED,
 	RECEIVE_DATASET_ABOUT,
 	RECEIVE_DATASET_LICENSE,
-	UPDATE_DATASET_LICENSE,
 	RECEIVE_DATASET_ROLES,
 	RECEIVE_DATASETS,
 	RECEIVE_FOLDERS_FILES_IN_DATASET,
@@ -15,6 +14,7 @@ import {
 	SET_DATASET_GROUP_ROLE,
 	SET_DATASET_USER_ROLE,
 	UPDATE_DATASET,
+	UPDATE_DATASET_LICENSE,
 } from "../actions/dataset";
 import {
 	CREATE_FILE,
@@ -29,7 +29,6 @@ import { DataAction } from "../types/action";
 import { DatasetState } from "../types/data";
 import {
 	AuthorizationBase,
-	DatasetOut,
 	DatasetOut as Dataset,
 	DatasetRoles,
 	FileOut,
@@ -46,6 +45,9 @@ const defaultState: DatasetState = {
 		metadata: <PageMetadata>{},
 		data: <FileOut | FolderOut[]>[],
 	},
+	deletedDataset: <Dataset>{},
+	deletedFolder: <FolderOut>{},
+	deletedFile: <FileOut>{},
 	about: <Dataset>{ creator: <UserOut>{} },
 	datasetRole: <AuthorizationBase>{},
 	datasets: <Paged>{ metadata: <PageMetadata>{}, data: <Dataset[]>[] },
@@ -65,12 +67,7 @@ const dataset = (state = defaultState, action: DataAction) => {
 			});
 		case DELETE_FILE:
 			return Object.assign({}, state, {
-				foldersAndFiles: {
-					...state.foldersAndFiles,
-					data: state.foldersAndFiles.data.filter(
-						(item: FileOut | FolderOut) => item.id !== action.file.id
-					),
-				},
+				deletedFile: action.file,
 			});
 		case CREATE_FILE:
 			return Object.assign({}, state, {
@@ -121,21 +118,11 @@ const dataset = (state = defaultState, action: DataAction) => {
 			return Object.assign({}, state, { newDataset: {} });
 		case DELETE_DATASET:
 			return Object.assign({}, state, {
-				datasets: {
-					...state.datasets,
-					data: state.datasets.data.filter(
-						(dataset: DatasetOut) => dataset.id !== action.dataset.id
-					),
-				},
+				deletedDataset: action.dataset,
 			});
 		case FOLDER_DELETED:
 			return Object.assign({}, state, {
-				foldersAndFiles: {
-					...state.foldersAndFiles,
-					data: state.foldersAndFiles.data.filter(
-						(item: FileOut | FolderOut) => item.id !== action.folder.id
-					),
-				},
+				deletedFolder: action.folder,
 			});
 		case FOLDER_ADDED:
 			return Object.assign({}, state, { newFolder: action.folder });

frontend/src/reducers/group.ts

@@ -30,6 +30,7 @@ import {
 const defaultState: GroupState = {
 	groups: <Paged>{ metadata: <PageMetadata>{}, data: <GroupOut[]>[] },
 	newGroup: <GroupOut>{},
+	deletedGroup: <GroupOut>{},
 	about: <GroupOut>{},
 	role: <RoleType>{},
 	users: <Paged>{ metadata: <PageMetadata>{}, data: <UserOut[]>[] },
@@ -50,7 +51,7 @@ const group = (state = defaultState, action: DataAction) => {
 		case RECEIVE_GROUP_ROLE:
 			return Object.assign({}, state, { role: action.role });
 		case DELETE_GROUP_MEMBER:
-			return Object.assign({}, state, { about: action.about });
+			return Object.assign({}, state, { deletedGroup: action.about });
 		case UPDATE_GROUP:
 			return Object.assign({}, state, { about: action.about });
 		case ADD_GROUP_MEMBER:
@@ -81,12 +82,7 @@ const group = (state = defaultState, action: DataAction) => {
 			return Object.assign({}, state, { about: action.about });
 		case DELETE_GROUP:
 			return Object.assign({}, state, {
-				groups: {
-					...state.groups,
-					data: state.groups.data.filter(
-						(group: GroupOut) => group.id !== action.about.id
-					),
-				},
+				deletedGroup: action.about,
 			});
 		default:
 			return state;

frontend/src/reducers/metadata.ts

@@ -33,6 +33,7 @@ const defaultState: MetadataState = {
 	publicMetadataDefinitionList: [],
 	metadataDefinition: <MetadataDefinitionOut>{},
 	newMetadataDefinition: <MetadataDefinitionOut>{},
+	deletedMetadataDefinition: <MetadataDefinitionOut>{},
 };
 
 const metadata = (state = defaultState, action: DataAction) => {
@@ -55,13 +56,7 @@ const metadata = (state = defaultState, action: DataAction) => {
 			});
 		case DELETE_METADATA_DEFINITION:
 			return Object.assign({}, state, {
-				metadataDefinitionList: {
-					...state.metadataDefinitionList,
-					data: state.metadataDefinitionList.data.filter(
-						(metadataDefinition: MetadataDefinitionOut) =>
-							metadataDefinition.id !== action.metadataDefinition.id
-					),
-				},
+				deletedMetadataDefinition: action.metadataDefinition,
 			});
 		case SAVE_METADATA_DEFINITION:
 			return Object.assign({}, state, {

frontend/src/reducers/user.ts

@@ -23,6 +23,7 @@ const defaultState: UserState = {
 	errorMsg: "",
 	hashedKey: "",
 	apiKeys: <Paged>{ metadata: <PageMetadata>{}, data: <UserAPIKeyOut[]>[] },
+	deletedApiKey: <UserAPIKeyOut>{},
 	profile: <UserOut>{},
 };
 
@@ -63,12 +64,7 @@ const user = (state = defaultState, action: DataAction) => {
 			return Object.assign({}, state, { apiKeys: action.apiKeys });
 		case DELETE_API_KEY:
 			return Object.assign({}, state, {
-				apiKeys: {
-					...state.apiKeys,
-					data: state.apiKeys.data.filter(
-						(apiKey: UserAPIKeyOut) => apiKey.id !== action.apiKey.id
-					),
-				},
+				deletedApiKey: action.apiKey,
 			});
 		case GENERATE_API_KEY:
 			return Object.assign({}, state, { hashedKey: action.hashedKey });