Merge branch 'admin-ui-picard' into to-redux-toolkit-userDetails

app/src/components/configuration/Themes.tsx

@@ -7,9 +7,8 @@ import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
 import { fetchFilters } from "../../thunks/tableFilterThunks";
 import { connect } from "react-redux";
-import { themesTemplateMap } from "../../configs/tableConfigs/themesTableConfig";
+import { themesTemplateMap } from "../../configs/tableConfigs/themesTableMap";
 import { getTotalThemes } from "../../selectors/themeSelectors";
-import { fetchThemes } from "../../thunks/themeThunks";
 import { loadThemesIntoTable } from "../../thunks/tableThunks";
 import Notifications from "../shared/Notifications";
 import NewResourceModal from "../shared/NewResourceModal";
@@ -20,17 +19,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 { fetchThemes } from "../../slices/themeSlice";
 
 /**
  * This component renders the table view of events
  */
 const Themes = ({
-// @ts-expect-error TS(7031): Binding element 'loadingThemes' implicitly has an ... Remove this comment to see the full error message
-	loadingThemes,
 // @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 'themes' implicitly has an 'any' t... Remove this comment to see the full error message
-	themes,
 // @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
@@ -41,12 +38,20 @@ const Themes = ({
 	currentFilterType,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
 	const [displayNewThemesModal, setNewThemesModal] = useState(false);
 
+	const themes = useAppSelector(state => getTotalThemes(state));
+
+	// TODO: Get rid of the wrappers when modernizing redux is done
+	const fetchThemesWrapper = () => {
+		dispatch(fetchThemes())
+	}
+
 	const loadThemes = async () => {
 		// Fetching themes from server
-		await loadingThemes();
+		await dispatch(fetchThemes());
 
 		// Load users into table
 		loadingThemesIntoTable();
@@ -128,7 +133,7 @@ const Themes = ({
 				<div className="controls-container">
 					{/* Include filters component */}
 					<TableFilters
-						loadResource={loadingThemes}
+						loadResource={fetchThemesWrapper}
 						loadResourceIntoTable={loadingThemesIntoTable}
 						resource={"themes"}
 					/>
@@ -146,7 +151,6 @@ const Themes = ({
 // Getting state data out of redux store
 // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
 const mapStateToProps = (state) => ({
-	themes: getTotalThemes(state),
 	user: getUserInformation(state),
 	currentFilterType: getCurrentFilterResource(state),
 });
@@ -156,7 +160,6 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
 // @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
-	loadingThemes: () => dispatch(fetchThemes()),
 	loadingThemesIntoTable: () => dispatch(loadThemesIntoTable()),
 	resetTextFilter: () => dispatch(editTextFilter("")),
 });

app/src/components/configuration/partials/ThemesActionsCell.tsx

@@ -3,22 +3,21 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import ConfirmModal from "../../shared/ConfirmModal";
 import ThemeDetailsModal from "./wizard/ThemeDetailsModal";
-import { deleteTheme } from "../../../thunks/themeThunks";
 import {
 	fetchThemeDetails,
 	fetchUsage,
 } from "../../../thunks/themeDetailsThunks";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
+import { useAppDispatch } from "../../../store";
+import { deleteTheme } from "../../../slices/themeSlice";
 
 /**
  * This component renders the action cells of themes in the table view
  */
 const ThemesActionsCell = ({
 // @ts-expect-error TS(7031): Binding element 'row' implicitly has an 'any' type... Remove this comment to see the full error message
 	row,
-// @ts-expect-error TS(7031): Binding element 'deleteTheme' implicitly has an 'a... Remove this comment to see the full error message
-	deleteTheme,
 // @ts-expect-error TS(7031): Binding element 'fetchThemeDetails' implicitly has... Remove this comment to see the full error message
 	fetchThemeDetails,
 // @ts-expect-error TS(7031): Binding element 'fetchUsage' implicitly has an 'an... Remove this comment to see the full error message
@@ -27,6 +26,7 @@ const ThemesActionsCell = ({
 	user,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 
 	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
 	const [displayThemeDetails, setThemeDetails] = useState(false);
@@ -48,7 +48,7 @@ const ThemesActionsCell = ({
 
 // @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type.
 	const deletingTheme = (id) => {
-		deleteTheme(id);
+		dispatch(deleteTheme(id));
 	};
 
 	return (
@@ -103,8 +103,6 @@ const mapStateToProps = (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 'id' implicitly has an 'any' type.
-	deleteTheme: (id) => dispatch(deleteTheme(id)),
 // @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type.
 	fetchThemeDetails: (id) => dispatch(fetchThemeDetails(id)),
 // @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type.

app/src/components/configuration/partials/wizard/NewThemeWizard.tsx

@@ -1,24 +1,26 @@
 import React, { useEffect } from "react";
 import { Formik } from "formik";
-import { connect } from "react-redux";
 import GeneralPage from "./GeneralPage";
 import BumperPage from "./BumperPage";
 import TitleSlidePage from "./TitleSlidePage";
 import WatermarkPage from "./WatermarkPage";
 import ThemeSummaryPage from "./ThemeSummaryPage";
 import WizardStepper from "../../../shared/wizard/WizardStepper";
-import { postNewTheme } from "../../../../thunks/themeThunks";
 import { initialFormValuesNewThemes } from "../../../../configs/modalConfig";
 import { usePageFunctions } from "../../../../hooks/wizardHooks";
 import { NewThemeSchema } from "../../../../utils/validate";
+import { useAppDispatch } from "../../../../store";
+import { postNewTheme } from "../../../../slices/themeSlice";
 
 /**
  * This component manages the pages of the new theme wizard and the submission of values
  */
-const NewThemeWizard = ({
-    close,
-    postNewTheme
-}: any) => {
+const NewThemeWizard: React.FC<{
+	close: () => void
+}> = ({
+	close,
+}) => {
+	const dispatch = useAppDispatch();
 	const initialValues = initialFormValuesNewThemes;
 
 	const [
@@ -64,7 +66,7 @@ const NewThemeWizard = ({
 
 // @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type.
 	const handleSubmit = (values) => {
-		postNewTheme(values);
+		dispatch(postNewTheme(values));
 		close();
 	};
 
@@ -143,11 +145,4 @@ const NewThemeWizard = ({
 	);
 };
 
-// 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 'values' implicitly has an 'any' type.
-	postNewTheme: (values) => dispatch(postNewTheme(values)),
-});
-
-export default connect(null, mapDispatchToProps)(NewThemeWizard);
+export default NewThemeWizard;