Stop filter dropdown from popping up on page reload

If you had selected a filter, but no value for that filter yet,
the dropdown for selected the value would keep popping up
on page reload. This could confuse users.

This fixes that by moving the relevant state from redux
into the component.

Author: Arnei

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;