From a42bdb60d8d8652f373dceb1b04e2f4b9605695b Mon Sep 17 00:00:00 2001
From: Dwynr <dwynr@outlook.de>
Date: Wed, 11 Sep 2024 04:16:59 +0200
Subject: [PATCH] feat: improve event info dialog

---
 .../settings/events/dialog/content.tsx        |  6 +++-
 .../settings/events/dialog/index.tsx          | 14 ++++++--
 src/components/settings/events/event.tsx      | 32 +++++++++++++------
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/components/settings/events/dialog/content.tsx b/src/components/settings/events/dialog/content.tsx
index fa72671e..b4f5bb53 100644
--- a/src/components/settings/events/dialog/content.tsx
+++ b/src/components/settings/events/dialog/content.tsx
@@ -15,7 +15,7 @@ export type Event = {
 	}
 }
 
-export const Content = memo(({ uuid }: { uuid: string }) => {
+export const Content = memo(({ uuid, icon, text }: { uuid: string; icon: JSX.Element; text: string }) => {
 	const query = useQuery({
 		queryKey: ["fetchEvent", uuid],
 		queryFn: () => worker.fetchEvent({ uuid }) as Promise<Event>
@@ -62,6 +62,10 @@ export const Content = memo(({ uuid }: { uuid: string }) => {
 
 	return (
 		<div className="flex flex-col mt-2 gap-2">
+			<div className="flex flex-row bg-secondary rounded-md p-2 px-2.5 gap-2">
+				<div className="flex flex-row shrink-0">{icon}</div>
+				<p>{text}</p>
+			</div>
 			<div className="flex flex-row bg-secondary rounded-md p-2 px-2.5 justify-between items-center">
 				<p className="text-muted-foreground text-sm">{uuid}</p>
 				<Copy
diff --git a/src/components/settings/events/dialog/index.tsx b/src/components/settings/events/dialog/index.tsx
index 6a1f9e44..01d27379 100644
--- a/src/components/settings/events/dialog/index.tsx
+++ b/src/components/settings/events/dialog/index.tsx
@@ -7,6 +7,8 @@ import { useTranslation } from "react-i18next"
 export const EventDialog = memo(() => {
 	const [open, setOpen] = useState<boolean>(false)
 	const [uuid, setUUID] = useState<string | null>(null)
+	const [icon, setIcon] = useState<JSX.Element | null>(null)
+	const [text, setText] = useState<string>("")
 	const { t } = useTranslation()
 
 	const preventDefault = useCallback((e: Event) => {
@@ -15,8 +17,10 @@ export const EventDialog = memo(() => {
 	}, [])
 
 	useEffect(() => {
-		const listener = eventEmitter.on("openEventDialog", (id: string) => {
+		const listener = eventEmitter.on("openEventDialog", ({ id, text, icon }: { id: string; text: string; icon: JSX.Element }) => {
 			setUUID(id)
+			setIcon(icon)
+			setText(text)
 			setOpen(true)
 		})
 
@@ -36,7 +40,13 @@ export const EventDialog = memo(() => {
 				onOpenAutoFocus={preventDefault}
 			>
 				<DialogHeader>{t("dialogs.event.title")}</DialogHeader>
-				{uuid && <Content uuid={uuid} />}
+				{uuid && icon && text && (
+					<Content
+						uuid={uuid}
+						icon={icon}
+						text={text}
+					/>
+				)}
 				<DialogFooter />
 			</DialogContent>
 		</Dialog>
diff --git a/src/components/settings/events/event.tsx b/src/components/settings/events/event.tsx
index 60b513cc..c84f46ae 100644
--- a/src/components/settings/events/event.tsx
+++ b/src/components/settings/events/event.tsx
@@ -189,16 +189,9 @@ export const Event = memo(({ event, account }: { event: UserEvent; account: User
 		}
 	}, [event, t])
 
-	const open = useCallback(() => {
-		eventEmitter.emit("openEventDialog", event.uuid)
-	}, [event.uuid])
-
-	return (
-		<div
-			className="flex flex-row border-b items-center p-4 py-3 justify-between gap-10 hover:bg-secondary hover:rounded-md w-full cursor-pointer"
-			onClick={open}
-		>
-			<div className="flex flex-row gap-3 items-center">
+	const eventIcon = useMemo(() => {
+		return (
+			<>
 				{event.type === "folderColorChanged" ||
 				event.type === "folderLinkEdited" ||
 				event.type === "baseFolderCreated" ||
@@ -245,6 +238,25 @@ export const Event = memo(({ event, account }: { event: UserEvent; account: User
 						size={24}
 					/>
 				)}
+			</>
+		)
+	}, [account.avatarURL, event.info, event.type])
+
+	const open = useCallback(() => {
+		eventEmitter.emit("openEventDialog", {
+			id: event.uuid,
+			icon: eventIcon,
+			text: eventText
+		})
+	}, [event.uuid, eventIcon, eventText])
+
+	return (
+		<div
+			className="flex flex-row border-b items-center p-4 py-3 justify-between gap-10 hover:bg-secondary hover:rounded-md w-full cursor-pointer"
+			onClick={open}
+		>
+			<div className="flex flex-row gap-3 items-center">
+				{eventIcon}
 				<p className="line-clamp-1 text-ellipsis break-all">{eventText}</p>
 			</div>
 			<p className="text-muted-foreground text-sm shrink-0">{simpleDate(event.timestamp)}</p>