Props setup after refactor

imports/plugins/core/ui-tagnav/client/components/tagNav.js

@@ -71,7 +71,7 @@ const TagNavHelpers = {
     const foundTag = this.tagById(tagId, tags);
 
     if (foundTag) {
-      if (_.isArray(foundTag.relatedTagIds) && foundTag.relatedTagIds.length) {
+      if (Array.isArray(foundTag.relatedTagIds) && foundTag.relatedTagIds.length) {
         return true;
       }
     }
@@ -158,6 +158,10 @@ class TagNav extends Component {
     this.setState(newState);
   }
 
+  handleTagSave = (tag) => {
+    TagNavHelpers.onTagUpdate(tag._id, tag.name);
+  }
+
   handleMoveTag = () => {
   }
 
@@ -270,16 +274,12 @@ class TagNav extends Component {
   }
 
   hasDropdownClassName(tag) {
-    if (_.isArray(tag.relatedTagIds)) {
+    if (Array.isArray(tag.relatedTagIds)) {
       return "has-dropdown";
     }
     return null;
   }
 
-  handleTagSave = (tag) => {
-    TagNavHelpers.onTagUpdate(tag._id, tag.name);
-  }
-
   navbarSelectedClassName = (tag) => {
     const currentSelectedTag = this.state.selectedTag;
 

imports/plugins/core/ui-tagnav/client/components/tagTree.js

@@ -37,16 +37,13 @@ class TagTree extends Component {
   }
 
   // setting up the func before passing to TagItem
-  handleNewTagSave = (parentTag) => {
-    return (event, tag) => {
-      event.preventDefault();
-      if (this.props.onNewTagSave) {
-        this.props.onNewTagSave(tag, parentTag);
-        this.setState({
-          newTag: { name: "" }
-        });
-      }
-    };
+  handleNewTagSave = (event, tag) => {
+    if (this.props.onNewTagSave) {
+      this.props.onNewTagSave(tag, this.props.tagTreeProps.parentTag);
+      this.setState({
+        newTag: { name: "" }
+      });
+    }
   }
 
   handleTagUpdate = (event, tag) => {
@@ -71,9 +68,12 @@ class TagTree extends Component {
         <div className={`rui grouptag ${this.className}`} data-id={tag._id} key={tag._id}>
           <TagTreeHeader
             tag={tag}
+            parentTag={this.state.parentTag}
             editable={this.props.editable}
+            onTagRemove={this.props.onTagRemove}
           />
           <TagTreeBody
+            {...this.props}
             tags={TagHelpers.subTags(tag)}
             parentTag={tag}
             editable={this.props.editable}
@@ -104,8 +104,8 @@ class TagTree extends Component {
                   suggestions={this.state.suggestions}
                   onClearSuggestions={this.handleClearSuggestions}
                   onGetSuggestions={this.handleGetSuggestions}
-                  onTagInputBlur={this.handleNewTagSave(this.props.parentTag)}
-                  onTagSave={this.handleNewTagSave(this.props.parentTag)}
+                  onTagInputBlur={this.handleNewTagSave}
+                  onTagSave={this.handleNewTagSave}
                   onTagUpdate={this.handleNewTagUpdate}
                 />
               </div>

imports/plugins/core/ui-tagnav/client/components/tagTreeBody.js

@@ -7,12 +7,39 @@ class TagTreeBody extends Component {
     super(props);
     this.state = {
       suggestions: [],
+      tags: this.props.tags,
       newTag: {
         name: ""
       }
     };
   }
 
+  // setting up the func before passing to TagItem
+  handleNewTagSave = (event, tag) => {
+    if (this.props.onNewTagSave) {
+      this.props.onNewTagSave(tag, this.props.parentTag);
+      this.setState({
+        newTag: { name: "" }
+      });
+    }
+  }
+
+  handleTagUpdate = (event, tag) => {
+    // const newState = update(this.state, {
+    //   tagsByKey: {
+    //     [tag._id]: {
+    //       $set: tag
+    //     }
+    //   }
+    // });
+
+    // this.setState(newState);
+  }
+
+  handleNewTagUpdate = (event, tag) => { // updates blank tag state being edited
+    this.setState({ newTag: tag });
+  }
+
   genTagsList(tags, parentTag) {
     if (Array.isArray(tags)) {
       return tags.map((tag, index) => {
@@ -28,8 +55,6 @@ class TagTreeBody extends Component {
             draggable={true}
             selectable={true}
             suggestions={this.state.suggestions}
-            onClearSuggestions={this.handleClearSuggestions}
-            onGetSuggestions={this.handleGetSuggestions}
             onMove={this.handleMoveTag}
             onTagInputBlur={this.handleTagSave}
             onTagMouseOut={this.handleTagMouseOut}
@@ -47,7 +72,7 @@ class TagTreeBody extends Component {
     return (
       <div className="content">
         <div className="rui tags" data-id={this.props.parentTag._id}>
-          {this.genTagsList(this.props.tags, this.props.parentTag)}
+          {this.genTagsList(this.state.tags, this.props.parentTag)}
           {this.props.editable &&
             <div className="rui item create">
               <TagItem
@@ -59,9 +84,9 @@ class TagTreeBody extends Component {
                 suggestions={this.state.suggestions}
                 onClearSuggestions={this.props.onClearSuggestions}
                 onGetSuggestions={this.props.onGetSuggestions}
-                onTagInputBlur={this.handleNewTagSave(this.props.parentTag)}
-                onTagSave={this.handleNewTagSave(this.props.parentTag)}
-                onTagUpdate={this.handleNewTagUpdate(this.props.parentTag.name)}
+                onTagInputBlur={this.handleNewTagSave}
+                onTagSave={this.handleNewTagSave}
+                onTagUpdate={this.handleNewTagUpdate}
               />
             </div>
           }
@@ -73,6 +98,10 @@ class TagTreeBody extends Component {
 
 TagTreeBody.propTypes = {
   editable: PropTypes.bool,
+  onClearSuggestions: PropTypes.func,
+  onGetSuggestions: PropTypes.func,
+  onNewTagSave: PropTypes.func,
+  onTagRemove: PropTypes.func,
   parentTag: PropTypes.object,
   tags: ReactionPropTypes.arrayOfTags
 };

imports/plugins/core/ui-tagnav/client/components/tagTreeHeader.js

@@ -5,29 +5,40 @@ class TagTreeHeader extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      suggestions: []
+      suggestions: [],
+      tag: this.props.tag
     };
   }
 
+  handleTagUpdate = (event, tag) => {
+    this.setState({ tag: tag });
+  }
+
+  handleTagSave = (event, tag) => {
+    if (this.props.onTagSave) {
+      this.props.onTagSave(tag);
+    }
+  }
+
   render() {
     return (
       <div className="header">
         <TagItem
-          tag={this.props.tag}
+          tag={this.state.tag}
+          parentTag={this.props.parentTag}
           selectable={true}
           className="js-tagNav-item"
           editable={this.props.editable}
           isSelected={this.isSelected}
           suggestions={this.state.suggestions}
-          parentTag={this.props.parentTag}
           onClearSuggestions={this.props.onClearSuggestions}
           onGetSuggestions={this.props.onGetSuggestions}
           onMove={this.props.onMove}
-          onTagInputBlur={this.props.onTagInputBlur}
           onTagMouseOut={this.props.onTagMouseOut}
           onTagMouseOver={this.props.onTagMouseOver}
           onTagRemove={this.props.onTagRemove}
-          onTagSave={this.props.onTagSave}
+          onTagSave={this.handleTagSave}
+          onTagInputBlur={this.handleTagSave}
           onTagUpdate={this.handleTagUpdate}
         />
       </div>
@@ -36,7 +47,11 @@ class TagTreeHeader extends Component {
 }
 
 TagTreeHeader.propTypes = {
-  parentTag: PropTypes.object
+  editable: PropTypes.bool,
+  onTagRemove: PropTypes.func,
+  onTagSave: PropTypes.func,
+  parentTag: PropTypes.object,
+  tag: PropTypes.object
 };
 
 export default TagTreeHeader;

imports/plugins/core/ui/client/components/tags/tags.jsx

@@ -83,8 +83,7 @@ class Tags extends Component {
   }
 
   tagTreeProps = (tag) => {
-    const subTagGroups = TagHelpers.subTags(tag);
-
+    const subTagGroups = _.compact(TagHelpers.subTags(tag));
     const tagsByKey = {};
 
     if (Array.isArray(subTagGroups)) {