mcfly.js

var Actions = {
    ADD_ITEM: 1,
    DEL_ITEM: 2,
    MOVE_ITEM: 3,
};

var Flux = new McFly();

var ItemStore = (function (Flux, Actions) {
    var _items = [
    	['ali', 'hammad'],
    	['kasim', 'ashraf']
    ];
    
    function _initContainer(container) {
        if (typeof _items[container] === undefined) {
            _items[container] = [];
        }
    }
    
    function _addItem(label, container) {
        _initContainer(container);
        _items[container].push(label);
    }
    
    function _delItem(idx, container) {
        _items[container].splice(idx, 1);
    }
	
    function _moveItem(idx, fromCont, toCont) {
    	var item = _items[fromCont].splice(idx, 1)[0];
    	_items[toCont].push(item);
    }

    return Flux.createStore(
        {
            getItems: function() {
                return _items;
            }
        },
        function (payload) {
            switch (payload.actionType) {
                case Actions.ADD_ITEM:
                    _addItem(payload.label, payload.container);
                    ItemStore.emitChange();
                    break;
                case Actions.DEL_ITEM:
                    _delItem(payload.idx, payload.container);
                    ItemStore.emitChange();
                    break;
              	case Actions.MOVE_ITEM:
              		_moveItem(payload.idx, payload.fromContainer, payload.toContainer);
                    ItemStore.emitChange();
              		break;
            }
        }
    );
}(Flux, Actions));

var ItemActions = (function (Flux, Actions) {
    return Flux.createActions({
        addItem: function (label, container) {
            return {
                actionType: Actions.ADD_ITEM,
                label: label,
                container: container
            };
        },
        delItem: function (idx, container) {
            return {
                actionType: Actions.DEL_ITEM,
                idx: idx,
                container: container
            };
        },
        moveItem: function (idx, fromContainer, toContainer) {
        	return {
        		actionType: Actions.MOVE_ITEM,
        		idx: idx,
        		fromContainer: fromContainer,
        		toContainer: toContainer
        	};
        }
    });
}(Flux, Actions));

var ContainersController = (function (React, ItemStore, ItemActions){
    var Item = React.createClass({
        render: function () {
            return (
                <option value={this.props.idx}>{this.props.label}</option>
            );
        }
    });
    
    var Container = React.createClass({
        render: function () {
            var opts = this.props.items.map(function (label, idx, _){
                return (
                	<Item label={label} idx={idx} key={idx} />
            	);
            });
            console.log("onChange: ", this.props.onChange);
            return (
            	<select name={this.props.container} onChange={this.props.onChange} multiple>
            		{opts}
            	</select>
            );
        }
    })
    
    function getState() {
    	return {
    		containers: ItemStore.getItems()
    	};
    }

    return React.createClass({
        mixins: [ItemStore.mixin],
        getInitialState: function () {
        	var s = getState();
        	s.active = [];
        	console.log(s);
        	return s;
        },
        onChange: function () {
        	this.setState(getState());
        },
        OnSelectChange: function (container) {
        	var that = this;
        	return function (e) {
        		that.state.active[container] = e.target.value;
        	};
        },
        moveSelected: function (fromContainer, toContainer) {
        	var that = this;
        	return function (e) {
        		if (typeof that.state.active[fromContainer] != undefined) {
        			var idx = that.state.active[fromContainer];
        			ItemActions.moveItem(idx, fromContainer, toContainer);
        		}
        	}
        },
        render: function () {
        	var that = this;
        	var containers = this.state.containers.map(function (items, cont, _){
        		console.log(items, cont);
        		return (
        			<Container container={cont} items={items} onChange={that.OnSelectChange(cont)} />
    			);
        	});

        	var styles = {background: "green", minHeight: "200px", minWidth: "200px"};

        	return (
        		<div style={styles}>
        			{containers}
        			<button value=">" onClick={this.moveSelected(0, 1)} />
        			<button value=">" onClick={this.moveSelected(1, 0)} />
        		</div>
    		);
        }
    });
    
}(React, ItemStore, ItemActions));

React.render(
	<ContainersController /> ,
    document.body
);