Merge pull request #345 from mekanix/feature/update-dragged-services

Update cluster's services on drag and drop

Author: mekanix

src/components/molecules/dragable-service/actions/add.js

@@ -1,22 +1,22 @@
 import { createAction } from 'redux-actions';
 import { fetch } from '../../../../utils';
 import { API_URL } from '../../../../backend_url';
-import { ADD_SERVICE } from '../constants';
+import { CLUSTER_SERVICE_ADD } from '../constants';
 
-export const reset = createAction(ADD_SERVICE, () => ({
+export const reset = createAction(CLUSTER_SERVICE_ADD, () => ({
   status: 'initial',
 }));
 
-export const begin = createAction(ADD_SERVICE, () => ({
+export const begin = createAction(CLUSTER_SERVICE_ADD, () => ({
   status: 'pending',
 }));
 
-export const success = createAction(ADD_SERVICE, service => ({
+export const success = createAction(CLUSTER_SERVICE_ADD, service => ({
   service,
   status: 'success',
 }));
 
-export const fail = createAction(ADD_SERVICE, error => ({
+export const fail = createAction(CLUSTER_SERVICE_ADD, error => ({
   status: 'error',
   error,
 }));

src/components/molecules/dragable-service/constants.js

@@ -1 +1 @@
-export const ADD_SERVICE = 'ADD_SERVICE';
+export const CLUSTER_SERVICE_ADD = 'CLUSTER_SERVICE_ADD';

src/components/molecules/dragable-service/reducers/add.js

@@ -1,11 +1,11 @@
-import { ADD_SERVICE } from '../constants';
+import { CLUSTER_SERVICE_ADD } from '../constants';
 
-export default function applicationList(
+export default function clusterServiceAdd(
   state = { status: 'initial' },
   action
 ) {
   switch (action.type) {
-    case ADD_SERVICE:
+    case CLUSTER_SERVICE_ADD:
       return action.payload;
     default:
       return state;

src/components/organisms/cluster-service-list/index.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { DropTarget } from 'react-dnd';
+import { connect as reduxConnect } from 'react-redux';
+import store from '../../../store';
 import Service from '../../molecules/service';
 import List from '../../molecules/transition-appear';
+import actions from '../../molecules/dragable-service/actions/add';
 import removeActions from './actions/remove';
 import ItemTypes from '../../molecules/dragable-service/item-types';
 
@@ -16,9 +19,15 @@ const clusterTarget = {
 };
 
 
+const mapStateToProps = (state) => ({
+  addService: state.clusterServiceAdd.service,
+});
+
+
 const ClusterServiceList = React.createClass({
   propTypes: {
     services: React.PropTypes.array,
+    addService: React.PropTypes.object,
     children: React.PropTypes.node,
     clusterId: React.PropTypes.string.isRequired,
     connectDropTarget: React.PropTypes.func.isRequired,
@@ -32,9 +41,28 @@ const ClusterServiceList = React.createClass({
     };
   },
 
+  getInitialState() {
+    return {
+      services: [],
+    };
+  },
+
+  componentWillReceiveProps(nextProps) {
+    const services = nextProps.services;
+    if (nextProps.addService) {
+      services.push(nextProps.addService);
+    }
+    if (services !== this.state.services) {
+      this.setState({ services });
+    }
+    if (nextProps.addService) {
+      store.dispatch(actions.reset());
+    }
+  },
+
   render() {
     const clusterUrl = `clusters/${this.props.clusterId}`;
-    const serviceContent = this.props.services.map(service => {
+    const serviceContent = this.state.services.map(service => {
       const url = `${clusterUrl}/services/${service.id}/provision`;
       const iconId = `${clusterUrl}/services/${service.id}`;
       return (
@@ -47,7 +75,7 @@ const ClusterServiceList = React.createClass({
         </Link>
       );
     });
-    const content = this.props.services ? serviceContent : this.props.children;
+    const content = this.state.services ? serviceContent : this.props.children;
     const { canDrop, isOver, connectDropTarget } = this.props;
     const isActive = canDrop && isOver;
 
@@ -73,9 +101,13 @@ const ClusterServiceList = React.createClass({
 
 
 /* eslint-disable new-cap */
-export default DropTarget(ItemTypes.SERVICE, clusterTarget, (connect, monitor) => ({
+const ClusterServiceDNDList = DropTarget(ItemTypes.SERVICE, clusterTarget, (connect, monitor) => ({
   /* eslint-enable */
   connectDropTarget: connect.dropTarget(),
   isOver: monitor.isOver(),
   canDrop: monitor.canDrop(),
 }))(ClusterServiceList);
+const ClusterServiceConnect = reduxConnect(mapStateToProps, actions)(ClusterServiceDNDList);
+
+
+export default ClusterServiceConnect;

src/components/pages/cluster/index.js

@@ -80,7 +80,6 @@ const ClusterDetail = React.createClass({
   },
 
   componentWillMount() {
-    console.log(store.getState());
     store.dispatch(actions.get(this.props.params.clusterId));
     store.dispatch(pluginActions.get());
   },
@@ -99,7 +98,6 @@ const ClusterDetail = React.createClass({
     } else if (nextProps.addServiceStatus === 'success') {
       store.dispatch(actions.get(this.props.params.clusterId));
       store.dispatch(addService.reset());
-      console.log('here');
     }
   },