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

…interface into main Pull request #304 Modernize redux: tableFiltersSlice
opencast · May 24, 2024 · 122ea8c · 122ea8c
2 parents 8717861 + d6d2b25
commit 122ea8c
Show file tree

Hide file tree

Showing 31 changed files with 533 additions and 839 deletions.
diff --git a/src/actions/tableFilterActions.ts b/src/actions/tableFilterActions.ts
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -6,7 +6,7 @@ import i18n from "../i18n/i18n";
 import languages from "../i18n/languages";
 // @ts-expect-error TS(2307): Cannot find module '../img/opencast-white.svg' or ... Remove this comment to see the full error message
 import opencastLogo from "../img/opencast-white.svg";
-import { setSpecificServiceFilter } from "../thunks/tableFilterThunks";
+import { setSpecificServiceFilter } from "../slices/tableFilterSlice";
 import { loadServicesIntoTable } from "../thunks/tableThunks";
 import { getErrorCount, getHealthStatus } from "../selectors/healthSelectors";
 import {
@@ -48,8 +48,6 @@ function logout() {
  * Component that renders the header and the navigation in the upper right corner.
  */
 const Header = ({
-// @ts-expect-error TS(7031): Binding element 'setSpecificServiceFilter' implici... Remove this comment to see the full error message
-	setSpecificServiceFilter,
 // @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message
 	loadingServicesIntoTable,
 }) => {
@@ -89,7 +87,7 @@ const Header = ({
 		await loadingServicesIntoTable();
 
 		// set the action filter value of services to true
-		await setSpecificServiceFilter("actions", "true");
+		await dispatch(setSpecificServiceFilter({ filter: "actions", filterValue: "true" }));
 	};
 
 	const showHotKeyCheatSheet = () => {
@@ -444,9 +442,6 @@ const mapStateToProps = (state) => ({
 // @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
 const mapDispatchToProps = (dispatch) => ({
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
-// @ts-expect-error TS(7006): Parameter 'filter' implicitly has an 'any' type.
-	setSpecificServiceFilter: (filter, filterValue) =>
-		dispatch(setSpecificServiceFilter(filter, filterValue)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/src/components/configuration/Themes.tsx b/src/components/configuration/Themes.tsx
@@ -5,14 +5,13 @@ import { Link } from "react-router-dom";
 import cn from "classnames";
 import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
-import { fetchFilters } from "../../thunks/tableFilterThunks";
+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";
 import Notifications from "../shared/Notifications";
 import NewResourceModal from "../shared/NewResourceModal";
-import { editTextFilter } from "../../actions/tableFilterActions";
 import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import Header from "../Header";
 import Footer from "../Footer";
@@ -28,15 +27,12 @@ import { fetchThemes } from "../../slices/themeSlice";
 const Themes = ({
 // @ts-expect-error TS(7031): Binding element 'loadingThemesIntoTable' implicitl... Remove this comment to see the full error message
 	loadingThemesIntoTable,
-// @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 'resetTextFilter' implicitly has a... Remove this comment to see the full error message
-	resetTextFilter,
-// @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 currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
+
 	const [displayNavigation, setNavigation] = useState(false);
 	const [displayNewThemesModal, setNewThemesModal] = useState(false);
 
@@ -58,10 +54,11 @@ const Themes = ({
 
 	useEffect(() => {
 		if ("themes" !== currentFilterType) {
-			loadingFilters("themes");
+			dispatch(fetchFilters("themes"));
 		}
 
-		resetTextFilter();
+		// Reset text filter
+		dispatch(editTextFilter(""));
 
 		// Load themes on mount
 		loadThemes().then((r) => console.info(r));
@@ -150,16 +147,12 @@ const Themes = ({
 // Getting state data out of redux store
 // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
 const mapStateToProps = (state) => ({
-	currentFilterType: getCurrentFilterResource(state),
 });
 
 // Mapping actions to dispatch
 // @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
 const mapDispatchToProps = (dispatch) => ({
-// @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
-	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
 	loadingThemesIntoTable: () => dispatch(loadThemesIntoTable()),
-	resetTextFilter: () => dispatch(editTextFilter("")),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Themes);
diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
@@ -18,13 +18,12 @@ import {
 	loadEventsIntoTable,
 	loadSeriesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchFilters, fetchStats } from "../../thunks/tableFilterThunks";
+import { fetchFilters, fetchStats, editTextFilter } from "../../slices/tableFilterSlice";
 import {
 	getTotalEvents,
 	isFetchingAssetUploadOptions as getIsFetchingAssetUploadOptions,
 	isShowActions,
 } from "../../selectors/eventSelectors";
-import { editTextFilter } from "../../actions/tableFilterActions";
 import { setOffset } from "../../actions/tableActions";
 import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import Header from "../Header";
@@ -54,19 +53,14 @@ const Events = ({
 	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 '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 '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 'currentFilterType' implicitly has... Remove this comment to see the full error message
-	currentFilterType,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
+
+	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
+
 	const [displayActionMenu, setActionMenu] = useState(false);
 	const [displayNavigation, setNavigation] = useState(false);
 	const [displayNewEventModal, setNewEventModal] = useState(false);
@@ -94,7 +88,7 @@ const Events = ({
 
 	const loadEvents = async () => {
 		// Fetching stats from server
-		loadingStats();
+		dispatch(fetchStats());
 
 		// Fetching events from server
 		await dispatch(fetchEvents());
@@ -116,10 +110,11 @@ const Events = ({
 
 	useEffect(() => {
 		if ("events" !== currentFilterType) {
-			loadingFilters("events");
+			dispatch(fetchFilters("events"))
 		}
 
-		resetTextFilter();
+		// Reset text filter
+		dispatch(editTextFilter(""));
 
 		// disable actions button
 		dispatch(setShowActions(false));
@@ -337,18 +332,13 @@ const Events = ({
 // Getting state data out of redux store
 // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
 const mapStateToProps = (state) => ({
-	currentFilterType: getCurrentFilterResource(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()),
-// @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
-	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
-	loadingStats: () => dispatch(fetchStats()),
-	resetTextFilter: () => dispatch(editTextFilter("")),
 	resetOffset: () => dispatch(setOffset(0)),
 });
 

diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
@@ -14,9 +14,8 @@ import {
 	loadEventsIntoTable,
 	loadSeriesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchFilters, fetchStats } from "../../thunks/tableFilterThunks";
+import { fetchFilters, fetchStats, editTextFilter } from "../../slices/tableFilterSlice";
 import { getTotalSeries, isShowActions } from "../../selectors/seriesSeletctor";
-import { editTextFilter } from "../../actions/tableFilterActions";
 import { setOffset } from "../../actions/tableActions";
 import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import Header from "../Header";
@@ -46,16 +45,8 @@ const Series = ({
 	loadingSeriesIntoTable,
 // @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 '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 '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 'currentFilterType' implicitly has... Remove this comment to see the full error message
-	currentFilterType,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -65,6 +56,7 @@ const Series = ({
 	const [displayDeleteSeriesModal, setDeleteSeriesModal] = useState(false);
 
   const user = useAppSelector(state => getUserInformation(state));
+	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
 
 	let location = useLocation();
 
@@ -81,7 +73,7 @@ const Series = ({
 		resetOffset();
 
 		// Fetching stats from server
-		loadingStats();
+		dispatch(fetchStats());
 
 		// Fetching events from server
 		dispatch(fetchEvents());
@@ -100,10 +92,11 @@ const Series = ({
 
 	useEffect(() => {
 		if ("series" !== currentFilterType) {
-			loadingFilters("series");
+			dispatch(fetchFilters("series"))
 		}
 
-		resetTextFilter();
+		// Reset text filer
+		dispatch(editTextFilter(""));
 
 		// disable actions button
 		dispatch(showActionsSeries(false));
@@ -263,18 +256,13 @@ const Series = ({
 // Getting state data out of redux store
 // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
 const mapStateToProps = (state) => ({
-	currentFilterType: getCurrentFilterResource(state),
 });
 
 // Mapping actions to dispatch
 // @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
 const mapDispatchToProps = (dispatch) => ({
 	loadingSeriesIntoTable: () => dispatch(loadSeriesIntoTable()),
 	loadingEventsIntoTable: () => dispatch(loadEventsIntoTable()),
-// @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
-	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
-	loadingStats: () => dispatch(fetchStats()),
-	resetTextFilter: () => dispatch(editTextFilter("")),
 	resetOffset: () => dispatch(setOffset(0)),
 });