Merge pull request #1388 from processing/bug/collection-adding-multiples

Bug/collection adding multiples

client/modules/IDE/actions/collections.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { browserHistory } from 'react-router';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
 import { setToastText, showToast } from './toast';
@@ -47,20 +48,22 @@ export function createCollection(collection) {
         });
         dispatch(stopLoader());
 
-        const collectionName = response.data.name;
-        dispatch(setToastText(`Created "${collectionName}"`));
+        const newCollection = response.data;
+        dispatch(setToastText(`Created "${newCollection.name}"`));
         dispatch(showToast(TOAST_DISPLAY_TIME_MS));
 
-        return response.data;
+        const pathname = `/${newCollection.owner.username}/collections/${newCollection.id}`;
+        const location = { pathname, state: { skipSavingPath: true } };
+
+        browserHistory.push(location);
       })
       .catch((response) => {
+        console.error('Error creating collection', response.data);
         dispatch({
           type: ActionTypes.ERROR,
           error: response.data
         });
         dispatch(stopLoader());
-
-        return response.data;
       });
   };
 }

client/modules/IDE/components/QuickAddList/QuickAddList.jsx

@@ -53,7 +53,8 @@ const QuickAddList = ({
       {...item}
       onSelect={
         (event) => {
-          event.target.blur();
+          event.stopPropagation();
+          event.currentTarget.blur();
           handleAction(item);
         }
       }

client/modules/User/components/Collection.jsx

@@ -380,15 +380,15 @@ Collection.propTypes = {
   }).isRequired,
   getCollections: PropTypes.func.isRequired,
   collection: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
+    id: PropTypes.string,
+    name: PropTypes.string,
     slug: PropTypes.string,
     description: PropTypes.string,
     owner: PropTypes.shape({
-      username: PropTypes.string.isRequired,
+      username: PropTypes.string,
     }).isRequired,
     items: PropTypes.arrayOf(PropTypes.shape({})),
-  }).isRequired,
+  }),
   username: PropTypes.string,
   loading: PropTypes.bool.isRequired,
   toggleDirectionForField: PropTypes.func.isRequired,
@@ -401,7 +401,14 @@ Collection.propTypes = {
 };
 
 Collection.defaultProps = {
+  username: undefined,
+  collection: {
+    id: undefined,
+    items: [],
+    owner: {
       username: undefined
+    }
+  }
 };
 
 function mapStateToProps(state, ownProps) {

client/modules/User/components/CollectionCreate.jsx

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
-import { browserHistory } from 'react-router';
 import { bindActionCreators } from 'redux';
 import * as CollectionsActions from '../../IDE/actions/collections';
 
@@ -39,19 +38,7 @@ class CollectionCreate extends React.Component {
   handleCreateCollection = (event) => {
     event.preventDefault();
 
-    this.props.createCollection(this.state.collection)
-      .then(({ id, owner }) => {
-        const pathname = `/${owner.username}/collections/${id}`;
-        const location = { pathname, state: { skipSavingPath: true } };
-
-        browserHistory.replace(location);
-      })
-      .catch((error) => {
-        console.error('Error creating collection', error);
-        this.setState({
-          creationError: error,
-        });
-      });
+    this.props.createCollection(this.state.collection);
   }
 
   render() {
@@ -107,12 +94,7 @@ CollectionCreate.propTypes = {
     username: PropTypes.string,
     authenticated: PropTypes.bool.isRequired
   }).isRequired,
-  createCollection: PropTypes.func.isRequired,
-  collection: PropTypes.shape({}).isRequired, // TODO
-  sorting: PropTypes.shape({
-    field: PropTypes.string.isRequired,
-    direction: PropTypes.string.isRequired
-  }).isRequired
+  createCollection: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state, ownProps) {

client/modules/User/pages/CollectionView.jsx

@@ -72,6 +72,7 @@ function mapStateToProps(state) {
 }
 
 function mapDispatchToProps(dispatch) {
+  return {};
 }
 
 CollectionView.propTypes = {
@@ -84,7 +85,7 @@ CollectionView.propTypes = {
   }).isRequired,
   theme: PropTypes.string.isRequired,
   user: PropTypes.shape({
-    username: PropTypes.string.isRequired,
+    username: PropTypes.string,
   }),
 };
 

client/styles/abstracts/_placeholders.scss

@@ -87,7 +87,7 @@
 			fill: getThemifyVariable('button-color');
 			opacity: 1;
 		}
-		&:enabled:hover {
+		&:not(disabled):hover {
 			border-color: getThemifyVariable('button-background-hover-color');
 			background-color: getThemifyVariable('button-background-hover-color');
 			color: getThemifyVariable('button-hover-color');
@@ -95,7 +95,7 @@
 				fill: getThemifyVariable('button-hover-color');
 			}
 		}
-		&:enabled:active {
+		&:not(disabled):active {
 			border-color: getThemifyVariable('button-background-active-color');
 			background-color: getThemifyVariable('button-background-active-color');
 			color: getThemifyVariable('button-active-color');