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 { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
|
||||
|
||||
import ChatBox from './components/chat-box';
|
||||
import Chat from './components/chat';
|
||||
|
||||
const getChat = makeGetChat();
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
|
|||
|
||||
return (
|
||||
<Column label={`@${getAcct(chat.account as any, displayFqn)}`}>
|
||||
<ChatBox chat={chat as any} autosize />
|
||||
<Chat chat={chat as any} autosize />
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||
import { IChat } from 'soapbox/queries/chats';
|
||||
|
||||
import { render, screen } from '../../../../jest/test-helpers';
|
||||
import Chat from '../chat';
|
||||
import ChatListItem from '../chat-list-item';
|
||||
|
||||
const chat: any = {
|
||||
id: '1',
|
||||
|
|
@ -28,9 +28,9 @@ const chat: any = {
|
|||
},
|
||||
};
|
||||
|
||||
describe('<Chat />', () => {
|
||||
describe('<ChatListItem />', () => {
|
||||
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')).toHaveTextContent(chat.account.display_name);
|
||||
|
|
@ -38,28 +38,28 @@ describe('<Chat />', () => {
|
|||
|
||||
describe('last message content', () => {
|
||||
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();
|
||||
});
|
||||
|
||||
it('does not render the last message', () => {
|
||||
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);
|
||||
});
|
||||
|
||||
describe('unread', () => {
|
||||
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();
|
||||
});
|
||||
|
||||
it('does not render the unread dot', () => {
|
||||
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);
|
||||
});
|
||||
|
|
@ -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 { useChats } from 'soapbox/queries/chats';
|
||||
|
||||
import Chat from './chat';
|
||||
import ChatListItem from './chat-list-item';
|
||||
import Blankslate from './chat-pane/blankslate';
|
||||
|
||||
interface IChatList {
|
||||
|
|
@ -66,7 +66,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
|
|||
useWindowScroll={useWindowScroll}
|
||||
data={chats}
|
||||
endReached={handleLoadMore}
|
||||
itemContent={(_index, chat) => <Chat chat={chat} onClick={onClickChat} />}
|
||||
itemContent={(_index, chat) => <ChatListItem chat={chat} onClick={onClickChat} />}
|
||||
components={{
|
||||
ScrollSeekPlaceholder: () => <PlaceholderChat />,
|
||||
// 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 { useChatContext } from 'soapbox/contexts/chat-context';
|
||||
|
||||
import ChatBox from './chat-box';
|
||||
import Chat from './chat';
|
||||
import ChatPaneHeader from './chat-pane-header';
|
||||
import ChatSettings from './chat-settings';
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ const ChatWindow = () => {
|
|||
/>
|
||||
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||
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 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,
|
||||
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 (
|
||||
<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 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>
|
||||
|
||||
<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 }}
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
|
||||
{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'
|
||||
/>
|
||||
)}
|
||||
<HStack alignItems='center' className='h-5' space={1}>
|
||||
{hasErrorSubmittingMessage && (
|
||||
<>
|
||||
<Text theme='danger' size='xs'>
|
||||
Message failed to send.
|
||||
</Text>
|
||||
|
||||
<RelativeTimestamp
|
||||
timestamp={chat.last_message.created_at}
|
||||
align='right'
|
||||
size='xs'
|
||||
truncate
|
||||
/>
|
||||
</HStack>
|
||||
)}
|
||||
</HStack>
|
||||
</button>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ import AccountSearch from 'soapbox/components/account_search';
|
|||
import { Card, CardTitle, Stack } from '../../components/ui';
|
||||
|
||||
import Chat from './components/chat';
|
||||
import ChatBox from './components/chat-box';
|
||||
import ChatList from './components/chat-list';
|
||||
import ChatListItem from './components/chat-list-item';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column.chats', defaultMessage: 'Messages' },
|
||||
|
|
@ -55,9 +55,9 @@ const ChatIndex: React.FC = () => {
|
|||
<Stack className='col-span-6 h-full overflow-hidden'>
|
||||
{chat && (
|
||||
<Stack className='h-full overflow-hidden'>
|
||||
<Chat chat={chat} onClick={() => { }} />
|
||||
<ChatListItem chat={chat} onClick={() => { }} />
|
||||
<div className='h-full overflow-hidden'>
|
||||
<ChatBox className='h-full overflow-hidden' chat={chat} />
|
||||
<Chat className='h-full overflow-hidden' chat={chat} />
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue