Merge 8fe3ea2 into 2e3f6a8

.eslintrc.yml

@@ -22,20 +22,16 @@ rules:
   camelcase: warn
   consistent-return: warn
   guard-for-in: warn
-  import/no-unresolved: warn
   import/prefer-default-export: warn
   no-mixed-operators: warn
   no-param-reassign: warn
   no-restricted-globals: warn
   no-restricted-syntax: warn
-  no-underscore-dangle: [error, allow: [__REDUX_DEVTOOLS_EXTENSION_COMPOSE__]]
   no-use-before-define: warn
   prefer-destructuring: warn
   react/forbid-prop-types: warn
-  react/jsx-filename-extension: warn
   react/jsx-no-target-blank: warn
   react/no-multi-comp: warn
-  react/no-unused-prop-types: warn
   react/no-unused-state: warn
   react/prefer-stateless-function: warn
   react/require-default-props: warn
@@ -44,6 +40,7 @@ rules:
   # Intentional Airbnb exceptions:
   no-alert: off  # currently used in the UI
   no-plusplus: [error, allowForLoopAfterthoughts: true]
+  no-underscore-dangle: [error, allow: [__REDUX_DEVTOOLS_EXTENSION_COMPOSE__]]
 
   # TODO: #118 accessibility
   jsx-a11y/anchor-is-valid: off

src/components/date-time-selector.jsx

@@ -1,10 +1,9 @@
 // This component allows the user to select a single date and time
 
-import InputMoment from 'input-moment';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import PickerPopup from './picker-popup';
 
 export default class DateTimeSelector extends React.Component {
   constructor(props) {
@@ -84,66 +83,3 @@ DateTimeSelector.defaultProps = {
   buttonPrefix: '',
   datetime: moment(),
 };
-
-class PickerPopup extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.finishedLoading = false;
-  }
-
-  componentWillMount() {
-    // Add event listener for clicks
-    document.addEventListener('click', this.handleClick, false);
-  }
-
-  componentWillUnmount() {
-    // Remove event listener for clicks
-    document.removeEventListener('click', this.handleClick, false);
-  }
-
-  handleClick = (e) => {
-    // Check if the user clicked outside the calendar selector
-    if (this.props.visible) {
-      if (this.finishedLoading) {
-        // Don't process the click triggering the display of this component
-        const node = ReactDOM.findDOMNode(this);
-        if (node !== null && !node.contains(e.target)) {
-          this.props.lostFocus();
-          this.finishedLoading = false;
-        }
-      } else {
-        this.finishedLoading = true;
-      }
-    } else {
-      this.finishedLoading = false;
-    }
-  };
-
-  render() {
-    return this.props.visible ? (
-      <InputMoment
-        prevMonthIcon="ion-ios-arrow-left" // default
-        nextMonthIcon="ion-ios-arrow-right" // default
-        {...this.props}
-      />
-    ) : null;
-  }
-}
-
-// Define React prop types for type checking during development
-PickerPopup.propTypes = {
-  visible: PropTypes.bool,
-  lostFocus: PropTypes.func.isRequired,
-  moment: PropTypes.instanceOf(moment),
-  onChange: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-  show: PropTypes.oneOf(['both', 'date', 'time']),
-};
-
-// Define default prop values
-PickerPopup.defaultProps = {
-  visible: false,
-  moment: moment(),
-  show: 'both',
-};

src/components/picker-popup.jsx

@@ -0,0 +1,68 @@
+import InputMoment from 'input-moment';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+class PickerPopup extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.finishedLoading = false;
+  }
+
+  componentWillMount() {
+    // Add event listener for clicks
+    document.addEventListener('click', this.handleClick, false);
+  }
+
+  componentWillUnmount() {
+    // Remove event listener for clicks
+    document.removeEventListener('click', this.handleClick, false);
+  }
+
+  handleClick = (e) => {
+    // Check if the user clicked outside the calendar selector
+    if (this.props.visible) {
+      if (this.finishedLoading) {
+        // Don't process the click triggering the display of this component
+        const node = ReactDOM.findDOMNode(this);
+        if (node !== null && !node.contains(e.target)) {
+          this.props.lostFocus();
+          this.finishedLoading = false;
+        }
+      } else {
+        this.finishedLoading = true;
+      }
+    } else {
+      this.finishedLoading = false;
+    }
+  };
+
+  render() {
+    return this.props.visible ? (
+      <InputMoment
+        prevMonthIcon="ion-ios-arrow-left" // default
+        nextMonthIcon="ion-ios-arrow-right" // default
+        {...this.props}
+      />
+    ) : null;
+  }
+}
+
+// Define React prop types for type checking during development
+PickerPopup.propTypes = {
+  visible: PropTypes.bool,
+  lostFocus: PropTypes.func.isRequired,
+  moment: PropTypes.instanceOf(moment),
+  onChange: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
+  show: PropTypes.oneOf(['both', 'date', 'time']),
+};
+
+// Define default prop values
+PickerPopup.defaultProps = {
+  visible: false,
+  moment: moment(),
+  show: 'both',
+};

src/pages/add-edit/add-edit-page.jsx

@@ -98,6 +98,17 @@ export default class AddEditEventPage extends React.Component {
     this.props.clearCurrentEvent();
   }
 
+  setStart = (start) => {
+    const timeDelta = start.diff(this.state.eventData.start);
+    this.updateEventDatum({
+      start,
+      // Shift the end time to maintain the same duration
+      end: moment(this.state.eventData.end).add(timeDelta, 'ms'),
+    });
+  };
+
+  setEnd = end => this.updateEventDatum({ end });
+
   validateInput = () => {
     if (this.state.eventData.title.length === 0) {
       alert('Event Title is required');
@@ -180,17 +191,6 @@ export default class AddEditEventPage extends React.Component {
 
   allDayToggled = e => this.updateEventDatum({ allDay: e.currentTarget.checked });
 
-  setStart = (start) => {
-    const timeDelta = start.diff(this.state.eventData.start);
-    this.updateEventDatum({
-      start,
-      // Shift the end time to maintain the same duration
-      end: moment(this.state.eventData.end).add(timeDelta, 'ms'),
-    });
-  };
-
-  setEnd = end => this.updateEventDatum({ end });
-
   receivedSuccessfulSeriesDataResponse = (response) => {
     const seriesData = response.data;
 

src/pages/add-edit/save-cancel-buttons.jsx

@@ -2,23 +2,24 @@
 
 import * as React from 'react';
 
-export default class SaveCancelButtons extends React.Component {
-  render() {
-    // Only render delete button if we're supposed to
-    const deleteButton = this.props.showDelete && (
-      <button className="button delete" onClick={this.props.onDelete} disabled={this.props.disabled}>
-        {'deleteButtonText' in this.props ? this.props.deleteButtonText : 'Delete'}
-      </button>);
-    return (
-      <div className="form-submit-button-container">
-        {deleteButton}
-        <button className="button cancel" onClick={this.props.onCancel}>
-          {'cancelButtonText' in this.props ? this.props.cancelButtonText : 'Cancel'}
-        </button>
-        <button className="button submit" onClick={this.props.onSubmit} disabled={this.props.disabled}>
-          {'submitButtonText' in this.props ? this.props.submitButtonText : 'Submit'}
-        </button>
-      </div>
-    );
-  }
-}
+const SaveCancelButtons = (props) => {
+  // Only render delete button if we're supposed to
+  const deleteButton = props.showDelete && (
+    <button className="button delete" onClick={props.onDelete} disabled={props.disabled}>
+      {'deleteButtonText' in props ? props.deleteButtonText : 'Delete'}
+    </button>
+  );
+  return (
+    <div className="form-submit-button-container">
+      {deleteButton}
+      <button className="button cancel" onClick={props.onCancel}>
+        {'cancelButtonText' in props ? props.cancelButtonText : 'Cancel'}
+      </button>
+      <button className="button submit" onClick={props.onSubmit} disabled={props.disabled}>
+        {'submitButtonText' in props ? props.submitButtonText : 'Submit'}
+      </button>
+    </div>
+  );
+};
+
+export default SaveCancelButtons;

src/sidebar/event-actions-pane.jsx

@@ -2,21 +2,25 @@
 
 import React from 'react';
 
-export default class EventActionsPane extends React.Component {
-  render() {
-    if (!this.props.currentEvent) return null;
+const EventActionsPane = (props) => {
+  if (!props.currentEvent) return null;
 
-    const editRecurrence = this.props.currentEvent.recId ? (
-      <button className="button" onClick={this.props.editEventSeries}>Edit Series</button>
-    ) : null;
-    const mainEditButtonText = this.props.currentEvent.recId ? 'Edit Recurrence' : 'Edit Event';
+  const editRecurrence = props.currentEvent.recId ? (
+    <button className="button" onClick={props.editEventSeries}>
+      Edit Series
+    </button>
+  ) : null;
+  const mainEditButtonText = props.currentEvent.recId ? 'Edit Recurrence' : 'Edit Event';
 
-    return (
-      <div className={`link-pane ${this.props.className}`}>
-        {editRecurrence}
-        <button className="button" onClick={this.props.editCurrentEvent}>{mainEditButtonText}</button>
-        {/* <button className="button" onClick={this.props.deleteCurrentEvent}>Delete Event</button> */}
-      </div>
-    );
-  }
-}
+  return (
+    <div className={`link-pane ${props.className}`}>
+      {editRecurrence}
+      <button className="button" onClick={props.editCurrentEvent}>
+        {mainEditButtonText}
+      </button>
+      {/* <button className="button" onClick={props.deleteCurrentEvent}>Delete Event</button> */}
+    </div>
+  );
+};
+
+export default EventActionsPane;

src/sidebar/footer.jsx

@@ -2,25 +2,26 @@
 
 import * as React from 'react';
 
-export default class Footer extends React.Component {
-  render() {
-    return (
-      <footer>
-        <div className="footer-message">
-          <p>Made with &hearts; at&nbsp;
-            <a href="http://www.olin.edu/" title="Olin College website" target="_blank">Olin College of Engineering</a>
-          </p>
-          <p>
-            <a href="https://goo.gl/forms/2cqVijokICZ5S20R2" title="Report a problem" target="_blank">
-              Report a problem
-            </a>
-            &nbsp;|&nbsp;
-            <a href="https://github.com/olinlibrary/abe-web" title="View on GitHub" target="_blank">
-              View on GitHub
-            </a>
-          </p>
-        </div>
-      </footer>
-    );
-  }
-}
+const Footer = _props => (
+  <footer>
+    <div className="footer-message">
+      <p>
+        Made with &hearts; at&nbsp;
+        <a href="http://www.olin.edu/" title="Olin College website" target="_blank">
+          Olin College of Engineering
+        </a>
+      </p>
+      <p>
+        <a href="https://goo.gl/forms/2cqVijokICZ5S20R2" title="Report a problem" target="_blank">
+          Report a problem
+        </a>
+        &nbsp;|&nbsp;
+        <a href="https://github.com/olinlibrary/abe-web" title="View on GitHub" target="_blank">
+          View on GitHub
+        </a>
+      </p>
+    </div>
+  </footer>
+);
+
+export default Footer;