ScheduledStatuses: refactor ScheduleForm, display "Schedule" button in Composer, fixes #660

app/soapbox/features/compose/components/compose_form.js

@@ -35,6 +35,7 @@ const messages = defineMessages({
   spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
   publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
+  schedule: { id: 'compose_form.schedule', defaultMessage: 'Schedule' },
 });
 
 export default @injectIntl
@@ -262,6 +263,10 @@ class ComposeForm extends ImmutablePureComponent {
       publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
     }
 
+    if (this.props.scheduledAt) {
+      publishText = intl.formatMessage(messages.schedule);
+    }
+
     const composeClassNames = classNames({
       'compose-form': true,
       'condensed': condensed,

app/soapbox/features/compose/components/schedule_form.js

@@ -15,7 +15,7 @@ const messages = defineMessages({
 });
 
 const mapStateToProps = (state, ownProps) => ({
-  schedule: state.getIn(['compose', 'schedule']),
+  scheduledAt: state.getIn(['compose', 'schedule']),
 });
 
 export default @connect(mapStateToProps)
@@ -23,15 +23,14 @@ export default @connect(mapStateToProps)
 class ScheduleForm extends React.Component {
 
   static propTypes = {
-    schedule: PropTypes.instanceOf(Date),
+    scheduledAt: PropTypes.instanceOf(Date),
     intl: PropTypes.object.isRequired,
     onSchedule: PropTypes.func.isRequired,
     dispatch: PropTypes.func,
     active: PropTypes.bool,
   };
 
-  setSchedule(date) {
+  setSchedule = date => {
-    this.setState({ schedule: date });
     this.props.onSchedule(date);
   }
 
@@ -43,16 +42,6 @@ class ScheduleForm extends React.Component {
     datePicker.setOpen(true);
   }
 
-  componentDidMount() {
-    this.setState({ schedule: this.props.schedule });
-  }
-
-  constructor(props) {
-    super(props);
-
-    this.setSchedule = this.setSchedule.bind(this);
-  }
-
   isCurrentOrFutureDate(date) {
     return date && new Date().setHours(0, 0, 0, 0) <= new Date(date).setHours(0, 0, 0, 0);
   }
@@ -70,12 +59,11 @@ class ScheduleForm extends React.Component {
   }
 
   render() {
-    if (!this.props.active || !this.state) {
+    if (!this.props.active) {
       return null;
     }
 
-    const { intl } = this.props;
+    const { intl, scheduledAt } = this.props;
-    const { schedule } = this.state;
 
     return (
       <div className='datepicker'>
@@ -84,7 +72,7 @@ class ScheduleForm extends React.Component {
         </div>
         <div className='datepicker__input'>
           <DatePicker
-            selected={schedule}
+            selected={scheduledAt}
             showTimeSelect
             dateFormat='MMMM d, yyyy h:mm aa'
             timeIntervals={15}
@@ -93,7 +81,7 @@ class ScheduleForm extends React.Component {
             placeholderText={this.props.intl.formatMessage(messages.schedule)}
             filterDate={this.isCurrentOrFutureDate}
             filterTime={this.isFiveMinutesFromNow}
-            ref={this.isCurrentOrFutureDate(schedule) ? null : this.openDatePicker}
+            ref={this.isCurrentOrFutureDate(scheduledAt) ? null : this.openDatePicker}
           />
           <div className='datepicker__cancel'>
             <IconButton size={20} title={intl.formatMessage(messages.remove)} icon='times' onClick={this.handleRemove} />

app/soapbox/features/compose/containers/compose_form_container.js

@@ -26,7 +26,7 @@ const mapStateToProps = state => ({
   anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
   isModalOpen: state.get('modal').modalType === 'COMPOSE',
   maxTootChars: state.getIn(['instance', 'max_toot_chars']),
-  schedule: state.getIn(['instance', 'schedule']),
+  scheduledAt: state.getIn(['compose', 'schedule']),
   scheduledStatusCount: state.get('scheduled_statuses').size,
 });