Modernize redux: serverSlice

app/src/components/shared/MainNav.tsx

@@ -22,13 +22,13 @@ import { fetchFilters, fetchStats } from "../../thunks/tableFilterThunks";
 import { setOffset } from "../../actions/tableActions";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
-import { fetchServers } from "../../thunks/serverThunks";
 import { fetchServices } from "../../slices/serviceSlice";
 import { fetchGroups } from "../../slices/groupSlice";
 import { GlobalHotKeys } from "react-hotkeys";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { fetchAcls } from "../../slices/aclSlice";
 import { useAppDispatch } from "../../store";
+import { fetchServers } from "../../slices/serverSlice";
 import { fetchSeries } from "../../slices/seriesSlice";
 import { fetchJobs } from "../../slices/jobSlice";
 
@@ -52,8 +52,6 @@ const MainNav = ({
 	loadingRecordingsIntoTable,
 // @ts-expect-error TS(7031): Binding element 'loadingJobsIntoTable' implicitly ... Remove this comment to see the full error message
 	loadingJobsIntoTable,
-// @ts-expect-error TS(7031): Binding element 'loadingServers' implicitly has an... Remove this comment to see the full error message
-	loadingServers,
 // @ts-expect-error TS(7031): Binding element 'loadingServersIntoTable' implicit... Remove this comment to see the full error message
 	loadingServersIntoTable,
 // @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message
@@ -141,7 +139,7 @@ const MainNav = ({
 		resetOffset();
 
 		// Fetching servers from server
-		loadingServers();
+		dispatch(fetchServers());
 
 		// Load servers into table
 		loadingServersIntoTable();
@@ -338,7 +336,6 @@ const mapDispatchToProps = (dispatch) => ({
 	loadingRecordings: () => dispatch(fetchRecordings()),
 	loadingRecordingsIntoTable: () => dispatch(loadRecordingsIntoTable()),
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
-	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
 	loadingUsers: () => dispatch(fetchUsers()),

app/src/components/systems/Jobs.tsx

@@ -15,7 +15,6 @@ import {
 	loadServersIntoTable,
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchServers } from "../../thunks/serverThunks";
 import { editTextFilter } from "../../actions/tableFilterActions";
 import { setOffset } from "../../actions/tableActions";
 import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
@@ -26,6 +25,7 @@ import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchJobs } from "../../slices/jobSlice";
+import { fetchServers } from "../../slices/serverSlice";
 import { fetchServices } from "../../slices/serviceSlice";
 
 /**
@@ -36,8 +36,6 @@ const Jobs = ({
 	loadingJobsIntoTable,
 // @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 'loadingServers' implicitly has an... Remove this comment to see the full error message
-	loadingServers,
 // @ts-expect-error TS(7031): Binding element 'loadingServersIntoTable' implicit... Remove this comment to see the full error message
 	loadingServersIntoTable,
 // @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message
@@ -75,7 +73,7 @@ const Jobs = ({
 		resetOffset();
 
 		// Fetching servers from server
-		loadingServers();
+		dispatch(fetchServers());
 
 		// Load servers into table
 		loadingServersIntoTable();
@@ -189,7 +187,6 @@ const mapDispatchToProps = (dispatch) => ({
 // @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
-	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
 	resetTextFilter: () => dispatch(editTextFilter("")),

app/src/components/systems/Servers.tsx

@@ -7,10 +7,9 @@ import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
 import { connect } from "react-redux";
 import Notifications from "../shared/Notifications";
-import { serversTemplateMap } from "../../configs/tableConfigs/serversTableConfig";
+import { serversTemplateMap } from "../../configs/tableConfigs/serversTableMap";
 import { getTotalServers } from "../../selectors/serverSelectors";
 import { fetchFilters } from "../../thunks/tableFilterThunks";
-import { fetchServers } from "../../thunks/serverThunks";
 import {
 	loadJobsIntoTable,
 	loadServersIntoTable,
@@ -24,20 +23,17 @@ import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
-import { useAppDispatch } from "../../store";
+import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchServices } from "../../slices/serviceSlice";
 import { fetchJobs } from "../../slices/jobSlice";
+import { fetchServers } from "../../slices/serverSlice";
 
 /**
  * This component renders the table view of servers
  */
 const Servers = ({
-// @ts-expect-error TS(7031): Binding element 'loadingServers' implicitly has an... Remove this comment to see the full error message
-	loadingServers,
 // @ts-expect-error TS(7031): Binding element 'loadingServersIntoTable' implicit... Remove this comment to see the full error message
 	loadingServersIntoTable,
-// @ts-expect-error TS(7031): Binding element 'servers' implicitly has an 'any' ... Remove this comment to see the full error message
-	servers,
 // @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 'loadingJobsIntoTable' implicitly ... Remove this comment to see the full error message
@@ -57,9 +53,16 @@ const Servers = ({
 	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
 
+	const servers = useAppSelector(state => getTotalServers(state));
+
+	// TODO: Get rid of the wrappers when modernizing redux is done
+	const fetchServersWrapper = () => {
+		dispatch(fetchServers())
+	}
+
 	const loadServers = async () => {
 		// Fetching servers from server
-		await loadingServers();
+		await dispatch(fetchServers());
 
 		// Load servers into table
 		loadingServersIntoTable();
@@ -156,7 +159,7 @@ const Servers = ({
 				<div className="controls-container">
 					{/* Include filters component */}
 					<TableFilters
-						loadResource={loadingServers}
+						loadResource={fetchServersWrapper}
 						loadResourceIntoTable={loadingServersIntoTable}
 						resource={"servers"}
 					/>
@@ -174,7 +177,6 @@ const Servers = ({
 // Getting state data out of redux store
 // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
 const mapStateToProps = (state) => ({
-	servers: getTotalServers(state),
 	user: getUserInformation(state),
 	currentFilterType: getCurrentFilterResource(state),
 });
@@ -184,7 +186,6 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
 // @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
-	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),

app/src/components/systems/Services.tsx

@@ -14,7 +14,6 @@ import {
 	loadServersIntoTable,
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchServers } from "../../thunks/serverThunks";
 import { getTotalServices } from "../../selectors/serviceSelector";
 import { editTextFilter } from "../../actions/tableFilterActions";
 import { setOffset } from "../../actions/tableActions";
@@ -25,6 +24,7 @@ import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch, useAppSelector } from "../../store";
+import { fetchServers } from "../../slices/serverSlice";
 import { fetchJobs } from "../../slices/jobSlice";
 import { fetchServices } from "../../slices/serviceSlice";
 
@@ -38,8 +38,6 @@ const Services = ({
 	loadingFilters,
 // @ts-expect-error TS(7031): Binding element 'loadingJobsIntoTable' implicitly ... Remove this comment to see the full error message
 	loadingJobsIntoTable,
-// @ts-expect-error TS(7031): Binding element 'loadingServers' implicitly has an... Remove this comment to see the full error message
-	loadingServers,
 // @ts-expect-error TS(7031): Binding element 'loadingServersIntoTable' implicit... Remove this comment to see the full error message
 	loadingServersIntoTable,
 // @ts-expect-error TS(7031): Binding element 'resetTextFilter' implicitly has a... Remove this comment to see the full error message
@@ -86,7 +84,7 @@ const Services = ({
 		resetOffset();
 
 		// Fetching servers from server
-		loadingServers();
+		dispatch(fetchServers());
 
 		// Load servers into table
 		loadingServersIntoTable();

app/src/components/systems/partials/ServersMaintenanceCell.tsx

@@ -1,30 +1,31 @@
 import React from "react";
 import { connect } from "react-redux";
-import {
-	fetchServers,
-	setServerMaintenance,
-} from "../../../thunks/serverThunks";
 import { loadServersIntoTable } from "../../../thunks/tableThunks";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
+import { useAppDispatch } from "../../../store";
+import {
+	fetchServers,
+	setServerMaintenance,
+} from "../../../slices/serverSlice";
 
 /**
  * This component renders the maintenance cells of servers in the table view
  */
 const ServersMaintenanceCell = ({
 // @ts-expect-error TS(7031): Binding element 'row' implicitly has an 'any' type... Remove this comment to see the full error message
 	row,
-// @ts-expect-error TS(7031): Binding element 'loadServers' implicitly has an 'a... Remove this comment to see the full error message
-	loadServers,
 // @ts-expect-error TS(7031): Binding element 'loadServersIntoTable' implicitly ... Remove this comment to see the full error message
 	loadServersIntoTable,
 // @ts-expect-error TS(7031): Binding element 'user' implicitly has an 'any' typ... Remove this comment to see the full error message
 	user,
 }) => {
+	const dispatch = useAppDispatch();
+
 // @ts-expect-error TS(7006): Parameter 'e' implicitly has an 'any' type.
 	const onClickCheckbox = async (e) => {
-		await setServerMaintenance(row.hostname, e.target.checked);
-		await loadServers();
+		await dispatch(setServerMaintenance({host: row.hostname, maintenance: e.target.checked}));
+		await dispatch(fetchServers());
 		loadServersIntoTable();
 	};
 
@@ -51,7 +52,6 @@ const mapStateToProps = (state) => ({
 // mapping actions to dispatch
 // @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
 const mapDispatchToProps = (dispatch) => ({
-	loadServers: () => dispatch(fetchServers()),
 	loadServersIntoTable: () => dispatch(loadServersIntoTable()),
 });
 

app/src/configs/tableConfigs/serversTableConfig.ts

@@ -1,6 +1,3 @@
-import ServersStatusCell from "../../components/systems/partials/ServersStatusCell";
-import ServersMaintenanceCell from "../../components/systems/partials/ServersMaintenanceCell";
-
 /**
  * Config that contains the columns and further information regarding servers. These are the information that never or hardly changes.
  * That's why it is hard coded here and not fetched from server.
@@ -61,13 +58,3 @@ export const serversTableConfig = {
 	category: "systems",
 	multiSelect: false,
 };
-
-/**
- * This map contains the mapping between the template strings above and the corresponding react component.
- * This helps to render different templates of cells more dynamically. Even empty needed, because Table component
- * uses template map.
- */
-export const serversTemplateMap = {
-	ServersStatusCell: ServersStatusCell,
-	ServersMaintenanceCell: ServersMaintenanceCell,
-};

app/src/configs/tableConfigs/serversTableMap.ts

@@ -0,0 +1,12 @@
+import ServersStatusCell from "../../components/systems/partials/ServersStatusCell";
+import ServersMaintenanceCell from "../../components/systems/partials/ServersMaintenanceCell";
+
+/**
+ * This map contains the mapping between the template strings above and the corresponding react component.
+ * This helps to render different templates of cells more dynamically. Even empty needed, because Table component
+ * uses template map.
+ */
+export const serversTemplateMap = {
+	ServersStatusCell: ServersStatusCell,
+	ServersMaintenanceCell: ServersMaintenanceCell,
+};

app/src/selectors/serverSelectors.ts

@@ -1,6 +1,7 @@
+import { RootState } from "../store";
+
 /**
  * This file contains selectors regarding servers
  */
-
-export const getServers = (state: any) => state.servers.results;
-export const getTotalServers = (state: any) => state.servers.total;
+export const getServers = (state: RootState) => state.servers.results;
+export const getTotalServers = (state: RootState) => state.servers.total;