Merge branch 'to-redux-toolkit-tableFilterProfiles' of Arnei/opencast…

…-admin-interface into admin-ui-picard

Pull request #303

  Modernize redux: tableFilterProfilesSlice

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
@@ -169,7 +164,7 @@ const TableFiltersProfiles = ({
 											/>
 											{/* Remove icon to remove profile */}
 											<button
-												onClick={() => removeFilterProfile(profile)}
+												onClick={() => dispatch(removeFilterProfile(profile))}
 												title={t("TABLE_FILTERS.PROFILES.REMOVE")}
 												className="button-like-anchor icon remove"
 											/>
@@ -257,24 +252,13 @@ 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
 // @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
 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(

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;

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;

app/src/store.ts

@@ -2,7 +2,7 @@ import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer } fro
 import storage from "redux-persist/lib/storage";
 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";