From 5b953b9ed4ce80b46edfb9d5b79f872d12896aff Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Wed, 12 Apr 2023 15:51:17 +0700 Subject: [PATCH] added mute button to channel --- package.json | 1 + pnpm-lock.yaml | 22 +++++ src/components/channels/messages/item.tsx | 6 +- .../channels/messages/muteButton.tsx | 85 +++++++++++++++++++ .../multiAccounts/activeAccount.tsx | 2 +- src/pages/channels/[id].tsx | 22 ++++- 6 files changed, 130 insertions(+), 8 deletions(-) create mode 100644 src/components/channels/messages/muteButton.tsx diff --git a/package.json b/package.json index 0a18ad76..e9e96f80 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dependencies": { "@emoji-mart/data": "^1.1.2", "@emoji-mart/react": "^1.1.1", + "@radix-ui/react-alert-dialog": "^1.0.3", "@radix-ui/react-collapsible": "^1.0.2", "@radix-ui/react-dialog": "^1.0.3", "@radix-ui/react-dropdown-menu": "^2.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f17b177c..d534a344 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,6 +3,7 @@ lockfileVersion: 5.4 specifiers: '@emoji-mart/data': ^1.1.2 '@emoji-mart/react': ^1.1.1 + '@radix-ui/react-alert-dialog': ^1.0.3 '@radix-ui/react-collapsible': ^1.0.2 '@radix-ui/react-dialog': ^1.0.3 '@radix-ui/react-dropdown-menu': ^2.0.4 @@ -56,6 +57,7 @@ specifiers: dependencies: '@emoji-mart/data': 1.1.2 '@emoji-mart/react': 1.1.1_kyrnz3vmphzqyjjk2ivrm6bcsu + '@radix-ui/react-alert-dialog': 1.0.3_zn3vyfk3tbnwebg5ldvieekjaq '@radix-ui/react-collapsible': 1.0.2_biqbaboplfbrettd7655fr4n2y '@radix-ui/react-dialog': 1.0.3_zn3vyfk3tbnwebg5ldvieekjaq '@radix-ui/react-dropdown-menu': 2.0.4_zn3vyfk3tbnwebg5ldvieekjaq @@ -563,6 +565,26 @@ packages: '@babel/runtime': 7.21.0 dev: false + /@radix-ui/react-alert-dialog/1.0.3_zn3vyfk3tbnwebg5ldvieekjaq: + resolution: + { integrity: sha512-QXFy7+bhGi0u+paF2QbJeSCHZs4gLMJIPm6sajUamyW0fro6g1CaSGc5zmc4QmK2NlSGUrq8m+UsUqJYtzvXow== } + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.0 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-context': 1.0.0_react@18.2.0 + '@radix-ui/react-dialog': 1.0.3_zn3vyfk3tbnwebg5ldvieekjaq + '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-slot': 1.0.1_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + transitivePeerDependencies: + - '@types/react' + dev: false + /@radix-ui/react-arrow/1.0.2_biqbaboplfbrettd7655fr4n2y: resolution: { integrity: sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA== } diff --git a/src/components/channels/messages/item.tsx b/src/components/channels/messages/item.tsx index b2654c50..ecc5d39d 100644 --- a/src/components/channels/messages/item.tsx +++ b/src/components/channels/messages/item.tsx @@ -1,8 +1,8 @@ +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 MuteIcon from '@assets/icons/mute'; import { memo } from 'react'; @@ -25,9 +25,7 @@ const ChannelMessageItem = ({ data }: { data: any }) => { - + diff --git a/src/components/channels/messages/muteButton.tsx b/src/components/channels/messages/muteButton.tsx new file mode 100644 index 00000000..07ea2a10 --- /dev/null +++ b/src/components/channels/messages/muteButton.tsx @@ -0,0 +1,85 @@ +import { RelayContext } from '@components/relaysProvider'; + +import { dateToUnix } from '@utils/getDate'; + +import MuteIcon from '@assets/icons/mute'; + +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 MuteButton = ({ pubkey }: { pubkey: string }) => { + const [pool, relays]: any = useContext(RelayContext); + const [activeAccount]: any = useLocalStorage('activeAccount', {}); + + const muteUser = useCallback(() => { + const event: any = { + content: '', + created_at: dateToUnix(), + kind: 44, + pubkey: activeAccount.pubkey, + tags: [['p', pubkey]], + }; + event.id = getEventHash(event); + event.sig = signEvent(event, activeAccount.privkey); + + // publish note + pool.publish(event, relays); + }, [pubkey, activeAccount.privkey, activeAccount.pubkey, pool, relays]); + + return ( + + + + + + + + + + + Mute user + + + + + + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently mute this user and you will never receive message from + this user + +
+ + + + + + +
+ + + + ); +}; diff --git a/src/components/multiAccounts/activeAccount.tsx b/src/components/multiAccounts/activeAccount.tsx index 8fc5257b..0e8bdffd 100644 --- a/src/components/multiAccounts/activeAccount.tsx +++ b/src/components/multiAccounts/activeAccount.tsx @@ -55,7 +55,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any } relays, (event: any) => { if (event.tags.length > 0) { - insertFollowsToStorage(event.tags); + //insertFollowsToStorage(event.tags); } }, 20000, diff --git a/src/pages/channels/[id].tsx b/src/pages/channels/[id].tsx index 1ebff9e5..1a02c121 100644 --- a/src/pages/channels/[id].tsx +++ b/src/pages/channels/[id].tsx @@ -7,6 +7,7 @@ import { RelayContext } from '@components/relaysProvider'; import { channelReplyAtom } from '@stores/channel'; +import useLocalStorage from '@rehooks/local-storage'; import { useResetAtom } from 'jotai/utils'; import { useRouter } from 'next/router'; import { @@ -16,6 +17,7 @@ import { ReactPortal, useContext, useEffect, + useRef, useState, } from 'react'; @@ -26,30 +28,44 @@ export default function Page() { const id: string | string[] = router.query.id || null; const [messages, setMessages] = useState([]); + const [activeAccount]: any = useLocalStorage('activeAccount', {}); const resetChannelReply = useResetAtom(channelReplyAtom); + const muted = useRef(new Set()); + useEffect(() => { // reset channel reply resetChannelReply(); // subscribe event const unsubscribe = pool.subscribe( [ + { + authors: [activeAccount.pubkey], + kinds: [44], + since: 0, + }, { '#e': [id], - kinds: [42], + kinds: [42, 43], since: 0, }, ], relays, (event: any) => { - setMessages((messages) => [event, ...messages]); + if (event.kind === 44) { + muted.current = muted.current.add(event.tags[0][1]); + } else if (event.kind === 42) { + if (!muted.current.has(event.pubkey)) { + setMessages((messages) => [event, ...messages]); + } + } } ); return () => { unsubscribe; }; - }, [id, pool, relays, resetChannelReply]); + }, [id, pool, relays, activeAccount.pubkey, resetChannelReply]); return (