Fix server side checked items getter and fix useRequest when paginati…

…on is a dependency

Change-type: patch
Signed-off-by: Andrea Rosci <andrear@balena.io>

src/components/Table/TableBase.tsx

@@ -360,15 +360,22 @@ export class TableBase<T extends {}> extends React.Component<
 	);
 
 	private getSelectedRows = (selectedRows: T[]) => {
-		const { rowKey, data } = this.props;
-
-		const selectedKeys = this.$getSelectedIdentifiersSet(selectedRows, rowKey);
-		const checkedItems = this.$getValidatedCheckedItems(
-			data,
-			selectedKeys,
-			rowKey,
-			selectedRows,
-		);
+		const { rowKey, data, pagination } = this.props;
+		let checkedItems;
+		if (!pagination?.serverSide) {
+			const selectedKeys = this.$getSelectedIdentifiersSet(
+				selectedRows,
+				rowKey,
+			);
+			checkedItems = this.$getValidatedCheckedItems(
+				data,
+				selectedKeys,
+				rowKey,
+				selectedRows,
+			);
+		} else {
+			checkedItems = selectedRows;
+		}
 		const checkedState = this.howManyRowsChecked(checkedItems);
 
 		return { checkedItems, checkedState };

src/hooks/useRequest.tsx

@@ -35,7 +35,9 @@ export const useRequest = <
 	TResult extends ResolvableReturnType<TFn>,
 >(
 	action: TFn,
-	deps: React.DependencyList,
+	deps:
+		| React.DependencyList
+		| Partial<Record<'persist' | 'reset', React.DependencyList>>,
 	options: UseRequestOptions,
 ) => {
 	const { polling, pollInterval, stopExecution } = options;
@@ -44,6 +46,11 @@ export const useRequest = <
 	const [data, setData] = React.useState<TResult>();
 	const [isVisible, setIsVisible] = React.useState(true);
 	const pollRef = React.useRef<Poll>();
+	// Array.isArray does not let TS infer properly for readonly arrays
+	const loadDataDeps =
+		'persist' in deps || 'reset' in deps
+			? [...(deps.persist ?? []), ...(deps.reset ?? [])]
+			: (deps as React.DependencyList);
 
 	React.useEffect(() => {
 		const handleVisibilityChange = () => setIsVisible(!document.hidden);
@@ -66,7 +73,7 @@ export const useRequest = <
 		} finally {
 			setLoading(false);
 		}
-	}, deps);
+	}, loadDataDeps);
 
 	const forcePoll = React.useCallback<ForcePoll>(() => {
 		setLoading(true);
@@ -103,8 +110,17 @@ export const useRequest = <
 			return;
 		}
 		setData(undefined);
+	}, [
+		...('reset' in deps ? deps.reset ?? [] : (deps as React.DependencyList)),
+		polling,
+	]);
+
+	React.useEffect(() => {
+		if (!polling) {
+			return;
+		}
 		forcePoll();
-	}, [...deps, polling]);
+	}, loadDataDeps);
 
 	const result = [data, loading, error, forcePoll] as UseRequestResult<TResult>;
 	result.data = data;