diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx index e600f9859..0453baaf8 100644 --- a/app/soapbox/features/chats/components/chat-list-item.tsx +++ b/app/soapbox/features/chats/components/chat-list-item.tsx @@ -1,10 +1,22 @@ -import React from 'react'; +import React, { useMemo } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +import { openModal } from 'soapbox/actions/modals'; import RelativeTimestamp from 'soapbox/components/relative-timestamp'; -import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; +import { Avatar, HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui'; import VerificationBadge from 'soapbox/components/verification_badge'; +import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container'; +import { useAppDispatch } from 'soapbox/hooks'; +import { IChat, IChatSilence, useChat, useChatSilence, useChatSilences } from 'soapbox/queries/chats'; -import type { IChat, IChatSilence } from 'soapbox/queries/chats'; +import type { Menu } from 'soapbox/components/dropdown_menu'; + +const messages = defineMessages({ + leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.' }, + leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave Chat' }, + leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave Chat' }, + leaveChat: { id: 'chat_settings.options.leave_chat', defaultMessage: 'Leave Chat' }, +}); interface IChatListItemInterface { chat: IChat, @@ -13,12 +25,60 @@ interface IChatListItemInterface { } const ChatListItem: React.FC = ({ chat, chatSilence, onClick }) => { + const dispatch = useAppDispatch(); + const intl = useIntl(); + + const { handleSilence } = useChatSilence(chat); + const { deleteChat } = useChat(chat?.id as string); + + const menu = useMemo((): Menu => { + const menu: Menu = []; + + if (chatSilence) { + menu.push({ + text: 'Unsilence notifications', + action: (event) => { + event.stopPropagation(); + handleSilence(); + }, + icon: require('@tabler/icons/bell.svg'), + }); + } else { + menu.push({ + text: 'Silence notifications', + action: (event) => { + event.stopPropagation(); + handleSilence(); + }, + icon: require('@tabler/icons/bell-off.svg'), + }); + } + + menu.push({ + text: intl.formatMessage(messages.leaveChat), + action: (event) => { + event.stopPropagation(); + + dispatch(openModal('CONFIRM', { + heading: intl.formatMessage(messages.leaveHeading), + message: intl.formatMessage(messages.leaveMessage), + confirm: intl.formatMessage(messages.leaveConfirm), + confirmationTheme: 'primary', + onConfirm: () => deleteChat.mutate(), + })); + }, + icon: require('@tabler/icons/logout.svg'), + }); + + return menu; + }, [chatSilence]); + return (