Merge pull request #312 from Arnei/type-formik

Type usePageFunctions in wizardHooks.ts | Formik Typing

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

@@ -2,20 +2,31 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import FileUpload from "../../../shared/wizard/FileUpload";
-import { Field } from "formik";
+import { Field, FormikProps } from "formik";
 import Notifications from "../../../shared/Notifications";
 
 /**
  * This component renders the bumper/trailer (depending on isTrailer flag) page for new themes in the new themes wizard
  * and for themes in themes details modal.
  */
-const BumperPage = ({
-    formik,
-    nextPage,
-    previousPage,
-    isTrailer,
-    isEdit
-}: any) => {
+interface RequiredFormProps {
+	bumperActive: boolean,
+	trailerActive: boolean,
+}
+
+const BumperPage = <T extends RequiredFormProps>({
+	formik,
+	nextPage,
+	previousPage,
+	isTrailer,
+	isEdit
+}: {
+	formik: FormikProps<T>,
+	nextPage?: (values: T) => void,
+	previousPage?: (values: T) => void,
+	isTrailer?: boolean,
+	isEdit?: boolean,
+}) => {
 	const { t } = useTranslation();
 
 	return (

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

@@ -1,19 +1,23 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Notifications from "../../../shared/Notifications";
-import { Field } from "formik";
+import { Field, FormikProps } from "formik";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 
 /**
  * This component renders the general page for new themes in the new themes wizard
  * and for themes in the themes details modal.
  * Here, additional information, like name, for themes can be provided.
  */
-const GeneralPage = ({
-    formik,
-    nextPage,
-    isEdit
-}: any) => {
+const GeneralPage = <T,>({
+	formik,
+	nextPage,
+	isEdit,
+}: {
+	formik: FormikProps<T>,
+	nextPage?: (values: T) => void,
+	isEdit?: boolean,
+}) => {
 	const { t } = useTranslation();
 
 	// Style used in themes details modal
@@ -31,7 +35,7 @@ const GeneralPage = ({
 						<div className="form-container">
 							<div className="row">
 								<Notifications />
-								<label className="required" style={isEdit && editStyle}>
+								<label className="required" style={isEdit ? editStyle: undefined}>
 									{t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME")}
 								</label>
 								<Field
@@ -44,7 +48,7 @@ const GeneralPage = ({
 								/>
 							</div>
 							<div className="row">
-								<label style={isEdit && editStyle}>
+								<label style={isEdit ? editStyle: undefined}>
 									{t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION")}
 								</label>
 								<Field

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

@@ -23,15 +23,15 @@ const NewThemeWizard: React.FC<{
 	const dispatch = useAppDispatch();
 	const initialValues = initialFormValuesNewThemes;
 
-	const [
+	const {
 		snapshot,
 		page,
 		nextPage,
 		previousPage,
 		setPage,
 		pageCompleted,
 		setPageCompleted,
-	] = usePageFunctions(0, initialValues);
+	 } = usePageFunctions(0, initialValues);
 
 	// Caption of steps used by Stepper
 	const steps = [

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

@@ -1,14 +1,30 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
+import { FormikProps } from "formik";
 
 /**
  * This component renders the summary page for new themes in the new theme wizard.
  */
-const ThemeSummaryPage = ({
-    formik,
-    previousPage
-}: any) => {
+interface RequiredFormProps {
+	bumperFile: string,
+	bumperFileName: string,
+	trailerFile: string,
+	trailerFileName: string,
+	titleSlideMode: string,
+	titleSlideBackground: string,
+	titleSlideBackgroundName: string,
+	watermarkFile: string,
+	watermarkFileName: string,
+}
+
+const ThemeSummaryPage = <T extends RequiredFormProps>({
+	formik,
+	previousPage
+}: {
+	formik: FormikProps<T>,
+	previousPage?: (values: T) => void,
+}) => {
 	const { t } = useTranslation();
 
 	return (

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

@@ -1,18 +1,28 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Field } from "formik";
+import { Field, FormikProps } from "formik";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import FileUpload from "../../../shared/wizard/FileUpload";
 
 /**
  * This component renders the title slide page for new themes in the new theme wizard and for themes in themes details modal.
  */
-const TitleSlidePage = ({
-    formik,
-    nextPage,
-    previousPage,
-    isEdit
-}: any) => {
+interface RequiredFormProps {
+	titleSlideActive: boolean,
+	titleSlideMode: string,
+}
+
+const TitleSlidePage = <T extends RequiredFormProps>({
+	formik,
+	nextPage,
+	previousPage,
+	isEdit
+}: {
+	formik: FormikProps<T>,
+	nextPage?: (values: T) => void,
+	previousPage?: (values: T) => void,
+	isEdit?: boolean,
+}) => {
 	const { t } = useTranslation();
 
 	return (

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { Field } from "formik";
+import { Field, FormikProps } from "formik";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import FileUpload from "../../../shared/wizard/FileUpload";
 import Notifications from "../../../shared/Notifications";
@@ -10,12 +10,23 @@ import Notifications from "../../../shared/Notifications";
  * This component renders the watermark page for new themes in the new themes wizard
  * and for themes in themes details modal.
  */
-const WatermarkPage = ({
-    formik,
-    nextPage,
-    previousPage,
-    isEdit
-}: any) => {
+interface RequiredFormProps {
+	watermarkActive: boolean,
+	watermarkFile: string,
+	watermarkPosition: string,
+}
+
+const WatermarkPage = <T extends RequiredFormProps>({
+	formik,
+	nextPage,
+	previousPage,
+	isEdit
+}: {
+	formik: FormikProps<T>,
+	nextPage?: (values: T) => void,
+	previousPage?: (values: T) => void,
+	isEdit?: boolean,
+}) => {
 	const { t } = useTranslation();
 
 // @ts-expect-error TS(7006): Parameter 'position' implicitly has an 'any' type.

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

@@ -1,8 +1,7 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { connect } from "react-redux";
-import { Field, FieldArray } from "formik";
+import { Field, FieldArray, FormikProps } from "formik";
 import Notifications from "../../../shared/Notifications";
 import RenderField from "../../../shared/wizard/RenderField";
 import { getTimezoneOffset, hasAccess } from "../../../../utils/utils";
@@ -17,26 +16,34 @@ import DropDown from "../../../shared/DropDown";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import {
+	Event,
+	EditedEvents,
 	checkForSchedulingConflicts,
 	fetchScheduling,
 } from "../../../../slices/eventSlice";
 
 /**
  * This component renders the edit page for scheduled events of the corresponding bulk action
  */
-const EditScheduledEventsEditPage = ({
-// @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 'formik' implicitly has an 'any' t... Remove this comment to see the full error message
+interface RequiredFormProps {
+	events: Event[],
+	editedEvents: EditedEvents[],
+}
+
+const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 	formik,
-// @ts-expect-error TS(7031): Binding element 'inputDevices' implicitly has an '... Remove this comment to see the full error message
+	nextPage,
+	previousPage,
+	setPageCompleted,
 	inputDevices,
-// @ts-expect-error TS(7031): Binding element 'conflicts' implicitly has an 'any... Remove this comment to see the full error message
 	conflictState: { conflicts, setConflicts },
-// @ts-expect-error TS(7031): Binding element 'setPageCompleted' implicitly has ... Remove this comment to see the full error message
-	setPageCompleted,
+}: {
+	formik: FormikProps<T>,
+	nextPage: (values: T) => void,
+	previousPage: (values: T) => void,
+	setPageCompleted: (rec: Record<number, boolean>) => void,
+	inputDevices: { user: any, inputDevices: any },
+	conflictState: { conflicts: any, setConflicts: any },
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -53,11 +60,9 @@ const EditScheduledEventsEditPage = ({
 
 	useEffect(() => {
 		const fetchEventInfos =
-			formik.values.editedEvents.length !== formik.values.events ||
+			formik.values.editedEvents.length !== formik.values.events.length ||
 			formik.values.events.some(
-// @ts-expect-error TS(7006): Parameter 'event' implicitly has an 'any' type.
 				(event) =>
-// @ts-expect-error TS(7006): Parameter 'e' implicitly has an 'any' type.
 					!formik.values.editedEvents.find((e) => e.eventId === event.id)
 			);
 
@@ -123,7 +128,6 @@ const EditScheduledEventsEditPage = ({
 										{
 											/*todo: in old UI this was grouped by weekday, which is also stated in the description in the div above
                                         now there isn't any grouping and there is one div per event -> find out, if that is okay and adapt again if necessary */
-// @ts-expect-error TS(7006): Parameter 'event' implicitly has an 'any' type.
 											formik.values.editedEvents.map((event, key) => (
 												<div className="obj tbl-details">
 													<header>{event.title}</header>
@@ -472,7 +476,7 @@ const EditScheduledEventsEditPage = ({
 				<button
 					className="cancel"
 					onClick={() => {
-						previousPage(formik.values, false);
+						previousPage(formik.values);
 						if (!formik.isValid) {
 							// set page as not filled out
 							setPageCompleted([]);
@@ -489,18 +493,4 @@ const EditScheduledEventsEditPage = ({
 	);
 };
 
-// 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) => ({
-
-});
-
-export default connect(
-	mapStateToProps,
-	mapDispatchToProps
-)(EditScheduledEventsEditPage);
+export default EditScheduledEventsEditPage;

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

@@ -13,28 +13,35 @@ import {
 	isScheduleEditable,
 } from "../../../../utils/bulkActionUtils";
 import { useAppSelector } from "../../../../store";
+import { FormikProps } from "formik";
+import { Event } from "../../../../slices/eventSlice";
 
 /**
  * This component renders the table overview of selected events in edit scheduled events bulk action
  */
-const EditScheduledEventsGeneralPage = ({
-// @ts-expect-error TS(7031): Binding element 'nextPage' implicitly has an 'any'... Remove this comment to see the full error message
+interface RequiredFormProps {
+	events: Event[],
+}
+
+const EditScheduledEventsGeneralPage = <T extends RequiredFormProps>({
 	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 'selectedRows' implicitly has an '... Remove this comment to see the full error message
 	selectedRows,
+}: {
+	formik: FormikProps<T>,
+	nextPage: (values: T) => void,
 }) => {
 	const { t } = useTranslation();
 
 	const user = useAppSelector(state => getUserInformation(state));
 
-	const [
+	const {
 		selectedEvents,
 		allChecked,
 		onChangeSelected,
 		onChangeAllSelected,
-	] = useSelectionChanges(formik, selectedRows);
+	} = useSelectionChanges(formik, selectedRows);
 
 	useEffect(() => {
 		// Set field value for formik on mount, because initially all events are selected
@@ -92,7 +99,6 @@ const EditScheduledEventsGeneralPage = ({
 									</thead>
 									<tbody>
 										{/* Repeat for each selected event */}
-{/* @ts-expect-error TS(7006): Parameter 'event' implicitly has an 'any' type. */}
 										{selectedEvents.map((event, key) => (
 											<tr
 												key={key}

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

@@ -4,16 +4,23 @@ import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButt
 import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils";
 import { getSchedulingSeriesOptions } from "../../../../selectors/eventSelectors";
 import { useAppSelector } from "../../../../store";
+import { FormikProps } from "formik";
+import { EditedEvents } from "../../../../slices/eventSlice";
 
 /**
  * This component renders the summary page of the edit scheduled bulk action
  */
-const EditScheduledEventsSummaryPage : React.FC<{
-  previousPage: any,
-	formik: any,
-}>= ({
+interface RequiredFormProps {
+	editedEvents: EditedEvents[],
+	changedEvents: string[],
+}
+
+const EditScheduledEventsSummaryPage = <T extends RequiredFormProps>({
 	previousPage,
 	formik,
+} : {
+	previousPage: (values: T) => void,
+	formik: FormikProps<T>,
 }) => {
 	const { t } = useTranslation();