Merge remote-tracking branch 'soapbox/compose' into HEAD

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/announcements/reactions-bar.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 
 import { Icon } from 'soapbox/components/ui';
-import EmojiPickerDropdown from 'soapbox/features/compose/containers/emoji_picker_dropdown_container';
+import EmojiPickerDropdown from 'soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown';
 import { useSettings } from 'soapbox/hooks';
 
 import Reaction from './reaction';

app/soapbox/components/autosuggest_textarea.tsx

@@ -46,8 +46,8 @@ interface IAutosuggesteTextarea {
   onSuggestionsClearRequested: () => void,
   onSuggestionsFetchRequested: (token: string | number) => void,
   onChange: React.ChangeEventHandler<HTMLTextAreaElement>,
-  onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement>,
-  onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement>,
+  onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>,
+  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>,
   onPaste: (files: FileList) => void,
   autoFocus: boolean,
   onFocus: () => void,

app/soapbox/components/modal_root.js

@@ -15,7 +15,7 @@ const messages = defineMessages({
 });
 
 export const checkComposeContent = compose => {
-  return [
+  return !!compose && [
     compose.text.length > 0,
     compose.spoiler_text.length > 0,
     compose.media_attachments.size > 0,
@@ -24,8 +24,8 @@ export const checkComposeContent = compose => {
 };
 
 const mapStateToProps = state => ({
-  hasComposeContent: checkComposeContent(state.compose),
-  isEditing: state.compose.id !== null,
+  hasComposeContent: checkComposeContent(state.compose.get('compose-modal')),
+  isEditing: state.compose.get('compose-modal')?.id !== null,
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/soapbox/components/status-action-bar.tsx

@@ -123,18 +123,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
   const handleReplyClick: React.MouseEventHandler = (e) => {
     if (me) {
-      dispatch((_, getState) => {
-        const state = getState();
-        if (state.compose.text.trim().length !== 0) {
-          dispatch(openModal('CONFIRM', {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status)),
-          }));
-        } else {
-          dispatch(replyCompose(status));
-        }
-      });
+      dispatch(replyCompose(status));
     } else {
       onOpenUnauthorizedModal('REPLY');
     }
@@ -186,18 +175,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     e.stopPropagation();
 
     if (me) {
-      dispatch((_, getState) => {
-        const state = getState();
-        if (state.compose.text.trim().length !== 0) {
-          dispatch(openModal('CONFIRM', {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(quoteCompose(status)),
-          }));
-        } else {
-          dispatch(quoteCompose(status));
-        }
-      });
+      dispatch(quoteCompose(status));
     } else {
       onOpenUnauthorizedModal('REBLOG');
     }

app/soapbox/components/status.tsx

@@ -4,7 +4,7 @@ import { HotKeys } from 'react-hotkeys';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { NavLink, useHistory } from 'react-router-dom';
 
-import { mentionCompose, replyComposeWithConfirmation } from 'soapbox/actions/compose';
+import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
 import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
 import { toggleStatusHidden } from 'soapbox/actions/statuses';
@@ -126,7 +126,7 @@ const Status: React.FC<IStatus> = (props) => {
 
   const handleHotkeyReply = (e?: KeyboardEvent): void => {
     e?.preventDefault();
-    dispatch(replyComposeWithConfirmation(actualStatus, intl));
+    dispatch(replyCompose(actualStatus));
   };
 
   const handleHotkeyFavourite = (): void => {

app/soapbox/components/ui/stack/stack.tsx

@@ -39,7 +39,7 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /** Vertical stack of child elements. */
-const Stack: React.FC<IStack> = React.forwardRef((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
+const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
   const { space, alignItems, justifyContent, className, grow, ...filteredProps } = props;
 
   return (