diff --git a/src/app/channel/components/blacklist.tsx b/src/app/channel/components/blacklist.tsx index 4911aa4f..ad6689bb 100644 --- a/src/app/channel/components/blacklist.tsx +++ b/src/app/channel/components/blacklist.tsx @@ -1,7 +1,7 @@ import MutedItem from '@lume/app/channel/components/mutedItem'; +import MuteIcon from '@lume/shared/icons/mute'; import { Popover, Transition } from '@headlessui/react'; -import { MicMute } from 'iconoir-react'; import { Fragment } from 'react'; export default function ChannelBlackList({ blacklist }: { blacklist: any }) { @@ -14,7 +14,7 @@ export default function ChannelBlackList({ blacklist }: { blacklist: any }) { open ? 'bg-zinc-800 hover:bg-zinc-700' : 'bg-zinc-900 hover:bg-zinc-800' }`} > - + { + setIsOpen(false); + }; + + const openModal = () => { + setIsOpen(true); + }; + const hideMessage = () => { if (!isError && !isLoading && account) { const event: any = { @@ -26,19 +41,98 @@ export default function MessageHideButton({ id }: { id: string }) { // publish note pool.publish(event, WRITEONLY_RELAYS); + // update local state + const cloneMessages = [...messages]; + const targetMessage = cloneMessages.findIndex((message) => message.id === id); + cloneMessages[targetMessage]['hide'] = true; + setMessages(cloneMessages); + // close modal + closeModal(); } else { console.log('error'); } }; return ( - - - + <> + + + + + + +
+ +
+ + +
+
+
+ + Are you sure! + + +
+ + This message will be hidden from your feed. + +
+
+
+
+ + +
+
+ + +
+
+ + ); } diff --git a/src/app/channel/components/messages/item.tsx b/src/app/channel/components/messages/item.tsx index 48b906f9..116277d0 100644 --- a/src/app/channel/components/messages/item.tsx +++ b/src/app/channel/components/messages/item.tsx @@ -20,7 +20,7 @@ export default function ChannelMessageItem({ data }: { data: any }) {
-
+
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 ( - - - + <> + + + + + + +
+ +
+ + +
+
+
+ + Are you sure! + + +
+ + You will no longer see messages from this user. + +
+
+
+
+ + +
+
+ + +
+
+ + ); } 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 ( + + + + ); +}