Merge branch 'to-redux-toolkit-job' of Arnei/opencast-admin-interface…

… into admin-ui-picard Pull request #255 Modernize redux: jobSlice
opencast · Feb 16, 2024 · 2e41bec · 2e41bec
2 parents 45121d9 + 18d19ae
commit 2e41bec
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 163 deletions.
diff --git a/app/src/actions/jobActions.ts b/app/src/actions/jobActions.ts
diff --git a/app/src/components/shared/MainNav.tsx b/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 { fetchJobs } from "../../thunks/jobThunks";
 import { fetchUsers } from "../../thunks/userThunks";
 import { fetchThemes } from "../../thunks/themeThunks";
 import { fetchFilters, fetchStats } from "../../thunks/tableFilterThunks";
@@ -31,6 +30,7 @@ import { GlobalHotKeys } from "react-hotkeys";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { fetchAcls } from "../../slices/aclSlice";
 import { useAppDispatch } from "../../store";
+import { fetchJobs } from "../../slices/jobSlice";
 
 /**
  * This component renders the main navigation that opens when the burger button is clicked
@@ -52,8 +52,6 @@ const MainNav = ({
 	loadingRecordings,
 // @ts-expect-error TS(7031): Binding element 'loadingRecordingsIntoTable' impli... Remove this comment to see the full error message
 	loadingRecordingsIntoTable,
-// @ts-expect-error TS(7031): Binding element 'loadingJobs' implicitly has an 'a... Remove this comment to see the full error message
-	loadingJobs,
 // @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
@@ -138,7 +136,7 @@ const MainNav = ({
 		resetOffset();
 
 		// Fetching jobs from server
-		loadingJobs();
+		dispatch(fetchJobs());
 
 		// Load jobs into table
 		loadingJobsIntoTable();
@@ -348,7 +346,6 @@ const mapDispatchToProps = (dispatch) => ({
 // @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
 	loadingRecordings: () => dispatch(fetchRecordings()),
 	loadingRecordingsIntoTable: () => dispatch(loadRecordingsIntoTable()),
-	loadingJobs: () => dispatch(fetchJobs()),
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
 	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),

diff --git a/app/src/components/systems/Jobs.tsx b/app/src/components/systems/Jobs.tsx
@@ -10,7 +10,6 @@ import Notifications from "../shared/Notifications";
 import { jobsTemplateMap } from "../../configs/tableConfigs/jobsTableConfig";
 import { getTotalJobs } from "../../selectors/jobSelectors";
 import { fetchFilters } from "../../thunks/tableFilterThunks";
-import { fetchJobs } from "../../thunks/jobThunks";
 import {
 	loadJobsIntoTable,
 	loadServersIntoTable,
@@ -26,17 +25,15 @@ import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
+import { useAppDispatch, useAppSelector } from "../../store";
+import { fetchJobs } from "../../slices/jobSlice";
 
 /**
  * This component renders the table view of jobs
  */
 const Jobs = ({
-// @ts-expect-error TS(7031): Binding element 'loadingJobs' implicitly has an 'a... Remove this comment to see the full error message
-	loadingJobs,
 // @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 'jobs' implicitly has an 'any' typ... Remove this comment to see the full error message
-	jobs,
 // @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
@@ -57,11 +54,19 @@ const Jobs = ({
 	currentFilterType,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
 
+	const jobs = useAppSelector(state => getTotalJobs(state));
+
+	// TODO: Get rid of the wrappers when modernizing redux is done
+	const fetchJobsWrapper = () => {
+		dispatch(fetchJobs())
+	}
+
 	const loadJobs = async () => {
 		// Fetching jobs from server
-		await loadingJobs();
+		await dispatch(fetchJobs());
 
 		// Load jobs into table
 		loadingJobsIntoTable();
@@ -158,7 +163,7 @@ const Jobs = ({
 				<div className="controls-container">
 					{/* Include filters component */}
 					<TableFilters
-						loadResource={loadingJobs}
+						loadResource={fetchJobsWrapper}
 						loadResourceIntoTable={loadingJobsIntoTable}
 						resource={"jobs"}
 					/>
@@ -176,7 +181,6 @@ const Jobs = ({
 // Getting state data out of redux store
 // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
 const mapStateToProps = (state) => ({
-	jobs: getTotalJobs(state),
 	user: getUserInformation(state),
 	currentFilterType: getCurrentFilterResource(state),
 });
@@ -186,7 +190,6 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
 // @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
-	loadingJobs: () => dispatch(fetchJobs()),
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
 	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),

diff --git a/app/src/components/systems/Servers.tsx b/app/src/components/systems/Servers.tsx
@@ -16,7 +16,6 @@ import {
 	loadServersIntoTable,
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchJobs } from "../../thunks/jobThunks";
 import { fetchServices } from "../../thunks/serviceThunks";
 import { editTextFilter } from "../../actions/tableFilterActions";
 import { setOffset } from "../../actions/tableActions";
@@ -26,6 +25,8 @@ import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
+import { useAppDispatch } from "../../store";
+import { fetchJobs } from "../../slices/jobSlice";
 
 /**
  * This component renders the table view of servers
@@ -39,8 +40,6 @@ const Servers = ({
 	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 'loadingJobs' implicitly has an 'a... Remove this comment to see the full error message
-	loadingJobs,
 // @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 'loadingServices' implicitly has a... Remove this comment to see the full error message
@@ -57,6 +56,7 @@ const Servers = ({
 	currentFilterType,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
 
 	const loadServers = async () => {
@@ -72,7 +72,7 @@ const Servers = ({
 		resetOffset();
 
 		// Fetching jobs from server
-		loadingJobs();
+		dispatch(fetchJobs());
 
 		// Load jobs into table
 		loadingJobsIntoTable();
@@ -188,7 +188,6 @@ const mapDispatchToProps = (dispatch) => ({
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
 	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),
-	loadingJobs: () => dispatch(fetchJobs()),
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
 	loadingServices: () => dispatch(fetchServices()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),

diff --git a/app/src/components/systems/Services.tsx b/app/src/components/systems/Services.tsx
@@ -9,7 +9,6 @@ import MainNav from "../shared/MainNav";
 import Notifications from "../shared/Notifications";
 import { servicesTemplateMap } from "../../configs/tableConfigs/servicesTableConfig";
 import { fetchFilters } from "../../thunks/tableFilterThunks";
-import { fetchJobs } from "../../thunks/jobThunks";
 import {
 	loadJobsIntoTable,
 	loadServersIntoTable,
@@ -26,6 +25,8 @@ import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
+import { useAppDispatch } from "../../store";
+import { fetchJobs } from "../../slices/jobSlice";
 
 /**
  * This component renders the table view of services
@@ -39,8 +40,6 @@ const Services = ({
 	services,
 // @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 'loadingJobs' implicitly has an 'a... Remove this comment to see the full error message
-	loadingJobs,
 // @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
@@ -57,6 +56,7 @@ const Services = ({
 	currentFilterType,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
 
 	const loadServices = async () => {
@@ -72,7 +72,7 @@ const Services = ({
 		resetOffset();
 
 		// Fetching jobs from server
-		loadingJobs();
+		dispatch(fetchJobs());
 
 		// Load jobs into table
 		loadingJobsIntoTable();
@@ -188,7 +188,6 @@ const mapDispatchToProps = (dispatch) => ({
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
 	loadingServices: () => dispatch(fetchServices()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
-	loadingJobs: () => dispatch(fetchJobs()),
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
 	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),

diff --git a/app/src/reducers/jobReducer.ts b/app/src/reducers/jobReducer.ts
diff --git a/app/src/selectors/jobSelectors.ts b/app/src/selectors/jobSelectors.ts
@@ -1,6 +1,7 @@
+import { RootState } from "../store";
+
 /**
  * This file contains selectors regarding jobs
  */
-
-export const getJobs = (state: any) => state.jobs.results;
-export const getTotalJobs = (state: any) => state.jobs.total;
+export const getJobs = (state: RootState) => state.jobs.results;
+export const getTotalJobs = (state: RootState) => state.jobs.total;