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

Chats: start making attachments work again

This commit is contained in:
Alex Gleason 2022-12-06 16:19:56 -06:00
parent 2ca4db5c3b
commit 6eafb8c0c3
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 75 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/soapbox/features/chats/components/chat-composer.tsx
View File

@ -1,10 +1,11 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, IntlShape, useIntl } from 'react-intl';
import { unblockAccount } from 'soapbox/actions/accounts'; import { unblockAccount } from 'soapbox/actions/accounts';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover, HStack, IconButton, Stack, Text, Textarea } from 'soapbox/components/ui'; import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover, HStack, IconButton, Stack, Text, Textarea } from 'soapbox/components/ui';
import { useChatContext } from 'soapbox/contexts/chat-context'; import { useChatContext } from 'soapbox/contexts/chat-context';
import UploadButton from 'soapbox/features/compose/components/upload-button';
import { search as emojiSearch } from 'soapbox/features/emoji/emoji-mart-search-light'; import { search as emojiSearch } from 'soapbox/features/emoji/emoji-mart-search-light';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions'; import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
@ -32,10 +33,12 @@ interface Suggestion {
token: string, token: string,
} }
interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onKeyDown' | 'onChange' | 'disabled'> { interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onKeyDown' | 'onChange' | 'onPaste' | 'disabled'> {
value: string value: string
onSubmit: () => void onSubmit: () => void
errorMessage: string | undefined errorMessage: string | undefined
onSelectFile: (files: FileList, intl: IntlShape) => void
resetFileKey: number | null
} }
/** Textarea input for chats. */ /** Textarea input for chats. */
@ -46,6 +49,9 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
onSubmit, onSubmit,
errorMessage = false, errorMessage = false,
disabled = false, disabled = false,
onSelectFile,
resetFileKey,
onPaste,
}, ref) => { }, ref) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const intl = useIntl(); const intl = useIntl();
@ -143,6 +149,10 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
return ( return (
<div className='mt-auto px-4 shadow-3xl'> <div className='mt-auto px-4 shadow-3xl'>
<HStack alignItems='stretch' justifyContent='between' space={4}> <HStack alignItems='stretch' justifyContent='between' space={4}>
<Stack justifyContent='end' alignItems='center' className='w-10 mb-1.5'>
<UploadButton onSelectFile={onSelectFile} resetFileKey={resetFileKey} />
</Stack>
<Stack grow> <Stack grow>
<Combobox <Combobox
aria-labelledby='demo' aria-labelledby='demo'
@ -156,6 +166,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
value={value} value={value}
onChange={handleChange} onChange={handleChange}
onPaste={onPaste}
isResizeable={false} isResizeable={false}
autoGrow autoGrow
maxRows={5} maxRows={5}

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

@ -3,16 +3,17 @@ import classNames from 'clsx';
import React, { MutableRefObject, useEffect, useState } from 'react'; import React, { MutableRefObject, useEffect, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { Stack } from 'soapbox/components/ui'; import { uploadMedia } from 'soapbox/actions/media';
// import UploadProgress from 'soapbox/components/upload-progress'; import { IconButton, Stack } from 'soapbox/components/ui';
// import UploadButton from 'soapbox/features/compose/components/upload_button'; import UploadProgress from 'soapbox/components/upload-progress';
import { useAppDispatch } from 'soapbox/hooks';
import { IChat, useChatActions } from 'soapbox/queries/chats'; import { IChat, useChatActions } from 'soapbox/queries/chats';
// 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));
const messages = defineMessages({ const messages = defineMessages({
failedToSend: { id: 'chat.failed_to_send', defaultMessage: 'Message failed to send.' }, failedToSend: { id: 'chat.failed_to_send', defaultMessage: 'Message failed to send.' },
@ -46,14 +47,15 @@ const clearNativeInputValue = (element: HTMLTextAreaElement) => {
*/ */
const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => { const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch();
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 [errorMessage, setErrorMessage] = useState<string>(); const [errorMessage, setErrorMessage] = useState<string>();
const isSubmitDisabled = content.length === 0 && !attachment; const isSubmitDisabled = content.length === 0 && !attachment;
@ -79,10 +81,9 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
} }
setContent(''); setContent('');
setAttachment(undefined); setAttachment(undefined);
// setIsUploading(false); setIsUploading(false);
// setUploadProgress(0); setUploadProgress(0);
// setResetFileKey(fileKeyGen()); setResetFileKey(fileKeyGen());
// setErrorSubmittingMessage(false);
}; };
const sendMessage = () => { const sendMessage = () => {
@ -113,11 +114,11 @@ const Chat: React.FC<ChatInterface> = ({ chat, 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();
@ -126,59 +127,47 @@ const Chat: React.FC<ChatInterface> = ({ chat, 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 = () => {
// return canSubmit() ? (
// <IconButton
// src={require('@tabler/icons/send.svg')}
// title={intl.formatMessage(messages.send)}
// onClick={sendMessage}
// />
// ) : (
// <UploadButton onSelectFile={handleFiles} resetFileKey={resetFileKey} />
// );
// };
useEffect(() => { useEffect(() => {
if (inputRef?.current) { if (inputRef?.current) {
@ -192,6 +181,12 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
<ChatMessageList chat={chat} /> <ChatMessageList chat={chat} />
</div> </div>
{renderAttachment()}
{isUploading && (
<UploadProgress progress={uploadProgress * 100} />
)}
<ChatComposer <ChatComposer
ref={inputRef} ref={inputRef}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
@ -199,26 +194,11 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
onChange={handleContentChange} onChange={handleContentChange}
onSubmit={sendMessage} onSubmit={sendMessage}
errorMessage={errorMessage} errorMessage={errorMessage}
onSelectFile={handleFiles}
resetFileKey={resetFileKey}
onPaste={handlePaste}
/> />
</Stack> </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>
); );
}; };