Merge pull request #325 from Arnei/typing-formik-more

Add typing to NewEventWizard.tsx

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

@@ -12,6 +12,7 @@ import Notifications from "../../../shared/Notifications";
 interface RequiredFormProps {
 	bumperActive: boolean,
 	trailerActive: boolean,
+	[key: string]: unknown,
 }
 
 const BumperPage = <T extends RequiredFormProps>({

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

@@ -10,6 +10,7 @@ import FileUpload from "../../../shared/wizard/FileUpload";
 interface RequiredFormProps {
 	titleSlideActive: boolean,
 	titleSlideMode: string,
+	[key: string]: unknown,
 }
 
 const TitleSlidePage = <T extends RequiredFormProps>({

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

@@ -14,6 +14,7 @@ interface RequiredFormProps {
 	watermarkActive: boolean,
 	watermarkFile: string,
 	watermarkPosition: string,
+	[key: string]: unknown,
 }
 
 const WatermarkPage = <T extends RequiredFormProps>({

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

@@ -4,18 +4,25 @@ import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButt
 import { getAssetUploadOptions } from "../../../../selectors/eventSelectors";
 import { translateOverrideFallback } from "../../../../utils/utils";
 import { useAppSelector } from "../../../../store";
+import { FormikProps } from "formik";
 
 /**
  * This component renders the asset upload page of the new event wizard
  * (only if its not set hidden (see newEventWizardConfig) or user chose UPLOAD as source mode)
  */
-const NewAssetUploadPage = ({
-// @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 {
+	sourceMode: string,
+	[key: string]: any,
+}
+
+const NewAssetUploadPage = <T extends RequiredFormProps>({
 	formik,
+	nextPage,
+	previousPage
+}: {
+	formik: FormikProps<T>,
+	nextPage: (values: T) => void,
+	previousPage: (values: T, twoPagesBack?: boolean) => void,
 }) => {
 	const { t } = useTranslation();
 
@@ -91,8 +98,7 @@ const NewAssetUploadPage = ({
 															className="button-like-anchor remove"
 															onClick={() => {
 																formik.setFieldValue(asset.id, null);
-// @ts-expect-error TS(2531): Object is possibly 'null'.
-																document.getElementById(asset.id).value = "";
+																(document.getElementById(asset.id) as HTMLInputElement).value = "";
 															}}
 														/>
 													</td>

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

@@ -1,21 +1,23 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Field } from "formik";
+import { Field, FormikProps } from "formik";
 import RenderMultiField from "../../../shared/wizard/RenderMultiField";
 import RenderField from "../../../shared/wizard/RenderField";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import { isJson } from "../../../../utils/utils";
 import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils";
+import { MetadataCatalog } from "../../../../slices/eventSlice";
 
-const NewMetadataExtendedPage = ({
-// @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
+const NewMetadataExtendedPage = <T,>({
 	formik,
-// @ts-expect-error TS(7031): Binding element 'extendedMetadataFields' implicitl... Remove this comment to see the full error message
+	nextPage,
+	previousPage,
 	extendedMetadataFields,
+}: {
+	formik: FormikProps<T>,
+	nextPage: (values: T) => void,
+	previousPage: (values: T, twoPagesBack?: boolean) => void,
+	extendedMetadataFields?: MetadataCatalog[],
 }) => {
 	const { t } = useTranslation();
 
@@ -28,7 +30,6 @@ const NewMetadataExtendedPage = ({
 							//iterate through metadata catalogs
 							!!extendedMetadataFields &&
 								extendedMetadataFields.length > 0 &&
-// @ts-expect-error TS(7006): Parameter 'catalog' implicitly has an 'any' type.
 								extendedMetadataFields.map((catalog, index) => (
 									<div className="obj tbl-list" key={index}>
 										<header>
@@ -38,7 +39,6 @@ const NewMetadataExtendedPage = ({
 											<table className="main-tbl">
 												<tbody>
 													{!!catalog.fields &&
-// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type.
 														catalog.fields.map((field, key) => (
 															<tr key={key}>
 																<td>

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

@@ -1,19 +1,25 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Field } from "formik";
+import { Field, FormikProps } from "formik";
 import RenderField from "../../../shared/wizard/RenderField";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import RenderMultiField from "../../../shared/wizard/RenderMultiField";
+import { MetadataCatalog } from "../../../../slices/eventSlice";
 
 /**
  * This component renders the metadata page for new events and series in the wizards.
  */
-const NewMetadataPage = ({
-    metadataFields,
-    nextPage,
-    formik,
-    header
-}: any) => {
+const NewMetadataPage = <T,>({
+	formik,
+	nextPage,
+	metadataFields,
+	header
+}: {
+	formik: FormikProps<T>,
+	nextPage: (values: T) => void,
+	metadataFields: MetadataCatalog,
+	header: string
+}) => {
 	const { t } = useTranslation();
 
 	return (
@@ -29,7 +35,6 @@ const NewMetadataPage = ({
 									<tbody>
 										{/* Render table row for each metadata field depending on type*/}
 										{!!metadataFields.fields &&
-// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type.
 											metadataFields.fields.map((field, key) => (
 												<tr key={key}>
 													<td>

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

@@ -7,18 +7,24 @@ import { setDefaultConfig } from "../../../../utils/workflowPanelUtils";
 import DropDown from "../../../shared/DropDown";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { fetchWorkflowDef } from "../../../../slices/workflowSlice";
+import { FormikProps } from "formik";
 
 /**
  * This component renders the processing page for new events in the new event wizard.
  */
-const NewProcessingPage: React.FC<{
-	previousPage: any	//TODO: Add type
-	nextPage: any	//TODO: Add type
-	formik: any	//TODO: Add type
-}> = ({
-	previousPage,
-	nextPage,
+interface RequiredFormProps {
+	sourceMode: string,
+	processingWorkflow: string,
+}
+
+const NewProcessingPage = <T extends RequiredFormProps>({
 	formik,
+	nextPage,
+	previousPage,
+}: {
+	formik: FormikProps<T>,
+	nextPage: (values: T) => void,
+	previousPage: (values: T, twoPagesBack?: boolean) => void,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -40,8 +46,7 @@ const NewProcessingPage: React.FC<{
 		}
 	};
 
-// @ts-expect-error TS(7006): Parameter 'value' implicitly has an 'any' type.
-	const setDefaultValues = (value) => {
+	const setDefaultValues = (value: string) => {
 		let workflowId = value;
 		// fill values with default configuration of chosen workflow
 		let defaultConfiguration = setDefaultConfig(workflowDef, workflowId);
@@ -103,6 +108,7 @@ const NewProcessingPage: React.FC<{
 											<RenderWorkflowConfig
 												displayDescription
 												workflowId={formik.values.processingWorkflow}
+												// @ts-expect-error TS(7006):
 												formik={formik}
 											/>
 										) : null}

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

@@ -45,13 +45,30 @@ import { checkConflicts } from "../../../../slices/eventSlice";
 /**
  * This component renders the source page for new events in the new event wizard.
  */
-const NewSourcePage = ({
-// @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 {
+	scheduleStartDate: string,
+	sourceMode: string,
+	// Schedule
+	location: string
+	scheduleEndDate: string
+	scheduleStartHour: string
+	scheduleEndHour: string
+	scheduleStartMinute: string
+	scheduleEndMinute: string
+	scheduleDurationHours: string
+	scheduleDurationMinutes: string
+	// checkConflicts
+	repeatOn: string[],
+}
+
+const NewSourcePage = <T extends RequiredFormProps>({
 	formik,
+	nextPage,
+	previousPage,
+}: {
+	formik: FormikProps<T>,
+	nextPage: (values: T) => void,
+	previousPage: (values: T, twoPagesBack?: boolean) => void,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -64,7 +81,6 @@ const NewSourcePage = ({
 		dispatch(fetchRecordings("inputs"));
 
 		// validate form because dependent default values need to be checked
-// @ts-expect-error TS(7006): Parameter 'r' implicitly has an 'any' type.
 		formik.validateForm().then((r) => console.info(r));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
@@ -306,7 +322,7 @@ const Upload = ({ formik }) => {
 					<table className="main-tbl">
 						<tbody>
 							{/* One row for each metadata field*/}
-							{sourceMetadata.UPLOAD.metadata.map((field, key) => (
+							{sourceMetadata.UPLOAD && sourceMetadata.UPLOAD.metadata.map((field, key) => (
 								<tr key={key}>
 									<td>
 										<span>{t(field.label)}</span>
@@ -337,12 +353,12 @@ const Schedule = <T extends {
 	scheduleStartDate: string
 	scheduleEndDate: string
 	sourceMode: string
-	scheduleStartHour: number
-	scheduleEndHour: number
-	scheduleStartMinute: number
-	scheduleEndMinute: number
-	scheduleDurationHours: number
-	scheduleDurationMinutes: number
+	scheduleStartHour: string
+	scheduleEndHour: string
+	scheduleStartMinute: string
+	scheduleEndMinute: string
+	scheduleDurationHours: string
+	scheduleDurationMinutes: string
 }>({
 	formik,
 	inputDevices

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

@@ -4,15 +4,24 @@ import { getSeriesThemes } from "../../../../selectors/seriesSeletctor";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import DropDown from "../../../shared/DropDown";
 import { useAppSelector } from "../../../../store";
+import { FormikProps } from "formik";
 
 /**
  * This component renders the theme page for new series in the new series wizard.
  */
-const NewThemePage = ({
-    formik,
-    nextPage,
-    previousPage,
-}: any) => {
+interface RequiredFormProps {
+	theme: string,
+}
+
+const NewThemePage = <T extends RequiredFormProps>({
+	formik,
+	nextPage,
+	previousPage,
+}: {
+	formik: FormikProps<T>,
+	nextPage: (values: T) => void,
+	previousPage: (values: T, twoPagesBack?: boolean) => void,
+}) => {
 	const { t } = useTranslation();
 
 	const seriesThemes = useAppSelector(state => getSeriesThemes(state));

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

@@ -94,6 +94,7 @@ const StartTaskWorkflowPage = <T extends RequiredFormProps>({
 											<RenderWorkflowConfig
 												displayDescription
 												workflowId={formik.values.workflow}
+												// @ts-expect-error TS(7006):
 												formik={formik}
 											/>
 										</div>