From df4aad3c74ffa4876f59e35eec51f4538f71f044 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 28 Jun 2021 00:36:44 -0500
Subject: [PATCH] ScheduledStatuses: refactor ScheduleForm, display "Schedule"
 button in Composer, fixes #660

---
 .../compose/components/compose_form.js        |  5 ++++
 .../compose/components/schedule_form.js       | 26 +++++--------------
 .../containers/compose_form_container.js      |  2 +-
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index 42d2cd826..c6a17b2c2 100644
--- a/app/soapbox/features/compose/components/compose_form.js
+++ b/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,
diff --git a/app/soapbox/features/compose/components/schedule_form.js b/app/soapbox/features/compose/components/schedule_form.js
index 2228946eb..bb6304a9f 100644
--- a/app/soapbox/features/compose/components/schedule_form.js
+++ b/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) {
-    this.setState({ schedule: date });
+  setSchedule = 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 { schedule } = this.state;
+    const { intl, scheduledAt } = this.props;
 
     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} />
diff --git a/app/soapbox/features/compose/containers/compose_form_container.js b/app/soapbox/features/compose/containers/compose_form_container.js
index dad55a041..874402b62 100644
--- a/app/soapbox/features/compose/containers/compose_form_container.js
+++ b/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,
 });