diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx index 4ead19241..fe82fc84f 100644 --- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx +++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx @@ -7,10 +7,10 @@ import { useDebounce, useFeatures } from 'soapbox/hooks'; import { IChat, useChats } from 'soapbox/queries/chats'; import ChatList from '../chat-list'; -import ChatPaneHeader from '../chat-widget/chat-pane-header'; import ChatSearchInput from '../chat-search-input'; import ChatSearch from '../chat-search/chat-search'; import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate'; +import ChatPaneHeader from '../chat-widget/chat-pane-header'; import ChatWindow from '../chat-widget/chat-window'; import { Pane } from '../ui'; diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx index 6933b9828..d86911e4a 100644 --- a/app/soapbox/features/chats/components/chat.tsx +++ b/app/soapbox/features/chats/components/chat.tsx @@ -1,21 +1,19 @@ import { useMutation } from '@tanstack/react-query'; import classNames from 'clsx'; import React, { MutableRefObject, useEffect, useState } from 'react'; -import { useIntl } 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 { Stack } from 'soapbox/components/ui'; +// import UploadProgress from 'soapbox/components/upload-progress'; +// import UploadButton from 'soapbox/features/compose/components/upload_button'; +import { useOwnAccount } from 'soapbox/hooks'; import { ChatKeys, IChat, useChatActions } from 'soapbox/queries/chats'; import { queryClient } from 'soapbox/queries/client'; -import { truncateFilename } from 'soapbox/utils/media'; +// import { truncateFilename } from 'soapbox/utils/media'; import ChatComposer from './chat-composer'; import ChatMessageList from './chat-message-list'; -const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000)); +// const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000)); interface ChatInterface { chat: IChat, @@ -29,17 +27,15 @@ interface ChatInterface { * Reused between floating desktop chats and fullscreen/mobile chats. */ const Chat: React.FC = ({ chat, autosize, inputRef, className }) => { - const intl = useIntl(); - const dispatch = useAppDispatch(); const account = useOwnAccount(); const { createChatMessage, acceptChat } = useChatActions(chat.id); const [content, setContent] = useState(''); const [attachment, setAttachment] = useState(undefined); - const [isUploading, setIsUploading] = useState(false); - const [uploadProgress, setUploadProgress] = useState(0); - const [resetFileKey, setResetFileKey] = useState(fileKeyGen()); + // const [isUploading, setIsUploading] = useState(false); + // const [uploadProgress, setUploadProgress] = useState(0); + // const [resetFileKey, setResetFileKey] = useState(fileKeyGen()); const [hasErrorSubmittingMessage, setErrorSubmittingMessage] = useState(false); const isSubmitDisabled = content.length === 0 && !attachment; @@ -98,20 +94,16 @@ const Chat: React.FC = ({ chat, autosize, inputRef, className }) const clearState = () => { setContent(''); setAttachment(undefined); - setIsUploading(false); - setUploadProgress(0); - setResetFileKey(fileKeyGen()); - setErrorSubmittingMessage(false); + // 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(); } @@ -136,11 +128,11 @@ const Chat: React.FC = ({ chat, autosize, inputRef, className }) setContent(event.target.value); }; - const handlePaste: React.ClipboardEventHandler = (e) => { - if (isSubmitDisabled && e.clipboardData && e.clipboardData.files.length === 1) { - handleFiles(e.clipboardData.files); - } - }; + // const handlePaste: React.ClipboardEventHandler = (e) => { + // if (isSubmitDisabled && e.clipboardData && e.clipboardData.files.length === 1) { + // handleFiles(e.clipboardData.files); + // } + // }; const markRead = () => { // markAsRead.mutate(); @@ -149,59 +141,59 @@ const Chat: React.FC = ({ chat, autosize, inputRef, className }) const handleMouseOver = () => markRead(); - const handleRemoveFile = () => { - setAttachment(undefined); - setResetFileKey(fileKeyGen()); - }; + // const handleRemoveFile = () => { + // setAttachment(undefined); + // setResetFileKey(fileKeyGen()); + // }; - const onUploadProgress = (e: ProgressEvent) => { - const { loaded, total } = e; - setUploadProgress(loaded / total); - }; + // const onUploadProgress = (e: ProgressEvent) => { + // const { loaded, total } = e; + // setUploadProgress(loaded / total); + // }; - const handleFiles = (files: FileList) => { - setIsUploading(true); + // const handleFiles = (files: FileList) => { + // setIsUploading(true); - const data = new FormData(); - data.append('file', files[0]); + // const data = new FormData(); + // data.append('file', files[0]); - dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => { - setAttachment(response.data); - setIsUploading(false); - }).catch(() => { - setIsUploading(false); - }); - }; + // dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => { + // setAttachment(response.data); + // setIsUploading(false); + // }).catch(() => { + // setIsUploading(false); + // }); + // }; - const renderAttachment = () => { - if (!attachment) return null; + // const renderAttachment = () => { + // if (!attachment) return null; - return ( -
-
- {truncateFilename(attachment.preview_url, 20)} -
-
- -
-
- ); - }; + // return ( + //
+ //
+ // {truncateFilename(attachment.preview_url, 20)} + //
+ //
+ // + //
+ //
+ // ); + // }; - const renderActionButton = () => { - // return canSubmit() ? ( - // - // ) : ( - // - // ); - }; + // const renderActionButton = () => { + // return canSubmit() ? ( + // + // ) : ( + // + // ); + // }; useEffect(() => { if (inputRef?.current) { @@ -221,6 +213,7 @@ const Chat: React.FC = ({ chat, autosize, inputRef, className }) value={content} onChange={handleContentChange} onSubmit={sendMessage} + hasErrorSubmittingMessage={hasErrorSubmittingMessage} /> // {renderAttachment()}