ComposeForm: refactor canSubmit so it works correctly in more scenarios

src/features/compose/components/compose-form.tsx

@@ -101,18 +101,20 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const formRef = useRef<HTMLDivElement>(null);
   const spoilerTextRef = useRef<AutosuggestInput>(null);
   const editorRef = useRef<LexicalEditor>(null);
+  const { isDraggedOver } = useDraggedFiles(formRef);
 
   const text = editorRef.current?.getEditorState().read(() => $getRoot().getTextContent()) ?? '';
-  const { isDraggedOver } = useDraggedFiles(formRef);
+  const fulltext = [spoilerText, countableText(text)].join('');
+
+  const isEmpty = !(fulltext.trim() || anyMedia);
+  const condensed = shouldCondense && !isDraggedOver && !composeFocused && isEmpty && !isUploading;
+  const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
+  const canSubmit = !isSubmitting && !isUploading && !isChangingUpload && !isEmpty && length(fulltext) <= maxTootChars;
 
   const getClickableArea = () => {
     return clickableAreaRef ? clickableAreaRef.current : formRef.current;
   };
 
-  const isEmpty = () => {
-    return !(text || spoilerText || anyMedia);
-  };
-
   const isClickOutside = (e: MouseEvent | React.MouseEvent) => {
     return ![
       // List of elements that shouldn't collapse the composer when clicked
@@ -125,10 +127,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   };
 
   const handleClick = useCallback((e: MouseEvent | React.MouseEvent) => {
-    if (isEmpty() && isClickOutside(e)) {
+    if (isEmpty && isClickOutside(e)) {
       handleClickOutside();
     }
-  }, []);
+  }, [isEmpty]);
 
   const handleClickOutside = () => {
     setComposeFocused(false);
@@ -139,20 +141,12 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   };
 
   const handleSubmit = (e?: React.FormEvent<Element>) => {
+    if (!canSubmit) return;
+    e?.preventDefault();
+
     dispatch(changeCompose(id, text));
-
-    // Submit disabled:
-    const fulltext = [spoilerText, countableText(text)].join('');
-
-    if (e) {
-      e.preventDefault();
-    }
-
-    if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > maxTootChars || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
-      return;
-    }
-
     dispatch(submitCompose(id, { history }));
+
     editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
   };
 
@@ -215,12 +209,6 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     </HStack>
   ), [features, id]);
 
-  const condensed = shouldCondense && !isDraggedOver && !composeFocused && isEmpty() && !isUploading;
-  const disabled = isSubmitting;
-  const countedText = [spoilerText, countableText(text)].join('');
-  const disabledButton = disabled || isUploading || isChangingUpload || length(countedText) > maxTootChars || (countedText.length !== 0 && countedText.trim().length === 0 && !anyMedia);
-  const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
-
   const composeModifiers = !condensed && (
     <Stack space={4} className='compose-form__modifiers'>
       <UploadForm composeId={id} onSubmit={handleSubmit} />
@@ -323,7 +311,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
             </HStack>
           )}
 
-          <Button type='submit' theme='primary' icon={publishIcon} text={publishText} disabled={disabledButton} />
+          <Button type='submit' theme='primary' icon={publishIcon} text={publishText} disabled={!canSubmit} />
         </HStack>
       </div>
     </Stack>