Merge branch 'to-redux-toolkit-table' of Arnei/opencast-admin-interfa…

…ce into main Pull request #695 Modernize redux: tableSlice
opencast · Jul 15, 2024 · 0d7e74f · 0d7e74f
2 parents 19e0efe + e918fc6
commit 0d7e74f
Show file tree

Hide file tree

Showing 72 changed files with 907 additions and 1,513 deletions.
diff --git a/src/actions/tableActions.ts b/src/actions/tableActions.ts
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import i18n from "../i18n/i18n";
 import languages from "../i18n/languages";
@@ -45,10 +44,7 @@ function logout() {
 /**
  * Component that renders the header and the navigation in the upper right corner.
  */
-const Header = ({
-// @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message
-	loadingServicesIntoTable,
-}) => {
+const Header = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 	// State for opening (true) and closing (false) the dropdown menus for language, notification, help and user
@@ -82,7 +78,7 @@ const Header = ({
 
 	const redirectToServices = async () => {
 		// Load services into table
-		await loadingServicesIntoTable();
+		await dispatch(loadServicesIntoTable());
 
 		// set the action filter value of services to true
 		await dispatch(setSpecificServiceFilter({ filter: "actions", filterValue: "true" }));
@@ -437,15 +433,4 @@ const MenuUser = () => {
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-});
-
-// Mapping actions to dispatch
-// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
-const mapDispatchToProps = (dispatch) => ({
-	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
+export default Header;
diff --git a/src/components/configuration/Themes.tsx b/src/components/configuration/Themes.tsx
@@ -6,7 +6,6 @@ import cn from "classnames";
 import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
 import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
-import { connect } from "react-redux";
 import { themesTemplateMap } from "../../configs/tableConfigs/themesTableMap";
 import { getTotalThemes } from "../../selectors/themeSelectors";
 import { loadThemesIntoTable } from "../../thunks/tableThunks";
@@ -25,10 +24,7 @@ import { fetchThemes } from "../../slices/themeSlice";
 /**
  * This component renders the table view of events
  */
-const Themes = ({
-// @ts-expect-error TS(7031): Binding element 'loadingThemesIntoTable' implicitl... Remove this comment to see the full error message
-	loadingThemesIntoTable,
-}) => {
+const Themes = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
@@ -40,17 +36,12 @@ const Themes = ({
 	const user = useAppSelector(state => getUserInformation(state));
 	const themes = useAppSelector(state => getTotalThemes(state));
 
-	// TODO: Get rid of the wrappers when modernizing redux is done
-	const fetchThemesWrapper = async () => {
-		await dispatch(fetchThemes())
-	}
-
 	const loadThemes = async () => {
 		// Fetching themes from server
 		await dispatch(fetchThemes());
 
 		// Load users into table
-		loadingThemesIntoTable();
+		dispatch(loadThemesIntoTable());
 	};
 
 	useEffect(() => {
@@ -128,8 +119,8 @@ const Themes = ({
 				<div className="controls-container">
 					{/* Include filters component */}
 					<TableFilters
-						loadResource={fetchThemesWrapper}
-						loadResourceIntoTable={loadingThemesIntoTable}
+						loadResource={fetchThemes}
+						loadResourceIntoTable={loadThemesIntoTable}
 						resource={"themes"}
 					/>
 					<h1>{t("CONFIGURATION.THEMES.TABLE.CAPTION")}</h1>
@@ -143,15 +134,4 @@ const Themes = ({
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-});
-
-// Mapping actions to dispatch
-// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
-const mapDispatchToProps = (dispatch) => ({
-	loadingThemesIntoTable: () => dispatch(loadThemesIntoTable()),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Themes);
+export default Themes;
diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { connect } from "react-redux";
 import { Link, useLocation } from "react-router-dom";
 import TableFilters from "../shared/TableFilters";
 import MainNav from "../shared/MainNav";
@@ -24,7 +23,7 @@ import {
 	isFetchingAssetUploadOptions as getIsFetchingAssetUploadOptions,
 	isShowActions,
 } from "../../selectors/eventSelectors";
-import { setOffset } from "../../actions/tableActions";
+import { setOffset } from "../../slices/tableSlice";
 import Header from "../Header";
 import NavBar from "../NavBar";
 import MainView from "../MainView";
@@ -49,14 +48,7 @@ const containerAction = React.createRef<HTMLDivElement>();
 /**
  * This component renders the table view of events
  */
-const Events = ({
-// @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 'loadingSeriesIntoTable' implicitl... Remove this comment to see the full error message
-	loadingSeriesIntoTable,
-// @ts-expect-error TS(7031): Binding element 'resetOffset' implicitly has an 'a... Remove this comment to see the full error message
-	resetOffset,
-}) => {
+const Events = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
@@ -82,11 +74,6 @@ const Events = ({
 
 	let location = useLocation();
 
-	// TODO: Get rid of the wrappers when modernizing redux is done
-	const fetchEventsWrapper = async () => {
-		await dispatch(fetchEvents())
-	}
-
 	const loadEvents = async () => {
 		// Fetching stats from server
 		dispatch(fetchStats());
@@ -95,18 +82,18 @@ const Events = ({
 		await dispatch(fetchEvents());
 
 		// Load events into table
-		loadingEventsIntoTable();
+		dispatch(loadEventsIntoTable());
 	};
 
 	const loadSeries = () => {
 		// Reset the current page to first page
-		resetOffset();
+		dispatch(setOffset(0));
 
 		//fetching series from server
 		dispatch(fetchSeries());
 
 		//load series into table
-		loadingSeriesIntoTable();
+		dispatch(loadSeriesIntoTable());
 	};
 
 	useEffect(() => {
@@ -309,8 +296,8 @@ const Events = ({
 
 						{/* Include filters component*/}
 						<TableFilters
-							loadResource={fetchEventsWrapper}
-							loadResourceIntoTable={loadingEventsIntoTable}
+							loadResource={fetchEvents}
+							loadResourceIntoTable={loadEventsIntoTable}
 							resource={"events"}
 						/>
 					</div>
@@ -326,17 +313,4 @@ const Events = ({
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-});
-
-// Mapping actions to dispatch
-// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
-const mapDispatchToProps = (dispatch) => ({
-	loadingEventsIntoTable: () => dispatch(loadEventsIntoTable()),
-	loadingSeriesIntoTable: () => dispatch(loadSeriesIntoTable()),
-	resetOffset: () => dispatch(setOffset(0)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Events);
+export default Events;