Modernize redux: userSlice

app/src/components/shared/MainNav.tsx

@@ -16,7 +16,6 @@ import {
 } from "../../thunks/tableThunks";
 import { fetchEvents } from "../../slices/eventSlice";
 import { fetchRecordings } from "../../thunks/recordingThunks";
-import { fetchUsers } from "../../thunks/userThunks";
 import { fetchThemes } from "../../slices/themeSlice";
 import { fetchFilters, fetchStats } from "../../thunks/tableFilterThunks";
 import { setOffset } from "../../actions/tableActions";
@@ -28,6 +27,7 @@ import { GlobalHotKeys } from "react-hotkeys";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { fetchAcls } from "../../slices/aclSlice";
 import { useAppDispatch } from "../../store";
+import { fetchUsers } from "../../slices/userSlice";
 import { fetchServers } from "../../slices/serverSlice";
 import { fetchSeries } from "../../slices/seriesSlice";
 import { fetchJobs } from "../../slices/jobSlice";
@@ -56,8 +56,6 @@ const MainNav = ({
 	loadingServersIntoTable,
 // @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message
 	loadingServicesIntoTable,
-// @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 'loadingGroupsIntoTable' implicitl... Remove this comment to see the full error message
@@ -165,7 +163,7 @@ const MainNav = ({
 		resetOffset();
 
 		// Fetching users from server
-		loadingUsers();
+		dispatch(fetchUsers());
 
 		// Load users into table
 		loadingUsersIntoTable();
@@ -338,7 +336,6 @@ const mapDispatchToProps = (dispatch) => ({
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
-	loadingUsers: () => dispatch(fetchUsers()),
 	loadingUsersIntoTable: () => dispatch(loadUsersIntoTable()),
 	loadingGroupsIntoTable: () => dispatch(loadGroupsIntoTable()),
 	loadingAclsIntoTable: () => dispatch(loadAclsIntoTable()),

app/src/components/users/Acls.tsx

@@ -9,7 +9,6 @@ import Notifications from "../shared/Notifications";
 import NewResourceModal from "../shared/NewResourceModal";
 import { aclsTemplateMap } from "../../configs/tableConfigs/aclsTableMap";
 import { fetchFilters } from "../../thunks/tableFilterThunks";
-import { fetchUsers } from "../../thunks/userThunks";
 import {
 	loadAclsIntoTable,
 	loadGroupsIntoTable,
@@ -26,6 +25,7 @@ import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchAcls } from "../../slices/aclSlice";
+import { fetchUsers } from "../../slices/userSlice";
 import { fetchGroups } from "../../slices/groupSlice";
 
 /**
@@ -36,10 +36,10 @@ const Acls: React.FC = () => {
 	const [displayNavigation, setNavigation] = useState(false);
 	const [displayNewAclModal, setNewAclModal] = useState(false);
 
-        const dispatch = useAppDispatch();
-        const acls = useAppSelector(state => getTotalAcls(state));
+	const dispatch = useAppDispatch();
+	const acls = useAppSelector(state => getTotalAcls(state));
 	const user = useAppSelector(state => getUserInformation(state));
-        const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
+	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
 
 	const loadAcls = async () => {
 		// Fetching acls from server

app/src/components/users/Groups.tsx

@@ -11,7 +11,6 @@ import NewResourceModal from "../shared/NewResourceModal";
 import { getTotalGroups } from "../../selectors/groupSelectors";
 import { groupsTemplateMap } from "../../configs/tableConfigs/groupsTableMap";
 import { fetchFilters } from "../../thunks/tableFilterThunks";
-import { fetchUsers } from "../../thunks/userThunks";
 import {
 	loadAclsIntoTable,
 	loadGroupsIntoTable,
@@ -27,6 +26,7 @@ import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { fetchAcls } from "../../slices/aclSlice";
 import { useAppDispatch, useAppSelector } from "../../store";
+import { fetchUsers } from "../../slices/userSlice";
 import { fetchGroups } from "../../slices/groupSlice";
 
 /**
@@ -37,8 +37,6 @@ const Groups = ({
 	loadingGroupsIntoTable,
 // @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 'loadingAclsIntoTable' implicitly ... Remove this comment to see the full error message
@@ -77,7 +75,7 @@ const Groups = ({
 		resetOffset();
 
 		// Fetching users from server
-		loadingUsers();
+		dispatch(fetchUsers());
 
 		// Load users into table
 		loadingUsersIntoTable();
@@ -216,7 +214,6 @@ const mapDispatchToProps = (dispatch) => ({
 // @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
 	loadingGroupsIntoTable: () => dispatch(loadGroupsIntoTable()),
-	loadingUsers: () => dispatch(fetchUsers()),
 	loadingUsersIntoTable: () => dispatch(loadUsersIntoTable()),
 	loadingAclsIntoTable: () => dispatch(loadAclsIntoTable()),
 	resetTextFilter: () => dispatch(editTextFilter("")),

app/src/components/users/Users.tsx

@@ -2,15 +2,13 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import cn from "classnames";
-import { connect } from "react-redux";
 import MainNav from "../shared/MainNav";
 import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
 import Notifications from "../shared/Notifications";
 import NewResourceModal from "../shared/NewResourceModal";
 import { usersTemplateMap } from "../../configs/tableConfigs/usersTableMap";
 import { getTotalUsers } from "../../selectors/userSelectors";
-import { fetchUsers } from "../../thunks/userThunks";
 import {
 	loadAclsIntoTable,
 	loadGroupsIntoTable,
@@ -26,75 +24,64 @@ import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { fetchAcls } from "../../slices/aclSlice";
-import { useAppDispatch } from "../../store";
+import { useAppDispatch, useAppSelector } from "../../store";
+import { fetchUsers } from "../../slices/userSlice";
 import { fetchGroups } from "../../slices/groupSlice";
 
 /**
  * This component renders the table view of users
  */
-const Users = ({
-// @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 'users' implicitly has an 'any' ty... Remove this comment to see the full error message
-	users,
-// @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 'loadingGroupsIntoTable' implicitl... Remove this comment to see the full error message
-	loadingGroupsIntoTable,
-// @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
-	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 Users: React.FC = () => {
 	const { t } = useTranslation();
-        const dispatch = useAppDispatch();
+	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
 	const [displayNewUserModal, setNewUserModal] = useState(false);
 
+  const users = useAppSelector(state => getTotalUsers(state));
+  const user = useAppSelector(state => getUserInformation(state));
+  const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
+
+	// TODO: Get rid of the wrappers when modernizing redux is done
+	const fetchUsersWrapper = () => {
+		dispatch(fetchUsers())
+	}
+
 	const loadUsers = async () => {
 		// Fetching users from server
-		await loadingUsers();
+		await 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
 		dispatch(fetchGroups());
 
 		// Load groups into table
-		loadingGroupsIntoTable();
+		dispatch(loadGroupsIntoTable());
 	};
 
 	const loadAcls = () => {
 		// Reset the current page to first page
-		resetOffset();
+		dispatch(setOffset(0));
 
 		// Fetching acls from server
 		dispatch(fetchAcls());
 
 		// Load acls into table
-		loadingAclsIntoTable();
+		dispatch(loadAclsIntoTable());
 	};
 
 	useEffect(() => {
 		if ("users" !== currentFilterType) {
-			loadingFilters("users");
+			dispatch(fetchFilters("users"));
 		}
 
-		resetTextFilter();
+		dispatch(editTextFilter(""));
 
 		// Load users on mount
 		loadUsers().then((r) => console.info(r));
@@ -183,8 +170,8 @@ const Users = ({
 				<div className="controls-container">
 					{/* Include filters component */}
 					<TableFilters
-						loadResource={loadingUsers}
-						loadResourceIntoTable={loadingUsersIntoTable}
+						loadResource={fetchUsersWrapper}
+						loadResourceIntoTable={loadUsersIntoTable}
 						resource={"users"}
 					/>
 					<h1>{t("USERS.USERS.TABLE.CAPTION")}</h1>
@@ -198,25 +185,4 @@ const Users = ({
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-	users: getTotalUsers(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)),
-	loadingUsers: () => dispatch(fetchUsers()),
-	loadingUsersIntoTable: () => dispatch(loadUsersIntoTable()),
-	loadingGroupsIntoTable: () => dispatch(loadGroupsIntoTable()),
-	loadingAclsIntoTable: () => dispatch(loadAclsIntoTable()),
-	resetTextFilter: () => dispatch(editTextFilter("")),
-	resetOffset: () => dispatch(setOffset(0)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Users);
+export default Users;

app/src/components/users/partials/UsersActionsCell.tsx

@@ -2,10 +2,10 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import ConfirmModal from "../../shared/ConfirmModal";
-import { deleteUser } from "../../../thunks/userThunks";
 import UserDetailsModal from "./modal/UserDetailsModal";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
+import { deleteUser } from "../../../slices/userSlice";
 import { useAppDispatch } from "../../../store";
 import { fetchUserDetails } from "../../../slices/userDetailsSlice";
 
@@ -14,7 +14,6 @@ import { fetchUserDetails } from "../../../slices/userDetailsSlice";
  */
 const UsersActionCell = ({
     row,
-    deleteUser,
     user
 }: any) => {
 	const { t } = useTranslation();
@@ -29,7 +28,7 @@ const UsersActionCell = ({
 
 // @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type.
 	const deletingUser = (id) => {
-		deleteUser(id);
+		dispatch(deleteUser(id));
 	};
 
 	const showUserDetails = async () => {
@@ -92,8 +91,6 @@ const mapStateToProps = (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 'id' implicitly has an 'any' type.
-	deleteUser: (id) => dispatch(deleteUser(id)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(UsersActionCell);

app/src/components/users/partials/wizard/GroupUsersPage.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import SelectContainer from "../../../shared/wizard/SelectContainer";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
-import { fetchUsersAndUsernames } from "../../../../thunks/userThunks";
+import { fetchUsersAndUsernames } from "../../../../slices/userSlice";
 
 /**
  * This component renders the user selection page of the new group wizard and group details wizard

app/src/components/users/partials/wizard/NewUserWizard.tsx

@@ -7,18 +7,19 @@ import NewUserGeneralTab from "./NewUserGeneralTab";
 import UserRolesTab from "./UserRolesTab";
 import { initialFormValuesNewUser } from "../../../../configs/modalConfig";
 import { getUsernames } from "../../../../selectors/userSelectors";
-import { postNewUser } from "../../../../thunks/userThunks";
 import { NewUserSchema } from "../../../../utils/validate";
+import { postNewUser } from "../../../../slices/userSlice";
+import { useAppDispatch } from "../../../../store";
 
 /**
  * This component renders the new user wizard
  */
 const NewUserWizard = ({
     close,
     usernames,
-    postNewUser
 }: any) => {
 	const { t } = useTranslation();
+  const dispatch = useAppDispatch();
 
 	const navStyle = {
 		left: "0px",
@@ -35,7 +36,7 @@ const NewUserWizard = ({
 
 // @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type.
 	const handleSubmit = (values) => {
-		const response = postNewUser(values);
+		const response = dispatch(postNewUser(values));
 		console.info(response);
 		close();
 	};
@@ -111,8 +112,6 @@ const mapStateToProps = (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 'values' implicitly has an 'any' type.
-	postNewUser: (values) => dispatch(postNewUser(values)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(NewUserWizard);