diff --git a/src/app/channel/components/messages/muteButton.tsx b/src/app/channel/components/messages/muteButton.tsx
index 7d4ec009..b8f28637 100644
--- a/src/app/channel/components/messages/muteButton.tsx
+++ b/src/app/channel/components/messages/muteButton.tsx
@@ -1,17 +1,32 @@
+import CancelIcon from '@lume/shared/icons/cancel';
+import MuteIcon from '@lume/shared/icons/mute';
import { RelayContext } from '@lume/shared/relayProvider';
import Tooltip from '@lume/shared/tooltip';
+import { channelMessagesAtom } from '@lume/stores/channel';
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
import { dateToUnix } from '@lume/utils/getDate';
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
-import { MicMute } from 'iconoir-react';
+import { Dialog, Transition } from '@headlessui/react';
+import { useAtom } from 'jotai';
import { getEventHash, signEvent } from 'nostr-tools';
-import { useContext } from 'react';
+import { Fragment, useContext, useState } from 'react';
export default function MessageMuteButton({ pubkey }: { pubkey: string }) {
const pool: any = useContext(RelayContext);
const { account, isError, isLoading } = useActiveAccount();
+ const [messages, setMessages] = useAtom(channelMessagesAtom);
+ const [isOpen, setIsOpen] = useState(false);
+
+ const closeModal = () => {
+ setIsOpen(false);
+ };
+
+ const openModal = () => {
+ setIsOpen(true);
+ };
+
const muteUser = () => {
if (!isError && !isLoading && account) {
const event: any = {
@@ -26,19 +41,97 @@ export default function MessageMuteButton({ pubkey }: { pubkey: string }) {
// publish note
pool.publish(event, WRITEONLY_RELAYS);
+ // update local state
+ const cloneMessages = [...messages];
+ const finalMessages = cloneMessages.filter((message) => message.pubkey !== pubkey);
+ setMessages(finalMessages);
+ // close modal
+ closeModal();
} else {
console.log('error');
}
};
return (
-
-
-
+ <>
+
+
+
+
+
+
+
);
}
diff --git a/src/app/channel/components/messages/replyButton.tsx b/src/app/channel/components/messages/replyButton.tsx
index 277d3830..436c867d 100644
--- a/src/app/channel/components/messages/replyButton.tsx
+++ b/src/app/channel/components/messages/replyButton.tsx
@@ -1,7 +1,7 @@
+import ReplyMessageIcon from '@lume/shared/icons/replyMessage';
import Tooltip from '@lume/shared/tooltip';
import { channelReplyAtom } from '@lume/stores/channel';
-import { Reply } from 'iconoir-react';
import { useSetAtom } from 'jotai';
export default function MessageReplyButton({ id, pubkey, content }: { id: string; pubkey: string; content: string }) {
@@ -12,12 +12,12 @@ export default function MessageReplyButton({ id, pubkey, content }: { id: string
};
return (
-
+
);
diff --git a/src/app/channel/pages/index.page.tsx b/src/app/channel/pages/index.page.tsx
index 145071b7..f050c30a 100644
--- a/src/app/channel/pages/index.page.tsx
+++ b/src/app/channel/pages/index.page.tsx
@@ -64,6 +64,8 @@ export function Page() {
const message: any = event;
if (hided.includes(event.id)) {
message['hide'] = true;
+ } else {
+ message['hide'] = false;
}
if (!muted.includes(event.pubkey)) {
setChannelMessages((prev) => [...prev, message]);
@@ -77,10 +79,18 @@ export function Page() {
});
useEffect(() => {
- // reset channel reply
- resetChannelReply();
- // reset channel messages
- resetChannelMessages();
+ let ignore = false;
+
+ if (!ignore) {
+ // reset channel reply
+ resetChannelReply();
+ // reset channel messages
+ resetChannelMessages();
+ }
+
+ return () => {
+ ignore = true;
+ };
});
return (
diff --git a/src/app/chat/pages/index.page.tsx b/src/app/chat/pages/index.page.tsx
index 9a6b0aad..1bb9768e 100644
--- a/src/app/chat/pages/index.page.tsx
+++ b/src/app/chat/pages/index.page.tsx
@@ -52,8 +52,16 @@ export function Page() {
});
useEffect(() => {
- // reset channel messages
- resetChatMessages();
+ let ignore = false;
+
+ if (!ignore) {
+ // reset chat messages
+ resetChatMessages();
+ }
+
+ return () => {
+ ignore = true;
+ };
});
return (
diff --git a/src/shared/icons/hide.tsx b/src/shared/icons/hide.tsx
new file mode 100644
index 00000000..f605cd70
--- /dev/null
+++ b/src/shared/icons/hide.tsx
@@ -0,0 +1,12 @@
+import { SVGProps } from 'react';
+
+export default function HideIcon(props: JSX.IntrinsicAttributes & SVGProps) {
+ return (
+
+ );
+}
diff --git a/src/shared/icons/mute.tsx b/src/shared/icons/mute.tsx
new file mode 100644
index 00000000..70690451
--- /dev/null
+++ b/src/shared/icons/mute.tsx
@@ -0,0 +1,18 @@
+import { SVGProps } from 'react';
+
+export default function MuteIcon(props: JSX.IntrinsicAttributes & SVGProps) {
+ return (
+
+ );
+}
diff --git a/src/shared/icons/replyMessage.tsx b/src/shared/icons/replyMessage.tsx
new file mode 100644
index 00000000..a3aec4fe
--- /dev/null
+++ b/src/shared/icons/replyMessage.tsx
@@ -0,0 +1,14 @@
+import { SVGProps } from 'react';
+
+export default function ReplyMessageIcon(props: JSX.IntrinsicAttributes & SVGProps) {
+ return (
+
+ );
+}