Merge branch 'filter-remains-on-page-reload' of Arnei/opencast-admin-interface into r/19.x

Pull request #1525
Fixes #1079
  Stop filter dropdown from popping up on page reload

Author: gregorydlogan

src/components/shared/TableFilters.tsx

@@ -3,17 +3,12 @@ import { useTranslation } from "react-i18next";
 import DatePicker from "react-datepicker";
 import {
 	getFilters,
-	getSecondFilter,
-	getSelectedFilter,
 	getTextFilter,
 } from "../../selectors/tableFilterSelectors";
 import {
 	FilterData,
 	editFilterValue,
-	editSelectedFilter,
 	editTextFilter,
-	removeSecondFilter,
-	removeSelectedFilter,
 	removeTextFilter,
 	resetFilterValues,
 } from "../../slices/tableFilterSlice";
@@ -52,8 +47,8 @@ const TableFilters = ({
 	const dispatch = useAppDispatch();
 
 	const filterMap = useAppSelector(state => getFilters(state, resource));
-	const secondFilter = useAppSelector(state => getSecondFilter(state));
-	const selectedFilter = useAppSelector(state => getSelectedFilter(state));
+	const [selectedFilter, setSelectedFilter] = useState("");
+	const [secondFilter, setSecondFilter] = useState("");
 	const textFilter = useAppSelector(state => getTextFilter(state, resource));
 
 	// Variables for showing different dialogs depending on what was clicked
@@ -76,8 +71,7 @@ const TableFilters = ({
 		setFilterSelector(false);
 
 		dispatch(removeTextFilter(resource));
-		dispatch(removeSelectedFilter());
-		dispatch(removeSelectedFilter());
+		setSelectedFilter("");
 
 		// Set all values of the filters in filterMap back to ""
 		dispatch(resetFilterValues());
@@ -119,7 +113,7 @@ const TableFilters = ({
 		}
 
 		if (name === "selectedFilter") {
-			dispatch(editSelectedFilter(value));
+			setSelectedFilter(value);
 			setOpenSecondFilterMenu(true);
 		}
 
@@ -130,8 +124,8 @@ const TableFilters = ({
 			if (filter) {
 				dispatch(editFilterValue({ filterName: filter.name, value: value, resource }));
 				setFilterSelector(false);
-				dispatch(removeSelectedFilter());
-				dispatch(removeSecondFilter());
+				setSelectedFilter("");
+				setSecondFilter("");
 				setOpenSecondFilterMenu(false);
 				mustApplyChanges = true;
 			}
@@ -211,7 +205,7 @@ const TableFilters = ({
 					resource,
 				}));
 				setFilterSelector(false);
-				dispatch(removeSelectedFilter());
+				setSelectedFilter("");
 				// Reload of resource after going to very first page.
 				dispatch(goToPage(0));
 				await dispatch(loadResource());

src/selectors/tableFilterSelectors.ts

@@ -9,8 +9,6 @@ import { Resource } from "../slices/tableSlice";
 export const getAllFilters = (state: RootState) => state.tableFilters.data;
 export const getStats = (state: RootState) => state.tableFilters.stats;
 export const getAllTextFilter = (state: RootState) => state.tableFilters.textFilter;
-export const getSelectedFilter = (state: RootState) => state.tableFilters.selectedFilter;
-export const getSecondFilter = (state: RootState) => state.tableFilters.secondFilter;
 export const getCurrentFilterResource = (state: RootState) => state.tableFilters.currentResource;
 export const getFilters = createSelector(
 	[getAllFilters, (_state, resource: Resource) => resource],

src/slices/tableFilterSlice.ts

@@ -50,8 +50,6 @@ type TableFilterState = {
 	data: FilterData[],
 	filterProfiles: FilterProfile[],
 	textFilter: TextFilter[],
-	selectedFilter: string,
-	secondFilter: string,
 	stats: Stats[],
 }
 
@@ -65,8 +63,6 @@ const initialState: TableFilterState = {
 	data: [],
 	filterProfiles: [],
 	textFilter: [],
-	selectedFilter: "",
-	secondFilter: "",
 	stats: [],
 };
 
@@ -362,24 +358,6 @@ const tableFilterSlice = createSlice({
 			const filterMap = action.payload;
 			state.data = filterMap;
 		},
-		editSelectedFilter(state, action: PayloadAction<
-			TableFilterState["selectedFilter"]
-		>) {
-			const filter = action.payload;
-			state.selectedFilter = filter;
-		},
-		removeSelectedFilter(state) {
-			state.selectedFilter = "";
-		},
-		editSecondFilter(state, action: PayloadAction<
-			TableFilterState["secondFilter"]
-		>) {
-			const filter = action.payload;
-			state.secondFilter = filter;
-		},
-		removeSecondFilter(state) {
-			state.secondFilter = "";
-		},
 		resetCorruptedState(state) {
 			// Reset corrupted localStorage state to initial values
 			if (!Array.isArray(state.data)) {
@@ -438,10 +416,6 @@ export const {
 	editTextFilter,
 	removeTextFilter,
 	loadFilterProfile,
-	editSelectedFilter,
-	removeSelectedFilter,
-	editSecondFilter,
-	removeSecondFilter,
 	resetCorruptedState,
 } = tableFilterSlice.actions;