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

Fix linting errors

This commit is contained in:
Chewbacca 2022-10-17 12:23:03 -04:00
parent e0379f21e2
commit 694e1c8592
2 changed files with 67 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
View File

@ -7,10 +7,10 @@ import { useDebounce, useFeatures } from 'soapbox/hooks';
import { IChat, useChats } from 'soapbox/queries/chats'; import { IChat, useChats } from 'soapbox/queries/chats';
import ChatList from '../chat-list'; import ChatList from '../chat-list';
import ChatPaneHeader from '../chat-widget/chat-pane-header';
import ChatSearchInput from '../chat-search-input'; import ChatSearchInput from '../chat-search-input';
import ChatSearch from '../chat-search/chat-search'; import ChatSearch from '../chat-search/chat-search';
import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate'; import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate';
import ChatPaneHeader from '../chat-widget/chat-pane-header';
import ChatWindow from '../chat-widget/chat-window'; import ChatWindow from '../chat-widget/chat-window';
import { Pane } from '../ui'; import { Pane } from '../ui';

139
app/soapbox/features/chats/components/chat.tsx
View File

@ -1,21 +1,19 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import classNames from 'clsx'; import classNames from 'clsx';
import React, { MutableRefObject, useEffect, useState } from 'react'; import React, { MutableRefObject, useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { uploadMedia } from 'soapbox/actions/media'; import { Stack } from 'soapbox/components/ui';
import { HStack, IconButton, Stack, Text, Textarea } from 'soapbox/components/ui'; // import UploadProgress from 'soapbox/components/upload-progress';
import UploadProgress from 'soapbox/components/upload-progress'; // import UploadButton from 'soapbox/features/compose/components/upload_button';
import UploadButton from 'soapbox/features/compose/components/upload_button'; import { useOwnAccount } from 'soapbox/hooks';
import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
import { ChatKeys, IChat, useChatActions } from 'soapbox/queries/chats'; import { ChatKeys, IChat, useChatActions } from 'soapbox/queries/chats';
import { queryClient } from 'soapbox/queries/client'; import { queryClient } from 'soapbox/queries/client';
import { truncateFilename } from 'soapbox/utils/media'; // import { truncateFilename } from 'soapbox/utils/media';
import ChatComposer from './chat-composer'; import ChatComposer from './chat-composer';
import ChatMessageList from './chat-message-list'; import ChatMessageList from './chat-message-list';
const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000)); // const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
interface ChatInterface { interface ChatInterface {
chat: IChat, chat: IChat,
@ -29,17 +27,15 @@ interface ChatInterface {
* Reused between floating desktop chats and fullscreen/mobile chats. * Reused between floating desktop chats and fullscreen/mobile chats.
*/ */
const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className }) => { const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const account = useOwnAccount(); const account = useOwnAccount();
const { createChatMessage, acceptChat } = useChatActions(chat.id); const { createChatMessage, acceptChat } = useChatActions(chat.id);
const [content, setContent] = useState<string>(''); const [content, setContent] = useState<string>('');
const [attachment, setAttachment] = useState<any>(undefined); const [attachment, setAttachment] = useState<any>(undefined);
const [isUploading, setIsUploading] = useState(false); // const [isUploading, setIsUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0); // const [uploadProgress, setUploadProgress] = useState(0);
const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen()); // const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
const [hasErrorSubmittingMessage, setErrorSubmittingMessage] = useState<boolean>(false); const [hasErrorSubmittingMessage, setErrorSubmittingMessage] = useState<boolean>(false);
const isSubmitDisabled = content.length === 0 && !attachment; const isSubmitDisabled = content.length === 0 && !attachment;
@ -98,20 +94,16 @@ const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className })
const clearState = () => { const clearState = () => {
setContent(''); setContent('');
setAttachment(undefined); setAttachment(undefined);
setIsUploading(false); // setIsUploading(false);
setUploadProgress(0); // setUploadProgress(0);
setResetFileKey(fileKeyGen()); // setResetFileKey(fileKeyGen());
setErrorSubmittingMessage(false); // setErrorSubmittingMessage(false);
}; };
const sendMessage = () => { const sendMessage = () => {
if (!isSubmitDisabled && !submitMessage.isLoading) { if (!isSubmitDisabled && !submitMessage.isLoading) {
const params = {
content,
media_id: attachment && attachment.id,
};
submitMessage.mutate({ chatId: chat.id, content }); submitMessage.mutate({ chatId: chat.id, content });
if (!chat.accepted) { if (!chat.accepted) {
acceptChat.mutate(); acceptChat.mutate();
} }
@ -136,11 +128,11 @@ const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className })
setContent(event.target.value); setContent(event.target.value);
}; };
const handlePaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => { // const handlePaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
if (isSubmitDisabled && e.clipboardData && e.clipboardData.files.length === 1) { // if (isSubmitDisabled && e.clipboardData && e.clipboardData.files.length === 1) {
handleFiles(e.clipboardData.files); // handleFiles(e.clipboardData.files);
} // }
}; // };
const markRead = () => { const markRead = () => {
// markAsRead.mutate(); // markAsRead.mutate();
@ -149,59 +141,59 @@ const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className })
const handleMouseOver = () => markRead(); const handleMouseOver = () => markRead();
const handleRemoveFile = () => { // const handleRemoveFile = () => {
setAttachment(undefined); // setAttachment(undefined);
setResetFileKey(fileKeyGen()); // setResetFileKey(fileKeyGen());
}; // };
const onUploadProgress = (e: ProgressEvent) => { // const onUploadProgress = (e: ProgressEvent) => {
const { loaded, total } = e; // const { loaded, total } = e;
setUploadProgress(loaded / total); // setUploadProgress(loaded / total);
}; // };
const handleFiles = (files: FileList) => { // const handleFiles = (files: FileList) => {
setIsUploading(true); // setIsUploading(true);
const data = new FormData(); // const data = new FormData();
data.append('file', files[0]); // data.append('file', files[0]);
dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => { // dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
setAttachment(response.data); // setAttachment(response.data);
setIsUploading(false); // setIsUploading(false);
}).catch(() => { // }).catch(() => {
setIsUploading(false); // setIsUploading(false);
}); // });
}; // };
const renderAttachment = () => { // const renderAttachment = () => {
if (!attachment) return null; // if (!attachment) return null;
return ( // return (
<div className='chat-box__attachment'> // <div className='chat-box__attachment'>
<div className='chat-box__filename'> // <div className='chat-box__filename'>
{truncateFilename(attachment.preview_url, 20)} // {truncateFilename(attachment.preview_url, 20)}
</div> // </div>
<div className='chat-box__remove-attachment'> // <div className='chat-box__remove-attachment'>
<IconButton // <IconButton
src={require('@tabler/icons/x.svg')} // src={require('@tabler/icons/x.svg')}
onClick={handleRemoveFile} // onClick={handleRemoveFile}
/> // />
</div> // </div>
</div> // </div>
); // );
}; // };
const renderActionButton = () => { // const renderActionButton = () => {
// return canSubmit() ? ( // return canSubmit() ? (
// <IconButton // <IconButton
// src={require('@tabler/icons/send.svg')} // src={require('@tabler/icons/send.svg')}
// title={intl.formatMessage(messages.send)} // title={intl.formatMessage(messages.send)}
// onClick={sendMessage} // onClick={sendMessage}
// /> // />
// ) : ( // ) : (
// <UploadButton onSelectFile={handleFiles} resetFileKey={resetFileKey} /> // <UploadButton onSelectFile={handleFiles} resetFileKey={resetFileKey} />
// ); // );
}; // };
useEffect(() => { useEffect(() => {
if (inputRef?.current) { if (inputRef?.current) {
@ -221,6 +213,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className })
value={content} value={content}
onChange={handleContentChange} onChange={handleContentChange}
onSubmit={sendMessage} onSubmit={sendMessage}
hasErrorSubmittingMessage={hasErrorSubmittingMessage}
/> />
</Stack> </Stack>
// {renderAttachment()} // {renderAttachment()}