Merge pull request #885 from Arnei/typing-many-ts-expect-errors

Fix even more ts-expect-errors

src/components/configuration/partials/ThemesActionsCell.tsx

@@ -9,15 +9,16 @@ import {
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
-import { deleteTheme } from "../../../slices/themeSlice";
+import { deleteTheme, ThemeDetailsType } from "../../../slices/themeSlice";
 import { Tooltip } from "../../shared/Tooltip";
 
 /**
  * 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,
+}: {
+	row: ThemeDetailsType
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -61,7 +62,6 @@ const ThemesActionsCell = ({
 			{displayThemeDetails && (
 				<ThemeDetailsModal
 					handleClose={hideThemeDetails}
-					themeId={row.id}
 					themeName={row.name}
 				/>
 			)}

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

@@ -10,7 +10,7 @@ import { initialFormValuesNewThemes } from "../../../../configs/modalConfig";
 import { usePageFunctions } from "../../../../hooks/wizardHooks";
 import { NewThemeSchema } from "../../../../utils/validate";
 import { useAppDispatch } from "../../../../store";
-import { postNewTheme } from "../../../../slices/themeSlice";
+import { postNewTheme, ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
 
 /**
  * This component manages the pages of the new theme wizard and the submission of values
@@ -64,7 +64,7 @@ const NewThemeWizard: React.FC<{
 	// Validation schema of current page
 	const currentValidationSchema = NewThemeSchema[page];
 
-	const handleSubmit = (values: any) => {
+	const handleSubmit = (values: ThemeDetailsInitialValues) => {
 		dispatch(postNewTheme(values));
 		close();
 	};

src/components/configuration/partials/wizard/ThemeDetails.tsx

@@ -15,7 +15,7 @@ import ModalNavigation from "../../../shared/modals/ModalNavigation";
 import { NewThemeSchema } from "../../../../utils/validate";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { updateThemeDetails } from "../../../../slices/themeDetailsSlice";
-import { ThemeDetailsType } from "../../../../slices/themeSlice";
+import { ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
 
 /**
  * This component manages the pages of the theme details
@@ -86,7 +86,7 @@ const ThemeDetails : React.FC<{
 	const currentValidationSchema = NewThemeSchema[page];
 
 	// update theme
-	const handleSubmit = (values: ThemeDetailsType) => {
+	const handleSubmit = (values: ThemeDetailsInitialValues) => {
 		dispatch(updateThemeDetails({id: themeDetails.id, values: values}));
 		close();
 	};

src/components/configuration/partials/wizard/ThemeDetailsModal.tsx

@@ -6,10 +6,12 @@ import ThemeDetails from "./ThemeDetails";
  * This component renders the modal for displaying theme details
  */
 const ThemeDetailsModal = ({
-    handleClose,
-    themeId,
-    themeName
-}: any) => {
+	handleClose,
+	themeName
+}: {
+	handleClose: () => void,
+	themeName: string
+}) => {
 	const { t } = useTranslation();
 
 	const close = () => {

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

@@ -31,8 +31,7 @@ const WatermarkPage = <T extends RequiredFormProps>({
 }) => {
 	const { t } = useTranslation();
 
-// @ts-expect-error TS(7006): Parameter 'position' implicitly has an 'any' type.
-	const handleButtonClick = (position) => {
+	const handleButtonClick = (position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight") => {
 		formik.setFieldValue("watermarkPosition", position);
 	};
 

src/components/events/partials/EventActionCell.tsx

@@ -39,8 +39,7 @@ const EventActionCell = ({
 		setDeleteConfirmation(false);
 	};
 
-// @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type.
-	const deletingEvent = (id) => {
+	const deletingEvent = (id: string) => {
 		dispatch(deleteEvent(id));
 	};
 

src/components/events/partials/EventsNotesCell.tsx

@@ -36,14 +36,14 @@ const EventsNotesCell = ({
 		});
 	 }
 
-	const updateComment = (event: React.ChangeEvent<HTMLTextAreaElement>, commentId: any) => {
+	const updateComment = (event: React.ChangeEvent<HTMLTextAreaElement>, commentId: number) => {
 		if (!event.target.value || !row.id || !commentId) {
 			return;
 		}
 		dispatch(updateNewComment({eventId: row.id, commentId, commentText: event.target.value, commentReason: notesCommentReason}))
 	}
 
-	const deleteComment = (event: React.FocusEvent<HTMLTextAreaElement>, commentId: any) => {
+	const deleteComment = (event: React.FocusEvent<HTMLTextAreaElement>, commentId: number) => {
 		if (!row.id || !commentId) {
 			return;
 		}

src/components/events/partials/EventsSeriesCell.tsx

@@ -22,28 +22,31 @@ const EventsSeriesCell = ({
 	const filterMap = useAppSelector(state => getFilters(state));
 
 	// Filter with value of current cell
-// @ts-expect-error TS(7006): Parameter 'series' implicitly has an 'any' type.
-	const addFilter = async (series) => {
+	const addFilter = async (seriesId: string) => {
 		let filter = filterMap.find(({ name }) => name === "series");
 		if (!!filter) {
-			await dispatch(editFilterValue({filterName: filter.name, value: series.id}));
+			await dispatch(editFilterValue({filterName: filter.name, value: seriesId}));
 			await dispatch(fetchEvents());
 			dispatch(loadEventsIntoTable());
 		}
 	};
 
 	return (
-		!!row.series && (
+		!!row.series ? (
 			// Link template for series of event
 			<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.SERIES")}>
 				<button
 					className="button-like-anchor crosslink"
-					onClick={() => addFilter(row.series)}
+					onClick={() => row.series
+						? addFilter(row.series.id)
+						: console.error("Tried to sort by a series, but the series did not exist.")
+					}
 				>
 					{row.series.title}
 				</button>
 			</Tooltip>
 		)
+		: <></>
 	);
 };
 

src/components/events/partials/EventsTechnicalDateCell.tsx

@@ -37,8 +37,7 @@ const EventsTechnicalDateCell = ({
 		<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}>
 			<button
 				className="button-like-anchor crosslink"
-// @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
-				onClick={() => addFilter()}
+				onClick={() => addFilter(row.date)}
 			>
 				{t("dateFormats.date.short", { date: renderValidDate(row.technical_start) })}
 			</button>

src/components/events/partials/ModalTabsAndPages/DetailsExtendedMetadataTab.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Formik } from "formik";
+import { Formik, FormikProps } from "formik";
 import { Field } from "../../../shared/Field";
 import cn from "classnames";
 import _ from "lodash";
@@ -13,8 +13,10 @@ import {
 	parseValueForBooleanStrings,
 } from "../../../../utils/utils";
 import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils";
-import { useAppSelector } from "../../../../store";
+import { useAppDispatch, useAppSelector } from "../../../../store";
 import { MetadataCatalog } from "../../../../slices/eventSlice";
+import { AsyncThunk } from "@reduxjs/toolkit";
+import { AsyncThunkConfig } from "@reduxjs/toolkit/dist/createAsyncThunk";
 
 /**
  * This component renders metadata details of a certain event or series
@@ -28,34 +30,37 @@ const DetailsExtendedMetadataTab = ({
 	resourceId: string,
 	editAccessRole: string,
 	metadata: MetadataCatalog[],
-	updateResource: (id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
+	updateResource: AsyncThunk<void, {
+		id: string;
+		values: { [key: string]: any; };
+		catalog: MetadataCatalog;
+	}, AsyncThunkConfig> //(id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const handleSubmit = (values: { [key: string]: any }, catalog: MetadataCatalog) => {
-		updateResource(resourceId, values, catalog);
+		dispatch(updateResource({id: resourceId, values, catalog}));
 	};
 
 	// set current values of metadata fields as initial values
 	const getInitialValues = (metadataCatalog: MetadataCatalog) => {
-		let initialValues = {};
+		let initialValues: { [key: string]: any } = {};
 
 		// Transform metadata fields and their values provided by backend (saved in redux)
 		if (!!metadataCatalog.fields && metadataCatalog.fields.length > 0) {
 			metadataCatalog.fields.forEach((field) => {
 				let value = parseValueForBooleanStrings(field.value);
-// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
 				initialValues[field.id] = value;
 			});
 		}
 
 		return initialValues;
 	};
 
-// @ts-expect-error TS(7006): Parameter 'formik' implicitly has an 'any' type.
-	const checkValidity = (formik) => {
+	const checkValidity = (formik: FormikProps<{}>) => {
 		if (formik.dirty && formik.isValid && hasAccess(editAccessRole, user)) {
 			// check if user provided values differ from initial ones
 			return !_.isEqual(formik.values, formik.initialValues);
@@ -154,7 +159,7 @@ const DetailsExtendedMetadataTab = ({
 														</button>
 														<button
 															className="cancel"
-															onClick={() => formik.resetForm({ values: "" })}
+															onClick={() => formik.resetForm()}
 														>
 															{t("CANCEL")}
 														</button>

src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Formik } from "formik";
+import { Formik, FormikProps } from "formik";
 import { Field } from "../../../shared/Field";
 import cn from "classnames";
 import _ from "lodash";
@@ -11,8 +11,10 @@ import RenderField from "../../../shared/wizard/RenderField";
 import { getUserInformation } from "../../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../../utils/utils";
 import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils";
-import { useAppSelector } from "../../../../store";
+import { useAppDispatch, useAppSelector } from "../../../../store";
 import { MetadataCatalog } from "../../../../slices/eventSlice";
+import { AsyncThunk } from "@reduxjs/toolkit";
+import { AsyncThunkConfig } from "@reduxjs/toolkit/dist/createAsyncThunk";
 
 /**
  * This component renders metadata details of a certain event or series
@@ -25,22 +27,23 @@ const DetailsMetadataTab = ({
 	editAccessRole,
 }: {
 	metadataFields: MetadataCatalog,
-	updateResource: (id: string, values: { [key: string]: any }) => void,
+	updateResource: AsyncThunk<void, { id: string; values: { [key: string]: any; }; }, AsyncThunkConfig>
 	resourceId: string,
 	header: string,
 	editAccessRole: string,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const handleSubmit = (values: { [key: string]: any }) => {
-		updateResource(resourceId, values);
+		dispatch(updateResource({id: resourceId, values}));
 	};
 
 	// set current values of metadata fields as initial values
 	const getInitialValues = () => {
-		let initialValues = {};
+		let initialValues: { [key: string]: string | string[] } = {};
 
 		// Transform metadata fields and their values provided by backend (saved in redux)
 		if (
@@ -49,16 +52,14 @@ const DetailsMetadataTab = ({
 			metadataFields.fields.length > 0
 		) {
 			metadataFields.fields.forEach((field) => {
-// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
 				initialValues[field.id] = field.value;
 			});
 		}
 
 		return initialValues;
 	};
 
-// @ts-expect-error TS(7006): Parameter 'formik' implicitly has an 'any' type.
-	const checkValidity = (formik) => {
+	const checkValidity = (formik: FormikProps<{ [key: string]: string | string[] }>) => {
 		if (formik.dirty && formik.isValid && hasAccess(editAccessRole, user)) {
 			// check if user provided values differ from initial ones
 			return !_.isEqual(formik.values, formik.initialValues);
@@ -152,7 +153,7 @@ const DetailsMetadataTab = ({
 												</button>
 												<button
 													className="cancel"
-													onClick={() => formik.resetForm({ values: "" })}
+													onClick={() => formik.resetForm()}
 												>
 													{t("CANCEL")}
 												</button>

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

@@ -17,8 +17,8 @@ import { removeNotificationWizardForm } from "../../../../slices/notificationSli
 import {
 	Event,
 	EditedEvents,
-	checkForSchedulingConflicts,
 	fetchScheduling,
+	Conflict,
 } from "../../../../slices/eventSlice";
 import { Recording } from "../../../../slices/recordingSlice";
 import lodash, { groupBy } from "lodash";
@@ -44,19 +44,14 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 	previousPage: (values: T) => void,
 	setPageCompleted: (rec: Record<number, boolean>) => void,
 	inputDevices: Recording[],
-	conflictState: { conflicts: any, setConflicts: any },
+	conflictState: { conflicts: Conflict[], setConflicts: (conflicts: Conflict[]) => void },
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	const loading = useAppSelector(state => isLoadingScheduling(state));
 	const seriesOptions = useAppSelector(state => getSchedulingSeriesOptions(state));
 
-	// TODO: Get rid of the wrappers when modernizing redux is done
-	const checkForSchedulingConflictsWrapper = async(events: any) => {
-		return dispatch(checkForSchedulingConflicts(events));
-	}
-
 	const user = useAppSelector(state => getUserInformation(state));
 
 	useEffect(() => {
@@ -140,9 +135,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 										<th>{t("EVENTS.EVENTS.TABLE.START")}</th>
 										<th>{t("EVENTS.EVENTS.TABLE.END")}</th>
 									</tr>
-{/* @ts-expect-error TS(7006): Parameter 'conflict' implicitly has an 'any' type. */}
 									{conflicts.map((conflict) =>
-// @ts-expect-error TS(7006): Parameter 'c' implicitly has an 'any' type.
 										conflict.conflicts.map((c, key) => (
 											<tr key={key}>
 												<td>{conflict.eventId}</td>
@@ -543,7 +536,6 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 							await checkSchedulingConflicts(
 								formik.values,
 								setConflicts,
-								checkForSchedulingConflictsWrapper,
 								dispatch
 							)
 						) {