From 5da82f5eb7abd3a9968d6dc878b922d0dcb55a73 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Wed, 12 Apr 2023 16:08:28 +0700
Subject: [PATCH] added hide message button

---
 .../channels/messages/hideMessageButton.tsx   | 84 +++++++++++++++++++
 src/components/channels/messages/item.tsx     |  7 +-
 src/pages/channels/[id].tsx                   | 15 +++-
 3 files changed, 97 insertions(+), 9 deletions(-)
 create mode 100644 src/components/channels/messages/hideMessageButton.tsx

diff --git a/src/components/channels/messages/hideMessageButton.tsx b/src/components/channels/messages/hideMessageButton.tsx
new file mode 100644
index 00000000..d6d4255c
--- /dev/null
+++ b/src/components/channels/messages/hideMessageButton.tsx
@@ -0,0 +1,84 @@
+import { RelayContext } from '@components/relaysProvider';
+
+import { dateToUnix } from '@utils/getDate';
+
+import HideIcon from '@assets/icons/hide';
+
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import useLocalStorage from '@rehooks/local-storage';
+import { getEventHash, signEvent } from 'nostr-tools';
+import { useCallback, useContext } from 'react';
+
+export const HideMessageButton = ({ id }: { id: string }) => {
+  const [pool, relays]: any = useContext(RelayContext);
+  const [activeAccount]: any = useLocalStorage('activeAccount', {});
+
+  const hideMessage = useCallback(() => {
+    const event: any = {
+      content: '',
+      created_at: dateToUnix(),
+      kind: 43,
+      pubkey: activeAccount.pubkey,
+      tags: [['e', id]],
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, activeAccount.privkey);
+
+    // publish note
+    pool.publish(event, relays);
+  }, [id, activeAccount.privkey, activeAccount.pubkey, pool, relays]);
+
+  return (
+    <AlertDialog.Root>
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <AlertDialog.Trigger asChild>
+            <Tooltip.Trigger asChild>
+              <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
+                <HideIcon className="h-4 w-4 text-zinc-400" />
+              </button>
+            </Tooltip.Trigger>
+          </AlertDialog.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className="select-none rounded-md bg-zinc-800 px-4 py-2 text-sm leading-none text-zinc-100 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+              sideOffset={4}
+            >
+              Hide this message
+              <Tooltip.Arrow className="fill-zinc-800" />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
+        <AlertDialog.Content className="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-zinc-900 p-6 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] ring-1 ring-zinc-800 focus:outline-none data-[state=open]:animate-contentShow">
+          <AlertDialog.Title className="m-0 font-medium text-zinc-100">Are you absolutely sure?</AlertDialog.Title>
+          <AlertDialog.Description className="mb-5 mt-4 text-zinc-400">
+            This action cannot be undone. This will permanently hide this message and you will never see this again
+          </AlertDialog.Description>
+          <div className="flex justify-end gap-4">
+            <AlertDialog.Cancel asChild>
+              <button
+                autoFocus={false}
+                className="inline-flex h-9 items-center justify-center rounded px-4 font-medium leading-none text-zinc-200 outline-none hover:bg-zinc-900 focus:shadow-[0_0_0_2px]"
+              >
+                Cancel
+              </button>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <button
+                autoFocus={false}
+                onClick={() => hideMessage()}
+                className="inline-flex h-9 items-center justify-center rounded bg-red-500 px-4 font-medium leading-none text-white outline-none hover:bg-red-600 focus:shadow-[0_0_0_2px] focus:shadow-red-700"
+              >
+                Yes, hide this message
+              </button>
+            </AlertDialog.Action>
+          </div>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+};
diff --git a/src/components/channels/messages/item.tsx b/src/components/channels/messages/item.tsx
index ecc5d39d..7aae21ac 100644
--- a/src/components/channels/messages/item.tsx
+++ b/src/components/channels/messages/item.tsx
@@ -1,9 +1,8 @@
+import { HideMessageButton } from '@components/channels/messages/hideMessageButton';
 import { MuteButton } from '@components/channels/messages/muteButton';
 import { ReplyButton } from '@components/channels/messages/replyButton';
 import { MessageUser } from '@components/chats/messageUser';
 
-import HideIcon from '@assets/icons/hide';
-
 import { memo } from 'react';
 
 const ChannelMessageItem = ({ data }: { data: any }) => {
@@ -22,9 +21,7 @@ const ChannelMessageItem = ({ data }: { data: any }) => {
       <div className="absolute -top-4 right-4 z-10 hidden group-hover:inline-flex">
         <div className="inline-flex h-7 items-center justify-center gap-1 rounded bg-zinc-900 px-0.5 shadow-md shadow-black/20 ring-1 ring-zinc-800">
           <ReplyButton id={data.id} pubkey={data.pubkey} content={data.content} />
-          <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
-            <HideIcon className="h-4 w-4 text-zinc-400" />
-          </button>
+          <HideMessageButton id={data.id} />
           <MuteButton pubkey={data.pubkey} />
         </div>
       </div>
diff --git a/src/pages/channels/[id].tsx b/src/pages/channels/[id].tsx
index 1a02c121..1cd62f1d 100644
--- a/src/pages/channels/[id].tsx
+++ b/src/pages/channels/[id].tsx
@@ -32,6 +32,7 @@ export default function Page() {
   const resetChannelReply = useResetAtom(channelReplyAtom);
 
   const muted = useRef(new Set());
+  const hided = useRef(new Set());
 
   useEffect(() => {
     // reset channel reply
@@ -41,12 +42,12 @@ export default function Page() {
       [
         {
           authors: [activeAccount.pubkey],
-          kinds: [44],
+          kinds: [43, 44],
           since: 0,
         },
         {
           '#e': [id],
-          kinds: [42, 43],
+          kinds: [42],
           since: 0,
         },
       ],
@@ -54,8 +55,14 @@ export default function Page() {
       (event: any) => {
         if (event.kind === 44) {
           muted.current = muted.current.add(event.tags[0][1]);
-        } else if (event.kind === 42) {
-          if (!muted.current.has(event.pubkey)) {
+        } else if (event.kind === 43) {
+          hided.current = hided.current.add(event.tags[0][1]);
+        } else {
+          if (muted.current.has(event.pubkey)) {
+            console.log('muted');
+          } else if (hided.current.has(event.id)) {
+            console.log('hided');
+          } else {
             setMessages((messages) => [event, ...messages]);
           }
         }