Progress

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

@@ -1,8 +1,17 @@
 import DatePicker from 'react-datepicker'
+import { FormattedMessage } from 'react-intl'
+import moment from 'moment-mini'
 import { changeScheduledAt } from '../../actions/compose'
+import { openModal } from '../../actions/modal'
+import { closePopover } from '../../actions/popover'
 import { me } from '../../initial_state'
+import {
+  MODAL_PRO_UPGRADE,
+} from '../../constants'
 import { isMobile } from '../../utils/is_mobile'
 import PopoverLayout from './popover_layout'
+import Button from '../button'
+import Text from '../text'
 
 import '!style-loader!css-loader!react-datepicker/dist/react-datepicker.css'
 
@@ -11,9 +20,18 @@ const mapStateToProps = (state) => ({
   isPro: state.getIn(['accounts', me, 'is_pro']),
 })
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch,  { isPro }) => ({
   setScheduledAt (date) {
+    if (!isPro) {
+      dispatch(closePopover())
+      return dispatch(openModal(MODAL_PRO_UPGRADE))
+    }
+
     dispatch(changeScheduledAt(date))
+
+    if (!date) {
+      dispatch(closePopover())
+    }
   },
 })
 
@@ -31,42 +49,70 @@ class DatePickerPopover extends PureComponent {
   handleSetDate = (date) => {
     this.props.setScheduledAt(date)
   }
+  
+  handleRemoveDate = () => {
+    this.props.setScheduledAt(null)
+  }
 
   render() {
-    const { date, isPro, position } = this.props
+    const { date, isPro } = this.props
 
-    const open = !!date
     const datePickerDisabled = !isPro
     const withPortal = isMobile(window.innerWidth)
 
     return (
       <PopoverLayout width={331}>
-        <DatePicker
-          inline
-          target={this}
-          className='schedule-post-dropdown__datepicker'
-          minDate={new Date()}
-          selected={date}
-          onChange={date => this.handleSetDate(date)}
-          timeFormat='p'
-          timeIntervals={15}
-          timeCaption='Time'
-          dateFormat='MMM d, yyyy h:mm aa'
-          disabled={datePickerDisabled}
-          showTimeSelect
-          withPortal={withPortal}
-          popperModifiers={{
-            offset: {
-              enabled: true,
-              offset: '0px, 5px'
-            },
-            preventOverflow: {
-              enabled: true,
-              escapeWithReference: false,
-              boundariesElement: 'viewport'
-            }
-          }}
-        />
+        <div className={[_s.default].join(' ')}>
+          <DatePicker
+            inline
+            target={this}
+            className='schedule-post-dropdown__datepicker'
+            minDate={new Date()}
+            selected={date}
+            onChange={date => this.handleSetDate(date)}
+            timeFormat='p'
+            timeIntervals={15}
+            timeCaption='Time'
+            dateFormat='MMM d, yyyy h:mm aa'
+            disabled={datePickerDisabled}
+            showTimeSelect
+            withPortal={withPortal}
+            popperModifiers={{
+              offset: {
+                enabled: true,
+                offset: '0px, 5px'
+              },
+              preventOverflow: {
+                enabled: true,
+                escapeWithReference: false,
+                boundariesElement: 'viewport'
+              }
+            }}
+          />
+        </div>
+        {
+          date &&
+          <div className={[_s.default, _s.alignItemsCenter, _s.flexRow, _s.px10, _s.py10, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
+            <Text size='extraSmall' color='secondary'>
+              <FormattedMessage id='scheduled_for_datetime' defaultMessage='Scheduled for {datetime}' values={{
+                datetime: moment.utc(date).format('lll'),
+              }}/>
+            </Text>
+            <div className={_s.mlAuto}>
+              <Button
+                isNarrow
+                radiusSmall
+                color='primary'
+                backgroundColor='tertiary'
+                onClick={this.handleRemoveDate}
+              >
+                <Text color='inherit' size='small'>
+                  <FormattedMessage id='remove' defaultMessage='Remove' />
+                </Text>
+              </Button>
+            </div>
+          </div>
+        }
       </PopoverLayout>
     )
   }

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

@@ -7,6 +7,7 @@ import detectPassiveEvents from 'detect-passive-events'
 import { changeSetting } from '../../actions/settings'
 import { useEmoji } from '../../actions/emojis'
 import { closePopover } from '../../actions/popover'
+import { insertEmojiCompose } from '../../actions/compose'
 import { EmojiPicker as EmojiPickerAsync } from '../../features/ui/util/async_components'
 import { buildCustomEmojis } from '../emoji/emoji'
 import PopoverLayout from './popover_layout'
@@ -209,21 +210,19 @@ const mapStateToProps = (state) => ({
   frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
 })
 
-const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
+const mapDispatchToProps = (dispatch) => ({
   onClosePopover() {
     dispatch(closePopover())
   },
 
-  onSkinTone: skinTone => {
+  onSkinTone: (skinTone) => {
     dispatch(changeSetting(['skinTone'], skinTone))
   },
 
-  onPickEmoji: emoji => {
+  onPickEmoji: (emoji) => {
     dispatch(useEmoji(emoji))
-
-    if (onPickEmoji) {
-      onPickEmoji(emoji)
-    }
+    console.log("emoji:", emoji)
+    dispatch(insertEmojiCompose(0, emoji, false))
   },
 })
 
@@ -274,7 +273,7 @@ class EmojiPickerPopover extends ImmutablePureComponent {
     } = this.props
     
     const { loading } = this.state
-
+    
     return (
       <PopoverLayout width={340}>
         <EmojiPickerMenu

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

@@ -57,12 +57,6 @@ class PopoverRoot extends PureComponent {
     props: PropTypes.object,
   }
 
-  getSnapshotBeforeUpdate() {
-    return {
-      visible: !!this.props.type
-    }
-  }
-
   renderEmpty = () => {
     return <div />
   }