Added self-destructing/expiring statuses

• Added:
- self-destructing/expiring statuses for GabPRO members only
- ExpiringStatusWorker
- stopwatch icon
- expires_at redux values
- expires_at button in composer
- expires at selection popover

• Updated:
- Schedule status button to not show if expiring status active

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

@@ -21,6 +21,7 @@ import PollButton from './poll_button'
 import PollForm from './poll_form'
 import SchedulePostButton from './schedule_post_button'
 import SpoilerButton from './spoiler_button'
+import ExpiresPostButton from './expires_post_button'
 import RichTextEditorButton from './rich_text_editor_button'
 import StatusContainer from '../../../containers/status_container'
 import StatusVisibilityButton from './status_visibility_button'
@@ -484,10 +485,15 @@ class ComposeForm extends ImmutablePureComponent {
                     <StatusVisibilityButton />
                     <SpoilerButton />
                     {
-                      !hidePro &&
+                      !hidePro && !edit &&
                       <SchedulePostButton />
                     }
 
+                    {
+                      !hidePro && !edit &&
+                      <ExpiresPostButton />
+                    }
+
                     {
                       !hidePro &&
                       <Responsive min={BREAKPOINT_EXTRA_SMALL}>

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

@@ -0,0 +1,78 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { openModal } from '../../../actions/modal'
+import { openPopover } from '../../../actions/popover'
+import { me } from '../../../initial_state'
+import { POPOVER_STATUS_EXPIRATION_OPTIONS } from '../../../constants'
+import ComposeExtraButton from './compose_extra_button'
+
+const messages = defineMessages({
+  expires: { id: 'expiration.title', defaultMessage: 'Add status expiration' },
+})
+
+const mapStateToProps = (state) => ({
+  hasScheduledAt: !!state.getIn(['compose', 'scheduled_at']),
+  active: !!state.getIn(['compose', 'expires_at']) || state.getIn(['popover', 'popoverType']) === POPOVER_STATUS_EXPIRATION_OPTIONS,
+  isPro: state.getIn(['accounts', me, 'is_pro']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onOpenExpirationPopover(targetRef) {
+    dispatch(openPopover(POPOVER_STATUS_EXPIRATION_OPTIONS, {
+      targetRef,
+    }))
+  },
+  onOpenProUpgradeModal() {
+    dispatch(openModal('PRO_UPGRADE'))
+  },
+})
+
+export default
+@injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
+class ExpiresPostButton extends PureComponent {
+
+  static propTypes = {
+    active: PropTypes.bool.isRequired,
+    intl: PropTypes.object.isRequired,
+    isPro: PropTypes.bool,
+    hasScheduledAt: PropTypes.bool,
+    onOpenProUpgradeModal: PropTypes.func.isRequired,
+    onOpenExpirationPopover: PropTypes.func.isRequired,
+    small: PropTypes.bool,
+  }
+
+  handleToggle = () => {
+    if (!this.props.isPro) {
+      this.props.onOpenProUpgradeModal()
+    } else {
+      this.props.onOpenExpirationPopover(this.button)
+    }
+  }
+
+  setButton = (n) => {
+    this.button = n
+  }
+
+  render () {
+    const {
+      active,
+      intl,
+      hasScheduledAt,
+      small,
+    } = this.props
+
+    if (hasScheduledAt) return null
+
+    return (
+      <ComposeExtraButton
+        active={active}
+        buttonRef={this.setButton}
+        icon='stopwatch'
+        onClick={this.handleToggle}
+        small={small}
+        title={intl.formatMessage(messages.expires)}
+      />
+    )
+  }
+
+}

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

@@ -11,6 +11,7 @@ const messages = defineMessages({
 })
 
 const mapStateToProps = (state) => ({
+  hasExpiresAt: !!state.getIn(['compose', 'expires_at']),
   active: !!state.getIn(['compose', 'scheduled_at']) || state.getIn(['popover', 'popoverType']) === 'DATE_PICKER',
   isPro: state.getIn(['accounts', me, 'is_pro']),
 })
@@ -34,12 +35,13 @@ const mapDispatchToProps = (dispatch) => ({
 export default
 @injectIntl
 @connect(mapStateToProps, mapDispatchToProps)
-class SchedulePostDropdown extends PureComponent {
+class SchedulePostButton extends PureComponent {
 
   static propTypes = {
     active: PropTypes.bool.isRequired,
     intl: PropTypes.object.isRequired,
     isPro: PropTypes.bool,
+    hasExpiresAt: PropTypes.bool,
     onOpenProUpgradeModal: PropTypes.func.isRequired,
     onOpenDatePickerPopover: PropTypes.func.isRequired,
     onCloseDatePickerPopover: PropTypes.func.isRequired,
@@ -62,9 +64,12 @@ class SchedulePostDropdown extends PureComponent {
     const {
       active,
       intl,
+      hasExpiresAt,
       small,
     } = this.props
 
+    if (hasExpiresAt) return null
+
     return (
       <ComposeExtraButton
         active={active}