124 lines
4.5 KiB
TypeScript
124 lines
4.5 KiB
TypeScript
import React from 'react';
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import Account from '@/components/account';
|
|
import List, { ListItem } from '@/components/list';
|
|
import HStack from '@/components/ui/hstack';
|
|
import Icon from '@/components/ui/icon';
|
|
import Stack from '@/components/ui/stack';
|
|
import Text from '@/components/ui/text';
|
|
import { ChatWidgetScreens, useChatContext } from '@/contexts/chat-context';
|
|
import { useFeatures } from '@/hooks/use-features';
|
|
import { useUnblockAccountMutation, useRelationshipQuery } from '@/queries/accounts/use-relationship';
|
|
import { useDeleteChat } from '@/queries/chats';
|
|
import { useModalsActions } from '@/stores/modals';
|
|
|
|
import ChatPaneHeader from './chat-pane-header';
|
|
|
|
const messages = defineMessages({
|
|
back: { id: 'card.back.label', defaultMessage: 'Back' },
|
|
unblockHeading: { id: 'chat_settings.unblock.heading', defaultMessage: 'Unblock @{acct}' },
|
|
unblockConfirm: { id: 'chat_settings.unblock.confirm', defaultMessage: 'Unblock' },
|
|
leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' },
|
|
leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave chat' },
|
|
leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave chat' },
|
|
});
|
|
|
|
const ChatSettings = () => {
|
|
const intl = useIntl();
|
|
const features = useFeatures();
|
|
|
|
const { openModal } = useModalsActions();
|
|
const { chat, changeScreen, toggleChatPane } = useChatContext();
|
|
const deleteChat = useDeleteChat(chat?.id as string);
|
|
|
|
const { mutate: unblockAccount } = useUnblockAccountMutation(chat?.account.id!);
|
|
|
|
const isBlocked = !!useRelationshipQuery(chat?.account.id).data?.blocked_by;
|
|
|
|
const closeSettings = () => {
|
|
changeScreen(ChatWidgetScreens.CHAT, chat?.id);
|
|
};
|
|
|
|
const minimizeChatPane = () => {
|
|
closeSettings();
|
|
toggleChatPane();
|
|
};
|
|
|
|
const handleBlockUser = () => {
|
|
openModal('BLOCK_MUTE', {
|
|
accountId: chat?.account.id!,
|
|
action: 'BLOCK',
|
|
});
|
|
};
|
|
|
|
const handleUnblockUser = () => {
|
|
openModal('CONFIRM', {
|
|
heading: intl.formatMessage(messages.unblockHeading, { acct: chat?.account.acct }),
|
|
message: <FormattedMessage id='chat_settings.unblock.message' defaultMessage='Unblocking will allow this profile to direct message you and view your content.' />,
|
|
confirm: intl.formatMessage(messages.unblockConfirm),
|
|
onConfirm: () => unblockAccount(),
|
|
});
|
|
};
|
|
|
|
const handleLeaveChat = () => {
|
|
openModal('CONFIRM', {
|
|
heading: intl.formatMessage(messages.leaveHeading),
|
|
message: <FormattedMessage id='chat_settings.leave.message' defaultMessage='Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' />,
|
|
confirm: intl.formatMessage(messages.leaveConfirm),
|
|
onConfirm: () => deleteChat.mutate(),
|
|
});
|
|
};
|
|
|
|
if (!chat) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ChatPaneHeader
|
|
isOpen
|
|
isToggleable={false}
|
|
onToggle={minimizeChatPane}
|
|
title={
|
|
<HStack alignItems='center' space={2}>
|
|
<button onClick={closeSettings} title={intl.formatMessage(messages.back)}>
|
|
<Icon
|
|
src={require('@phosphor-icons/core/regular/arrow-left.svg')}
|
|
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
|
|
/>
|
|
</button>
|
|
|
|
<Text weight='semibold'>
|
|
<FormattedMessage id='chat_settings.title' defaultMessage='Chat details' />
|
|
</Text>
|
|
</HStack>
|
|
}
|
|
/>
|
|
|
|
<Stack space={4} className='px-4'>
|
|
<Account account={chat.account} hideActions />
|
|
|
|
<List>
|
|
<ListItem
|
|
label={isBlocked
|
|
? <FormattedMessage id='chat_settings.options.unblock_user' defaultMessage='Unblock @{acct}' values={{ acct: chat.account.acct }} />
|
|
: <FormattedMessage id='chat_settings.options.block_user' defaultMessage='Block @{acct}' values={{ acct: chat.account.acct }} />}
|
|
onClick={isBlocked ? handleUnblockUser : handleBlockUser}
|
|
size='sm'
|
|
/>
|
|
{features.chatsDelete && (
|
|
<ListItem
|
|
label={<FormattedMessage id='chat_settings.options.leave_chat' defaultMessage='Leave chat' />}
|
|
onClick={handleLeaveChat}
|
|
size='sm'
|
|
/>
|
|
)}
|
|
</List>
|
|
</Stack>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export { ChatSettings as default };
|