From af3eb754f7c9643f298445fd028e37882882a5c0 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Fri, 24 Dec 2021 17:20:05 +0000
Subject: [PATCH] feat(messaging): hide new message bar on esc or sent message

---
 src/components/common/messaging/MessageBox.tsx       |  1 +
 src/components/common/messaging/bars/NewMessages.tsx | 11 +++++++++++
 src/lib/eventEmitter.ts                              |  1 +
 3 files changed, 13 insertions(+)

diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index 330db243..e03e3b45 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -192,6 +192,7 @@ export default observer(({ channel }: Props) => {
         if (uploadState.type === "attached") return sendFile(content);
         if (content.length === 0) return;
 
+        internalEmit("NewMessages", "hide");
         stopTyping();
         setMessage();
         setReplies([]);
diff --git a/src/components/common/messaging/bars/NewMessages.tsx b/src/components/common/messaging/bars/NewMessages.tsx
index e4051d76..ef00f2d6 100644
--- a/src/components/common/messaging/bars/NewMessages.tsx
+++ b/src/components/common/messaging/bars/NewMessages.tsx
@@ -6,6 +6,7 @@ import { decodeTime } from "ulid";
 
 import { useEffect, useState } from "preact/hooks";
 
+import { internalSubscribe } from "../../../../lib/eventEmitter";
 import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 import { dayjs } from "../../../../context/Locale";
@@ -15,7 +16,17 @@ import { Bar } from "./JumpToBottom";
 export default observer(
     ({ channel, last_id }: { channel: Channel; last_id?: string }) => {
         const [hidden, setHidden] = useState(false);
+        const hide = () => setHidden(true);
+
         useEffect(() => setHidden(false), [last_id]);
+        useEffect(() => internalSubscribe("NewMessages", "hide", hide), []);
+        useEffect(() => {
+            const onKeyDown = (e: KeyboardEvent) =>
+                e.key === "Escape" && hide();
+
+            document.addEventListener("keydown", onKeyDown);
+            return () => document.removeEventListener("keydown", onKeyDown);
+        }, []);
 
         const renderer = getRenderer(channel);
         const history = useHistory();
diff --git a/src/lib/eventEmitter.ts b/src/lib/eventEmitter.ts
index 51227f27..b4f86958 100644
--- a/src/lib/eventEmitter.ts
+++ b/src/lib/eventEmitter.ts
@@ -29,3 +29,4 @@ export function internalEmit(ns: string, event: string, ...args: unknown[]) {
 // - ReplyBar/add
 // - Modal/close
 // - PWA/update
+// - NewMessages/hide