ChatBox: convert to TSX

app/soapbox/features/chats/chat_room.tsx

@@ -22,7 +22,7 @@ interface IChatRoom {
 const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
   const dispatch = useAppDispatch();
   const displayFqn = useAppSelector(getDisplayFqn);
-  const inputElem = useRef<HTMLInputElement | null>(null);
+  const inputElem = useRef<HTMLTextAreaElement | null>(null);
 
   const chat = useAppSelector(state => {
     const chat = state.chats.items.get(params.chatId, ImmutableMap()).toJS() as any;
@@ -33,7 +33,7 @@ const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
     inputElem.current?.focus();
   };
 
-  const handleInputRef = (el: HTMLInputElement) => {
+  const handleInputRef = (el: HTMLTextAreaElement) => {
     inputElem.current = el;
     focusInput();
   };

app/soapbox/features/chats/components/chat_box.tsx

@@ -0,0 +1,192 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import React, { useRef, useState } from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+
+import {
+  sendChatMessage,
+  markChatRead,
+} from 'soapbox/actions/chats';
+import { uploadMedia } from 'soapbox/actions/media';
+import IconButton from 'soapbox/components/icon_button';
+import UploadProgress from 'soapbox/components/upload-progress';
+import UploadButton from 'soapbox/features/compose/components/upload_button';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { truncateFilename } from 'soapbox/utils/media';
+
+import ChatMessageList from './chat_message_list';
+
+const messages = defineMessages({
+  placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
+  send: { id: 'chat_box.actions.send', defaultMessage: 'Send' },
+});
+
+const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
+
+interface IChatBox {
+  chatId: string,
+  onSetInputRef: (el: HTMLTextAreaElement) => void,
+}
+
+/**
+ * Chat UI with just the messages and textarea.
+ * Reused between floating desktop chats and fullscreen/mobile chats.
+ */
+const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chatId, ImmutableOrderedSet<string>()));
+
+  const [content, setContent] = useState('');
+  const [attachment, setAttachment] = useState<any>(undefined);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
+
+  const inputElem = useRef<HTMLTextAreaElement | null>(null);
+
+  const clearState = () => {
+    setContent('');
+    setAttachment(undefined);
+    setIsUploading(false);
+    setUploadProgress(0);
+    setResetFileKey(fileKeyGen());
+  };
+
+  const getParams = () => {
+    return {
+      content,
+      media_id: attachment && attachment.id,
+    };
+  };
+
+  const canSubmit = () => {
+    const conds = [
+      content.length > 0,
+      attachment,
+    ];
+
+    return conds.some(c => c);
+  };
+
+  const sendMessage = () => {
+    if (canSubmit() && !isUploading) {
+      const params = getParams();
+
+      dispatch(sendChatMessage(chatId, params));
+      clearState();
+    }
+  };
+
+  const insertLine = () => {
+    setContent(content + '\n');
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler = (e) => {
+    markRead();
+    if (e.key === 'Enter' && e.shiftKey) {
+      insertLine();
+      e.preventDefault();
+    } else if (e.key === 'Enter') {
+      sendMessage();
+      e.preventDefault();
+    }
+  };
+
+  const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+    setContent(e.target.value);
+  };
+
+  const markRead = () => {
+    dispatch(markChatRead(chatId));
+  };
+
+  const handleHover = () => {
+    markRead();
+  };
+
+  const setInputRef = (el: HTMLTextAreaElement) => {
+    inputElem.current = el;
+    onSetInputRef(el);
+  };
+
+  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/icons/x.svg')}
+            onClick={handleRemoveFile}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  const renderActionButton = () => {
+    return canSubmit() ? (
+      <IconButton
+        src={require('@tabler/icons/icons/send.svg')}
+        title={intl.formatMessage(messages.send)}
+        onClick={sendMessage}
+      />
+    ) : (
+      <UploadButton onSelectFile={handleFiles} resetFileKey={resetFileKey} />
+    );
+  };
+
+  if (!chatMessageIds) return null;
+
+  return (
+    <div className='chat-box' onMouseOver={handleHover}>
+      <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
+      {renderAttachment()}
+      {isUploading && (
+        <UploadProgress progress={uploadProgress * 100} />
+      )}
+      <div className='chat-box__actions simple_form'>
+        <div className='chat-box__send'>
+          {renderActionButton()}
+        </div>
+        <textarea
+          rows={1}
+          placeholder={intl.formatMessage(messages.placeholder)}
+          onKeyDown={handleKeyDown}
+          onChange={handleContentChange}
+          value={content}
+          ref={setInputRef}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ChatBox;

app/soapbox/features/compose/components/upload_button.tsx

@@ -15,16 +15,16 @@ const onlyImages = (types: ImmutableList<string>) => {
 };
 
 interface IUploadButton {
-  disabled: boolean,
-  unavailable: boolean,
+  disabled?: boolean,
+  unavailable?: boolean,
   onSelectFile: (files: FileList) => void,
-  style: React.CSSProperties,
+  style?: React.CSSProperties,
   resetFileKey: number,
 }
 
 const UploadButton: React.FC<IUploadButton> = ({
-  disabled,
-  unavailable,
+  disabled = false,
+  unavailable = false,
   onSelectFile,
   resetFileKey,
 }) => {