From 6aa23b07cd71b5b80ae78f62c91b8f9d2563c5b3 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Wed, 6 Mar 2024 11:37:04 +0100
Subject: [PATCH] Modernize redux: tableFilterProfilesSlice

Helps with #213.

Switching to redux toolkit for handling table filter
profiles (you can save your table filters into
various profiles).
---
 app/src/actions/tableFilterProfilesActions.ts | 32 --------
 .../components/shared/TableFilterProfiles.tsx | 44 ++++-------
 .../reducers/tableFilterProfilesReducer.ts    | 60 ---------------
 .../selectors/tableFilterProfilesSelectors.ts |  3 +-
 app/src/slices/tableFilterProfilesSlice.ts    | 76 +++++++++++++++++++
 app/src/store.ts                              |  2 +-
 6 files changed, 93 insertions(+), 124 deletions(-)
 delete mode 100644 app/src/actions/tableFilterProfilesActions.ts
 delete mode 100644 app/src/reducers/tableFilterProfilesReducer.ts
 create mode 100644 app/src/slices/tableFilterProfilesSlice.ts

diff --git a/app/src/actions/tableFilterProfilesActions.ts b/app/src/actions/tableFilterProfilesActions.ts
deleted file mode 100644
index bd47558861..0000000000
--- a/app/src/actions/tableFilterProfilesActions.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * This file contains all redux actions that can be executed on table filter profiles
- */
-
-// Constants of action types concerning filter profile
-export const CREATE_FILTER_PROFILE = "CREATE_FILTER_PROFILE";
-export const EDIT_FILTER_PROFILE = "EDIT_FILTER_PROFILE";
-export const REMOVE_FILTER_PROFILE = "REMOVE_FILTER_PROFILE";
-export const CANCEL_EDITING_FILTER_PROFILE = "CANCEL_EDITING_FILTER_PROFILE";
-
-// Actions affecting filter profiles
-
-export const createFilterProfile = (filterProfile: any) => ({
-    type: CREATE_FILTER_PROFILE,
-    payload: { filterProfile }
-});
-
-// @ts-expect-error TS(7006): Parameter 'filterProfile' implicitly has an 'any' ... Remove this comment to see the full error message
-export const editFilterProfile = (filterProfile) => ({
-	type: EDIT_FILTER_PROFILE,
-	payload: { filterProfile },
-});
-
-// @ts-expect-error TS(7006): Parameter 'filterProfile' implicitly has an 'any' ... Remove this comment to see the full error message
-export const removeFilterProfile = (filterProfile) => ({
-	type: REMOVE_FILTER_PROFILE,
-	payload: { filterProfile },
-});
-
-export const cancelEditFilterProfile = () => ({
-	type: CANCEL_EDITING_FILTER_PROFILE,
-});
diff --git a/app/src/components/shared/TableFilterProfiles.tsx b/app/src/components/shared/TableFilterProfiles.tsx
index 3e76ddeded..069b1737a3 100644
--- a/app/src/components/shared/TableFilterProfiles.tsx
+++ b/app/src/components/shared/TableFilterProfiles.tsx
@@ -8,9 +8,10 @@ import {
 	createFilterProfile,
 	editFilterProfile,
 	removeFilterProfile,
-} from "../../actions/tableFilterProfilesActions";
+} from "../../slices/tableFilterProfilesSlice";
 import { getFilters } from "../../selectors/tableFilterSelectors";
 import { loadFilterProfile } from "../../actions/tableFilterActions";
+import { useAppDispatch, useAppSelector } from "../../store";
 
 /**
  * This component renders the table filter profiles in the upper right corner when clicked on settings icon of the
@@ -21,16 +22,8 @@ const TableFiltersProfiles = ({
 	showFilterSettings,
 // @ts-expect-error TS(7031): Binding element 'setFilterSettings' implicitly has... Remove this comment to see the full error message
 	setFilterSettings,
-// @ts-expect-error TS(7031): Binding element 'createFilterProfile' implicitly h... Remove this comment to see the full error message
-	createFilterProfile,
 // @ts-expect-error TS(7031): Binding element 'filterMap' implicitly has an 'any... Remove this comment to see the full error message
 	filterMap,
-// @ts-expect-error TS(7031): Binding element 'cancelEditFilterProfile' implicit... Remove this comment to see the full error message
-	cancelEditFilterProfile,
-// @ts-expect-error TS(7031): Binding element 'profiles' implicitly has an 'any'... Remove this comment to see the full error message
-	profiles,
-// @ts-expect-error TS(7031): Binding element 'removeFilterProfile' implicitly h... Remove this comment to see the full error message
-	removeFilterProfile,
 // @ts-expect-error TS(7031): Binding element 'loadFilterProfile' implicitly has... Remove this comment to see the full error message
 	loadFilterProfile,
 // @ts-expect-error TS(7031): Binding element 'loadResource' implicitly has an '... Remove this comment to see the full error message
@@ -40,6 +33,10 @@ const TableFiltersProfiles = ({
 // @ts-expect-error TS(7031): Binding element 'resource' implicitly has an 'any'... Remove this comment to see the full error message
 	resource,
 }) => {
+	const dispatch = useAppDispatch();
+
+	const profiles = useAppSelector(state => getFilterProfiles(state));
+
 	// State for switching between list of profiles and saving/editing dialog
 	const [settingsMode, setSettingsMode] = useState(true);
 
@@ -52,7 +49,6 @@ const TableFiltersProfiles = ({
 	const { t } = useTranslation();
 
 	const currentProfiles = profiles.filter(
-// @ts-expect-error TS(7006): Parameter 'profile' implicitly has an 'any' type.
 		(profile) => profile.resource === resource
 	);
 
@@ -65,7 +61,7 @@ const TableFiltersProfiles = ({
 				filterMap: filterMap,
 				resource: resource,
 			};
-			createFilterProfile(filterProfile);
+			dispatch(createFilterProfile(filterProfile));
 		}
 		setSettingsMode(!settingsMode);
 		resetStateValues();
@@ -77,15 +73,16 @@ const TableFiltersProfiles = ({
 		setCurrentlyEditing(profile);
 		setProfileName(profile.name);
 		setProfileDescription(profile.description);
-		removeFilterProfile(profile);
+		dispatch(removeFilterProfile(profile));
 		setValidName(true);
 	};
 
 	const cancelEditProfile = () => {
-		if (currentlyEditing !== "") {
-			createFilterProfile(currentlyEditing);
-		}
-		cancelEditFilterProfile();
+		// What was this achieving?
+		// if (currentlyEditing !== "") {
+		// 	dispatch(createFilterProfile(currentlyEditing));
+		// }
+		dispatch(cancelEditFilterProfile());
 		setSettingsMode(!settingsMode);
 		setFilterSettings(!showFilterSettings);
 		resetStateValues();
@@ -105,7 +102,6 @@ const TableFiltersProfiles = ({
 
 		if (itemName === "name") {
 			const isDuplicated = profiles.some(
-// @ts-expect-error TS(7006): Parameter 'profile' implicitly has an 'any' type.
 				(profile) => profile.name === itemValue
 			);
 			if (!isDuplicated) {
@@ -151,7 +147,6 @@ const TableFiltersProfiles = ({
 									<li>{t("TABLE_FILTERS.PROFILES.EMPTY")}</li>
 								) : (
 									// repeat for each profile in profiles filtered for currently shown resource (else-case)
-// @ts-expect-error TS(7006): Parameter 'profile' implicitly has an 'any' type.
 									currentProfiles.map((profile, key) => (
 										<li key={key}>
 											<button
@@ -170,7 +165,7 @@ const TableFiltersProfiles = ({
 											/>
 											{/* Remove icon to remove profile */}
 											<button
-												onClick={() => removeFilterProfile(profile)}
+												onClick={() => dispatch(removeFilterProfile(profile))}
 // @ts-expect-error TS(2322): Type 'DefaultTFuncReturn' is not assignable to typ... Remove this comment to see the full error message
 												title={t("TABLE_FILTERS.PROFILES.REMOVE")}
 												className="button-like-anchor icon remove"
@@ -261,7 +256,6 @@ const TableFiltersProfiles = ({
 // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
 const mapStateToProps = (state) => ({
 	filterMap: getFilters(state),
-	profiles: getFilterProfiles(state),
 });
 
 // Mapping actions to dispatch
@@ -269,16 +263,6 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
 // @ts-expect-error TS(7006): Parameter 'filterMap' implicitly has an 'any' type... Remove this comment to see the full error message
 	loadFilterProfile: (filterMap) => dispatch(loadFilterProfile(filterMap)),
-// @ts-expect-error TS(7006): Parameter 'filterProfile' implicitly has an 'any' ... Remove this comment to see the full error message
-	createFilterProfile: (filterProfile) =>
-		dispatch(createFilterProfile(filterProfile)),
-// @ts-expect-error TS(7006): Parameter 'filterProfile' implicitly has an 'any' ... Remove this comment to see the full error message
-	editFilterProfile: (filterProfile) =>
-		dispatch(editFilterProfile(filterProfile)),
-// @ts-expect-error TS(7006): Parameter 'filterProfile' implicitly has an 'any' ... Remove this comment to see the full error message
-	removeFilterProfile: (filterProfile) =>
-		dispatch(removeFilterProfile(filterProfile)),
-	cancelEditFilterProfile: () => dispatch(cancelEditFilterProfile()),
 });
 
 export default connect(
diff --git a/app/src/reducers/tableFilterProfilesReducer.ts b/app/src/reducers/tableFilterProfilesReducer.ts
deleted file mode 100644
index 618e966fdd..0000000000
--- a/app/src/reducers/tableFilterProfilesReducer.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-	CANCEL_EDITING_FILTER_PROFILE,
-	CREATE_FILTER_PROFILE,
-	EDIT_FILTER_PROFILE,
-	REMOVE_FILTER_PROFILE,
-} from "../actions/tableFilterProfilesActions";
-
-/**
- * This file contains redux reducer for actions affecting the state of table filter profiles
- */
-
-// Initial state of filter profiles in redux store
-const initialState = {
-	profiles: [],
-};
-
-// Reducer for filter profiles
-// @ts-expect-error TS(7006): Parameter 'action' implicitly has an 'any' type.
-const tableFilterProfiles = (state = initialState, action) => {
-	const { type, payload } = action;
-	switch (type) {
-		case CREATE_FILTER_PROFILE: {
-			const { filterProfile } = payload;
-			return {
-				...state,
-				profiles: state.profiles.concat(filterProfile),
-			};
-		}
-		case EDIT_FILTER_PROFILE: {
-			const { filterProfile: updatedFilterProfile } = payload;
-			return {
-				...state,
-				profiles: state.profiles.map((filterProfile) => {
-// @ts-expect-error TS(2339): Property 'name' does not exist on type 'never'.
-					if (filterProfile.name === updatedFilterProfile.name) {
-						return updatedFilterProfile;
-					}
-					return filterProfile;
-				}),
-			};
-		}
-		case REMOVE_FILTER_PROFILE: {
-			const { filterProfile: filterProfileToRemove } = payload;
-			return {
-				...state,
-				profiles: state.profiles.filter(
-// @ts-expect-error TS(2339): Property 'name' does not exist on type 'never'.
-					(filterProfile) => filterProfile.name !== filterProfileToRemove.name
-				),
-			};
-		}
-		case CANCEL_EDITING_FILTER_PROFILE: {
-			return state;
-		}
-		default:
-			return state;
-	}
-};
-
-export default tableFilterProfiles;
diff --git a/app/src/selectors/tableFilterProfilesSelectors.ts b/app/src/selectors/tableFilterProfilesSelectors.ts
index 8896702a55..131c9aaea4 100644
--- a/app/src/selectors/tableFilterProfilesSelectors.ts
+++ b/app/src/selectors/tableFilterProfilesSelectors.ts
@@ -1,5 +1,6 @@
+import { RootState } from "../store";
 /**
  * This file contains selectors regarding filter profiles
  */
 
-export const getFilterProfiles = (state: any) => state.tableFilterProfiles.profiles;
+export const getFilterProfiles = (state: RootState) => state.tableFilterProfiles.profiles;
diff --git a/app/src/slices/tableFilterProfilesSlice.ts b/app/src/slices/tableFilterProfilesSlice.ts
new file mode 100644
index 0000000000..8868068530
--- /dev/null
+++ b/app/src/slices/tableFilterProfilesSlice.ts
@@ -0,0 +1,76 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+
+/**
+ * This file contains redux reducer for actions affecting the state of table filter profiles
+ */
+
+type FilterProfile = {
+	name: string,
+	description: string,
+	resource: string,
+	filterMap: {
+		label: string,
+		name: string
+		options: {
+			label: string,
+			value: string,
+		}[],
+		translatable: false,
+		type: string,
+		value: string,
+	}[]
+}
+
+type TableFilterProfilesState = {
+	profiles: FilterProfile[]
+}
+
+// Initial state of filter profiles in redux store
+const initialState: TableFilterProfilesState = {
+	profiles: []
+};
+
+const tableFilterProfileSlice = createSlice({
+	name: 'tableFilterProfiles',
+	initialState,
+	reducers: {
+		createFilterProfile(state, action: PayloadAction<
+			FilterProfile
+		>) {
+			const filterProfile = action.payload;
+			state.profiles = state.profiles.concat(filterProfile)
+		},
+		editFilterProfile(state, action: PayloadAction<
+			FilterProfile
+		>) {
+			const updatedFilterProfile = action.payload;
+			state.profiles = state.profiles.map((filterProfile) => {
+				if (filterProfile.name === updatedFilterProfile.name) {
+					return updatedFilterProfile;
+				}
+				return filterProfile;
+			})
+		},
+		removeFilterProfile(state, action: PayloadAction<
+			FilterProfile
+		>) {
+			const filterProfileToRemove = action.payload;
+			state.profiles = state.profiles.filter(
+									(filterProfile) => filterProfile.name !== filterProfileToRemove.name
+								)
+		},
+		cancelEditFilterProfile(state) {
+			return
+		}
+	},
+});
+
+export const {
+	createFilterProfile,
+	editFilterProfile,
+	removeFilterProfile,
+	cancelEditFilterProfile,
+} = tableFilterProfileSlice.actions;
+
+// Export the slice reducer as the default export
+export default tableFilterProfileSlice.reducer;
diff --git a/app/src/store.ts b/app/src/store.ts
index fffb89bf1b..3b8dbc5120 100644
--- a/app/src/store.ts
+++ b/app/src/store.ts
@@ -4,7 +4,7 @@ import storage from "redux-persist/lib/storage";
 import autoMergeLevel2 from "redux-persist/lib";
 import { combineReducers } from "redux";
 import tableFilters from "./reducers/tableFilterReducers";
-import tableFilterProfiles from "./reducers/tableFilterProfilesReducer";
+import tableFilterProfiles from "./slices/tableFilterProfilesSlice";
 import events from "./slices/eventSlice";
 import table from "./reducers/tableReducers";
 import series from "./slices/seriesSlice";