feat: improve event info dialog

FilenCloudDienste · Sep 11, 2024 · a42bdb6 · a42bdb6
1 parent 65f5960
commit a42bdb6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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>