Modernize redux: seriesSlice

app/src/components/events/Events.tsx

@@ -19,7 +19,6 @@ import {
 	loadEventsIntoTable,
 	loadSeriesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchSeries } from "../../thunks/seriesThunks";
 import { fetchFilters, fetchStats } from "../../thunks/tableFilterThunks";
 import {
 	getTotalEvents,
@@ -39,6 +38,8 @@ import { GlobalHotKeys } from "react-hotkeys";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { fetchAssetUploadOptions } from "../../thunks/assetsThunks";
+import { useAppDispatch } from "../../store";
+import { fetchSeries } from "../../slices/seriesSlice";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef();
@@ -55,8 +56,6 @@ const Events = ({
 	events,
 // @ts-expect-error TS(7031): Binding element 'showActions' implicitly has an 'a... Remove this comment to see the full error message
 	showActions,
-// @ts-expect-error TS(7031): Binding element 'loadingSeries' implicitly has an ... Remove this comment to see the full error message
-	loadingSeries,
 // @ts-expect-error TS(7031): Binding element 'loadingSeriesIntoTable' implicitl... Remove this comment to see the full error message
 	loadingSeriesIntoTable,
 // @ts-expect-error TS(7031): Binding element 'loadingFilters' implicitly has an... Remove this comment to see the full error message
@@ -81,6 +80,7 @@ const Events = ({
 	currentFilterType,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 	const [displayActionMenu, setActionMenu] = useState(false);
 	const [displayNavigation, setNavigation] = useState(false);
 	const [displayNewEventModal, setNewEventModal] = useState(false);
@@ -112,7 +112,7 @@ const Events = ({
 		resetOffset();
 
 		//fetching series from server
-		loadingSeries();
+		dispatch(fetchSeries());
 
 		//load series into table
 		loadingSeriesIntoTable();
@@ -358,7 +358,6 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
 	loadingEvents: () => dispatch(fetchEvents()),
 	loadingEventsIntoTable: () => dispatch(loadEventsIntoTable()),
-	loadingSeries: () => dispatch(fetchSeries()),
 	loadingSeriesIntoTable: () => dispatch(loadSeriesIntoTable()),
 // @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),

app/src/components/events/Series.tsx

@@ -9,12 +9,7 @@ import Table from "../shared/Table";
 import Notifications from "../shared/Notifications";
 import NewResourceModal from "../shared/NewResourceModal";
 import DeleteSeriesModal from "./partials/modals/DeleteSeriesModal";
-import { seriesTemplateMap } from "../../configs/tableConfigs/seriesTableConfig";
-import {
-	fetchSeries,
-	fetchSeriesMetadata,
-	fetchSeriesThemes,
-} from "../../thunks/seriesThunks";
+import { seriesTemplateMap } from "../../configs/tableConfigs/seriesTableMap";
 import {
 	loadEventsIntoTable,
 	loadSeriesIntoTable,
@@ -29,10 +24,16 @@ import Header from "../Header";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
-import { showActions } from "../../actions/seriesActions";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { GlobalHotKeys } from "react-hotkeys";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
+import { useAppDispatch, useAppSelector } from "../../store";
+import {
+	fetchSeries,
+	fetchSeriesMetadata,
+	fetchSeriesThemes,
+	showActionsSeries,
+} from "../../slices/seriesSlice";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef();
@@ -41,45 +42,42 @@ const containerAction = React.createRef();
  * This component renders the table view of series
  */
 const Series = ({
-// @ts-expect-error TS(7031): Binding element 'showActions' implicitly has an 'a... Remove this comment to see the full error message
-	showActions,
-// @ts-expect-error TS(7031): Binding element 'loadingSeries' implicitly has an ... Remove this comment to see the full error message
-	loadingSeries,
 // @ts-expect-error TS(7031): Binding element 'loadingSeriesIntoTable' implicitl... Remove this comment to see the full error message
 	loadingSeriesIntoTable,
 // @ts-expect-error TS(7031): Binding element 'loadingEvents' implicitly has an ... Remove this comment to see the full error message
 	loadingEvents,
 // @ts-expect-error TS(7031): Binding element 'loadingEventsIntoTable' implicitl... Remove this comment to see the full error message
 	loadingEventsIntoTable,
-// @ts-expect-error TS(7031): Binding element 'series' implicitly has an 'any' t... Remove this comment to see the full error message
-	series,
 // @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 'loadingStats' implicitly has an '... Remove this comment to see the full error message
 	loadingStats,
-// @ts-expect-error TS(7031): Binding element 'loadingSeriesMetadata' implicitly... Remove this comment to see the full error message
-	loadingSeriesMetadata,
-// @ts-expect-error TS(7031): Binding element 'loadingSeriesThemes' implicitly h... Remove this comment to see the full error message
-	loadingSeriesThemes,
 // @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 'setShowActions' implicitly has an... Remove this comment to see the full error message
-	setShowActions,
 // @ts-expect-error TS(7031): Binding element 'currentFilterType' implicitly has... Remove this comment to see the full error message
 	currentFilterType,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 	const [displayActionMenu, setActionMenu] = useState(false);
 	const [displayNavigation, setNavigation] = useState(false);
 	const [displayNewSeriesModal, setNewSeriesModal] = useState(false);
 	const [displayDeleteSeriesModal, setDeleteSeriesModal] = useState(false);
 
 	let location = useLocation();
 
+	const series = useAppSelector(state => getTotalSeries(state));
+	const showActions = useAppSelector(state => isShowActions(state));
+
+	// TODO: Get rid of the wrappers when modernizing redux is done
+	const fetchSeriesWrapper = () => {
+		dispatch(fetchSeries())
+	}
+
 	const loadEvents = () => {
 		// Reset the current page to first page
 		resetOffset();
@@ -96,7 +94,7 @@ const Series = ({
 
 	const loadSeries = async () => {
 		//fetching series from server
-		await loadingSeries();
+		await dispatch(fetchSeries());
 
 		//load series into table
 		loadingSeriesIntoTable();
@@ -110,7 +108,7 @@ const Series = ({
 		resetTextFilter();
 
 		// disable actions button
-		setShowActions(false);
+		dispatch(showActionsSeries(false));
 
 		// Load events on mount
 		loadSeries().then((r) => console.info(r));
@@ -151,8 +149,8 @@ const Series = ({
 	};
 
 	const showNewSeriesModal = async () => {
-		await loadingSeriesMetadata();
-		await loadingSeriesThemes();
+		await dispatch(fetchSeriesMetadata());
+		await dispatch(fetchSeriesThemes());
 
 		setNewSeriesModal(true);
 	};
@@ -254,7 +252,7 @@ const Series = ({
 						</div>
 						{/* Include filters component */}
 						<TableFilters
-							loadResource={loadingSeries}
+							loadResource={fetchSeriesWrapper}
 							loadResourceIntoTable={loadingSeriesIntoTable}
 							resource={"series"}
 						/>
@@ -273,28 +271,21 @@ const Series = ({
 // Getting state data out of redux store
 // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
 const mapStateToProps = (state) => ({
-	series: getTotalSeries(state),
-	showActions: isShowActions(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) => ({
-	loadingSeries: () => dispatch(fetchSeries()),
 	loadingSeriesIntoTable: () => dispatch(loadSeriesIntoTable()),
 	loadingEvents: () => dispatch(fetchEvents()),
 	loadingEventsIntoTable: () => dispatch(loadEventsIntoTable()),
 // @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
 	loadingStats: () => dispatch(fetchStats()),
-	loadingSeriesMetadata: () => dispatch(fetchSeriesMetadata()),
-	loadingSeriesThemes: () => dispatch(fetchSeriesThemes()),
 	resetTextFilter: () => dispatch(editTextFilter("")),
 	resetOffset: () => dispatch(setOffset(0)),
-// @ts-expect-error TS(7006): Parameter 'isShowing' implicitly has an 'any' type... Remove this comment to see the full error message
-	setShowActions: (isShowing) => dispatch(showActions(isShowing)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Series);

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
 import { getSeriesThemes } from "../../../../selectors/seriesSeletctor";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import DropDown from "../../../shared/DropDown";
+import { useAppSelector } from "../../../../store";
 
 /**
  * This component renders the theme page for new series in the new series wizard.
@@ -12,16 +12,21 @@ const NewThemePage = ({
     formik,
     nextPage,
     previousPage,
-    seriesThemes
 }: any) => {
 	const { t } = useTranslation();
 
-// @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type.
-	const getDescription = (id) => {
-// @ts-expect-error TS(7006): Parameter 'theme' implicitly has an 'any' type.
+	const seriesThemes = useAppSelector(state => getSeriesThemes(state));
+
+	const getDescription = (id: string) => {
+		const theme = seriesThemes.find((theme) => theme.id === id);
+
+		return theme?.description;
+	};
+
+	const getName = (id: string) => {
 		const theme = seriesThemes.find((theme) => theme.id === id);
 
-		return theme.description;
+		return theme?.name;
 	};
 
 	return (
@@ -44,16 +49,7 @@ const NewThemePage = ({
 														<DropDown
 															value={formik.values.theme}
 															text={
-																!!seriesThemes.find(
-// @ts-expect-error TS(7006): Parameter 'theme' implicitly has an 'any' type.
-																	(theme) => formik.values.theme === theme.id
-																)
-																	? seriesThemes.find(
-// @ts-expect-error TS(7006): Parameter 'theme' implicitly has an 'any' type.
-																			(theme) =>
-																				formik.values.theme === theme.id
-																	  ).name
-																	: ""
+																getName(formik.values.theme) ? getName(formik.values.theme) : ""
 															}
 															options={seriesThemes}
 															type={"newTheme"}
@@ -92,9 +88,4 @@ const NewThemePage = ({
 	);
 };
 
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-	seriesThemes: getSeriesThemes(state),
-});
-
-export default connect(mapStateToProps)(NewThemePage);
+export default NewThemePage;