Webpack: optimize ScheduleForm

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

@@ -4,10 +4,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { setSchedule, removeSchedule } from '../../../actions/compose';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import IconButton from 'soapbox/components/icon_button';
-import { removeSchedule } from 'soapbox/actions/compose';
 import classNames from 'classnames';
 
 const messages = defineMessages({
@@ -15,11 +15,22 @@ const messages = defineMessages({
   remove: { id: 'schedule.remove', defaultMessage: 'Remove schedule' },
 });
 
-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = state => ({
+  active: state.getIn(['compose', 'schedule']) ? true : false,
   scheduledAt: state.getIn(['compose', 'schedule']),
 });
 
-export default @connect(mapStateToProps)
+const mapDispatchToProps = dispatch => ({
+  onSchedule(date) {
+    dispatch(setSchedule(date));
+  },
+
+  onRemoveSchedule(date) {
+    dispatch(removeSchedule());
+  },
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 class ScheduleForm extends React.Component {
 
@@ -27,6 +38,7 @@ class ScheduleForm extends React.Component {
     scheduledAt: PropTypes.instanceOf(Date),
     intl: PropTypes.object.isRequired,
     onSchedule: PropTypes.func.isRequired,
+    onRemoveSchedule: PropTypes.func.isRequired,
     dispatch: PropTypes.func,
     active: PropTypes.bool,
   };
@@ -60,7 +72,7 @@ class ScheduleForm extends React.Component {
   }
 
   handleRemove = e => {
-    this.props.dispatch(removeSchedule());
+    this.props.onRemoveSchedule();
     e.preventDefault();
   }
 

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

@@ -1,16 +1,15 @@
-import { connect } from 'react-redux';
+import React from 'react';
-import ScheduleForm from '../components/schedule_form';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import { setSchedule } from '../../../actions/compose';
+import { ScheduleForm } from 'soapbox/features/ui/util/async-components';
 
-const mapStateToProps = state => ({
+export default class ScheduleFormContainer extends React.PureComponent {
-  schedule: state.getIn(['compose', 'schedule']),
-  active: state.getIn(['compose', 'schedule']) ? true : false,
-});
 
-const mapDispatchToProps = dispatch => ({
+  render() {
-  onSchedule(date) {
+    return (
-    dispatch(setSchedule(date));
+      <BundleContainer fetchComponent={ScheduleForm}>
-  },
+        {Component => <Component {...this.props} />}
-});
+      </BundleContainer>
+    );
+  }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleForm);
+}

app/soapbox/features/ui/util/async-components.js

@@ -277,3 +277,7 @@ export function FederationRestrictions() {
 export function Aliases() {
   return import(/* webpackChunkName: "features/aliases" */'../../aliases');
 }
+
+export function ScheduleForm() {
+  return import(/* webpackChunkName: "features/compose" */'../../compose/components/schedule_form');
+}

app/styles/components/datepicker.scss

@@ -156,6 +156,7 @@
     display: flex !important;
     align-items: center !important;
     transition: 0.2s !important;
+    background: var(--foreground-color);
 
     &:hover {
       background-color: var(--background-color) !important;