@plusscommunities/pluss-circles-web 1.0.8 → 1.0.9

package/dist/index.cjs.js

@@ -127,6 +127,7 @@ var FeatureConfig = {
 
 var CIRCLES_LOADED = 'CIRCLES_LOADED';
 var CIRCLE_UPDATED = 'CIRCLE_UPDATED';
+var CIRCLE_REMOVED = 'CIRCLE_REMOVED';
 
 var circlesLoaded = function circlesLoaded(circles) {
   return {
@@ -140,6 +141,12 @@ var circleUpdated = function circleUpdated(circle) {
     payload: circle
   };
 };
+var circleRemoved = function circleRemoved(circleId) {
+  return {
+    type: CIRCLE_REMOVED,
+    payload: circleId
+  };
+};
 
 var Helper$3 = PlussCore__namespace.Helper,
     Session$3 = PlussCore__namespace.Session;
@@ -192,6 +199,15 @@ var circleActions = {
       }
     });
   },
+  delete: function _delete(circleId) {
+    return Session$3.authedFunction({
+      method: 'POST',
+      url: Helper$3.getUrl('circles', 'update/delete'),
+      data: {
+        circleId: circleId
+      }
+    });
+  },
   addAdmin: function addAdmin(circleId, userId) {
     return Session$3.authedFunction({
       method: 'POST',
@@ -424,6 +440,18 @@ var Circles = /*#__PURE__*/function (_Component) {
       _this.setState(stateChange);
     });
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "removeCircle", function (circle) {
+      if (window.confirm("Are you sure you want to delete that circle? You will no longer be able to access the messages in the circle.")) {
+        _this.props.circleRemoved(circle.Id);
+
+        circleActions.delete(circle.Id).then(function (res) {
+          _this.getData();
+        }).catch(function (res) {
+          alert('Something went wrong with the request. Please try again.');
+        });
+      }
+    });
+
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getTypeFilterText", function (type) {
       if (type === 'private') {
         return 'Private Message';
@@ -500,13 +528,17 @@ var Circles = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "validateCircleAdmin",
-    value: function validateCircleAdmin(circle) {
+    value: function validateCircleAdmin(circle, onlyCreator) {
       var _this4 = this;
 
       if (Session$2.validateAccess(this.props.auth.site, 'circles', this.props.auth)) {
         return true;
       }
 
+      if (onlyCreator) {
+        return circle.Creator && circle.Creator.userId === this.props.user.Id || circle.CreatorId === this.props.user.Id;
+      }
+
       return ___default['default'].some(circle.Audience, function (user) {
         return user.userId === _this4.props.user.Id && user.isAdmin;
       });
@@ -514,6 +546,8 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderRow",
     value: function renderRow(circle) {
+      var _this5 = this;
+
       return /*#__PURE__*/React__default['default'].createElement("tr", {
         key: circle.Id
       }, /*#__PURE__*/React__default['default'].createElement("td", {
@@ -527,7 +561,14 @@ var Circles = /*#__PURE__*/function (_Component) {
           hoverText: user.displayName,
           containerClass: "circleTableProfilePic"
         });
-      })), /*#__PURE__*/React__default['default'].createElement("td", null, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
+      })), /*#__PURE__*/React__default['default'].createElement("td", {
+        className: "table-options"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
         to: "/circles/edit/".concat(circle.Id)
       }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
         style: {
@@ -537,7 +578,19 @@ var Circles = /*#__PURE__*/function (_Component) {
           cursor: 'pointer'
         },
         name: "pencil"
-      }))));
+      })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement("a", {
+        onClick: function onClick() {
+          _this5.removeCircle(circle);
+        }
+      }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+        style: {
+          fontSize: 20,
+          padding: 5,
+          marginLeft: 12,
+          cursor: 'pointer'
+        },
+        name: "minus-circle"
+      })))));
     }
   }, {
     key: "renderFilters",
@@ -586,7 +639,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderUserFilterPopup",
     value: function renderUserFilterPopup() {
-      var _this5 = this;
+      var _this6 = this;
 
       if (!this.state.userFilterOpen) {
         return null;
@@ -606,7 +659,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         placeholder: "Enter name",
         value: this.state.userSearch,
         onChange: function onChange(e) {
-          return _this5.onHandleChange(e);
+          return _this6.onHandleChange(e);
         },
         alwaysShowLabel: true
       }), this.getUsers().map(function (user) {
@@ -614,7 +667,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           key: user.userId,
           user: user,
           onClick: function onClick() {
-            _this5.selectUserFilter(user);
+            _this6.selectUserFilter(user);
           }
         });
       }));
@@ -622,7 +675,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTypeFilterPopup",
     value: function renderTypeFilterPopup() {
-      var _this6 = this;
+      var _this7 = this;
 
       if (!this.state.typeFilterOpen) {
         return null;
@@ -636,13 +689,13 @@ var Circles = /*#__PURE__*/function (_Component) {
         onClose: this.closeTypeFilter
       }, /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
         onClick: function onClick() {
-          _this6.selectTypeFilter('circle');
+          _this7.selectTypeFilter('circle');
         },
         text: "Circle",
         className: "marginRight-10"
       }), /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
         onClick: function onClick() {
-          _this6.selectTypeFilter('private');
+          _this7.selectTypeFilter('private');
         },
         text: "Private Message"
       }));
@@ -650,7 +703,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this7 = this;
+      var _this8 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React__default['default'].createElement(Components$2.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$2.AddButton, {
         onClick: this.onAddNew,
@@ -674,7 +727,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           width: 50
         }
       }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.getCircles().map(function (circle) {
-        return _this7.renderRow(circle);
+        return _this8.renderRow(circle);
       }))), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "hub_tidioPadding"
       })));
@@ -695,7 +748,8 @@ var mapStateToProps$2 = function mapStateToProps(state) {
 };
 
 var Circles$1 = reactRedux.connect(mapStateToProps$2, {
-  circlesLoaded: circlesLoaded
+  circlesLoaded: circlesLoaded,
+  circleRemoved: circleRemoved
 })(Circles);
 
 function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
@@ -2561,6 +2615,13 @@ var CircleReducer = (function () {
         })
       });
 
+    case CIRCLE_REMOVED:
+      return _objectSpread$2(_objectSpread$2({}, state), {}, {
+        circles: ___default['default'].filter(state.circles, function (c) {
+          return c.Id !== action.payload;
+        })
+      });
+
     default:
       return state;
   }

package/dist/index.esm.js

@@ -85,6 +85,7 @@ var FeatureConfig = {
 
 var CIRCLES_LOADED = 'CIRCLES_LOADED';
 var CIRCLE_UPDATED = 'CIRCLE_UPDATED';
+var CIRCLE_REMOVED = 'CIRCLE_REMOVED';
 
 var circlesLoaded = function circlesLoaded(circles) {
   return {
@@ -98,6 +99,12 @@ var circleUpdated = function circleUpdated(circle) {
     payload: circle
   };
 };
+var circleRemoved = function circleRemoved(circleId) {
+  return {
+    type: CIRCLE_REMOVED,
+    payload: circleId
+  };
+};
 
 var Helper$3 = PlussCore.Helper,
     Session$3 = PlussCore.Session;
@@ -150,6 +157,15 @@ var circleActions = {
       }
     });
   },
+  delete: function _delete(circleId) {
+    return Session$3.authedFunction({
+      method: 'POST',
+      url: Helper$3.getUrl('circles', 'update/delete'),
+      data: {
+        circleId: circleId
+      }
+    });
+  },
   addAdmin: function addAdmin(circleId, userId) {
     return Session$3.authedFunction({
       method: 'POST',
@@ -382,6 +398,18 @@ var Circles = /*#__PURE__*/function (_Component) {
       _this.setState(stateChange);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "removeCircle", function (circle) {
+      if (window.confirm("Are you sure you want to delete that circle? You will no longer be able to access the messages in the circle.")) {
+        _this.props.circleRemoved(circle.Id);
+
+        circleActions.delete(circle.Id).then(function (res) {
+          _this.getData();
+        }).catch(function (res) {
+          alert('Something went wrong with the request. Please try again.');
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getTypeFilterText", function (type) {
       if (type === 'private') {
         return 'Private Message';
@@ -458,13 +486,17 @@ var Circles = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "validateCircleAdmin",
-    value: function validateCircleAdmin(circle) {
+    value: function validateCircleAdmin(circle, onlyCreator) {
       var _this4 = this;
 
       if (Session$2.validateAccess(this.props.auth.site, 'circles', this.props.auth)) {
         return true;
       }
 
+      if (onlyCreator) {
+        return circle.Creator && circle.Creator.userId === this.props.user.Id || circle.CreatorId === this.props.user.Id;
+      }
+
       return _.some(circle.Audience, function (user) {
         return user.userId === _this4.props.user.Id && user.isAdmin;
       });
@@ -472,6 +504,8 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderRow",
     value: function renderRow(circle) {
+      var _this5 = this;
+
       return /*#__PURE__*/React.createElement("tr", {
         key: circle.Id
       }, /*#__PURE__*/React.createElement("td", {
@@ -485,7 +519,14 @@ var Circles = /*#__PURE__*/function (_Component) {
           hoverText: user.displayName,
           containerClass: "circleTableProfilePic"
         });
-      })), /*#__PURE__*/React.createElement("td", null, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React.createElement(Link, {
+      })), /*#__PURE__*/React.createElement("td", {
+        className: "table-options"
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React.createElement(Link, {
         to: "/circles/edit/".concat(circle.Id)
       }, /*#__PURE__*/React.createElement(FontAwesome, {
         style: {
@@ -495,7 +536,19 @@ var Circles = /*#__PURE__*/function (_Component) {
           cursor: 'pointer'
         },
         name: "pencil"
-      }))));
+      })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React.createElement("a", {
+        onClick: function onClick() {
+          _this5.removeCircle(circle);
+        }
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
+        style: {
+          fontSize: 20,
+          padding: 5,
+          marginLeft: 12,
+          cursor: 'pointer'
+        },
+        name: "minus-circle"
+      })))));
     }
   }, {
     key: "renderFilters",
@@ -544,7 +597,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderUserFilterPopup",
     value: function renderUserFilterPopup() {
-      var _this5 = this;
+      var _this6 = this;
 
       if (!this.state.userFilterOpen) {
         return null;
@@ -564,7 +617,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         placeholder: "Enter name",
         value: this.state.userSearch,
         onChange: function onChange(e) {
-          return _this5.onHandleChange(e);
+          return _this6.onHandleChange(e);
         },
         alwaysShowLabel: true
       }), this.getUsers().map(function (user) {
@@ -572,7 +625,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           key: user.userId,
           user: user,
           onClick: function onClick() {
-            _this5.selectUserFilter(user);
+            _this6.selectUserFilter(user);
           }
         });
       }));
@@ -580,7 +633,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTypeFilterPopup",
     value: function renderTypeFilterPopup() {
-      var _this6 = this;
+      var _this7 = this;
 
       if (!this.state.typeFilterOpen) {
         return null;
@@ -594,13 +647,13 @@ var Circles = /*#__PURE__*/function (_Component) {
         onClose: this.closeTypeFilter
       }, /*#__PURE__*/React.createElement(Components$2.Tag, {
         onClick: function onClick() {
-          _this6.selectTypeFilter('circle');
+          _this7.selectTypeFilter('circle');
         },
         text: "Circle",
         className: "marginRight-10"
       }), /*#__PURE__*/React.createElement(Components$2.Tag, {
         onClick: function onClick() {
-          _this6.selectTypeFilter('private');
+          _this7.selectTypeFilter('private');
         },
         text: "Private Message"
       }));
@@ -608,7 +661,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this7 = this;
+      var _this8 = this;
 
       return /*#__PURE__*/React.createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React.createElement(Components$2.Header, null, this.canAddNew() && /*#__PURE__*/React.createElement(Components$2.AddButton, {
         onClick: this.onAddNew,
@@ -632,7 +685,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           width: 50
         }
       }))), /*#__PURE__*/React.createElement("tbody", null, this.getCircles().map(function (circle) {
-        return _this7.renderRow(circle);
+        return _this8.renderRow(circle);
       }))), /*#__PURE__*/React.createElement("div", {
         className: "hub_tidioPadding"
       })));
@@ -653,7 +706,8 @@ var mapStateToProps$2 = function mapStateToProps(state) {
 };
 
 var Circles$1 = connect(mapStateToProps$2, {
-  circlesLoaded: circlesLoaded
+  circlesLoaded: circlesLoaded,
+  circleRemoved: circleRemoved
 })(Circles);
 
 function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -2519,6 +2573,13 @@ var CircleReducer = (function () {
         })
       });
 
+    case CIRCLE_REMOVED:
+      return _objectSpread$2(_objectSpread$2({}, state), {}, {
+        circles: _.filter(state.circles, function (c) {
+          return c.Id !== action.payload;
+        })
+      });
+
     default:
       return state;
   }

package/dist/index.umd.js

@@ -109,6 +109,7 @@
 
   var CIRCLES_LOADED = 'CIRCLES_LOADED';
   var CIRCLE_UPDATED = 'CIRCLE_UPDATED';
+  var CIRCLE_REMOVED = 'CIRCLE_REMOVED';
 
   var circlesLoaded = function circlesLoaded(circles) {
     return {
@@ -122,6 +123,12 @@
       payload: circle
     };
   };
+  var circleRemoved = function circleRemoved(circleId) {
+    return {
+      type: CIRCLE_REMOVED,
+      payload: circleId
+    };
+  };
 
   var Helper$3 = PlussCore__namespace.Helper,
       Session$3 = PlussCore__namespace.Session;
@@ -174,6 +181,15 @@
         }
       });
     },
+    delete: function _delete(circleId) {
+      return Session$3.authedFunction({
+        method: 'POST',
+        url: Helper$3.getUrl('circles', 'update/delete'),
+        data: {
+          circleId: circleId
+        }
+      });
+    },
     addAdmin: function addAdmin(circleId, userId) {
       return Session$3.authedFunction({
         method: 'POST',
@@ -406,6 +422,18 @@
         _this.setState(stateChange);
       });
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "removeCircle", function (circle) {
+        if (window.confirm("Are you sure you want to delete that circle? You will no longer be able to access the messages in the circle.")) {
+          _this.props.circleRemoved(circle.Id);
+
+          circleActions.delete(circle.Id).then(function (res) {
+            _this.getData();
+          }).catch(function (res) {
+            alert('Something went wrong with the request. Please try again.');
+          });
+        }
+      });
+
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getTypeFilterText", function (type) {
         if (type === 'private') {
           return 'Private Message';
@@ -482,13 +510,17 @@
       }
     }, {
       key: "validateCircleAdmin",
-      value: function validateCircleAdmin(circle) {
+      value: function validateCircleAdmin(circle, onlyCreator) {
         var _this4 = this;
 
         if (Session$2.validateAccess(this.props.auth.site, 'circles', this.props.auth)) {
           return true;
         }
 
+        if (onlyCreator) {
+          return circle.Creator && circle.Creator.userId === this.props.user.Id || circle.CreatorId === this.props.user.Id;
+        }
+
         return ___default['default'].some(circle.Audience, function (user) {
           return user.userId === _this4.props.user.Id && user.isAdmin;
         });
@@ -496,6 +528,8 @@
     }, {
       key: "renderRow",
       value: function renderRow(circle) {
+        var _this5 = this;
+
         return /*#__PURE__*/React__default['default'].createElement("tr", {
           key: circle.Id
         }, /*#__PURE__*/React__default['default'].createElement("td", {
@@ -509,7 +543,14 @@
             hoverText: user.displayName,
             containerClass: "circleTableProfilePic"
           });
-        })), /*#__PURE__*/React__default['default'].createElement("td", null, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
+        })), /*#__PURE__*/React__default['default'].createElement("td", {
+          className: "table-options"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          }
+        }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
           to: "/circles/edit/".concat(circle.Id)
         }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
           style: {
@@ -519,7 +560,19 @@
             cursor: 'pointer'
           },
           name: "pencil"
-        }))));
+        })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement("a", {
+          onClick: function onClick() {
+            _this5.removeCircle(circle);
+          }
+        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          style: {
+            fontSize: 20,
+            padding: 5,
+            marginLeft: 12,
+            cursor: 'pointer'
+          },
+          name: "minus-circle"
+        })))));
       }
     }, {
       key: "renderFilters",
@@ -568,7 +621,7 @@
     }, {
       key: "renderUserFilterPopup",
       value: function renderUserFilterPopup() {
-        var _this5 = this;
+        var _this6 = this;
 
         if (!this.state.userFilterOpen) {
           return null;
@@ -588,7 +641,7 @@
           placeholder: "Enter name",
           value: this.state.userSearch,
           onChange: function onChange(e) {
-            return _this5.onHandleChange(e);
+            return _this6.onHandleChange(e);
           },
           alwaysShowLabel: true
         }), this.getUsers().map(function (user) {
@@ -596,7 +649,7 @@
             key: user.userId,
             user: user,
             onClick: function onClick() {
-              _this5.selectUserFilter(user);
+              _this6.selectUserFilter(user);
             }
           });
         }));
@@ -604,7 +657,7 @@
     }, {
       key: "renderTypeFilterPopup",
       value: function renderTypeFilterPopup() {
-        var _this6 = this;
+        var _this7 = this;
 
         if (!this.state.typeFilterOpen) {
           return null;
@@ -618,13 +671,13 @@
           onClose: this.closeTypeFilter
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
           onClick: function onClick() {
-            _this6.selectTypeFilter('circle');
+            _this7.selectTypeFilter('circle');
           },
           text: "Circle",
           className: "marginRight-10"
         }), /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
           onClick: function onClick() {
-            _this6.selectTypeFilter('private');
+            _this7.selectTypeFilter('private');
           },
           text: "Private Message"
         }));
@@ -632,7 +685,7 @@
     }, {
       key: "render",
       value: function render() {
-        var _this7 = this;
+        var _this8 = this;
 
         return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React__default['default'].createElement(Components$2.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$2.AddButton, {
           onClick: this.onAddNew,
@@ -656,7 +709,7 @@
             width: 50
           }
         }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.getCircles().map(function (circle) {
-          return _this7.renderRow(circle);
+          return _this8.renderRow(circle);
         }))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "hub_tidioPadding"
         })));
@@ -677,7 +730,8 @@
   };
 
   var Circles$1 = reactRedux.connect(mapStateToProps$2, {
-    circlesLoaded: circlesLoaded
+    circlesLoaded: circlesLoaded,
+    circleRemoved: circleRemoved
   })(Circles);
 
   function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
@@ -2543,6 +2597,13 @@
           })
         });
 
+      case CIRCLE_REMOVED:
+        return _objectSpread$2(_objectSpread$2({}, state), {}, {
+          circles: ___default['default'].filter(state.circles, function (c) {
+            return c.Id !== action.payload;
+          })
+        });
+
       default:
         return state;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-circles-web",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Extension package to enable circles on Pluss Communities Platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/actions/CirclesActions.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { CIRCLES_LOADED, CIRCLE_UPDATED } from './types';
+import { CIRCLES_LOADED, CIRCLE_UPDATED, CIRCLE_REMOVED } from './types';
 
 export const circlesLoaded = (circles) => {
   return {
@@ -14,3 +14,10 @@ export const circleUpdated = (circle) => {
     payload: circle,
   };
 };
+
+export const circleRemoved = (circleId) => {
+  return {
+    type: CIRCLE_REMOVED,
+    payload: circleId,
+  };
+};

package/src/actions/types.js

@@ -1,2 +1,3 @@
 export const CIRCLES_LOADED = 'CIRCLES_LOADED';
 export const CIRCLE_UPDATED = 'CIRCLE_UPDATED';
+export const CIRCLE_REMOVED = 'CIRCLE_REMOVED';

package/src/apis/circleActions.js

@@ -45,6 +45,15 @@ export const circleActions = {
       },
     });
   },
+  delete: (circleId) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl('circles', 'update/delete'),
+      data: {
+        circleId,
+      },
+    });
+  },
   addAdmin: (circleId, userId) => {
     return Session.authedFunction({
       method: 'POST',

package/src/reducers/CircleReducer.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { CIRCLES_LOADED, CIRCLE_UPDATED } from '../actions/types';
+import { CIRCLES_LOADED, CIRCLE_UPDATED, CIRCLE_REMOVED } from '../actions/types';
 
 const INITIAL_STATE = {
   circles: [],
@@ -11,6 +11,13 @@ export default (state = INITIAL_STATE, action) => {
       return { ...state, circles: action.payload };
     case CIRCLE_UPDATED:
       return { ...state, circles: _.uniqBy([action.payload, ...state.circles], (c) => c.Id) };
+    case CIRCLE_REMOVED:
+      return {
+        ...state,
+        circles: _.filter(state.circles, (c) => {
+          return c.Id !== action.payload;
+        }),
+      };
     default:
       return state;
   }

package/src/screens/Circles.js

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 import { PlussCore } from '../feature.config';
-import { circlesLoaded } from '../actions';
+import { circlesLoaded, circleRemoved } from '../actions';
 import { circleActions } from '../apis';
 import { Table } from 'react-bootstrap';
 import FontAwesome from 'react-fontawesome';
@@ -76,10 +76,13 @@ class Circles extends Component {
     });
   }
 
-  validateCircleAdmin(circle) {
+  validateCircleAdmin(circle, onlyCreator) {
     if (Session.validateAccess(this.props.auth.site, 'circles', this.props.auth)) {
       return true;
     }
+    if (onlyCreator) {
+      return (circle.Creator && circle.Creator.userId === this.props.user.Id) || circle.CreatorId === this.props.user.Id;
+    }
     return _.some(circle.Audience, (user) => {
       return user.userId === this.props.user.Id && user.isAdmin;
     });
@@ -155,6 +158,20 @@ class Circles extends Component {
     this.setState(stateChange);
   };
 
+  removeCircle = (circle) => {
+    if (window.confirm(`Are you sure you want to delete that circle? You will no longer be able to access the messages in the circle.`)) {
+      this.props.circleRemoved(circle.Id);
+      circleActions
+        .delete(circle.Id)
+        .then((res) => {
+          this.getData();
+        })
+        .catch((res) => {
+          alert('Something went wrong with the request. Please try again.');
+        });
+    }
+  };
+
   getTypeFilterText = (type) => {
     if (type === 'private') {
       return 'Private Message';
@@ -190,20 +207,39 @@ class Circles extends Component {
             );
           })}
         </td>
-        <td>
-          {this.validateCircleAdmin(circle) && !circle.IsPrivate && (
-            <Link to={`/circles/edit/${circle.Id}`}>
-              <FontAwesome
-                style={{
-                  fontSize: 20,
-                  padding: 5,
-                  marginLeft: 12,
-                  cursor: 'pointer',
+        <td className="table-options">
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            {this.validateCircleAdmin(circle) && !circle.IsPrivate && (
+              <Link to={`/circles/edit/${circle.Id}`}>
+                <FontAwesome
+                  style={{
+                    fontSize: 20,
+                    padding: 5,
+                    marginLeft: 12,
+                    cursor: 'pointer',
+                  }}
+                  name="pencil"
+                />
+              </Link>
+            )}
+            {this.validateCircleAdmin(circle, true) && !circle.IsPrivate && (
+              <a
+                onClick={() => {
+                  this.removeCircle(circle);
                 }}
-                name="pencil"
-              />
-            </Link>
-          )}
+              >
+                <FontAwesome
+                  style={{
+                    fontSize: 20,
+                    padding: 5,
+                    marginLeft: 12,
+                    cursor: 'pointer',
+                  }}
+                  name="minus-circle"
+                />
+              </a>
+            )}
+          </div>
         </td>
       </tr>
     );
@@ -342,4 +378,4 @@ const mapStateToProps = (state) => {
   };
 };
 
-export default connect(mapStateToProps, { circlesLoaded })(Circles);
+export default connect(mapStateToProps, { circlesLoaded, circleRemoved })(Circles);