Modernize redux

app/package.json

@@ -8,6 +8,7 @@
     "@edorivai/react-smooth-dnd": "^0.11.2",
     "@material-ui/core": "^4.12.4",
     "@material-ui/pickers": "^3.3.10",
+    "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@types/react-router-dom": "^5.3.3",

app/src/components/shared/MainNav.tsx

@@ -27,9 +27,10 @@ import { fetchSeries } from "../../thunks/seriesThunks";
 import { fetchServers } from "../../thunks/serverThunks";
 import { fetchServices } from "../../thunks/serviceThunks";
 import { fetchGroups } from "../../thunks/groupThunks";
-import { fetchAcls } from "../../thunks/aclThunks";
 import { GlobalHotKeys } from "react-hotkeys";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { fetchAcls } from "../../slices/aclSlice";
+import { useAppDispatch } from "../../store";
 
 /**
  * This component renders the main navigation that opens when the burger button is clicked
@@ -73,8 +74,6 @@ const MainNav = ({
 	loadingGroups,
 // @ts-expect-error TS(7031): Binding element 'loadingGroupsIntoTable' implicitl... Remove this comment to see the full error message
 	loadingGroupsIntoTable,
-// @ts-expect-error TS(7031): Binding element 'loadingAcls' implicitly has an 'a... Remove this comment to see the full error message
-	loadingAcls,
 // @ts-expect-error TS(7031): Binding element 'loadingAclsIntoTable' implicitly ... Remove this comment to see the full error message
 	loadingAclsIntoTable,
 // @ts-expect-error TS(7031): Binding element 'loadingThemes' implicitly has an ... Remove this comment to see the full error message
@@ -89,6 +88,7 @@ const MainNav = ({
 	loadingFilters,
 }) => {
 	const { t } = useTranslation();
+        const dispatch = useAppDispatch();
 	let navigate = useNavigate();
 
 	const loadEvents = () => {
@@ -205,7 +205,7 @@ const MainNav = ({
 		resetOffset();
 
 		// Fetching acls from server
-		loadingAcls();
+        dispatch(fetchAcls());
 
 		// Load acls into table
 		loadingAclsIntoTable();
@@ -361,7 +361,6 @@ const mapDispatchToProps = (dispatch) => ({
 	loadingUsersIntoTable: () => dispatch(loadUsersIntoTable()),
 	loadingGroups: () => dispatch(fetchGroups()),
 	loadingGroupsIntoTable: () => dispatch(loadGroupsIntoTable()),
-	loadingAcls: () => dispatch(fetchAcls()),
 	loadingAclsIntoTable: () => dispatch(loadAclsIntoTable()),
 	loadingThemes: () => dispatch(fetchThemes()),
 	loadingThemesIntoTable: () => dispatch(loadThemesIntoTable()),

app/src/components/users/Acls.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
 import { useTranslation } from "react-i18next";
 import MainNav from "../shared/MainNav";
 import { Link } from "react-router-dom";
@@ -17,7 +16,6 @@ import {
 	loadUsersIntoTable,
 } from "../../thunks/tableThunks";
 import { fetchGroups } from "../../thunks/groupThunks";
-import { fetchAcls } from "../../thunks/aclThunks";
 import { getTotalAcls } from "../../selectors/aclSelectors";
 import { editTextFilter } from "../../actions/tableFilterActions";
 import { setOffset } from "../../actions/tableActions";
@@ -27,81 +25,63 @@ import Footer from "../Footer";
 import { hasAccess } from "../../utils/utils";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
+import { useAppDispatch, useAppSelector } from "../../store";
+import { fetchAcls } from "../../slices/aclSlice";
 
 /**
  * This component renders the table view of acls
  */
-const Acls = ({
-// @ts-expect-error TS(7031): Binding element 'loadingAcls' implicitly has an 'a... Remove this comment to see the full error message
-	loadingAcls,
-// @ts-expect-error TS(7031): Binding element 'loadingAclsIntoTable' implicitly ... Remove this comment to see the full error message
-	loadingAclsIntoTable,
-// @ts-expect-error TS(7031): Binding element 'acls' implicitly has an 'any' typ... Remove this comment to see the full error message
-	acls,
-// @ts-expect-error TS(7031): Binding element 'loadingFilters' implicitly has an... Remove this comment to see the full error message
-	loadingFilters,
-// @ts-expect-error TS(7031): Binding element 'loadingUsers' implicitly has an '... Remove this comment to see the full error message
-	loadingUsers,
-// @ts-expect-error TS(7031): Binding element 'loadingUsersIntoTable' implicitly... Remove this comment to see the full error message
-	loadingUsersIntoTable,
-// @ts-expect-error TS(7031): Binding element 'loadingGroups' implicitly has an ... Remove this comment to see the full error message
-	loadingGroups,
-// @ts-expect-error TS(7031): Binding element 'loadingGroupsIntoTable' implicitl... Remove this comment to see the full error message
-	loadingGroupsIntoTable,
-// @ts-expect-error TS(7031): Binding element 'resetTextFilter' implicitly has a... Remove this comment to see the full error message
-	resetTextFilter,
-// @ts-expect-error TS(7031): Binding element 'resetOffset' implicitly has an 'a... Remove this comment to see the full error message
-	resetOffset,
-// @ts-expect-error TS(7031): Binding element 'user' implicitly has an 'any' typ... Remove this comment to see the full error message
-	user,
-// @ts-expect-error TS(7031): Binding element 'currentFilterType' implicitly has... Remove this comment to see the full error message
-	currentFilterType,
-}) => {
+const Acls: React.FC = () => {
 	const { t } = useTranslation();
 	const [displayNavigation, setNavigation] = useState(false);
 	const [displayNewAclModal, setNewAclModal] = useState(false);
 
+        const dispatch = useAppDispatch();
+        const acls = useAppSelector(state => getTotalAcls(state));
+	const user = useAppSelector(state => getUserInformation(state));
+        const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
+
 	const loadAcls = async () => {
 		// Fetching acls from server
-		await loadingAcls();
+		await dispatch(fetchAcls());
 
 		// Load acls into table
-		loadingAclsIntoTable();
+		dispatch(loadAclsIntoTable());
 	};
 
 	const loadUsers = () => {
 		// Reset the current page to first page
-		resetOffset();
+		dispatch(setOffset(0));
 
 		// Fetching users from server
-		loadingUsers();
+		dispatch(fetchUsers());
 
 		// Load users into table
-		loadingUsersIntoTable();
+		dispatch(loadUsersIntoTable());
 	};
 
 	const loadGroups = () => {
 		// Reset the current page to first page
-		resetOffset();
+		dispatch(setOffset(0));
 
 		// Fetching groups from server
-		loadingGroups();
+		dispatch(fetchGroups());
 
 		// Load groups into table
-		loadingGroupsIntoTable();
+		dispatch(loadGroupsIntoTable());
 	};
 
 	useEffect(() => {
 		if ("acls" !== currentFilterType) {
-			loadingFilters("acls");
+			dispatch(fetchFilters("acls"));
 		}
 
-		resetTextFilter();
+		dispatch(editTextFilter(""));
 
 		// Load acls on mount
 		loadAcls().then((r) => console.info(r));
 
-		// Fetch ACLs every minute
+		// Fetch Acls every minute
 		let fetchAclInterval = setInterval(loadAcls, 5000);
 
 		return () => clearInterval(fetchAclInterval);
@@ -185,8 +165,8 @@ const Acls = ({
 				<div className="controls-container">
 					{/* Include filters component */}
 					<TableFilters
-						loadResource={loadingAcls}
-						loadResourceIntoTable={loadingAclsIntoTable}
+						loadResource={() => dispatch(fetchAcls())}
+						loadResourceIntoTable={() => dispatch(loadAclsIntoTable())}
 						resource={"acls"}
 					/>
 					<h1>{t("USERS.ACLS.TABLE.CAPTION")}</h1>
@@ -200,27 +180,4 @@ const Acls = ({
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-	acls: getTotalAcls(state),
-	user: getUserInformation(state),
-	currentFilterType: getCurrentFilterResource(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 'resource' implicitly has an 'any' type.
-	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
-	loadingAcls: () => dispatch(fetchAcls()),
-	loadingAclsIntoTable: () => dispatch(loadAclsIntoTable()),
-	loadingUsers: () => dispatch(fetchUsers()),
-	loadingUsersIntoTable: () => dispatch(loadUsersIntoTable()),
-	loadingGroups: () => dispatch(fetchGroups()),
-	loadingGroupsIntoTable: () => dispatch(loadGroupsIntoTable()),
-	resetTextFilter: () => dispatch(editTextFilter("")),
-	resetOffset: () => dispatch(setOffset(0)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Acls);
+export default Acls;

app/src/components/users/Groups.tsx

@@ -18,7 +18,6 @@ import {
 	loadUsersIntoTable,
 } from "../../thunks/tableThunks";
 import { fetchGroups } from "../../thunks/groupThunks";
-import { fetchAcls } from "../../thunks/aclThunks";
 import { editTextFilter } from "../../actions/tableFilterActions";
 import { setOffset } from "../../actions/tableActions";
 import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
@@ -27,6 +26,8 @@ import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
+import { fetchAcls } from "../../slices/aclSlice";
+import { useAppDispatch } from "../../store";
 
 /**
  * This component renders the table view of groups
@@ -44,8 +45,6 @@ const Groups = ({
 	loadingUsers,
 // @ts-expect-error TS(7031): Binding element 'loadingUsersIntoTable' implicitly... Remove this comment to see the full error message
 	loadingUsersIntoTable,
-// @ts-expect-error TS(7031): Binding element 'loadingAcls' implicitly has an 'a... Remove this comment to see the full error message
-	loadingAcls,
 // @ts-expect-error TS(7031): Binding element 'loadingAclsIntoTable' implicitly ... Remove this comment to see the full error message
 	loadingAclsIntoTable,
 // @ts-expect-error TS(7031): Binding element 'resetTextFilter' implicitly has a... Remove this comment to see the full error message
@@ -58,6 +57,7 @@ const Groups = ({
 	currentFilterType,
 }) => {
 	const { t } = useTranslation();
+        const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
 	const [displayNewGroupModal, setNewGroupModal] = useState(false);
 
@@ -85,7 +85,7 @@ const Groups = ({
 		resetOffset();
 
 		// Fetching acls from server
-		loadingAcls();
+		dispatch(fetchAcls());
 
 		// Load acls into table
 		loadingAclsIntoTable();
@@ -217,7 +217,6 @@ const mapDispatchToProps = (dispatch) => ({
 	loadingGroupsIntoTable: () => dispatch(loadGroupsIntoTable()),
 	loadingUsers: () => dispatch(fetchUsers()),
 	loadingUsersIntoTable: () => dispatch(loadUsersIntoTable()),
-	loadingAcls: () => dispatch(fetchAcls()),
 	loadingAclsIntoTable: () => dispatch(loadAclsIntoTable()),
 	resetTextFilter: () => dispatch(editTextFilter("")),
 	resetOffset: () => dispatch(setOffset(0)),