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/components/icon.js

@@ -68,6 +68,7 @@ import ShareIcon from '../assets/share_icon'
 import ShopIcon from '../assets/shop_icon'
 import SortIcon from '../assets/sort_icon'
 import StarIcon from '../assets/star_icon'
+import StopWatchIcon from '../assets/stopwatch_icon'
 import StrikethroughIcon from '../assets/strikethrough_icon'
 import SubtractIcon from '../assets/subtract_icon'
 import TextSizeIcon from '../assets/text_size_icon'
@@ -150,6 +151,7 @@ const ICONS = {
   'shop': ShopIcon,
   'sort': SortIcon,
   'star': StarIcon,
+  'stopwatch': StopWatchIcon,
   'strikethrough': StrikethroughIcon,
   'subtract': SubtractIcon,
   'text-size': TextSizeIcon,

app/javascript/gabsocial/components/popover/popover_root.js

@@ -10,6 +10,7 @@ import {
   POPOVER_SEARCH,
   POPOVER_SIDEBAR_MORE,
   POPOVER_STATUS_OPTIONS,
+  POPOVER_STATUS_EXPIRATION_OPTIONS,
   POPOVER_STATUS_VISIBILITY,
   POPOVER_USER_INFO,
   POPOVER_VIDEO_STATS,
@@ -24,6 +25,7 @@ import {
   ProfileOptionsPopover,
   SearchPopover,
   SidebarMorePopover,
+  StatusExpirationOptionsPopover,
   StatusOptionsPopover,
   StatusVisibilityPopover,
   UserInfoPopover,
@@ -51,6 +53,7 @@ POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
 POPOVER_COMPONENTS[POPOVER_SEARCH] = SearchPopover
 POPOVER_COMPONENTS[POPOVER_SIDEBAR_MORE] = SidebarMorePopover
 POPOVER_COMPONENTS[POPOVER_STATUS_OPTIONS] = StatusOptionsPopover
+POPOVER_COMPONENTS[POPOVER_STATUS_EXPIRATION_OPTIONS] = StatusExpirationOptionsPopover
 POPOVER_COMPONENTS[POPOVER_STATUS_VISIBILITY] = StatusVisibilityPopover
 POPOVER_COMPONENTS[POPOVER_USER_INFO] = UserInfoPopover
 POPOVER_COMPONENTS[POPOVER_VIDEO_STATS] = VideoStatsPopover

app/javascript/gabsocial/components/popover/status_expiration_options_popover.js

@@ -0,0 +1,126 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { closePopover } from '../../actions/popover'
+import { changeExpiresAt } from '../../actions/compose'
+import {
+  STATUS_EXPIRATION_OPTION_5_MINUTES,
+  STATUS_EXPIRATION_OPTION_60_MINUTES,
+  STATUS_EXPIRATION_OPTION_6_HOURS,
+  STATUS_EXPIRATION_OPTION_24_HOURS,
+  STATUS_EXPIRATION_OPTION_3_DAYS,
+  STATUS_EXPIRATION_OPTION_7_DAYS,
+} from '../../constants'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+const messages = defineMessages({
+  minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
+  hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
+  days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
+})
+
+const mapStateToProps = (state) => ({
+  expiresAtValue: state.getIn(['compose', 'expires_at']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onChangeExpiresAt(expiresAt)  {
+    dispatch(changeExpiresAt(expiresAt))
+  },
+  onClosePopover() {
+    dispatch(closePopover())
+  },
+})
+
+export default
+@injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
+class StatusExpirationOptionsPopover extends PureComponent {
+
+  static defaultProps = {
+    expiresAtValue: PropTypes.string.isRequired,
+    intl: PropTypes.object.isRequired,
+    isXS: PropTypes.bool,
+    onChangeExpiresAt: PropTypes.func.isRequired,
+  }
+
+  handleOnSetStatusExpiration = (expiresAt) => {
+    this.props.onChangeExpiresAt(expiresAt)
+    this.handleOnClosePopover()
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const {
+      expiresAtValue,
+      intl,
+      isXS,
+    } = this.props
+
+    const listItems = [
+      {
+        hideArrow: true,
+        title: intl.formatMessage(messages.minutes, { number: 5 }),
+        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_5_MINUTES),
+        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_5_MINUTES,
+      },
+      {
+        hideArrow: true,
+        title: intl.formatMessage(messages.minutes, { number: 60 }),
+        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_60_MINUTES),
+        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_60_MINUTES,
+      },
+      {
+        hideArrow: true,
+        title: '6 hours',
+        title: intl.formatMessage(messages.hours, { number: 6 }),
+        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_6_HOURS),
+        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_6_HOURS,
+      },
+      {
+        hideArrow: true,
+        title: intl.formatMessage(messages.hours, { number: 24 }),
+        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_24_HOURS),
+        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_24_HOURS,
+      },
+      {
+        hideArrow: true,
+        title: '3 days',
+        title: intl.formatMessage(messages.days, { number: 3 }),
+        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_3_DAYS),
+        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_3_DAYS,
+      },
+      {
+        hideArrow: true,
+        title: intl.formatMessage(messages.days, { number: 7 }),
+        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_7_DAYS),
+        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_7_DAYS,
+      },
+    ]
+
+    if (expiresAtValue) {
+      listItems.unshift({
+        hideArrow: true,
+        title: 'Remove expiration',
+        onClick: () => this.handleOnSetStatusExpiration(null),
+      },)
+    }
+
+    return (
+      <PopoverLayout
+        width={210}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <List
+          scrollKey='group_list_sort_options'
+          items={listItems}
+          size={isXS ? 'large' : 'small'}
+        />
+      </PopoverLayout>
+    )
+  }
+
+}

app/javascript/gabsocial/components/status_header.js

@@ -4,6 +4,7 @@ import { NavLink } from 'react-router-dom'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import classNames from 'classnames/bind'
+import moment from 'moment-mini'
 import { openPopover } from '../actions/popover'
 import { openModal } from '../actions/modal'
 import { me } from '../initial_state'
@@ -17,6 +18,7 @@ import Avatar from './avatar'
 
 const messages = defineMessages({
   edited: { id: 'status.edited', defaultMessage: 'Edited' },
+  expirationMessage: { id: 'status.expiration_message', defaultMessage: 'This status expires {time}' },
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
   public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for anyone on or off Gab' },
   unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
@@ -101,6 +103,12 @@ class StatusHeader extends ImmutablePureComponent {
       visibilityText = `${intl.formatMessage(messages.public_short)} - ${intl.formatMessage(messages.public_long)}`
     }
 
+    const expirationDate = status.get('expires_at')
+    let timeUntilExpiration
+    if (!!expirationDate) {
+      timeUntilExpiration = moment(expirationDate).fromNow()
+    }
+
     return (
       <div className={containerClasses}>
         <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
@@ -162,6 +170,18 @@ class StatusHeader extends ImmutablePureComponent {
                 <Icon id={visibilityIcon} size='12px' className={[_s.default, _s.fillSecondary].join(' ')} />
               </span>
 
+              {
+                !!status.get('expires_at') &&
+                <Fragment>
+                  <DotTextSeperator />
+                  <span title={intl.formatMessage(messages.expirationMessage, {
+                    time: timeUntilExpiration,
+                  })} className={[_s.default, _s.displayInline, _s.ml5].join(' ')}>
+                    <Icon id='stopwatch' size='13px' className={[_s.default, _s.fillSecondary].join(' ')} />
+                  </span>
+                </Fragment>
+              }
+
               {
                 !!status.get('group') &&
                 <Fragment>