Remove tag from tag block

Sacret · Sacret · commit be5cd3157de1 · 2015-12-18T00:33:23.000+03:00
diff --git a/js/actions/FilterActions.js b/js/actions/FilterActions.js
@@ -9,7 +9,8 @@ const FilterActions = Reflux.createActions([
   'getFilters',
   'setFilter',
   'setFilterTags',
-  'loadMoreWithFilters'
+  'loadMoreWithFilters',
+  'removeTag'
 ]);
 
 module.exports = FilterActions;
diff --git a/js/actions/ReposActions.js b/js/actions/ReposActions.js
@@ -9,7 +9,7 @@ const ReposActions = Reflux.createActions([
   'getRepos',
   'getStars',
   'setTag',
-  'removeTag'
+  'removeRepoTag'
 ]);
 
 module.exports = ReposActions;
diff --git a/js/components/blocks/TagsBlock.js b/js/components/blocks/TagsBlock.js
@@ -7,6 +7,8 @@ import _ from 'lodash';
 import { Input, Button, Alert } from 'react-bootstrap';
 import ReactFireMixin from 'reactfire';
 //
+import FontAwesome from 'react-fontawesome';
+//
 import FilterActions from '../../actions/FilterActions';
 //
 import Config from '../../config/Config';
@@ -24,17 +26,27 @@ const TagsBlock = React.createClass({
     this.bindAsArray(ref, 'tags');
   },
 
-  filterReposByTags(index, tag) {
-    let tagSpan = document.getElementById('tag' + index);
-    let isTagsAdding = false;
-    if (!~tagSpan.className.indexOf('active')) {
-      tagSpan.className = tagSpan.className + ' active';
-      isTagsAdding = true;
+  filterReposByTags(event, index, tag) {
+    let isRemoving = ~event.target.className.indexOf('tag-remove-icon');
+    if (isRemoving) {
+      let userID = this.props.userID;
+      let itemUrl = Config.FirebaseUrl + 'user' + userID + '/tags/' + tag['.key'];
+      let itemRef = new Firebase(itemUrl);
+      itemRef.remove();
+      FilterActions.setFilterTags(this.props.accessToken, tag, false);
     }
     else {
-      tagSpan.className = tagSpan.className.replace('active', '');
+      let tagSpan = document.getElementById('tag' + index);
+      let isTagsAdding = false;
+      if (!~tagSpan.className.indexOf('active')) {
+        tagSpan.className = tagSpan.className + ' active';
+        isTagsAdding = true;
+      }
+      else {
+        tagSpan.className = tagSpan.className.replace('active', '');
+      }
+      FilterActions.setFilterTags(this.props.accessToken, tag, isTagsAdding);
     }
-    FilterActions.setFilterTags(this.props.accessToken, tag, isTagsAdding);
   },
 
   render() {
@@ -49,9 +61,13 @@ const TagsBlock = React.createClass({
             className="tag"
             key={'tag' + index}
             id={'tag' + index}
-            onClick={() => this.filterReposByTags(index, tag)}
+            onClick={(e) => this.filterReposByTags(e, index, tag)}
           >
             {tag.title}
+            <FontAwesome
+              className="tag-remove-icon"
+              name="times"
+            />
           </span>
         );
       });
diff --git a/less/components.less b/less/components.less
@@ -85,12 +85,28 @@
   color: darken(@brand-primary, 10%);
   padding: 4px 10px 5px;
   cursor: pointer;
+  position: relative;
   &:hover, &.active {
     color: #fff;
     background: @brand-primary;
   }
 }
 
+.tag {
+  .tag-remove-icon {
+    visibility: hidden;
+    position: absolute;
+    right: 3px;
+    top: 3px;
+    font-size: 10px;
+  }
+  &:hover {
+    .tag-remove-icon {
+      visibility: initial;
+    }
+  }
+}
+
 .repo-tag {
   font-size: @font-size-h5;
   margin: 5px 5px 0 0;
