Merge pull request #1181 from JulianKniephoff/unused-stuff

Some minor refactorings

Author: Arnei

src/components/events/partials/modals/EventDetails.tsx

@@ -72,13 +72,11 @@ export type AssetTabHierarchy = "entry" | "add-asset" | "asset-attachments" | "a
  */
 const EventDetails = ({
 	eventId,
-	close,
 	policyChanged,
 	setPolicyChanged,
 	formikRef,
 }: {
 	eventId: string,
-	close?: () => void,
 	policyChanged: boolean,
 	setPolicyChanged: (value: boolean) => void,
 	formikRef: React.RefObject<FormikProps<any> | null>

src/components/events/partials/modals/EventDetailsModal.tsx

@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { getModalEvent } from "../../../../selectors/eventDetailsSelectors";
 import { setModalEvent, setShowModal } from "../../../../slices/eventDetailsSlice";
-import { Modal, ModalHandle } from "../../../shared/modals/Modal";
+import { Modal } from "../../../shared/modals/Modal";
 import { FormikProps } from "formik";
 
 /**
@@ -14,7 +14,6 @@ import { FormikProps } from "formik";
 const EventDetailsModal = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
-	const modalRef = useRef<ModalHandle>(null);
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
@@ -53,7 +52,6 @@ const EventDetailsModal = () => {
 			closeCallback={close}
 			header={t("EVENTS.EVENTS.DETAILS.HEADER", { name: event.title })}
 			classId="details-modal"
-			ref={modalRef}
 		>
 			<EventDetails
 				eventId={event.id}

src/components/shared/modals/Modal.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, PropsWithChildren, useImperativeHandle, useState } from "react";
+import { forwardRef, PropsWithChildren, useCallback, useImperativeHandle, useState } from "react";
 import ReactDOM from "react-dom";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../configs/hotkeysConfig";
@@ -40,23 +40,23 @@ export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(({
 	const { t } = useTranslation();
 
 	const [isOpen, setOpen] = useState(open);
+	const close = useCallback(() => {
+		if (closeCallback !== undefined && !closeCallback()) {
+			// Don't close modal
+			return;
+		}
+		setOpen(false);
+	}, [closeCallback]);
 
 	useImperativeHandle(ref, () => ({
 		isOpen: () => isOpen,
 		open: () => setOpen(true),
-		close: () => {
-			if (closeCallback !== undefined && !closeCallback()) {
-				// Don't close modal
-				return;
-			}
-			setOpen(false);
-		},
-	}), [closeCallback, isOpen]);
+		close,
+	}), [close, isOpen]);
 
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
-		//@ts-expect-error: TODO: Figure out what typescripts problem is
-		() => ref?.current.close?.(),
+		close,
 		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
 		[ref],
 	);
@@ -72,8 +72,7 @@ export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(({
 					<header>
 						<ButtonLikeAnchor
 							extraClassName="fa fa-times close-modal"
-							//@ts-expect-error: TODO: Figure out what typescripts problem is
-							onClick={() => ref?.current.close?.()}
+							onClick={close}
 							tabIndex={0}
 						/>
 						<h2>