Validate and reset corrupted table filter states

src/App.tsx

@@ -16,9 +16,13 @@ import About from "./components/About";
 import { useAppDispatch } from "./store";
 import { fetchOcVersion, fetchUserInfo } from "./slices/userInfoSlice";
 import { subscribeToAuthEvents } from "./utils/broadcastSync";
+import { useTableFilterStateValidation } from "./hooks/useTableFilterStateValidation";
 
 function App() {
 	const dispatch = useAppDispatch();
+
+	useTableFilterStateValidation();
+
 	useEffect(() => {
 		// Load information about current user on mount
 		dispatch(fetchUserInfo());
@@ -33,7 +37,7 @@ function App() {
 			dispatch(fetchUserInfo());
 		});
 
-	// eslint-disable-next-line react-hooks/exhaustive-deps
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	return (

src/hooks/useTableFilterStateValidation.ts

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../store";
+import { resetCorruptedState } from "../slices/tableFilterSlice";
+
+/**
+ * Custom hook to validate and fix corrupted table filter state in localStorage.
+ * This hook should be used in components that rely on table filter state to ensure
+ * the state is valid before using it.
+ */
+export const useTableFilterStateValidation = () => {
+	const dispatch = useAppDispatch();
+	const tableFilters = useAppSelector(state => state.tableFilters);
+
+	useEffect(() => {
+		// Check for corrupted state and dispatch reset action if needed
+		const hasCorruption =
+			!Array.isArray(tableFilters.data) ||
+			!Array.isArray(tableFilters.textFilter) ||
+			!Array.isArray(tableFilters.stats);
+
+		if (hasCorruption) {
+			console.warn("Detected corrupted table filter state, resetting to defaults");
+			dispatch(resetCorruptedState());
+		}
+	}, [dispatch, tableFilters.data, tableFilters.textFilter, tableFilters.stats]);
+};

src/slices/tableFilterSlice.ts

@@ -132,7 +132,7 @@ export const fetchStats = createAppAsyncThunk("tableFilters/fetchStats", async (
 		}[],
 		description: string,
 		order: number,
-}
+	}
 	// fetch information about possible status an event can have
 	const data = await axios.get<FetchStats>("/admin-ng/resources/STATS.json");
 	const response = data.data;
@@ -380,6 +380,21 @@ const tableFilterSlice = createSlice({
 		removeSecondFilter(state) {
 			state.secondFilter = "";
 		},
+		resetCorruptedState(state) {
+			// Reset corrupted localStorage state to initial values
+			if (!Array.isArray(state.data)) {
+				console.warn("Resetting corrupted tableFilters.data to empty array");
+				state.data = [];
+			}
+			if (!Array.isArray(state.textFilter)) {
+				console.warn("Resetting corrupted tableFilters.textFilter to empty array");
+				state.textFilter = [];
+			}
+			if (!Array.isArray(state.stats)) {
+				console.warn("Resetting corrupted tableFilters.stats to empty array");
+				state.stats = [];
+			}
+		},
 	},
 	extraReducers: builder => {
 		builder
@@ -427,6 +442,7 @@ export const {
 	removeSelectedFilter,
 	editSecondFilter,
 	removeSecondFilter,
+	resetCorruptedState,
 } = tableFilterSlice.actions;
 
 // Export the slice reducer as the default export