Misc Frontend Updates

frontend/src/Components/Form/Form.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './Form.css';
+import { kinds } from 'Helpers/Props';
+import Alert from 'Components/Alert';
 
 function Form({ children, validationErrors, validationWarnings, ...otherProps }) {
   return (
@@ -9,12 +10,12 @@ function Form({ children, validationErrors, validationWarnings, ...otherProps })
         {
           validationErrors.map((error, index) => {
             return (
-              <div
+              <Alert
                 key={index}
-                className={styles.error}
+                kind={kinds.DANGER}
               >
                 {error.errorMessage}
-              </div>
+              </Alert>
             );
           })
         }
@@ -22,12 +23,12 @@ function Form({ children, validationErrors, validationWarnings, ...otherProps })
         {
           validationWarnings.map((warning, index) => {
             return (
-              <div
+              <Alert
                 key={index}
-                className={styles.error}
+                kind={kinds.WARNING}
               >
                 {warning.errorMessage}
-              </div>
+              </Alert>
             );
           })
         }

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -247,9 +247,9 @@ class PageSidebar extends Component {
       window.addEventListener('click', this.onWindowClick, { capture: true });
       window.addEventListener('scroll', this.onWindowScroll);
       window.addEventListener('touchstart', this.onTouchStart);
+      window.addEventListener('touchmove', this.onTouchMove);
       window.addEventListener('touchend', this.onTouchEnd);
       window.addEventListener('touchcancel', this.onTouchCancel);
-      window.addEventListener('touchmove', this.onTouchMove);
     }
   }
 
@@ -274,9 +274,9 @@ class PageSidebar extends Component {
       window.removeEventListener('click', this.onWindowClick, { capture: true });
       window.removeEventListener('scroll', this.onWindowScroll);
       window.removeEventListener('touchstart', this.onTouchStart);
+      window.removeEventListener('touchmove', this.onTouchMove);
       window.removeEventListener('touchend', this.onTouchEnd);
       window.removeEventListener('touchcancel', this.onTouchCancel);
-      window.removeEventListener('touchmove', this.onTouchMove);
     }
   }
 
@@ -322,20 +322,22 @@ class PageSidebar extends Component {
 
   onTouchStart = (event) => {
     const touches = event.touches;
-    const touchStart = touches[0].pageX;
+    const touchStartX = touches[0].pageX;
+    const touchStartY = touches[0].pageY;
     const isSidebarVisible = this.props.isSidebarVisible;
 
     if (touches.length !== 1) {
       return;
     }
 
-    if (isSidebarVisible && (touchStart > 210 || touchStart < 50)) {
+    if (isSidebarVisible && (touchStartX > 210 || touchStartX < 50)) {
       return;
-    } else if (!isSidebarVisible && touchStart > 50) {
+    } else if (!isSidebarVisible && touchStartX > 50) {
       return;
     }
 
-    this._touchStartX = touchStart;
+    this._touchStartX = touchStartX;
+    this._touchStartY = touchStartY;
   }
 
   onTouchEnd = (event) => {

frontend/src/InteractiveImport/Album/SelectAlbumModalContentConnector.js

@@ -54,7 +54,7 @@ class SelectAlbumModalContentConnector extends Component {
       this.props.updateInteractiveImportItem({
         id,
         album,
-        episodes: []
+        tracks: []
       });
     });
 

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css

@@ -33,6 +33,24 @@
 
 @media only screen and (max-width: $breakpointSmall) {
   .footer {
+    .leftButtons,
+    .centerButtons,
+    .rightButtons {
+      flex-direction: column;
+    }
+
+    .leftButtons {
+      align-items: flex-start;
+    }
+
+    .centerButtons {
+      align-items: center;
+    }
+
+    .rightButtons {
+      align-items: flex-end;
+    }
+
     a,
     button {
       margin-left: 0;

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -74,7 +74,7 @@ class InteractiveImportRow extends Component {
 
     const isValid = !!(
       artist &&
-      album != null &&
+      album &&
       tracks.length &&
       quality &&
       language

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalConnector.js

@@ -6,17 +6,19 @@ import { cancelTestDownloadClient, cancelSaveDownloadClient } from 'Store/Action
 import EditDownloadClientModal from './EditDownloadClientModal';
 
 function createMapDispatchToProps(dispatch, props) {
+  const section = 'downloadClients';
+
   return {
     dispatchClearPendingChanges() {
-      dispatch(clearPendingChanges);
+      dispatch(clearPendingChanges({ section }));
     },
 
     dispatchCancelTestDownloadClient() {
-      dispatch(cancelTestDownloadClient);
+      dispatch(cancelTestDownloadClient({ section }));
     },
 
     dispatchCancelSaveDownloadClient() {
-      dispatch(cancelSaveDownloadClient);
+      dispatch(cancelSaveDownloadClient({ section }));
     }
   };
 }
@@ -27,9 +29,9 @@ class EditDownloadClientModalConnector extends Component {
   // Listeners
 
   onModalClose = () => {
-    this.props.dispatchClearPendingChanges({ section: 'downloadClients' });
+    this.props.dispatchClearPendingChanges();
-    this.props.dispatchCancelTestDownloadClient({ section: 'downloadClients' });
+    this.props.dispatchCancelTestDownloadClient();
-    this.props.dispatchCancelSaveDownloadClient({ section: 'downloadClients' });
+    this.props.dispatchCancelSaveDownloadClient();
     this.props.onModalClose();
   }
 

frontend/src/Settings/Indexers/Indexers/EditIndexerModalConnector.js

@@ -6,17 +6,19 @@ import { cancelTestIndexer, cancelSaveIndexer } from 'Store/Actions/settingsActi
 import EditIndexerModal from './EditIndexerModal';
 
 function createMapDispatchToProps(dispatch, props) {
+  const section = 'indexers';
+
   return {
     dispatchClearPendingChanges() {
-      dispatch(clearPendingChanges);
+      dispatch(clearPendingChanges)({ section });
     },
 
     dispatchCancelTestIndexer() {
-      dispatch(cancelTestIndexer);
+      dispatch(cancelTestIndexer({ section }));
     },
 
     dispatchCancelSaveIndexer() {
-      dispatch(cancelSaveIndexer);
+      dispatch(cancelSaveIndexer({ section }));
     }
   };
 }
@@ -27,9 +29,9 @@ class EditIndexerModalConnector extends Component {
   // Listeners
 
   onModalClose = () => {
-    this.props.dispatchClearPendingChanges({ section: 'indexers' });
+    this.props.dispatchClearPendingChanges();
-    this.props.dispatchCancelTestIndexer({ section: 'indexers' });
+    this.props.dispatchCancelTestIndexer();
-    this.props.dispatchCancelSaveIndexer({ section: 'indexers' });
+    this.props.dispatchCancelSaveIndexer();
     this.props.onModalClose();
   }
 

frontend/src/Settings/Metadata/Metadata/EditMetadataModalConnector.js

@@ -4,9 +4,15 @@ import { connect } from 'react-redux';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import EditMetadataModal from './EditMetadataModal';
 
-const mapDispatchToProps = {
+function createMapDispatchToProps(dispatch, props) {
-  clearPendingChanges
+  const section = 'metadata';
-};
+
+  return {
+    dispatchClearPendingChanges() {
+      dispatch(clearPendingChanges)({ section });
+    }
+  };
+}
 
 class EditMetadataModalConnector extends Component {
 
@@ -36,4 +42,4 @@ EditMetadataModalConnector.propTypes = {
   clearPendingChanges: PropTypes.func.isRequired
 };
 
-export default connect(null, mapDispatchToProps)(EditMetadataModalConnector);
+export default connect(null, createMapDispatchToProps)(EditMetadataModalConnector);

frontend/src/Settings/Notifications/Notifications/EditNotificationModalConnector.js

@@ -2,11 +2,26 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { cancelTestNotification, cancelSaveNotification } from 'Store/Actions/settingsActions';
 import EditNotificationModal from './EditNotificationModal';
 
-const mapDispatchToProps = {
+function createMapDispatchToProps(dispatch, props) {
-  clearPendingChanges
+  const section = 'notifications';
-};
+
+  return {
+    dispatchClearPendingChanges() {
+      dispatch(clearPendingChanges({ section }));
+    },
+
+    dispatchCancelTestNotification() {
+      dispatch(cancelTestNotification({ section }));
+    },
+
+    dispatchCancelSaveNotification() {
+      dispatch(cancelSaveNotification({ section }));
+    }
+  };
+}
 
 class EditNotificationModalConnector extends Component {
 
@@ -14,7 +29,9 @@ class EditNotificationModalConnector extends Component {
   // Listeners
 
   onModalClose = () => {
-    this.props.clearPendingChanges({ section: 'notifications' });
+    this.props.dispatchClearPendingChanges();
+    this.props.dispatchCancelTestNotification();
+    this.props.dispatchCancelSaveNotification();
     this.props.onModalClose();
   }
 
@@ -22,9 +39,16 @@ class EditNotificationModalConnector extends Component {
   // Render
 
   render() {
+    const {
+      dispatchClearPendingChanges,
+      dispatchCancelTestNotification,
+      dispatchCancelSaveNotification,
+      ...otherProps
+    } = this.props;
+
     return (
       <EditNotificationModal
-        {...this.props}
+        {...otherProps}
         onModalClose={this.onModalClose}
       />
     );
@@ -33,7 +57,9 @@ class EditNotificationModalConnector extends Component {
 
 EditNotificationModalConnector.propTypes = {
   onModalClose: PropTypes.func.isRequired,
-  clearPendingChanges: PropTypes.func.isRequired
+  dispatchClearPendingChanges: PropTypes.func.isRequired,
+  dispatchCancelTestNotification: PropTypes.func.isRequired,
+  dispatchCancelSaveNotification: PropTypes.func.isRequired
 };
 
-export default connect(null, mapDispatchToProps)(EditNotificationModalConnector);
+export default connect(null, createMapDispatchToProps)(EditNotificationModalConnector);

frontend/src/Store/Actions/Creators/createSaveProviderHandler.js

@@ -7,11 +7,13 @@ const abortCurrentRequests = {};
 
 export function createCancelSaveProviderHandler(section) {
   return function(payload) {
+    return function(dispatch, getState) {
       if (abortCurrentRequests[section]) {
         abortCurrentRequests[section]();
         abortCurrentRequests[section] = null;
       }
     };
+  };
 }
 
 function createSaveProviderHandler(section, url, getFromState) {

frontend/src/Store/Actions/Creators/createTestProviderHandler.js

@@ -6,11 +6,13 @@ const abortCurrentRequests = {};
 
 export function createCancelTestProviderHandler(section) {
   return function(payload) {
+    return function(dispatch, getState) {
       if (abortCurrentRequests[section]) {
         abortCurrentRequests[section]();
         abortCurrentRequests[section] = null;
       }
     };
+  };
 }
 
 function createTestProviderHandler(section, url, getFromState) {