From 879a6ef6562f4dc1707d0b4fd1ced4066844d466 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Mon, 23 Dec 2019 12:10:55 +0100
Subject: [PATCH] :zap: factorize maxTootCharsLimit to only have one setting in
 the compose form

---
 .../compose/components/compose_form.js        | 60 +++++++++++--------
 1 file changed, 35 insertions(+), 25 deletions(-)

diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index cacdd2986..b52bffbce 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -46,6 +46,7 @@ class ComposeForm extends ImmutablePureComponent {
     spoilerText         : PropTypes.string,
     focusDate           : PropTypes.instanceOf(Date),
     caretPosition       : PropTypes.number,
+    maxTootCharsLimit   : PropTypes.number,
     preselectDate       : PropTypes.instanceOf(Date),
     isSubmitting        : PropTypes.bool,
     isChangingUpload    : PropTypes.bool,
@@ -64,7 +65,8 @@ class ComposeForm extends ImmutablePureComponent {
   };
 
   static defaultProps = {
-    showSearch: false,
+    showSearch       : false,
+    maxTootCharsLimit: 7777,
   };
 
   handleChange = (e) => {
@@ -88,7 +90,7 @@ class ComposeForm extends ImmutablePureComponent {
     const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props;
     const fulltext = [this.props.spoilerText, countableText(this.props.text)].join('');
 
-    if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 7777 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
+    if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > this.props.maxTootCharsLimit || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
       return;
     }
 
@@ -181,23 +183,26 @@ class ComposeForm extends ImmutablePureComponent {
     const { intl, onPaste, showSearch, anyMedia } = this.props;
     const disabled = this.props.isSubmitting;
     const text = [this.props.spoilerText, countableText(this.props.text)].join('');
-    const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 7777 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
+    const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > this.props.maxTootCharsLimit || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
     let publishText = '';
 
     if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
       publishText =
-        <span className='compose-form__publish-private'><Icon id='lock'/> {intl.formatMessage(messages.publish)}</span>;
+        <span className='compose-form__publish-private'><Icon id='lock' /> {intl.formatMessage(messages.publish)}</span >;
     } else {
       publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
     }
 
     return (
       <div className='compose-form'>
-        <WarningContainer/>
+        <WarningContainer />
 
-        <ReplyIndicatorContainer/>
+        <ReplyIndicatorContainer />
 
-        <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef}>
+        <div
+          className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}
+          ref={this.setRef}
+        >
           <AutosuggestInput
             placeholder={intl.formatMessage(messages.spoiler_placeholder)}
             value={this.props.spoilerText}
@@ -213,7 +218,7 @@ class ComposeForm extends ImmutablePureComponent {
             id='cw-spoiler-input'
             className='spoiler-input__input'
           />
-        </div>
+        </div >
 
         <AutosuggestTextarea
           ref={this.setAutosuggestTextarea}
@@ -230,31 +235,36 @@ class ComposeForm extends ImmutablePureComponent {
           onPaste={onPaste}
           autoFocus={!showSearch && !isMobile(window.innerWidth)}
         >
-          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick}/>
+          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
           <div className='compose-form__modifiers'>
-            <UploadFormContainer/>
-            <PollFormContainer/>
-          </div>
-        </AutosuggestTextarea>
+            <UploadFormContainer />
+            <PollFormContainer />
+          </div >
+        </AutosuggestTextarea >
 
         <div className='compose-form__buttons-wrapper'>
           <div className='compose-form__buttons'>
-            <UploadButtonContainer/>
-            <PollButtonContainer/>
-            <PrivacyDropdownContainer/>
-            <SpoilerButtonContainer/>
-          </div>
-          <div className='character-counter__wrapper'><CharacterCounter max={7777} text={text}/></div>
-        </div>
+            <UploadButtonContainer />
+            <PollButtonContainer />
+            <PrivacyDropdownContainer />
+            <SpoilerButtonContainer />
+          </div >
+          <div className='character-counter__wrapper'><CharacterCounter
+            max={this.props.maxTootCharsLimit}
+            text={text}
+          /></div >
+        </div >
 
         <div className='compose-form__publish'>
           <div className='compose-form__publish-button-wrapper'><Button
-            text={publishText} onClick={this.handleSubmit}
-            disabled={disabledButton} block
-          /></div>
-        </div>
+            text={publishText}
+            onClick={this.handleSubmit}
+            disabled={disabledButton}
+            block
+          /></div >
+        </div >
 
-      </div>
+      </div >
     );
   }