moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add ability to delete message

This commit is contained in:
Justin 2022-08-16 08:39:58 -04:00
parent 7557445a3e
commit 1ed1f3fd2e
4 changed files with 191 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
app/soapbox/features/chats/components/chat-message-list.tsx
View File

@ -1,3 +1,4 @@
import { useMutation } from '@tanstack/react-query';
import classNames from 'clsx';
import {
Map as ImmutableMap,
@ -16,10 +17,12 @@ import { initReportById } from 'soapbox/actions/reports';
import { Avatar, HStack, IconButton, Spinner, Stack, Text } from 'soapbox/components/ui';
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
import emojify from 'soapbox/features/emoji/emoji';
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder_chat';
import Bundle from 'soapbox/features/ui/components/bundle';
import { MediaGallery } from 'soapbox/features/ui/util/async-components';
import { useAppSelector, useAppDispatch, useRefEventHandler, useOwnAccount } from 'soapbox/hooks';
import { IChat, IChatMessage, useChatMessages } from 'soapbox/queries/chats';
import { IChat, IChatMessage, useChat, useChatMessages } from 'soapbox/queries/chats';
import { queryClient } from 'soapbox/queries/client';
import { onlyEmoji } from 'soapbox/utils/rich_content';
import type { Menu } from 'soapbox/components/dropdown_menu';
@ -80,10 +83,10 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
const [initialLoad, setInitialLoad] = useState(true);
const [scrollPosition, setScrollPosition] = useState(0);
const { data: chatMessages, isFetching, isFetched, fetchNextPage, isFetchingNextPage, isPlaceholderData } = useChatMessages(chat.id);
const { deleteChatMessage } = useChat(chat.id);
const { data: chatMessages, isLoading, isFetching, isFetched, fetchNextPage, isFetchingNextPage, isPlaceholderData } = useChatMessages(chat.id);
const formattedChatMessages = chatMessages || [];
const me = useAppSelector(state => state.me);
@ -94,6 +97,12 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
const initialCount = useMemo(() => formattedChatMessages.length, []);
const handleDeleteMessage = useMutation((chatMessageId: string) => deleteChatMessage(chatMessageId), {
onSettled: () => {
queryClient.invalidateQueries(['chats', 'messages', chat.id]);
},
});
const scrollToBottom = () => {
messagesEnd.current?.scrollIntoView(false);
};
@ -224,12 +233,6 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
</div>
);
const handleDeleteMessage = (chatId: string, messageId: string) => {
return () => {
dispatch(deleteChatMessage(chatId, messageId));
};
};
const handleReportUser = (userId: string) => {
return () => {
dispatch(initReportById(userId));
@ -242,7 +245,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
const menu: Menu = [
{
text: intl.formatMessage(messages.delete),
action: handleDeleteMessage(chatMessage.chat_id, chatMessage.id),
action: () => handleDeleteMessage.mutate(chatMessage.id),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
},
@ -257,11 +260,10 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
}
return (
<div key={chatMessage.id} className='group'>
<Stack
key={chatMessage.id}
space={1}
className={classNames({
'group max-w-[85%]': true,
'ml-auto': isMyMessage,
})}
>
@ -273,11 +275,6 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
})}
>
{isMyMessage ? (
// <IconButton
// src={require('@tabler/icons/dots.svg')}
// className='hidden group-hover:block text-gray-600 mr-2'
// iconClassName='w-5 h-5'
// />
<div className='hidden group-hover:block mr-2 text-gray-500'>
<DropdownMenuContainer
items={menu}
@ -285,9 +282,13 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
title={intl.formatMessage(messages.more)}
/>
</div>
) : null}
<HStack
alignItems='center'
className='max-w-[85%]'
justifyContent={isMyMessage ? 'end' : 'start'}
>
<div
title={getFormattedTimestamp(chatMessage)}
className={
@ -315,6 +316,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
<Avatar src={isMyMessage ? account?.avatar : chat.account.avatar} size={34} />
</div>
</HStack>
</HStack>
<HStack
alignItems='center'
@ -339,6 +341,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
</div>
</HStack>
</Stack>
</div>
);
};
@ -358,18 +361,18 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
});
// Stick scrollbar to bottom.
// useEffect(() => {
// if (isNearBottom()) {
useEffect(() => {
if (isNearBottom()) {
scrollToBottom();
}
// First load.
// if (chatMessages.count() !== initialCount) {
// setInitialLoad(false);
// setIsLoading(false);
// scrollToBottom();
// }
// // First load.
// // if (chatMessages.count() !== initialCount) {
// // setInitialLoad(false);
// // setIsLoading(false);
// // scrollToBottom();
// // }
// }, [formattedChatMessages.length]);
}, [formattedChatMessages.length]);
// useEffect(() => {
// scrollToBottom();
@ -381,9 +384,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
useEffect(() => {
// Restore scroll bar position when loading old messages.
console.log('hii');
if (!initialLoad) {
restoreScrollPosition();
}
}, [formattedChatMessages.length, initialLoad]);
@ -398,8 +399,18 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
}
return (
<div className='h-full flex flex-col space-y-4 px-4 flex-grow overflow-y-scroll' onScroll={handleScroll} ref={node}> {/* style={{ height: autosize ? 'calc(100vh - 16rem)' : undefined }} */}
{formattedChatMessages.reduce((acc: any, curr: any, idx: number) => {
<div className='h-full flex flex-col px-4 flex-grow overflow-y-scroll' onScroll={handleScroll} ref={node}> {/* style={{ height: autosize ? 'calc(100vh - 16rem)' : undefined }} */}
<div className='flex-grow flex flex-col justify-end space-y-4'>
{isLoading ? (
<>
<PlaceholderChat isMyMessage />
<PlaceholderChat />
<PlaceholderChat isMyMessage />
<PlaceholderChat isMyMessage />
<PlaceholderChat />
</>
) : (
formattedChatMessages.reduce((acc: any, curr: any, idx: number) => {
const lastMessage = formattedChatMessages[idx - 1];
if (lastMessage) {
@ -416,8 +427,11 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
acc.push(renderMessage(curr));
return acc;
}, [] as React.ReactNode[])}
<div style={{ float: 'left', clear: 'both' }} ref={messagesEnd} />
}, [] as React.ReactNode[])
)}
</div>
<div className='float-left clear-both mt-4' style={{ float: 'left', clear: 'both' }} ref={messagesEnd} />
</div>
);
};

37
app/soapbox/features/chats/components/chat-window.tsx
View File

@ -1,27 +1,11 @@
import React, { useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import React from 'react';
import {
closeChat,
toggleChat,
} from 'soapbox/actions/chats';
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
import IconButton from 'soapbox/components/icon_button';
import { Avatar, HStack, Counter, Icon, Stack, Text } from 'soapbox/components/ui';
import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
import { IChat } from 'soapbox/queries/chats';
import { makeGetChat } from 'soapbox/selectors';
import { getAcct } from 'soapbox/utils/accounts';
import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
import ChatBox from './chat-box';
import ChatPaneHeader from './chat-pane-header';
import { Pane, WindowState } from './ui';
import type { Account as AccountEntity } from 'soapbox/types/entities';
const getChat = makeGetChat();
interface IChatWindow {
chat: IChat
@ -67,23 +51,6 @@ const ChatWindow: React.FC<IChatWindow> = ({ chat, closeChat, closePane }) => {
<ChatBox chat={chat} onSetInputRef={() => null} />
</Stack>
</>
// <Pane windowState={windowState} index={idx}>
// <HStack space={2} className='pane__header'>
// {unreadCount > 0 ? unreadIcon : avatar }
// <button className='pane__title' onClick={handleChatToggle(chat.id)}>
// @{getAcct(account, displayFqn)}
// </button>
// <div className='pane__close'>
// <IconButton src={require('@tabler/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
// </div>
// </HStack>
// <div className='pane__content'>
// <ChatBox
// chatId={chat.id}
//
// />
// </div>
// </Pane>
);
};

67
app/soapbox/features/placeholder/components/placeholder_chat.tsx
View File

@ -1,30 +1,69 @@
import classNames from 'classnames';
import React from 'react';
import { HStack, Stack, Text } from 'soapbox/components/ui';
import { randomIntFromInterval, generateText } from '../utils';
import PlaceholderAvatar from './placeholder_avatar';
import PlaceholderDisplayName from './placeholder_display_name';
/** Fake chat to display while data is loading. */
const PlaceholderChat: React.FC = () => {
const messageLength = randomIntFromInterval(5, 75);
const PlaceholderChat = ({ isMyMessage = false }: { isMyMessage?: boolean }) => {
const messageLength = randomIntFromInterval(160, 220);
return (
<div className='chat-list-item chat-list-item--placeholder'>
<div className='account'>
<div className='account__wrapper'>
<div className='account__display-name'>
<div className='account__avatar-wrapper'>
<PlaceholderAvatar size={36} />
</div>
<PlaceholderDisplayName minLength={3} maxLength={25} />
<span className='chat__last-message'>
{generateText(messageLength)}
</span>
</div>
<Stack
space={1}
className={classNames({
'max-w-[85%] animate-pulse': true,
'ml-auto': isMyMessage,
})}
>
<HStack
alignItems='center'
justifyContent={isMyMessage ? 'end' : 'start'}
>
<div
className={
classNames({
'text-ellipsis break-words relative rounded-md p-2': true,
'mr-2': isMyMessage,
'order-2 ml-2': !isMyMessage,
})
}
>
<div style={{ width: messageLength, height: 20 }} className='rounded-full bg-primary-50 dark:bg-primary-800' />
</div>
<div className={classNames({ 'order-1': !isMyMessage })}>
<PlaceholderAvatar size={34} />
</div>
</HStack>
<HStack
alignItems='center'
space={2}
className={classNames({
'ml-auto': isMyMessage,
})}
>
<Text
theme='muted'
size='xs'
className={classNames({
'text-right': isMyMessage,
'order-2': !isMyMessage,
})}
>
<div style={{ width: 50, height: 12 }} className='rounded-full bg-primary-50 dark:bg-primary-800' />
</Text>
<div className={classNames({ 'order-1': !isMyMessage })}>
<div className='w-[34px] ml-2' />
</div>
</HStack>
</Stack>
);
};

4
app/soapbox/queries/chats.ts
View File

@ -97,7 +97,9 @@ const useChat = (chatId: string) => {
return api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/messages`, { content });
};
return { createChatMessage, markChatAsRead };
const deleteChatMessage = (chatMessageId: string) => api.delete<IChat>(`/api/v1/pleroma/chats/${chatId}/messages/${chatMessageId}`);
return { createChatMessage, markChatAsRead, deleteChatMessage };
};
export { useChat, useChats, useChatMessages };