diff --git a/src/components/molecules/dragable-service/actions/add.js b/src/components/molecules/dragable-service/actions/add.js index b0d1b36e..39a6d5db 100644 --- a/src/components/molecules/dragable-service/actions/add.js +++ b/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, })); diff --git a/src/components/molecules/dragable-service/constants.js b/src/components/molecules/dragable-service/constants.js index a2a3051d..10c6bc4e 100644 --- a/src/components/molecules/dragable-service/constants.js +++ b/src/components/molecules/dragable-service/constants.js @@ -1 +1 @@ -export const ADD_SERVICE = 'ADD_SERVICE'; +export const CLUSTER_SERVICE_ADD = 'CLUSTER_SERVICE_ADD'; diff --git a/src/components/molecules/dragable-service/reducers/add.js b/src/components/molecules/dragable-service/reducers/add.js index 1b3c5f37..781812ca 100644 --- a/src/components/molecules/dragable-service/reducers/add.js +++ b/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; diff --git a/src/components/organisms/cluster-service-list/index.js b/src/components/organisms/cluster-service-list/index.js index 2ccd2dea..23709b3f 100644 --- a/src/components/organisms/cluster-service-list/index.js +++ b/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({ ); }); - 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; diff --git a/src/components/pages/cluster/index.js b/src/components/pages/cluster/index.js index cbfc0b71..c6bc94d0 100644 --- a/src/components/pages/cluster/index.js +++ b/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'); } },