Refactoring store

js/components/edit/desktop-app-list.jsx

@@ -11,7 +11,7 @@ var DesktopAppList = React.createClass({
     var items = this.props.desktopApps.map(function(desktopApp, i) {
       var desktopEntry = desktopApp.content['Desktop Entry'];
       return (
-        <DesktopAppItem theme={this.props.selectedTheme}
+        <DesktopAppItem theme={this.props.theme}
           key={desktopApp.path}
           desktopEntry={desktopEntry}
           onItemDropped={this.props.onItemDropped} />

js/components/edit/edit-view.jsx

@@ -24,21 +24,21 @@ var EditView = React.createClass({
         </div>
         <div className="workspace">
           <div className="left-menu">
-            <IconThemeSelector onThemeSelected={this.onThemeSelected} />
+            <IconThemeSelector onThemeSelected={this.handleThemeSelect} />
             <DesktopAppList
               theme={this.props.theme}
               desktopApps={this.props.desktopApps}
-              onItemDropped={this.onItemDropped} />
+              onItemDropped={this.handleItemDrop} />
           </div>
           <ProfileTree />
-          <ItemForm />
+          <ItemForm item={this.props.selectedItem} onItemChange={this.handleItemChange} />
         </div>
       </div>
     );
 
   },
 
-  onItemDropped: function(desktopEntry, targetItem) {
+  handleItemDrop: function(desktopEntry, targetItem) {
 
     var newProfileItem = {
       label: desktopEntry.Name,
@@ -50,8 +50,12 @@ var EditView = React.createClass({
 
   },
 
-  onThemeSelected: function(theme) {
-    this.props.dispatch(actions.edit.selectTheme(theme));
+  handleThemeSelect: function(theme) {
+    this.props.dispatch(actions.edit.useIconTheme(theme));
+  },
+
+  handleItemChange: function(item, key, value) {
+    this.props.dispatch(actions.edit.updateProfileItem(item, key, value));
   }
 
 });
@@ -60,7 +64,8 @@ function select(state) {
   return {
     desktopApps: state.desktopApps,
     profile: state.profile,
-    theme: state.theme
+    theme: state.theme,
+    selectedItem: state.selectedItem
   };
 }
 

js/components/edit/item-form.jsx

@@ -2,13 +2,74 @@ var React = require('react');
 
 var ItemForm = React.createClass({
 
+  getInitialState: function() {
+    return {
+      label: '',
+      icon: '',
+      exec: ''
+    };
+  },
+
+  componentWillReceiveProps: function(props) {
+
+    if(props.item) {
+
+      this.setState({
+        label: props.item.label,
+        icon: props.item.icon,
+        exec: props.item.exec
+      });
+    }
+
+  },
+
   render: function() {
 
+    var state = this.state;
+
     return (
       <div className="item-form">
+        <form>
+          <div className="form-group">
+            <label>Label</label>
+            <input type="text" className="form-control"
+              placeholder="Label"
+              value={state.label}
+              onChange={this.handleChange.bind(this, 'label')} />
+          </div>
+          <div className="form-group">
+            <label>Icon</label>
+            <input type="text" className="form-control"
+              placeholder="Icon"
+              value={state.icon}
+              onChange={this.handleChange.bind(this, 'icon')} />
+          </div>
+          <div className="form-group">
+            <label>Exec</label>
+            <input type="text" className="form-control"
+              placeholder="Exec" value={state.exec}
+              onChange={this.handleChange.bind(this, 'exec')} />
+          </div>
+        </form>
       </div>
     );
 
+  },
+
+  handleChange: function(key, evt) {
+
+    evt.preventDefault();
+
+    var newState = {};
+    var value = evt.currentTarget.value;
+
+    newState[key] = value;
+    this.setState(newState);
+
+    if(typeof this.props.onItemChange === 'function') {
+      this.props.onItemChange(this.props.item, key, value);
+    }
+
   }
 
 });

js/components/edit/profile-tree.jsx

@@ -13,13 +13,17 @@ var TreeNode = React.createClass({
     var listElements = subItems.map(function(subItem, i) {
       return (
         <li key={i} >
-          <TreeNode data={subItem} onItemMoved={this.props.onItemMoved} />
+          <TreeNode data={subItem}
+            selectedItem={this.props.selectedItem}
+            onItemClicked={this.props.onItemClicked}
+            onItemMoved={this.props.onItemMoved}
+            theme={this.props.theme} />
         </li>
       );
     }.bind(this));
 
     var appEntry = data.icon || data.label ?
-      <TreeItem data={data} onItemMoved={this.props.onItemMoved} /> :
+      this.renderTreeItem(data):
       null
     ;
 
@@ -32,6 +36,14 @@ var TreeNode = React.createClass({
       </div>
     );
 
+  },
+
+  renderTreeItem: function(data) {
+    return (
+      <TreeItem data={data}
+        selected={data.selected}
+        {...this.props} />
+    );
   }
 
 });
@@ -46,21 +58,36 @@ var ProfileTree = React.createClass({
 
     return (
       <div className="profile-tree">
-        <TreeNode data={this.props.profile} onItemMoved={this.onItemMoved} />
+        {this.renderTreeNode(this.props.profile)}
       </div>
     );
 
   },
 
+  renderTreeNode: function(data) {
+    return (
+      <TreeNode data={data}
+        selectedItem={this.props.selectedItem}
+        onItemClicked={this.onItemSelected}
+        onItemMoved={this.onItemMoved}
+        theme={this.props.theme} />
+    );
+  },
+
   onItemMoved: function(movedItem, targetItem) {
     this.props.dispatch(actions.edit.moveProfileItem(movedItem, targetItem));
+  },
+
+  onItemSelected: function(selectedItem) {
+    this.props.dispatch(actions.edit.selectProfileItem(selectedItem));
   }
 
 });
 
 function select(state) {
   return {
-    profile: state.profile
+    profile: state.profile,
+    theme: state.theme
   };
 }
 

js/components/edit/tree-item.jsx

@@ -10,20 +10,24 @@ var TreeItem = React.createClass({
     render: function() {
 
       var data = this.props.data;
-      var appIcon = data.icon ? <AppIcon icon={data.icon} /> : null;
+      var appIcon = data.icon ? <AppIcon icon={data.icon} theme={this.props.theme} /> : null;
 
       var connectDragSource = this.props.connectDragSource;
       var connectDropTarget = this.props.connectDropTarget;
 
       var classes = classNames({
         'alert': true,
-        'alert-default': !this.props.isDragging && !this.props.isOver,
-        'alert-info': this.props.isDragging,
-        'alert-success': this.props.isOver
+        'alert-default': !this.props.isOver,
+        'alert-info': this.props.isOver && this.props.canDrop,
+        'alert-success': this.props.selected
       });
 
+      var style = {
+        opacity: this.props.isDragging ? 0.5 : 1
+      };
+
       return connectDropTarget(connectDragSource(
-        <div className={classes}>
+        <div className={classes} style={style} onClick={this.handleClick}>
           {appIcon}
           <span className="app-label">{data.label}</span>
         </div>
@@ -31,6 +35,11 @@ var TreeItem = React.createClass({
 
     },
 
+    handleClick: function(evt) {
+      evt.preventDefault();
+      this.props.onItemClicked(this.props.data);
+    }
+
 });
 
 var dragSourceSpec = {
@@ -76,7 +85,8 @@ function dragSourceCollect(connect, monitor) {
 function dropTargetCollect(connect, monitor) {
   return {
     connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver()
+    isOver: monitor.isOver(),
+    canDrop: monitor.canDrop()
   };
 }