Modernize redux: workflowSlice

app/src/components/events/Events.tsx

@@ -100,7 +100,7 @@ const Events = ({
 		loadingStats();
 
 		// Fetching events from server
-		// await dispatch(fetchEvents());
+		await dispatch(fetchEvents());
 
 		// Load events into table
 		loadingEventsIntoTable();

app/src/components/events/partials/ModalTabsAndPages/NewProcessingPage.tsx

@@ -1,33 +1,33 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { connect } from "react-redux";
-import { fetchWorkflowDef } from "../../../../thunks/workflowThunks";
 import { getWorkflowDef } from "../../../../selectors/workflowSelectors";
 import RenderWorkflowConfig from "../wizards/RenderWorkflowConfig";
 import { setDefaultConfig } from "../../../../utils/workflowPanelUtils";
 import DropDown from "../../../shared/DropDown";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { fetchWorkflowDef } from "../../../../slices/workflowSlice";
 
 /**
  * This component renders the processing page for new events in the new event wizard.
  */
-const NewProcessingPage = ({
-// @ts-expect-error TS(7031): Binding element 'previousPage' implicitly has an '... Remove this comment to see the full error message
+const NewProcessingPage: React.FC<{
+	previousPage: any	//TODO: Add type
+	nextPage: any	//TODO: Add type
+	formik: any	//TODO: Add type
+}> = ({
 	previousPage,
-// @ts-expect-error TS(7031): Binding element 'nextPage' implicitly has an 'any'... Remove this comment to see the full error message
 	nextPage,
-// @ts-expect-error TS(7031): Binding element 'formik' implicitly has an 'any' t... Remove this comment to see the full error message
 	formik,
-// @ts-expect-error TS(7031): Binding element 'loadingWorkflowDef' implicitly ha... Remove this comment to see the full error message
-	loadingWorkflowDef,
-// @ts-expect-error TS(7031): Binding element 'workflowDef' implicitly has an 'a... Remove this comment to see the full error message
-	workflowDef,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
+
+	const workflowDef = useAppSelector(state => getWorkflowDef(state));
 
 	useEffect(() => {
 		// Load workflow definitions for selecting
-		loadingWorkflowDef();
+		dispatch(fetchWorkflowDef("default"));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -68,17 +68,10 @@ const NewProcessingPage = ({
 										<DropDown
 											value={formik.values.processingWorkflow}
 											text={
-												!!workflowDef.find(
-// @ts-expect-error TS(7006): Parameter 'workflow' implicitly has an 'any' type.
+												workflowDef.find(
 													(workflow) =>
 														formik.values.processingWorkflow === workflow.id
-												)
-													? workflowDef.find(
-// @ts-expect-error TS(7006): Parameter 'workflow' implicitly has an 'any' type.
-															(workflow) =>
-																formik.values.processingWorkflow === workflow.id
-													  ).title
-													: ""
+												)?.title ?? ""
 											}
 											options={workflowDef}
 											type={"workflow"}
@@ -147,16 +140,4 @@ const NewProcessingPage = ({
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-	workflowDef: getWorkflowDef(state),
-});
-
-// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
-const mapDispatchToProps = (dispatch) => ({
-// @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
-	loadingWorkflowDef: () => dispatch(fetchWorkflowDef()),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(NewProcessingPage);
+export default NewProcessingPage;

app/src/components/events/partials/ModalTabsAndPages/StartTaskSummaryPage.tsx

@@ -2,18 +2,22 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import { getWorkflowDef } from "../../../../selectors/workflowSelectors";
-import { connect } from "react-redux";
+import { useAppSelector } from "../../../../store";
 
 /**
  * This component renders the summary page of the start task bulk action
  */
-const StartTaskSummaryPage = ({
-    formik,
-    previousPage,
-    workflowDef
-}: any) => {
+const StartTaskSummaryPage: React.FC<{
+	formik: any	//TODO: Add type
+	previousPage: any	//TODO: Add type
+}> = ({
+	formik,
+	previousPage,
+}) => {
 	const { t } = useTranslation();
 
+	const workflowDef = useAppSelector(state => getWorkflowDef(state));
+
 	return (
 		<>
 			<div className="modal-content active">
@@ -42,17 +46,12 @@ const StartTaskSummaryPage = ({
 											{t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.WORKFLOW")}
 										</span>
 										<p>
-											{!!workflowDef.find(
-// @ts-expect-error TS(7006): Parameter 'workflowDef' implicitly has an 'any' ty... Remove this comment to see the full error message
-												(workflowDef) =>
-													workflowDef.id === formik.values.workflow
-											)
-												? workflowDef.find(
-// @ts-expect-error TS(7006): Parameter 'workflowDef' implicitly has an 'any' ty... Remove this comment to see the full error message
-														(workflowDef) =>
-															workflowDef.id === formik.values.workflow
-												  ).title
-												: ""}
+											{
+												workflowDef.find(
+													(workflow) =>
+														formik.values.workflow === workflow.id
+												)?.title ?? ""
+												}
 										</p>
 									</li>
 									<li>
@@ -61,7 +60,7 @@ const StartTaskSummaryPage = ({
 										</span>
 										{Object.keys(formik.values.configuration).map(
 											(config, key) => (
-												<p>
+												<p key={key}>
 													{config} :{" "}
 													{formik.values.configuration[config].toString()}
 												</p>
@@ -85,10 +84,4 @@ const StartTaskSummaryPage = ({
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-	workflowDef: getWorkflowDef(state),
-});
-
-export default connect(mapStateToProps, null)(StartTaskSummaryPage);
+export default StartTaskSummaryPage;

app/src/components/events/partials/ModalTabsAndPages/StartTaskWorkflowPage.tsx

@@ -1,35 +1,35 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import RenderWorkflowConfig from "../wizards/RenderWorkflowConfig";
-import { fetchWorkflowDef } from "../../../../thunks/workflowThunks";
 import { getWorkflowDef } from "../../../../selectors/workflowSelectors";
-import { connect } from "react-redux";
 import cn from "classnames";
 import { setDefaultConfig } from "../../../../utils/workflowPanelUtils";
 import DropDown from "../../../shared/DropDown";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { fetchWorkflowDef } from "../../../../slices/workflowSlice";
 
 /**
  * This component renders the workflow selection for start task bulk action
  */
-const StartTaskWorkflowPage = ({
-// @ts-expect-error TS(7031): Binding element 'formik' implicitly has an 'any' t... Remove this comment to see the full error message
+const StartTaskWorkflowPage: React.FC<{
+	formik: any	//TODO: Add type
+	previousPage: any	//TODO: Add type
+	nextPage: any	//TODO: Add type
+	setPageCompleted: any	//TODO: Add type
+}> = ({
 	formik,
-// @ts-expect-error TS(7031): Binding element 'previousPage' implicitly has an '... Remove this comment to see the full error message
 	previousPage,
-// @ts-expect-error TS(7031): Binding element 'nextPage' implicitly has an 'any'... Remove this comment to see the full error message
 	nextPage,
-// @ts-expect-error TS(7031): Binding element 'setPageCompleted' implicitly has ... Remove this comment to see the full error message
 	setPageCompleted,
-// @ts-expect-error TS(7031): Binding element 'loadingWorkflowDef' implicitly ha... Remove this comment to see the full error message
-	loadingWorkflowDef,
-// @ts-expect-error TS(7031): Binding element 'workflowDef' implicitly has an 'a... Remove this comment to see the full error message
-	workflowDef,
 }) => {
 	const { t } = useTranslation();
 
+	const dispatch = useAppDispatch();
+	const workflowDef = useAppSelector(state => getWorkflowDef(state));
+
 	useEffect(() => {
 		// Load workflow definitions for selecting
-		loadingWorkflowDef();
+		dispatch(fetchWorkflowDef("default"));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -59,17 +59,10 @@ const StartTaskWorkflowPage = ({
 										<DropDown
 											value={formik.values.workflow}
 											text={
-												!!workflowDef.find(
-// @ts-expect-error TS(7006): Parameter 'workflowDef' implicitly has an 'any' ty... Remove this comment to see the full error message
+												workflowDef.find(
 													(workflowDef) =>
 														workflowDef.id === formik.values.workflow
-												)
-													? workflowDef.find(
-// @ts-expect-error TS(7006): Parameter 'workflowDef' implicitly has an 'any' ty... Remove this comment to see the full error message
-															(workflowDef) =>
-																workflowDef.id === formik.values.workflow
-													  ).title
-													: ""
+												)?.title ?? ""
 											}
 											options={workflowDef}
 											type={"workflow"}
@@ -144,19 +137,4 @@ const StartTaskWorkflowPage = ({
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-	workflowDef: getWorkflowDef(state),
-});
-
-// Mapping actions to dispatch
-// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
-const mapDispatchToProps = (dispatch) => ({
-	loadingWorkflowDef: () => dispatch(fetchWorkflowDef("tasks")),
-});
-
-export default connect(
-	mapStateToProps,
-	mapDispatchToProps
-)(StartTaskWorkflowPage);
+export default StartTaskWorkflowPage;

app/src/components/events/partials/modals/StartTaskModal.tsx

@@ -120,7 +120,6 @@ const StartTaskModal = ({
 									)}
 									{page === 2 && (
 										<StartTaskSummaryPage
-// @ts-expect-error TS(2322): Type '{ formik: FormikProps<any>; previousPage: an... Remove this comment to see the full error message
 											formik={formik}
 											previousPage={previousPage}
 										/>

app/src/components/events/partials/wizards/NewEventSummary.tsx

@@ -5,7 +5,6 @@ import {
 	getEventMetadata,
 	getExtendedEventMetadata,
 } from "../../../../selectors/eventSelectors";
-import { connect } from "react-redux";
 import { getWorkflowDef } from "../../../../selectors/workflowSelectors";
 import MetadataSummaryTable from "./summaryTables/MetadataSummaryTable";
 import MetadataExtendedSummaryTable from "./summaryTables/MetadataExtendedSummaryTable";
@@ -25,14 +24,13 @@ const NewEventSummary = ({
 	metaDataExtendedHidden,
 // @ts-expect-error TS(7031): Binding element 'assetUploadHidden' implicitly has... Remove this comment to see the full error message
 	assetUploadHidden,
-// @ts-expect-error TS(7031): Binding element 'workflowDef' implicitly has an 'a... Remove this comment to see the full error message
-	workflowDef,
 }) => {
 	const { t } = useTranslation();
 
 	const uploadAssetOptions = useAppSelector(state => getAssetUploadOptions(state));
 	const metadataEvents = useAppSelector(state => getEventMetadata(state));
 	const extendedMetadata = useAppSelector(state => getExtendedEventMetadata(state));
+	const workflowDef = useAppSelector(state => getWorkflowDef(state));
 
 	// Get upload assets that are not of type track
 	const uploadAssetsOptionsNonTrack = uploadAssetOptions.filter(
@@ -61,7 +59,6 @@ const NewEventSummary = ({
 
 	// Get additional information about chosen workflow definition
 	const workflowDefinition = workflowDef.find(
-// @ts-expect-error TS(7006): Parameter 'workflow' implicitly has an 'any' type.
 		(workflow) => workflow.id === formik.values.processingWorkflow
 	);
 
@@ -299,10 +296,4 @@ const NewEventSummary = ({
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-	workflowDef: getWorkflowDef(state),
-});
-
-export default connect(mapStateToProps)(NewEventSummary);
+export default NewEventSummary;