Refactor chat component naming
This commit is contained in:
Justin
parent
8e1aa9f9e8
commit
09d73b1c45
|
|
@ -8,7 +8,7 @@ import { makeGetChat } from 'soapbox/selectors';
|
||||||
import { getAcct } from 'soapbox/utils/accounts';
|
import { getAcct } from 'soapbox/utils/accounts';
|
||||||
import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
|
import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
|
||||||
|
|
||||||
import ChatBox from './components/chat-box';
|
import Chat from './components/chat';
|
||||||
|
|
||||||
const getChat = makeGetChat();
|
const getChat = makeGetChat();
|
||||||
|
|
||||||
|
|
@ -47,7 +47,7 @@ const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column label={`@${getAcct(chat.account as any, displayFqn)}`}>
|
<Column label={`@${getAcct(chat.account as any, displayFqn)}`}>
|
||||||
<ChatBox chat={chat as any} autosize />
|
<Chat chat={chat as any} autosize />
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
||||||
import { IChat } from 'soapbox/queries/chats';
|
import { IChat } from 'soapbox/queries/chats';
|
||||||
|
|
||||||
import { render, screen } from '../../../../jest/test-helpers';
|
import { render, screen } from '../../../../jest/test-helpers';
|
||||||
import Chat from '../chat';
|
import ChatListItem from '../chat-list-item';
|
||||||
|
|
||||||
const chat: any = {
|
const chat: any = {
|
||||||
id: '1',
|
id: '1',
|
||||||
|
|
@ -28,9 +28,9 @@ const chat: any = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
describe('<Chat />', () => {
|
describe('<ChatListItem />', () => {
|
||||||
it('renders correctly', () => {
|
it('renders correctly', () => {
|
||||||
render(<Chat chat={chat as IChat} onClick={jest.fn()} />);
|
render(<ChatListItem chat={chat as IChat} onClick={jest.fn()} />);
|
||||||
|
|
||||||
expect(screen.getByTestId('chat')).toBeInTheDocument();
|
expect(screen.getByTestId('chat')).toBeInTheDocument();
|
||||||
expect(screen.getByTestId('chat')).toHaveTextContent(chat.account.display_name);
|
expect(screen.getByTestId('chat')).toHaveTextContent(chat.account.display_name);
|
||||||
|
|
@ -38,28 +38,28 @@ describe('<Chat />', () => {
|
||||||
|
|
||||||
describe('last message content', () => {
|
describe('last message content', () => {
|
||||||
it('renders the last message', () => {
|
it('renders the last message', () => {
|
||||||
render(<Chat chat={chat as IChat} onClick={jest.fn()} />);
|
render(<ChatListItem chat={chat as IChat} onClick={jest.fn()} />);
|
||||||
|
|
||||||
expect(screen.getByTestId('chat-last-message')).toBeInTheDocument();
|
expect(screen.getByTestId('chat-last-message')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('does not render the last message', () => {
|
it('does not render the last message', () => {
|
||||||
const changedChat = { ...chat, last_message: null };
|
const changedChat = { ...chat, last_message: null };
|
||||||
render(<Chat chat={changedChat as IChat} onClick={jest.fn()} />);
|
render(<ChatListItem chat={changedChat as IChat} onClick={jest.fn()} />);
|
||||||
|
|
||||||
expect(screen.queryAllByTestId('chat-last-message')).toHaveLength(0);
|
expect(screen.queryAllByTestId('chat-last-message')).toHaveLength(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('unread', () => {
|
describe('unread', () => {
|
||||||
it('renders the unread dot', () => {
|
it('renders the unread dot', () => {
|
||||||
render(<Chat chat={chat as IChat} onClick={jest.fn()} />);
|
render(<ChatListItem chat={chat as IChat} onClick={jest.fn()} />);
|
||||||
|
|
||||||
expect(screen.getByTestId('chat-unread-indicator')).toBeInTheDocument();
|
expect(screen.getByTestId('chat-unread-indicator')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('does not render the unread dot', () => {
|
it('does not render the unread dot', () => {
|
||||||
const changedChat = { ...chat, last_message: { ...chat.last_message, unread: false } };
|
const changedChat = { ...chat, last_message: { ...chat.last_message, unread: false } };
|
||||||
render(<Chat chat={changedChat as IChat} onClick={jest.fn()} />);
|
render(<ChatListItem chat={changedChat as IChat} onClick={jest.fn()} />);
|
||||||
|
|
||||||
expect(screen.queryAllByTestId('chat-unread-indicator')).toHaveLength(0);
|
expect(screen.queryAllByTestId('chat-unread-indicator')).toHaveLength(0);
|
||||||
});
|
});
|
||||||
|
|
@ -1,279 +0,0 @@
|
||||||
import { useMutation } from '@tanstack/react-query';
|
|
||||||
import classNames from 'clsx';
|
|
||||||
import React, { MutableRefObject, useState } from 'react';
|
|
||||||
import { useIntl, defineMessages } from 'react-intl';
|
|
||||||
|
|
||||||
import { uploadMedia } from 'soapbox/actions/media';
|
|
||||||
import { HStack, IconButton, Stack, Text, Textarea } from 'soapbox/components/ui';
|
|
||||||
import UploadProgress from 'soapbox/components/upload-progress';
|
|
||||||
import UploadButton from 'soapbox/features/compose/components/upload_button';
|
|
||||||
import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
|
|
||||||
import { IChat, useChat } from 'soapbox/queries/chats';
|
|
||||||
import { queryClient } from 'soapbox/queries/client';
|
|
||||||
import { truncateFilename } from 'soapbox/utils/media';
|
|
||||||
|
|
||||||
import ChatMessageList from './chat-message-list';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Type a message' },
|
|
||||||
send: { id: 'chat_box.actions.send', defaultMessage: 'Send' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
|
|
||||||
|
|
||||||
interface IChatBox {
|
|
||||||
chat: IChat,
|
|
||||||
autosize?: boolean,
|
|
||||||
inputRef?: MutableRefObject<HTMLTextAreaElement>,
|
|
||||||
className?: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Chat UI with just the messages and textarea.
|
|
||||||
* Reused between floating desktop chats and fullscreen/mobile chats.
|
|
||||||
*/
|
|
||||||
const ChatBox: React.FC<IChatBox> = ({ chat, autosize, inputRef, className }) => {
|
|
||||||
const intl = useIntl();
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const account = useOwnAccount();
|
|
||||||
|
|
||||||
const { createChatMessage, acceptChat } = useChat(chat.id);
|
|
||||||
|
|
||||||
const [content, setContent] = useState<string>('');
|
|
||||||
const [attachment, setAttachment] = useState<any>(undefined);
|
|
||||||
const [isUploading, setIsUploading] = useState(false);
|
|
||||||
const [uploadProgress, setUploadProgress] = useState(0);
|
|
||||||
const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
|
|
||||||
const [hasErrorSubmittingMessage, setErrorSubmittingMessage] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const isSubmitDisabled = content.length === 0 && !attachment;
|
|
||||||
|
|
||||||
const submitMessage = useMutation(({ chatId, content }: any) => createChatMessage(chatId, content), {
|
|
||||||
retry: false,
|
|
||||||
onMutate: async (newMessage: any) => {
|
|
||||||
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
|
|
||||||
await queryClient.cancelQueries(['chats', 'messages', chat.id]);
|
|
||||||
|
|
||||||
// Snapshot the previous value
|
|
||||||
const prevChatMessages = queryClient.getQueryData(['chats', 'messages', chat.id]);
|
|
||||||
const prevContent = content;
|
|
||||||
|
|
||||||
// Clear state (content, attachment, etc)
|
|
||||||
clearState();
|
|
||||||
|
|
||||||
// Optimistically update to the new value
|
|
||||||
queryClient.setQueryData(['chats', 'messages', chat.id], (prevResult: any) => {
|
|
||||||
const newResult = { ...prevResult };
|
|
||||||
newResult.pages = newResult.pages.map((page: any, idx: number) => {
|
|
||||||
if (idx === 0) {
|
|
||||||
return {
|
|
||||||
...page,
|
|
||||||
result: [...page.result, {
|
|
||||||
...newMessage,
|
|
||||||
id: String(Number(new Date())),
|
|
||||||
created_at: new Date(),
|
|
||||||
account_id: account?.id,
|
|
||||||
pending: true,
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return page;
|
|
||||||
});
|
|
||||||
|
|
||||||
return newResult;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Return a context object with the snapshotted value
|
|
||||||
return { prevChatMessages, prevContent };
|
|
||||||
},
|
|
||||||
// If the mutation fails, use the context returned from onMutate to roll back
|
|
||||||
onError: (_error: any, _newData: any, context: any) => {
|
|
||||||
setContent(context.prevContent);
|
|
||||||
queryClient.setQueryData(['chats', 'messages', chat.id], context.prevChatMessages);
|
|
||||||
setErrorSubmittingMessage(true);
|
|
||||||
},
|
|
||||||
// Always refetch after error or success:
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries(['chats', 'messages', chat.id]);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const clearState = () => {
|
|
||||||
setContent('');
|
|
||||||
setAttachment(undefined);
|
|
||||||
setIsUploading(false);
|
|
||||||
setUploadProgress(0);
|
|
||||||
setResetFileKey(fileKeyGen());
|
|
||||||
setErrorSubmittingMessage(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const sendMessage = () => {
|
|
||||||
if (!isSubmitDisabled && !submitMessage.isLoading) {
|
|
||||||
const params = {
|
|
||||||
content,
|
|
||||||
media_id: attachment && attachment.id,
|
|
||||||
};
|
|
||||||
|
|
||||||
submitMessage.mutate({ chatId: chat.id, content });
|
|
||||||
if (!chat.accepted) {
|
|
||||||
acceptChat.mutate();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const insertLine = () => setContent(content + '\n');
|
|
||||||
|
|
||||||
const handleKeyDown: React.KeyboardEventHandler = (event) => {
|
|
||||||
markRead();
|
|
||||||
|
|
||||||
if (event.key === 'Enter' && event.shiftKey) {
|
|
||||||
event.preventDefault();
|
|
||||||
insertLine();
|
|
||||||
} else if (event.key === 'Enter') {
|
|
||||||
event.preventDefault();
|
|
||||||
sendMessage();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
|
|
||||||
setContent(event.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
|
|
||||||
if (isSubmitDisabled && e.clipboardData && e.clipboardData.files.length === 1) {
|
|
||||||
handleFiles(e.clipboardData.files);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const markRead = () => {
|
|
||||||
// markAsRead.mutate();
|
|
||||||
// dispatch(markChatRead(chatId));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseOver = () => markRead();
|
|
||||||
|
|
||||||
const handleRemoveFile = () => {
|
|
||||||
setAttachment(undefined);
|
|
||||||
setResetFileKey(fileKeyGen());
|
|
||||||
};
|
|
||||||
|
|
||||||
const onUploadProgress = (e: ProgressEvent) => {
|
|
||||||
const { loaded, total } = e;
|
|
||||||
setUploadProgress(loaded / total);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFiles = (files: FileList) => {
|
|
||||||
setIsUploading(true);
|
|
||||||
|
|
||||||
const data = new FormData();
|
|
||||||
data.append('file', files[0]);
|
|
||||||
|
|
||||||
dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
|
|
||||||
setAttachment(response.data);
|
|
||||||
setIsUploading(false);
|
|
||||||
}).catch(() => {
|
|
||||||
setIsUploading(false);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderAttachment = () => {
|
|
||||||
if (!attachment) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='chat-box__attachment'>
|
|
||||||
<div className='chat-box__filename'>
|
|
||||||
{truncateFilename(attachment.preview_url, 20)}
|
|
||||||
</div>
|
|
||||||
<div className='chat-box__remove-attachment'>
|
|
||||||
<IconButton
|
|
||||||
src={require('@tabler/icons/x.svg')}
|
|
||||||
onClick={handleRemoveFile}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderActionButton = () => {
|
|
||||||
// return canSubmit() ? (
|
|
||||||
// <IconButton
|
|
||||||
// src={require('@tabler/icons/send.svg')}
|
|
||||||
// title={intl.formatMessage(messages.send)}
|
|
||||||
// onClick={sendMessage}
|
|
||||||
// />
|
|
||||||
// ) : (
|
|
||||||
// <UploadButton onSelectFile={handleFiles} resetFileKey={resetFileKey} />
|
|
||||||
// );
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
|
|
||||||
<div className='flex-grow h-full overflow-hidden flex justify-center'>
|
|
||||||
<ChatMessageList chat={chat} autosize />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='mt-auto pt-4 px-4 shadow-3xl'>
|
|
||||||
<HStack alignItems='center' justifyContent='between' space={4}>
|
|
||||||
<Stack grow>
|
|
||||||
<Textarea
|
|
||||||
autoFocus
|
|
||||||
ref={inputRef}
|
|
||||||
placeholder={intl.formatMessage(messages.placeholder)}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
value={content}
|
|
||||||
onChange={handleContentChange}
|
|
||||||
isResizeable={false}
|
|
||||||
autoGrow
|
|
||||||
maxRows={5}
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
<IconButton
|
|
||||||
src={require('@tabler/icons/send.svg')}
|
|
||||||
iconClassName='w-5 h-5'
|
|
||||||
className='text-primary-500'
|
|
||||||
disabled={isSubmitDisabled}
|
|
||||||
onClick={sendMessage}
|
|
||||||
/>
|
|
||||||
</HStack>
|
|
||||||
|
|
||||||
<HStack alignItems='center' className='h-5' space={1}>
|
|
||||||
{hasErrorSubmittingMessage && (
|
|
||||||
<>
|
|
||||||
<Text theme='danger' size='xs'>
|
|
||||||
Message failed to send.
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<button onClick={sendMessage} className='flex hover:underline'>
|
|
||||||
<Text theme='primary' size='xs' tag='span'>
|
|
||||||
Retry?
|
|
||||||
</Text>
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</HStack>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
// {renderAttachment()}
|
|
||||||
// {isUploading && (
|
|
||||||
// <UploadProgress progress={uploadProgress * 100} />
|
|
||||||
// )}
|
|
||||||
// <div className='chat-box__actions simple_form'>
|
|
||||||
// <div className='chat-box__send'>
|
|
||||||
// {renderActionButton()}
|
|
||||||
// </div>
|
|
||||||
// <textarea
|
|
||||||
// rows={1}
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// onPaste={handlePaste}
|
|
||||||
// value={content}
|
|
||||||
// ref={setInputRef}
|
|
||||||
// />
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ChatBox;
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import RelativeTimestamp from 'soapbox/components/relative-timestamp';
|
||||||
|
import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||||
|
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||||
|
|
||||||
|
import type { IChat } from 'soapbox/queries/chats';
|
||||||
|
|
||||||
|
interface IChatListItemInterface {
|
||||||
|
chat: IChat,
|
||||||
|
onClick: (chat: any) => void,
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={chat.id}
|
||||||
|
type='button'
|
||||||
|
onClick={() => onClick(chat)}
|
||||||
|
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||||
|
data-testid='chat'
|
||||||
|
>
|
||||||
|
<HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
|
||||||
|
<HStack alignItems='center' space={2} className='overflow-hidden'>
|
||||||
|
<Avatar src={chat.account?.avatar} size={40} className='flex-none' />
|
||||||
|
|
||||||
|
<Stack alignItems='start' className='overflow-hidden'>
|
||||||
|
<div className='flex items-center space-x-1 flex-grow w-full'>
|
||||||
|
<Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
|
||||||
|
{chat.account?.verified && <VerificationBadge />}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{chat.last_message?.content && (
|
||||||
|
<Text
|
||||||
|
align='left'
|
||||||
|
size='sm'
|
||||||
|
weight='medium'
|
||||||
|
theme='muted'
|
||||||
|
truncate
|
||||||
|
className='w-full'
|
||||||
|
data-testid='chat-last-message'
|
||||||
|
dangerouslySetInnerHTML={{ __html: chat.last_message?.content }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</HStack>
|
||||||
|
|
||||||
|
{chat.last_message && (
|
||||||
|
<HStack alignItems='center' space={2}>
|
||||||
|
{chat.last_message.unread && (
|
||||||
|
<div
|
||||||
|
className='w-2 h-2 rounded-full bg-secondary-500'
|
||||||
|
data-testid='chat-unread-indicator'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<RelativeTimestamp
|
||||||
|
timestamp={chat.last_message.created_at}
|
||||||
|
align='right'
|
||||||
|
size='xs'
|
||||||
|
truncate
|
||||||
|
/>
|
||||||
|
</HStack>
|
||||||
|
)}
|
||||||
|
</HStack>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChatListItem;
|
||||||
|
|
@ -9,7 +9,7 @@ import { Stack } from 'soapbox/components/ui';
|
||||||
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
|
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
|
||||||
import { useChats } from 'soapbox/queries/chats';
|
import { useChats } from 'soapbox/queries/chats';
|
||||||
|
|
||||||
import Chat from './chat';
|
import ChatListItem from './chat-list-item';
|
||||||
import Blankslate from './chat-pane/blankslate';
|
import Blankslate from './chat-pane/blankslate';
|
||||||
|
|
||||||
interface IChatList {
|
interface IChatList {
|
||||||
|
|
@ -66,7 +66,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
|
||||||
useWindowScroll={useWindowScroll}
|
useWindowScroll={useWindowScroll}
|
||||||
data={chats}
|
data={chats}
|
||||||
endReached={handleLoadMore}
|
endReached={handleLoadMore}
|
||||||
itemContent={(_index, chat) => <Chat chat={chat} onClick={onClickChat} />}
|
itemContent={(_index, chat) => <ChatListItem chat={chat} onClick={onClickChat} />}
|
||||||
components={{
|
components={{
|
||||||
ScrollSeekPlaceholder: () => <PlaceholderChat />,
|
ScrollSeekPlaceholder: () => <PlaceholderChat />,
|
||||||
// Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
|
// Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
|
||||||
import VerificationBadge from 'soapbox/components/verification_badge';
|
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||||
import { useChatContext } from 'soapbox/contexts/chat-context';
|
import { useChatContext } from 'soapbox/contexts/chat-context';
|
||||||
|
|
||||||
import ChatBox from './chat-box';
|
import Chat from './chat';
|
||||||
import ChatPaneHeader from './chat-pane-header';
|
import ChatPaneHeader from './chat-pane-header';
|
||||||
import ChatSettings from './chat-settings';
|
import ChatSettings from './chat-settings';
|
||||||
|
|
||||||
|
|
@ -75,7 +75,7 @@ const ChatWindow = () => {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Stack className='overflow-hidden flex-grow h-full' space={2}>
|
<Stack className='overflow-hidden flex-grow h-full' space={2}>
|
||||||
<ChatBox chat={chat} inputRef={inputRef as any} />
|
<Chat chat={chat} inputRef={inputRef as any} />
|
||||||
</Stack>
|
</Stack>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,69 +1,278 @@
|
||||||
import React from 'react';
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
import classNames from 'clsx';
|
||||||
|
import React, { MutableRefObject, useState } from 'react';
|
||||||
|
import { useIntl, defineMessages } from 'react-intl';
|
||||||
|
|
||||||
import RelativeTimestamp from 'soapbox/components/relative-timestamp';
|
import { uploadMedia } from 'soapbox/actions/media';
|
||||||
import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
|
import { HStack, IconButton, Stack, Text, Textarea } from 'soapbox/components/ui';
|
||||||
import VerificationBadge from 'soapbox/components/verification_badge';
|
import UploadProgress from 'soapbox/components/upload-progress';
|
||||||
|
import UploadButton from 'soapbox/features/compose/components/upload_button';
|
||||||
|
import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
|
||||||
|
import { IChat, useChat } from 'soapbox/queries/chats';
|
||||||
|
import { queryClient } from 'soapbox/queries/client';
|
||||||
|
import { truncateFilename } from 'soapbox/utils/media';
|
||||||
|
|
||||||
import type { IChat } from 'soapbox/queries/chats';
|
import ChatMessageList from './chat-message-list';
|
||||||
|
|
||||||
interface IChatInterface {
|
const messages = defineMessages({
|
||||||
|
placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Type a message' },
|
||||||
|
send: { id: 'chat_box.actions.send', defaultMessage: 'Send' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
|
||||||
|
|
||||||
|
interface ChatInterface {
|
||||||
chat: IChat,
|
chat: IChat,
|
||||||
onClick: (chat: any) => void,
|
autosize?: boolean,
|
||||||
|
inputRef?: MutableRefObject<HTMLTextAreaElement>,
|
||||||
|
className?: string,
|
||||||
}
|
}
|
||||||
|
|
||||||
const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
|
/**
|
||||||
|
* Chat UI with just the messages and textarea.
|
||||||
|
* Reused between floating desktop chats and fullscreen/mobile chats.
|
||||||
|
*/
|
||||||
|
const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const account = useOwnAccount();
|
||||||
|
|
||||||
|
const { createChatMessage, acceptChat } = useChat(chat.id);
|
||||||
|
|
||||||
|
const [content, setContent] = useState<string>('');
|
||||||
|
const [attachment, setAttachment] = useState<any>(undefined);
|
||||||
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
|
const [uploadProgress, setUploadProgress] = useState(0);
|
||||||
|
const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
|
||||||
|
const [hasErrorSubmittingMessage, setErrorSubmittingMessage] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const isSubmitDisabled = content.length === 0 && !attachment;
|
||||||
|
|
||||||
|
const submitMessage = useMutation(({ chatId, content }: any) => createChatMessage(chatId, content), {
|
||||||
|
retry: false,
|
||||||
|
onMutate: async (newMessage: any) => {
|
||||||
|
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
|
||||||
|
await queryClient.cancelQueries(['chats', 'messages', chat.id]);
|
||||||
|
|
||||||
|
// Snapshot the previous value
|
||||||
|
const prevChatMessages = queryClient.getQueryData(['chats', 'messages', chat.id]);
|
||||||
|
const prevContent = content;
|
||||||
|
|
||||||
|
// Clear state (content, attachment, etc)
|
||||||
|
clearState();
|
||||||
|
|
||||||
|
// Optimistically update to the new value
|
||||||
|
queryClient.setQueryData(['chats', 'messages', chat.id], (prevResult: any) => {
|
||||||
|
const newResult = { ...prevResult };
|
||||||
|
newResult.pages = newResult.pages.map((page: any, idx: number) => {
|
||||||
|
if (idx === 0) {
|
||||||
|
return {
|
||||||
|
...page,
|
||||||
|
result: [...page.result, {
|
||||||
|
...newMessage,
|
||||||
|
id: String(Number(new Date())),
|
||||||
|
created_at: new Date(),
|
||||||
|
account_id: account?.id,
|
||||||
|
pending: true,
|
||||||
|
}],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return page;
|
||||||
|
});
|
||||||
|
|
||||||
|
return newResult;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Return a context object with the snapshotted value
|
||||||
|
return { prevChatMessages, prevContent };
|
||||||
|
},
|
||||||
|
// If the mutation fails, use the context returned from onMutate to roll back
|
||||||
|
onError: (_error: any, _newData: any, context: any) => {
|
||||||
|
setContent(context.prevContent);
|
||||||
|
queryClient.setQueryData(['chats', 'messages', chat.id], context.prevChatMessages);
|
||||||
|
setErrorSubmittingMessage(true);
|
||||||
|
},
|
||||||
|
// Always refetch after error or success:
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries(['chats', 'messages', chat.id]);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const clearState = () => {
|
||||||
|
setContent('');
|
||||||
|
setAttachment(undefined);
|
||||||
|
setIsUploading(false);
|
||||||
|
setUploadProgress(0);
|
||||||
|
setResetFileKey(fileKeyGen());
|
||||||
|
setErrorSubmittingMessage(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendMessage = () => {
|
||||||
|
if (!isSubmitDisabled && !submitMessage.isLoading) {
|
||||||
|
const params = {
|
||||||
|
content,
|
||||||
|
media_id: attachment && attachment.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
submitMessage.mutate({ chatId: chat.id, content });
|
||||||
|
if (!chat.accepted) {
|
||||||
|
acceptChat.mutate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const insertLine = () => setContent(content + '\n');
|
||||||
|
|
||||||
|
const handleKeyDown: React.KeyboardEventHandler = (event) => {
|
||||||
|
markRead();
|
||||||
|
|
||||||
|
if (event.key === 'Enter' && event.shiftKey) {
|
||||||
|
event.preventDefault();
|
||||||
|
insertLine();
|
||||||
|
} else if (event.key === 'Enter') {
|
||||||
|
event.preventDefault();
|
||||||
|
sendMessage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
|
||||||
|
setContent(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
|
||||||
|
if (isSubmitDisabled && e.clipboardData && e.clipboardData.files.length === 1) {
|
||||||
|
handleFiles(e.clipboardData.files);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const markRead = () => {
|
||||||
|
// markAsRead.mutate();
|
||||||
|
// dispatch(markChatRead(chatId));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseOver = () => markRead();
|
||||||
|
|
||||||
|
const handleRemoveFile = () => {
|
||||||
|
setAttachment(undefined);
|
||||||
|
setResetFileKey(fileKeyGen());
|
||||||
|
};
|
||||||
|
|
||||||
|
const onUploadProgress = (e: ProgressEvent) => {
|
||||||
|
const { loaded, total } = e;
|
||||||
|
setUploadProgress(loaded / total);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFiles = (files: FileList) => {
|
||||||
|
setIsUploading(true);
|
||||||
|
|
||||||
|
const data = new FormData();
|
||||||
|
data.append('file', files[0]);
|
||||||
|
|
||||||
|
dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
|
||||||
|
setAttachment(response.data);
|
||||||
|
setIsUploading(false);
|
||||||
|
}).catch(() => {
|
||||||
|
setIsUploading(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderAttachment = () => {
|
||||||
|
if (!attachment) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='chat-box__attachment'>
|
||||||
|
<div className='chat-box__filename'>
|
||||||
|
{truncateFilename(attachment.preview_url, 20)}
|
||||||
|
</div>
|
||||||
|
<div className='chat-box__remove-attachment'>
|
||||||
|
<IconButton
|
||||||
|
src={require('@tabler/icons/x.svg')}
|
||||||
|
onClick={handleRemoveFile}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderActionButton = () => {
|
||||||
|
// return canSubmit() ? (
|
||||||
|
// <IconButton
|
||||||
|
// src={require('@tabler/icons/send.svg')}
|
||||||
|
// title={intl.formatMessage(messages.send)}
|
||||||
|
// onClick={sendMessage}
|
||||||
|
// />
|
||||||
|
// ) : (
|
||||||
|
// <UploadButton onSelectFile={handleFiles} resetFileKey={resetFileKey} />
|
||||||
|
// );
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
|
||||||
key={chat.id}
|
<div className='flex-grow h-full overflow-hidden flex justify-center'>
|
||||||
type='button'
|
<ChatMessageList chat={chat} autosize />
|
||||||
onClick={() => onClick(chat)}
|
</div>
|
||||||
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
|
|
||||||
data-testid='chat'
|
|
||||||
>
|
|
||||||
<HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
|
|
||||||
<HStack alignItems='center' space={2} className='overflow-hidden'>
|
|
||||||
<Avatar src={chat.account?.avatar} size={40} className='flex-none' />
|
|
||||||
|
|
||||||
<Stack alignItems='start' className='overflow-hidden'>
|
<div className='mt-auto pt-4 px-4 shadow-3xl'>
|
||||||
<div className='flex items-center space-x-1 flex-grow w-full'>
|
<HStack alignItems='center' justifyContent='between' space={4}>
|
||||||
<Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
|
<Stack grow>
|
||||||
{chat.account?.verified && <VerificationBadge />}
|
<Textarea
|
||||||
</div>
|
autoFocus
|
||||||
|
ref={inputRef}
|
||||||
{chat.last_message?.content && (
|
placeholder={intl.formatMessage(messages.placeholder)}
|
||||||
<Text
|
onKeyDown={handleKeyDown}
|
||||||
align='left'
|
value={content}
|
||||||
size='sm'
|
onChange={handleContentChange}
|
||||||
weight='medium'
|
isResizeable={false}
|
||||||
theme='muted'
|
autoGrow
|
||||||
truncate
|
maxRows={5}
|
||||||
className='w-full'
|
/>
|
||||||
data-testid='chat-last-message'
|
|
||||||
dangerouslySetInnerHTML={{ __html: chat.last_message?.content }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
|
<IconButton
|
||||||
|
src={require('@tabler/icons/send.svg')}
|
||||||
|
iconClassName='w-5 h-5'
|
||||||
|
className='text-primary-500'
|
||||||
|
disabled={isSubmitDisabled}
|
||||||
|
onClick={sendMessage}
|
||||||
|
/>
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
{chat.last_message && (
|
<HStack alignItems='center' className='h-5' space={1}>
|
||||||
<HStack alignItems='center' space={2}>
|
{hasErrorSubmittingMessage && (
|
||||||
{chat.last_message.unread && (
|
<>
|
||||||
<div
|
<Text theme='danger' size='xs'>
|
||||||
className='w-2 h-2 rounded-full bg-secondary-500'
|
Message failed to send.
|
||||||
data-testid='chat-unread-indicator'
|
</Text>
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<RelativeTimestamp
|
<button onClick={sendMessage} className='flex hover:underline'>
|
||||||
timestamp={chat.last_message.created_at}
|
<Text theme='primary' size='xs' tag='span'>
|
||||||
align='right'
|
Retry?
|
||||||
size='xs'
|
</Text>
|
||||||
truncate
|
</button>
|
||||||
/>
|
</>
|
||||||
</HStack>
|
)}
|
||||||
)}
|
</HStack>
|
||||||
</HStack>
|
</div>
|
||||||
</button>
|
</Stack>
|
||||||
|
// {renderAttachment()}
|
||||||
|
// {isUploading && (
|
||||||
|
// <UploadProgress progress={uploadProgress * 100} />
|
||||||
|
// )}
|
||||||
|
// <div className='chat-box__actions simple_form'>
|
||||||
|
// <div className='chat-box__send'>
|
||||||
|
// {renderActionButton()}
|
||||||
|
// </div>
|
||||||
|
// <textarea
|
||||||
|
// rows={1}
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// onPaste={handlePaste}
|
||||||
|
// value={content}
|
||||||
|
// ref={setInputRef}
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@ import AccountSearch from 'soapbox/components/account_search';
|
||||||
import { Card, CardTitle, Stack } from '../../components/ui';
|
import { Card, CardTitle, Stack } from '../../components/ui';
|
||||||
|
|
||||||
import Chat from './components/chat';
|
import Chat from './components/chat';
|
||||||
import ChatBox from './components/chat-box';
|
|
||||||
import ChatList from './components/chat-list';
|
import ChatList from './components/chat-list';
|
||||||
|
import ChatListItem from './components/chat-list-item';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.chats', defaultMessage: 'Messages' },
|
title: { id: 'column.chats', defaultMessage: 'Messages' },
|
||||||
|
|
@ -55,9 +55,9 @@ const ChatIndex: React.FC = () => {
|
||||||
<Stack className='col-span-6 h-full overflow-hidden'>
|
<Stack className='col-span-6 h-full overflow-hidden'>
|
||||||
{chat && (
|
{chat && (
|
||||||
<Stack className='h-full overflow-hidden'>
|
<Stack className='h-full overflow-hidden'>
|
||||||
<Chat chat={chat} onClick={() => { }} />
|
<ChatListItem chat={chat} onClick={() => { }} />
|
||||||
<div className='h-full overflow-hidden'>
|
<div className='h-full overflow-hidden'>
|
||||||
<ChatBox className='h-full overflow-hidden' chat={chat} />
|
<Chat className='h-full overflow-hidden' chat={chat} />
|
||||||
</div>
|
</div>
|
||||||
</Stack>
|
</Stack>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue