Progress on new composer

Updated composer to work with comments, groups, timelines, comments in groups, etc.

app/javascript/gabsocial/features/compose/components/compose_destination_header.js

@@ -32,6 +32,7 @@ class ComposeDestinationHeader extends ImmutablePureComponent {
   render() {
     const {
       account,
+      isReply,
       isModal,
       composeGroup,
       formLocation,
@@ -41,7 +42,18 @@ class ComposeDestinationHeader extends ImmutablePureComponent {
     
     let groupTitle = !!composeGroup ? composeGroup.get('title') : ''
     groupTitle = groupTitle.length > 32 ? `${groupTitle.substring(0, 32).trim()}...` : groupTitle
-    const title = !!composeGroup ? `Post to ${groupTitle}` : 'Post to timeline'
+    let title = 'Post to timeline'
+    if (!!composeGroup) {
+      if (isReply) {
+        title = `Comment in ${groupTitle}`
+      } else {
+        title = `Post to ${groupTitle}`
+      }
+    } else {
+      if (isReply) {
+        title = 'Post as comment'
+      }
+    }
 
     return (
       <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.bgPrimary, _s.w100PC, _s.h40PX, _s.pr15].join(' ')}>
@@ -57,12 +69,12 @@ class ComposeDestinationHeader extends ImmutablePureComponent {
                 buttonRef={this.setDestinationBtn}
                 backgroundColor='secondary'
                 color='primary'
-                onClick={this.handleOnClick}
+                onClick={isReply ? undefined : this.handleOnClick}
                 className={[_s.border1PX, _s.borderColorPrimary].join(' ')}
               >
                 <Text color='inherit' size='small' className={_s.jcCenter}>
                   {title}
-                  <Icon id='caret-down' size='8px' className={_s.ml5} />
+                  { !isReply && <Icon id='caret-down' size='8px' className={_s.ml5} /> }
                 </Text>
               </Button>
             </div>
@@ -89,6 +101,7 @@ const mapStateToProps = (state) => {
 
   return {
     composeGroupId,
+    isReply: !!state.getIn(['compose', 'in_reply_to']),
     composeGroup: state.getIn(['groups', composeGroupId]),
   }
 }
@@ -111,6 +124,7 @@ ComposeDestinationHeader.propTypes = {
   onOpenModal: PropTypes.func.isRequired,
   onOpenPopover: PropTypes.func.isRequired,
   formLocation: PropTypes.string,
+  isReply: PropTypes.bool.isRequired,
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(ComposeDestinationHeader)

app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js

@@ -60,8 +60,6 @@ class ComposeExtraButtonList extends React.PureComponent {
     const isIntroduction = formLocation === 'introduction'
     const small = (!isModal && isXS && !isStandalone) || isTimeline
 
-    console.log("small, formLocation:", small, formLocation)
-
     const containerClasses = CX({
       d: 1,
       w100PC: 1,

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -102,14 +102,19 @@ class ComposeForm extends ImmutablePureComponent {
     // }
 
     // Submit disabled:
-    const { isSubmitting, isChangingUpload, isUploading, anyMedia, groupId, autoJoinGroup } = this.props
+    const { isSubmitting, formLocation, isChangingUpload, isUploading, anyMedia, groupId, autoJoinGroup } = this.props
     const fulltext = [this.props.spoilerText, countableText(this.props.text)].join('')
+    const isStandalone = formLocation === 'standalone'
 
     if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > MAX_POST_CHARACTER_COUNT || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
       return
     }
 
-    this.props.onSubmit(groupId, this.props.replyToId, this.context.router, autoJoinGroup)
+    this.props.onSubmit({
+      router: this.context.router,
+      isStandalone,
+      autoJoinGroup,
+    })
   }
 
   onSuggestionsClearRequested = () => {
@@ -183,6 +188,7 @@ class ComposeForm extends ImmutablePureComponent {
   render() {
     const {
       intl,
+      autoJoinGroup,
       account,
       onPaste,
       anyMedia,
@@ -277,9 +283,7 @@ class ComposeForm extends ImmutablePureComponent {
       <div className={[_s.d, _s.w100PC, _s.flexGrow1, _s.bgPrimary].join(' ')}>
         <div className={[_s.d, _s.calcMaxH410PX, _s.overflowYScroll].join(' ')}>
 
-          <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-            <ComposeDestinationHeader formLocation={formLocation} account={account} isModal={isModalOpen} />
-          </Responsive>
+          <ComposeDestinationHeader formLocation={formLocation} account={account} isModal={isModalOpen} />
 
           <div className={containerClasses} ref={this.setForm} onClick={this.handleClick}>
             {
@@ -337,7 +341,12 @@ class ComposeForm extends ImmutablePureComponent {
         {
           (!disabledButton || isModalOpen) && isMatch &&
           <div className={[_s.d, _s.mb10, _s.px10].join(' ')}>
-            <ComposeFormSubmitButton type='block' />
+            <ComposeFormSubmitButton
+              type='block'
+              formLocation={formLocation}
+              autoJoinGroup={autoJoinGroup}
+              router={this.context.router}
+            />
           </div>
         }
 

app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js

@@ -15,7 +15,9 @@ import Text from '../../../components/text'
 class ComposeFormSubmitButton extends React.PureComponent {
 
   handleSubmit = () => {
-    this.props.onSubmit()
+    const { formLocation, autoJoinGroup, router, type } = this.props
+    const isStandalone = formLocation === 'standalone' || type === 'navigation'
+    this.props.onSubmit(router, isStandalone, autoJoinGroup)
   }
 
   render() {
@@ -25,7 +27,7 @@ class ComposeFormSubmitButton extends React.PureComponent {
       active,
       small,
       type,
-
+      //
       edit,
       text,
       isSubmitting,
@@ -35,6 +37,7 @@ class ComposeFormSubmitButton extends React.PureComponent {
       quoteOfId,
       scheduledAt,
       hasPoll,
+      replyToId,
     } = this.props
 
     const disabledButton = isSubmitting || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text.trim()) === 0 && !anyMedia)
@@ -66,12 +69,6 @@ class ComposeFormSubmitButton extends React.PureComponent {
       )
     }
 
-    const containerClasses = CX({
-      d: 1,
-      jcCenter: 1,
-      h40PX: 1,
-    })
-
     const btnClasses = CX({
       d: 1,
       radiusSmall: 1,
@@ -101,7 +98,7 @@ class ComposeFormSubmitButton extends React.PureComponent {
     }
     
     return (
-      <div className={containerClasses}>
+      <div className={[_s.d, _s.jcCenter, _s.h40PX].join(' ')}>
         <div className={[_s.d, _s.w100PC].join(' ')}>
           <Button
             isBlock
@@ -139,16 +136,24 @@ const mapStateToProps = (state) => ({
   quoteOfId: state.getIn(['compose', 'quote_of_id']),
   scheduledAt: state.getIn(['compose', 'scheduled_at']),
   hasPoll: state.getIn(['compose', 'poll']),
+  replyToId: state.getIn(['compose', 'in_reply_to']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  onSubmit(groupId, replyToId = null, router, isStandalone, autoJoinGroup) {
-    dispatch(submitCompose(groupId, replyToId, router, isStandalone, autoJoinGroup))
+  onSubmit(router, isStandalone, autoJoinGroup) {
+    dispatch(submitCompose({
+      router,
+      isStandalone,
+      autoJoinGroup,
+    }))
   }
 })
 
 ComposeFormSubmitButton.propTypes = {
-  type: PropTypes.oneOf(['header', 'navigation', 'block', 'comment'])
+  type: PropTypes.oneOf(['header', 'navigation', 'block', 'comment']),
+  formLocation: PropTypes.string,
+  autoJoinGroup: PropTypes.bool,
+  router: PropTypes.object,
 }
 
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ComposeFormSubmitButton))