ChatBox: convert to TSX

app/soapbox/actions/media.js

@@ -2,7 +2,7 @@ import { getFeatures } from 'soapbox/utils/features';
 
 import api from '../api';
 
-const noOp = () => {};
+const noOp = (e) => {};
 
 export function fetchMedia(mediaId) {
   return (dispatch, getState) => {

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.js

@@ -1,214 +0,0 @@
-import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl, defineMessages } from 'react-intl';
-import { connect } from 'react-redux';
-
-import {
-  sendChatMessage,
-  markChatRead,
-} from 'soapbox/actions/chats';
-import { uploadMedia } from 'soapbox/actions/media';
-import IconButton from 'soapbox/components/icon_button';
-import UploadProgress from 'soapbox/features/compose/components/upload-progress';
-import UploadButton from 'soapbox/features/compose/components/upload_button';
-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 mapStateToProps = (state, { chatId }) => ({
-  me: state.get('me'),
-  chat: state.getIn(['chats', 'items', chatId]),
-  chatMessageIds: state.getIn(['chat_message_lists', chatId], ImmutableOrderedSet()),
-});
-
-const fileKeyGen = () => Math.floor((Math.random() * 0x10000));
-
-export default @connect(mapStateToProps)
-@injectIntl
-class ChatBox extends ImmutablePureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    chatId: PropTypes.string.isRequired,
-    chatMessageIds: ImmutablePropTypes.orderedSet,
-    chat: ImmutablePropTypes.record,
-    onSetInputRef: PropTypes.func,
-    me: PropTypes.node,
-  }
-
-  initialState = () => ({
-    content: '',
-    attachment: undefined,
-    isUploading: false,
-    uploadProgress: 0,
-    resetFileKey: fileKeyGen(),
-  })
-
-  state = this.initialState()
-
-  clearState = () => {
-    this.setState(this.initialState());
-  }
-
-  getParams = () => {
-    const { content, attachment } = this.state;
-
-    return {
-      content,
-      media_id: attachment && attachment.id,
-    };
-  }
-
-  canSubmit = () => {
-    const { content, attachment } = this.state;
-
-    const conds = [
-      content.length > 0,
-      attachment,
-    ];
-
-    return conds.some(c => c);
-  }
-
-  sendMessage = () => {
-    const { dispatch, chatId } = this.props;
-    const { isUploading } = this.state;
-
-    if (this.canSubmit() && !isUploading) {
-      const params = this.getParams();
-
-      dispatch(sendChatMessage(chatId, params));
-      this.clearState();
-    }
-  }
-
-  insertLine = () => {
-    const { content } = this.state;
-    this.setState({ content: content + '\n' });
-  }
-
-  handleKeyDown = (e) => {
-    this.markRead();
-    if (e.key === 'Enter' && e.shiftKey) {
-      this.insertLine();
-      e.preventDefault();
-    } else if (e.key === 'Enter') {
-      this.sendMessage();
-      e.preventDefault();
-    }
-  }
-
-  handleContentChange = (e) => {
-    this.setState({ content: e.target.value });
-  }
-
-  markRead = () => {
-    const { dispatch, chatId } = this.props;
-    dispatch(markChatRead(chatId));
-  }
-
-  handleHover = () => {
-    this.markRead();
-  }
-
-  setInputRef = (el) => {
-    const { onSetInputRef } = this.props;
-    this.inputElem = el;
-    onSetInputRef(el);
-  };
-
-  handleRemoveFile = (e) => {
-    this.setState({ attachment: undefined, resetFileKey: fileKeyGen() });
-  }
-
-  onUploadProgress = (e) => {
-    const { loaded, total } = e;
-    this.setState({ uploadProgress: loaded / total });
-  }
-
-  handleFiles = (files) => {
-    const { dispatch } = this.props;
-
-    this.setState({ isUploading: true });
-
-    const data = new FormData();
-    data.append('file', files[0]);
-
-    dispatch(uploadMedia(data, this.onUploadProgress)).then(response => {
-      this.setState({ attachment: response.data, isUploading: false });
-    }).catch(() => {
-      this.setState({ isUploading: false });
-    });
-  }
-
-  renderAttachment = () => {
-    const { attachment } = this.state;
-    if (!attachment) return null;
-
-    return (
-      <div className='chat-box__attachment'>
-        <div className='chat-box__filename'>
-          {truncateFilename(attachment.preview_url, 20)}
-        </div>
-        <div class='chat-box__remove-attachment'>
-          <IconButton
-            src={require('@tabler/icons/icons/x.svg')}
-            onClick={this.handleRemoveFile}
-          />
-        </div>
-      </div>
-    );
-  }
-
-  renderActionButton = () => {
-    const { intl } = this.props;
-    const { resetFileKey } = this.state;
-
-    return this.canSubmit() ? (
-      <IconButton
-        src={require('@tabler/icons/icons/send.svg')}
-        title={intl.formatMessage(messages.send)}
-        onClick={this.sendMessage}
-      />
-    ) : (
-      <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
-    );
-  }
-
-  render() {
-    const { chatMessageIds, chatId, intl } = this.props;
-    const { content, isUploading, uploadProgress } = this.state;
-    if (!chatMessageIds) return null;
-
-    return (
-      <div className='chat-box' onMouseOver={this.handleHover}>
-        <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
-        {this.renderAttachment()}
-        <UploadProgress active={isUploading} progress={uploadProgress * 100} />
-        <div className='chat-box__actions simple_form'>
-          <div className='chat-box__send'>
-            {this.renderActionButton()}
-          </div>
-          <textarea
-            rows={1}
-            placeholder={intl.formatMessage(messages.placeholder)}
-            onKeyDown={this.handleKeyDown}
-            onChange={this.handleContentChange}
-            value={content}
-            ref={this.setInputRef}
-          />
-        </div>
-      </div>
-    );
-  }
-
-}

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,
+  disabled?: boolean,
-  unavailable: boolean,
+  unavailable?: boolean,
   onSelectFile: (files: FileList) => void,
-  style: React.CSSProperties,
+  style?: React.CSSProperties,
   resetFileKey: number,
 }
 
 const UploadButton: React.FC<IUploadButton> = ({
-  disabled,
+  disabled = false,
-  unavailable,
+  unavailable = false,
   onSelectFile,
   resetFileKey,
 }) => {