Fixing that the selection may change if events are modified in the background

src/components/shared/Table.tsx

@@ -8,7 +8,8 @@ import {
 	getTablePages,
 	getTablePagination,
 	getTableSorting,
-	getTableStatus,
+	// getTableStatus,
+	getTable,
 } from "../../selectors/tableSelectors";
 import {
 	Row,
@@ -76,6 +77,7 @@ const Table = ({
 		editTableViewModalRef.current?.close?.();
 	};
 
+
 	return (
 		<>
 			<Notifications context="above_table" />
@@ -135,12 +137,23 @@ const MultiSelect = ({ selectAllCheckboxRef }: { selectAllCheckboxRef: React.Ref
 	const dispatch = useAppDispatch();
 
 	const multiSelect = useAppSelector(state => getMultiSelect(state));
+	const table = useAppSelector(state => getTable(state));
+
+	const isNewEventAdded = table.flags?.events?.isNewEventAdded;
 
 	// Select or deselect all rows on a page
 	const onChangeAllSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const selected = e.target.checked;
 		dispatch(changeAllSelected(selected));
 	};
+   	useEffect(() => {
+  	if (isNewEventAdded && multiSelect) {
+   	 if (selectAllCheckboxRef.current?.checked) {
+		selectAllCheckboxRef.current.checked = false;
+			}
+		  }
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [isNewEventAdded, multiSelect]);
 
 	return (
 		<>
@@ -218,7 +231,7 @@ const TableBody = ({ templateMap }: { templateMap: TemplateMap }) => {
 
 	const columnCount = useAppSelector(state => getTableColumns(state).length);
 	const rowCount = useAppSelector(rowsSelectors.selectTotal);
-	const status = useAppSelector(state => getTableStatus(state));
+	// const status = useAppSelector(state => getTableStatus(state));
 
 	return (
 		<>

src/slices/tableSlice.ts

@@ -104,6 +104,7 @@ export type TableState = {
 	rows: EntityState<Row, string>,
 	maxLabel: string,
 	pagination: Pagination,
+	flags?: { [key in Resource]?: { isNewEventAdded?: boolean } };
 }
 
 const rowsAdapter = createEntityAdapter<Row>();
@@ -179,6 +180,7 @@ const initialState: TableState = {
 		totalItems: 0,
 		directAccessibleNo: 3,
 	},
+    flags: {},
 };
 
 const tableSlice = createSlice({
@@ -194,6 +196,7 @@ const tableSlice = createSlice({
 			sortBy: TableState["sortBy"][Resource],
 			reverse: TableState["reverse"][Resource],
 			totalItems: TableState["pagination"]["totalItems"],
+			flags?: { isNewEventAdded?: boolean },
 		}>) {
 			state.multiSelect[action.payload.resource] = action.payload.multiSelect;
 			state.columns = action.payload.columns;
@@ -205,6 +208,18 @@ const tableSlice = createSlice({
 				...state.pagination,
 				totalItems: action.payload.totalItems,
 			};
+			if (action.payload.flags) {
+			  // Ensure state.flags exists
+			  state.flags ??= {};
+			  const resource = action.payload.resource;
+			  // Ensure flags object for this resource exists
+			  state.flags[resource] ??= {};
+			  // Merge the new flags
+			  state.flags[resource] = {
+			    ...state.flags[resource],
+			    ...action.payload.flags,
+			  };
+			}
 
 			// Entity Adapter preparations
 			const rows: Row[] = [];

src/thunks/tableThunks.ts

@@ -45,6 +45,7 @@ export const loadEventsIntoTable = (): AppThunk => (dispatch, getState) => {
 	const { events, table } = getState();
 	const total = events.total;
 	const pagination = table.pagination;
+	let isNewEventAdded = false;
 	// check which events are currently selected
 	const resource = events.results.map(result => {
 		const current = table.rows.entities[result.id];
@@ -55,6 +56,7 @@ export const loadEventsIntoTable = (): AppThunk => (dispatch, getState) => {
 				selected: current.selected,
 			};
 		} else {
+			isNewEventAdded = true;
 			return {
 				...result,
 				selected: false,
@@ -73,8 +75,11 @@ export const loadEventsIntoTable = (): AppThunk => (dispatch, getState) => {
 		sortBy: table.sortBy["events"],
 		reverse: table.reverse["events"],
 		totalItems: total,
+		isNewEventAdded: isNewEventAdded,
+		flags: {
+    	isNewEventAdded,
+  		},
 	};
-
 	dispatch(loadResourceIntoTable(tableData));
 };