Filtering from events cells in pages other than first page now works!

src/components/events/partials/EventsDateCell.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { editFilterValue } from "../../../slices/tableFilterSlice";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
@@ -8,6 +8,9 @@ import { fetchEvents } from "../../../slices/eventSlice";
 import { renderValidDate } from "../../../utils/dateUtils";
 import { Event } from "../../../slices/eventSlice";
 import { IconButton } from "../../shared/IconButton";
+import {
+	goToPage,
+} from "../../../thunks/tableThunks";
 
 /**
  * This component renders the start date cells of events in the table view
@@ -17,13 +20,16 @@ const EventsDateCell = ({
 }: {
 	row: Event
 }) => {
+	// Using itemValue with useState in order to use as flag in useEffect as watcher!
+	const [itemValue, setItemValue] = useState('');
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	const filterMap = useAppSelector(state => getFilters(state, "events"));
 
 	// Filter with value of current cell
 	const addFilter = async (date: string) => {
+		let mustApplyChanges = false;
 		let filter = filterMap.find(({ name }) => name === "startDate");
 		if (!!filter) {
 			let startDate = new Date(date);
@@ -36,11 +42,32 @@ const EventsDateCell = ({
 			endDate.setSeconds(59);
 
 			await dispatch(editFilterValue({filterName: filter.name, value: startDate.toISOString() + "/" + endDate.toISOString()}));
-			await dispatch(fetchEvents());
-			dispatch(loadEventsIntoTable());
+			mustApplyChanges = true;
 		}
+		if (mustApplyChanges) {
+			setItemValue(date);
+		}
+	};
+
+	const applyFilterChangesDebounced = async () => {
+		// No matter what, we go to page one.
+		dispatch(goToPage(0))
+		// Reload of resource
+		await dispatch(fetchEvents());
+		dispatch(loadEventsIntoTable());
+		setItemValue('');
 	};
 
+	useEffect(() => {
+		if (itemValue) {
+			// Call to apply filter changes with 500MS debounce!
+			let applyFilterChangesDebouncedTimeoutId = setTimeout(applyFilterChangesDebounced, 500);
+
+			return () => clearTimeout(applyFilterChangesDebouncedTimeoutId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [itemValue]);
+
 	return (
 		// Link template for start date of event
 		<IconButton

src/components/events/partials/EventsLocationCell.tsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { getFilters } from "../../../selectors/tableFilterSelectors";
 import { editFilterValue } from "../../../slices/tableFilterSlice";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
 import { Event } from "../../../slices/eventSlice";
 import { IconButton } from "../../shared/IconButton";
+import {
+	goToPage,
+} from "../../../thunks/tableThunks";
 
 /**
  * This component renders the location cells of events in the table view
@@ -15,20 +18,44 @@ const EventsLocationCell = ({
 }: {
 	row: Event
 }) => {
+	// Using itemValue with useState in order to use as flag in useEffect as watcher!
+	const [itemValue, setItemValue] = useState('');
 	const dispatch = useAppDispatch();
 
 	const filterMap = useAppSelector(state => getFilters(state, "events"));
 
 	// Filter with value of current cell
-	const addFilter = (location: string) => {
+	const addFilter = async (location: string) => {
+		let mustApplyChanges = false;
 		let filter = filterMap.find(({ name }) => name === "location");
 		if (!!filter) {
-			dispatch(editFilterValue({filterName: filter.name, value: location}));
-			dispatch(fetchEvents());
-			dispatch(loadEventsIntoTable());
+			await dispatch(editFilterValue({filterName: filter.name, value: location}));
+			mustApplyChanges = true;
 		}
+		if (mustApplyChanges) {
+			setItemValue(location);
+		}
+	};
+
+	const applyFilterChangesDebounced = async () => {
+		// No matter what, we go to page one.
+		dispatch(goToPage(0))
+		// Reload of resource
+		await dispatch(fetchEvents());
+		dispatch(loadEventsIntoTable());
+		setItemValue('');
 	};
 
+	useEffect(() => {
+		if (itemValue) {
+			// Call to apply filter changes with 500MS debounce!
+			let applyFilterChangesDebouncedTimeoutId = setTimeout(applyFilterChangesDebounced, 500);
+
+			return () => clearTimeout(applyFilterChangesDebouncedTimeoutId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [itemValue]);
+
 	return (
 		// Link template for location of event
 		<IconButton

src/components/events/partials/EventsPresentersCell.tsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { getFilters } from "../../../selectors/tableFilterSelectors";
 import { editFilterValue } from "../../../slices/tableFilterSlice";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
 import { Event } from "../../../slices/eventSlice";
 import { IconButton } from "../../shared/IconButton";
+import {
+	goToPage,
+} from "../../../thunks/tableThunks";
 
 /**
  * This component renders the presenters cells of events in the table view
@@ -15,22 +18,46 @@ const EventsPresentersCell = ({
 }: {
 	row: Event
 }) => {
+	// Using itemValue with useState in order to use as flag in useEffect as watcher!
+	const [itemValue, setItemValue] = useState('');
 	const dispatch = useAppDispatch();
 
 	const filterMap = useAppSelector(state => getFilters(state, "events"));
 
 	// Filter with value of current cell
 	const addFilter = async (presenter: string) => {
+		let mustApplyChanges = false;
 		let filter = filterMap.find(
 			({ name }) => name === "presentersBibliographic"
 		);
 		if (!!filter) {
 			await dispatch(editFilterValue({filterName: filter.name, value: presenter}));
-			await dispatch(fetchEvents());
-			dispatch(loadEventsIntoTable());
+			mustApplyChanges = true;
 		}
+		if (mustApplyChanges) {
+			setItemValue(presenter);
+		}
+	};
+
+	const applyFilterChangesDebounced = async () => {
+		// No matter what, we go to page one.
+		dispatch(goToPage(0))
+		// Reload of resource
+		await dispatch(fetchEvents());
+		dispatch(loadEventsIntoTable());
+		setItemValue('');
 	};
 
+	useEffect(() => {
+		if (itemValue) {
+			// Call to apply filter changes with 500MS debounce!
+			let applyFilterChangesDebouncedTimeoutId = setTimeout(applyFilterChangesDebounced, 500);
+
+			return () => clearTimeout(applyFilterChangesDebouncedTimeoutId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [itemValue]);
+
 	return (
 		// Link template for presenter of event
 		// Repeat for each presenter

src/components/events/partials/EventsSeriesCell.tsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { getFilters } from "../../../selectors/tableFilterSelectors";
 import { editFilterValue } from "../../../slices/tableFilterSlice";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
 import { Event } from "../../../slices/eventSlice";
 import { IconButton } from "../../shared/IconButton";
+import {
+	goToPage,
+} from "../../../thunks/tableThunks";
 
 /**
  * This component renders the series cells of events in the table view
@@ -15,20 +18,44 @@ const EventsSeriesCell = ({
 }: {
 	row: Event
 }) => {
+	// Using itemValue with useState in order to use as flag in useEffect as watcher!
+	const [itemValue, setItemValue] = useState('');
 	const dispatch = useAppDispatch();
 
 	const filterMap = useAppSelector(state => getFilters(state, "events"));
 
 	// Filter with value of current cell
 	const addFilter = async (seriesId: string) => {
+		let mustApplyChanges = false;
 		let filter = filterMap.find(({ name }) => name === "series");
 		if (!!filter) {
 			await dispatch(editFilterValue({filterName: filter.name, value: seriesId}));
-			await dispatch(fetchEvents());
-			dispatch(loadEventsIntoTable());
+			mustApplyChanges = true;
 		}
+		if (mustApplyChanges) {
+			setItemValue(seriesId);
+		}
+	};
+
+	const applyFilterChangesDebounced = async () => {
+		// No matter what, we go to page one.
+		dispatch(goToPage(0))
+		// Reload of resource
+		await dispatch(fetchEvents());
+		dispatch(loadEventsIntoTable());
+		setItemValue('');
 	};
 
+	useEffect(() => {
+		if (itemValue) {
+			// Call to apply filter changes with 500MS debounce!
+			let applyFilterChangesDebouncedTimeoutId = setTimeout(applyFilterChangesDebounced, 500);
+
+			return () => clearTimeout(applyFilterChangesDebouncedTimeoutId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [itemValue]);
+
 	return (
 		!!row.series ? (
 			// Link template for series of event

src/components/events/partials/EventsTechnicalDateCell.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { getFilters } from "../../../selectors/tableFilterSelectors";
 import { editFilterValue } from "../../../slices/tableFilterSlice";
@@ -8,6 +8,9 @@ import { fetchEvents } from "../../../slices/eventSlice";
 import { renderValidDate } from "../../../utils/dateUtils";
 import { Event } from "../../../slices/eventSlice";
 import { IconButton } from "../../shared/IconButton";
+import {
+	goToPage,
+} from "../../../thunks/tableThunks";
 
 /**
  * This component renders the technical date cells of events in the table view
@@ -17,21 +20,45 @@ const EventsTechnicalDateCell = ({
 }: {
 	row: Event
 }) => {
+	// Using itemValue with useState in order to use as flag in useEffect as watcher!
+	const [itemValue, setItemValue] = useState('');
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	const filterMap = useAppSelector(state => getFilters(state, "events"));
 
 	// Filter with value of current cell
 	const addFilter = async (date: string) => {
+		let mustApplyChanges = false;
 		let filter = filterMap.find(({ name }) => name === "technicalStart");
 		if (!!filter) {
 			await dispatch(editFilterValue({filterName: filter.name, value: date + "/" + date}));
-			await dispatch(fetchEvents());
-			dispatch(loadEventsIntoTable());
+			mustApplyChanges = true;
 		}
+		if (mustApplyChanges) {
+			setItemValue(date);
+		}
+	};
+
+	const applyFilterChangesDebounced = async () => {
+		// No matter what, we go to page one.
+		dispatch(goToPage(0))
+		// Reload of resource
+		await dispatch(fetchEvents());
+		dispatch(loadEventsIntoTable());
+		setItemValue('');
 	};
 
+	useEffect(() => {
+		if (itemValue) {
+			// Call to apply filter changes with 500MS debounce!
+			let applyFilterChangesDebouncedTimeoutId = setTimeout(applyFilterChangesDebounced, 500);
+
+			return () => clearTimeout(applyFilterChangesDebouncedTimeoutId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [itemValue]);
+
 	return (
 		// Link template for technical date of event
 		<IconButton