reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update channel

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-30 16:45:04 +07:00
parent 50b4914979
commit 4be369b671
10 changed files with 282 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/channel/components/blacklist.tsx
View File

@@ -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'
}`}
>
<MicMute width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
<MuteIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
</Popover.Button>
<Transition
as={Fragment}

114
src/app/channel/components/messages/hideButton.tsx
View File

@@ -1,17 +1,32 @@
import CancelIcon from '@lume/shared/icons/cancel';
import HideIcon from '@lume/shared/icons/hide';
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 { EyeClose } 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 MessageHideButton({ id }: { id: string }) {
const pool: any = useContext(RelayContext);
const { account, isError, isLoading } = useActiveAccount();
const [isOpen, setIsOpen] = useState(false);
const [messages, setMessages] = useAtom(channelMessagesAtom);
const closeModal = () => {
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 (
<Tooltip message="Hide this message">
<button
onClick={() => hideMessage()}
className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800"
>
<EyeClose width={16} height={16} className="text-zinc-400" />
</button>
</Tooltip>
<>
<Tooltip message="Hide this message">
<button
onClick={openModal}
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
>
<HideIcon width={16} height={16} className="text-zinc-200" />
</button>
</Tooltip>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
</Transition.Child>
<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col rounded-lg border border-zinc-800 bg-zinc-900">
<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-6">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<Dialog.Title
as="h3"
className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-2xl font-semibold leading-none text-transparent"
>
Are you sure!
</Dialog.Title>
<button
type="button"
onClick={closeModal}
autoFocus={false}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
>
<CancelIcon width={20} height={20} className="text-zinc-300" />
</button>
</div>
<Dialog.Description className="leading-tight text-zinc-400">
This message will be hidden from your feed.
</Dialog.Description>
</div>
</div>
<div className="flex h-full w-full flex-col items-end justify-center overflow-y-auto px-5 py-2.5">
<div className="flex items-center gap-2">
<button
type="button"
onClick={closeModal}
className="inline-flex h-9 items-center justify-center rounded-md px-2 text-sm font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
>
Cancel
</button>
<button
type="button"
onClick={() => hideMessage()}
className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-sm font-medium text-zinc-100 hover:bg-red-600"
>
Confirm
</button>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition>
</>
);
}

2
src/app/channel/components/messages/item.tsx
View File

@@ -20,7 +20,7 @@ export default function ChannelMessageItem({ data }: { data: any }) {
</div>
</div>
<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">
<div className="inline-flex h-8 items-center justify-center gap-1.5 rounded bg-zinc-900 px-0.5 shadow-md shadow-black/20 ring-1 ring-zinc-800">
<MessageReplyButton id={data.id} pubkey={data.pubkey} content={data.content} />
<MessageHideButton id={data.id} />
<MessageMuteButton pubkey={data.pubkey} />

113
src/app/channel/components/messages/muteButton.tsx
View File

@@ -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 (
<Tooltip message="Mute this user">
<button
onClick={() => muteUser()}
className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800"
>
<MicMute width={16} height={16} className="text-zinc-400" />
</button>
</Tooltip>
<>
<Tooltip message="Mute this user">
<button
onClick={() => openModal()}
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
>
<MuteIcon width={16} height={16} className="text-zinc-200" />
</button>
</Tooltip>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
</Transition.Child>
<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col rounded-lg border border-zinc-800 bg-zinc-900">
<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-6">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<Dialog.Title
as="h3"
className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-2xl font-semibold leading-none text-transparent"
>
Are you sure!
</Dialog.Title>
<button
type="button"
onClick={closeModal}
autoFocus={false}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
>
<CancelIcon width={20} height={20} className="text-zinc-300" />
</button>
</div>
<Dialog.Description className="leading-tight text-zinc-400">
You will no longer see messages from this user.
</Dialog.Description>
</div>
</div>
<div className="flex h-full w-full flex-col items-end justify-center overflow-y-auto px-5 py-2.5">
<div className="flex items-center gap-2">
<button
type="button"
onClick={closeModal}
className="inline-flex h-9 items-center justify-center rounded-md px-2 text-sm font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
>
Cancel
</button>
<button
type="button"
onClick={() => muteUser()}
className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-sm font-medium text-zinc-100 hover:bg-red-600"
>
Confirm
</button>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition>
</>
);
}

8
src/app/channel/components/messages/replyButton.tsx
View File

@@ -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 (
<Tooltip message="Reply">
<Tooltip message="Reply to message">
<button
onClick={() => createReply()}
className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800"
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
>
<Reply width={16} height={16} className="text-zinc-400" />
<ReplyMessageIcon width={16} height={16} className="text-zinc-200" />
</button>
</Tooltip>
);

18
src/app/channel/pages/index.page.tsx
View File

@@ -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 (