@plusscommunities/pluss-circles-web-groups 1.5.5 → 1.5.7-beta.0

package/dist/index.esm.js

@@ -21,30 +21,30 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faUserGroup, faMessage, faUserTie, faUsers, faUsersRectangle, faPeopleArrows } from '@fortawesome/free-solid-svg-icons';
 
 var values = {
-  featureKey: 'groups',
-  entityKey: 'group',
-  entityName: 'group',
-  serviceKey: 'groups',
-  permission: 'groups',
-  menuIcon: 'comments',
+  featureKey: 'circles',
+  entityKey: 'circle',
+  entityName: 'circle',
+  serviceKey: 'circles',
+  permission: 'circles',
+  menuIcon: 'circle-o',
   isFontAwesome: true,
-  reducerKey: 'groups',
-  actionCircleKey: 'GROUP',
-  textFeatureTitle: 'Groups',
-  textAddMenuTitle: 'Group',
-  textEmptyGroups: "You aren't in any Groups",
+  reducerKey: 'circles',
+  actionCircleKey: 'CIRCLE',
+  textFeatureTitle: 'Circles',
+  textAddMenuTitle: 'Circle',
+  textEmptyGroups: "You aren't in any Circles",
   textEmptyPeople: 'Contacts will show here',
-  componentCircles: 'Groups',
-  componentAddCircle: 'AddGroup',
-  componentCircle: 'Group',
-  inviteKey: 'groupInvite',
-  messageKey: 'groupMessage',
-  chatRoute: 'groupChat',
-  updateKeyUserCircles: 'userGroups',
-  allowPublicKey: 'groupAllowPublicGroups',
-  allowPublicKeyDefault: true,
+  componentCircles: 'Circles',
+  componentAddCircle: 'AddCircle',
+  componentCircle: 'Circle',
+  inviteKey: 'circleInvite',
+  messageKey: 'circleMessage',
+  chatRoute: 'circleChat',
+  updateKeyUserCircles: 'userCircles',
+  allowPublicKey: 'circleAllowPublicCircles',
+  allowPublicKeyDefault: false,
   settings: {
-    allowAnyCreate: true
+    allowAnyCreate: false
   }
 };
 
@@ -375,7 +375,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 
               case 3:
                 res = _context.sent;
-                console.log('getData', res.data);
+                console.log("getData", res.data);
 
                 _this.props.circlesLoaded(res.data);
 
@@ -389,7 +389,7 @@ var Circles = /*#__PURE__*/function (_Component) {
               case 9:
                 _context.prev = 9;
                 _context.t0 = _context["catch"](0);
-                console.error('getData', _context.t0);
+                console.error("getData", _context.t0);
 
                 _this.setState({
                   loadingAll: false
@@ -471,9 +471,15 @@ var Circles = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "selectSort", function (sortType) {
+      _this.setState({
+        sortBy: sortType
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onHandleChange", function (event) {
       var stateChange = {};
-      stateChange[event.target.getAttribute('id')] = event.target.value;
+      stateChange[event.target.getAttribute("id")] = event.target.value;
 
       _this.setState(stateChange);
     });
@@ -485,14 +491,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         circleActions.delete(circle.Id).then(function (res) {
           _this.getData();
         }).catch(function (res) {
-          alert('Something went wrong with the request. Please try again.');
+          alert("Something went wrong with the request. Please try again.");
         });
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "getTypeFilterText", function (type) {
-      if (type === 'private') {
-        return 'Private Message';
+      if (type === "private") {
+        return "Private Message";
       }
 
       return _.capitalize(values.entityName);
@@ -502,14 +508,15 @@ var Circles = /*#__PURE__*/function (_Component) {
       if (circle.IsPrivate) {
         return "PM: ".concat(circle.Audience.map(function (user) {
           return user.displayName;
-        }).join(', '));
+        }).join(", "));
       }
 
       return circle.Title;
     });
 
     _this.state = {
-      userSearch: ''
+      userSearch: "",
+      sortBy: "newest"
     };
     return _this;
   }
@@ -528,7 +535,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 
       if (this.state.selectedTypeFilter) {
         result = _.filter(result, function (circle) {
-          return _this2.state.selectedTypeFilter === 'circle' ? !circle.IsPrivate : circle.IsPrivate;
+          return _this2.state.selectedTypeFilter === "circle" ? !circle.IsPrivate : circle.IsPrivate;
         });
       }
 
@@ -538,6 +545,15 @@ var Circles = /*#__PURE__*/function (_Component) {
             return user.userId === _this2.state.selectedUserFilter.userId;
           });
         });
+      } // Apply sorting
+
+
+      result = _.sortBy(result, function (circle) {
+        return moment(circle.Changed).valueOf();
+      });
+
+      if (this.state.sortBy === "newest") {
+        result.reverse();
       }
 
       return result;
@@ -555,10 +571,10 @@ var Circles = /*#__PURE__*/function (_Component) {
       });
       users = _.sortBy(_.uniqBy(users, function (user) {
         return user.userId;
-      }), 'displayName');
+      }), "displayName");
       return _.filter(users, function (u) {
         if (!_.isEmpty(_this3.state.userSearch)) {
-          return (u.displayName || '').toLowerCase().indexOf(_this3.state.userSearch.toLowerCase()) > -1;
+          return (u.displayName || "").toLowerCase().indexOf(_this3.state.userSearch.toLowerCase()) > -1;
         }
 
         return true;
@@ -592,7 +608,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         className: "table-TitleColumn"
       }, /*#__PURE__*/React.createElement(Link, {
         to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
-      }, this.getTitle(circle))), /*#__PURE__*/React.createElement("td", null, moment(circle.Changed).local().format('D MMM YYYY')), /*#__PURE__*/React.createElement("td", null, circle.Audience.map(function (user) {
+      }, this.getTitle(circle))), /*#__PURE__*/React.createElement("td", null, moment(circle.Changed).local().format("D MMM YYYY")), /*#__PURE__*/React.createElement("td", null, circle.Audience.map(function (user) {
         return /*#__PURE__*/React.createElement(Components$4.ProfilePic, {
           size: 30,
           image: user.profilePic,
@@ -603,8 +619,8 @@ var Circles = /*#__PURE__*/function (_Component) {
         className: "table-options"
       }, /*#__PURE__*/React.createElement("div", {
         style: {
-          display: 'flex',
-          alignItems: 'center'
+          display: "flex",
+          alignItems: "center"
         }
       }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React.createElement(Link, {
         to: "/".concat(values.featureKey, "/edit/").concat(circle.Id)
@@ -613,7 +629,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           fontSize: 20,
           padding: 5,
           marginLeft: 12,
-          cursor: 'pointer'
+          cursor: "pointer"
         },
         name: "pencil"
       })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React.createElement("a", {
@@ -625,7 +641,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           fontSize: 20,
           padding: 5,
           marginLeft: 12,
-          cursor: 'pointer'
+          cursor: "pointer"
         },
         name: "minus-circle"
       })))));
@@ -633,6 +649,8 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFilters",
     value: function renderFilters() {
+      var _this6 = this;
+
       var userFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
         className: "marginRight-10",
         onClick: this.openUserFilter,
@@ -672,12 +690,28 @@ var Circles = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Components$4.Text, {
         type: "h5",
         className: "marginRight-20"
-      }, "Filter by"), userFilter, typeFilter);
+      }, "Filter by"), userFilter, typeFilter, /*#__PURE__*/React.createElement(Components$4.Text, {
+        type: "h5",
+        className: "marginRight-20 marginLeft-20"
+      }, "Sort by:"), /*#__PURE__*/React.createElement(Components$4.Tag, {
+        className: "marginRight-10",
+        onClick: function onClick() {
+          return _this6.selectSort("newest");
+        },
+        leftIcon: this.state.sortBy === "newest" ? "check" : null,
+        text: "Newest first"
+      }), /*#__PURE__*/React.createElement(Components$4.Tag, {
+        onClick: function onClick() {
+          return _this6.selectSort("oldest");
+        },
+        leftIcon: this.state.sortBy === "oldest" ? "check" : null,
+        text: "Oldest first"
+      }));
     }
   }, {
     key: "renderUserFilterPopup",
     value: function renderUserFilterPopup() {
-      var _this6 = this;
+      var _this7 = this;
 
       if (!this.state.userFilterOpen) {
         return null;
@@ -697,7 +731,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         placeholder: "Enter name",
         value: this.state.userSearch,
         onChange: function onChange(e) {
-          return _this6.onHandleChange(e);
+          return _this7.onHandleChange(e);
         },
         alwaysShowLabel: true
       }), this.getUsers().map(function (user) {
@@ -705,7 +739,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           key: user.userId,
           user: user,
           onClick: function onClick() {
-            _this6.selectUserFilter(user);
+            _this7.selectUserFilter(user);
           }
         });
       }));
@@ -713,7 +747,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTypeFilterPopup",
     value: function renderTypeFilterPopup() {
-      var _this7 = this;
+      var _this8 = this;
 
       if (!this.state.typeFilterOpen) {
         return null;
@@ -727,13 +761,13 @@ var Circles = /*#__PURE__*/function (_Component) {
         onClose: this.closeTypeFilter
       }, /*#__PURE__*/React.createElement(Components$4.Tag, {
         onClick: function onClick() {
-          _this7.selectTypeFilter('circle');
+          _this8.selectTypeFilter("circle");
         },
         text: _.capitalize(values.entityName),
         className: "marginRight-10"
       }), /*#__PURE__*/React.createElement(Components$4.Tag, {
         onClick: function onClick() {
-          _this7.selectTypeFilter('private');
+          _this8.selectTypeFilter("private");
         },
         text: "Private Message"
       }));
@@ -741,7 +775,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this8 = this;
+      var _this9 = this;
 
       return /*#__PURE__*/React.createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React.createElement(Components$4.Header, null, this.canAddNew() && /*#__PURE__*/React.createElement(Components$4.AddButton, {
         onClick: this.onAddNew,
@@ -758,14 +792,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         condensed: true,
         hover: true,
         style: {
-          minWidth: '100%'
+          minWidth: "100%"
         }
       }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Title"), /*#__PURE__*/React.createElement("th", null, "Last updated"), /*#__PURE__*/React.createElement("th", null, "Members"), /*#__PURE__*/React.createElement("th", {
         style: {
           width: 50
         }
       }))), /*#__PURE__*/React.createElement("tbody", null, this.getCircles().map(function (circle) {
-        return _this8.renderRow(circle);
+        return _this9.renderRow(circle);
       })))));
     }
   }]);
@@ -827,7 +861,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         if (res.data != null && !_.isEmpty(res.data.results.Items)) {
           _this.setState({
             users: _.sortBy(res.data.results.Items, function (u) {
-              return (u.displayName || '').toLowerCase();
+              return (u.displayName || "").toLowerCase();
             }).map(function (u) {
               return _objectSpread$4(_objectSpread$4({}, u), {}, {
                 userId: u.userId || u.Id
@@ -851,7 +885,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         }
 
         if (!_.isEmpty(_this.state.userSearch)) {
-          return (u.displayName || '').toLowerCase().indexOf(_this.state.userSearch.toLowerCase()) > -1;
+          return (u.displayName || "").toLowerCase().indexOf(_this.state.userSearch.toLowerCase()) > -1;
         }
 
         return true;
@@ -905,7 +939,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
 
               case 3:
                 res = _context.sent;
-                console.log('getData', res.data);
+                console.log("getData", res.data);
                 circle = _.find(res.data, function (c) {
                   return c.Id === _this.state.circleId;
                 });
@@ -925,7 +959,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
               case 11:
                 _context.prev = 11;
                 _context.t0 = _context["catch"](0);
-                console.error('getData', _context.t0);
+                console.error("getData", _context.t0);
 
                 _this.setState({
                   loadingAll: false
@@ -942,7 +976,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onHandleChange", function (event) {
       var stateChange = {};
-      stateChange[event.target.getAttribute('id')] = event.target.value;
+      stateChange[event.target.getAttribute("id")] = event.target.value;
 
       _this.setState(stateChange);
     });
@@ -965,7 +999,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       };
 
       if (_.isEmpty(_this.state.title) && _.includes(newState.selectedUsers, user)) {
-        newState.title = "".concat(user.displayName.split(' ')[0], "'s Circle");
+        newState.title = "".concat(user.displayName.split(" ")[0], "'s Circle");
       }
 
       _this.setState(newState);
@@ -1006,17 +1040,17 @@ var AddCircle = /*#__PURE__*/function (_Component) {
             updating: false
           });
 
-          console.log('success');
+          console.log("success");
 
           _this.props.circleUpdated(res.data);
         }).catch(function (err) {
-          console.log('error');
+          console.log("error");
 
           _this.setState({
             updating: false
           });
 
-          alert('Something went wrong with the request. Please try again.');
+          alert("Something went wrong with the request. Please try again.");
         });
       } else {
         circleActions.add(_this.props.auth.site, _this.state.title, _this.state.image, audience, _this.state.isPublic).then(function (res) {
@@ -1025,17 +1059,17 @@ var AddCircle = /*#__PURE__*/function (_Component) {
             updating: false
           });
 
-          console.log('success');
+          console.log("success");
 
           _this.props.circleUpdated(res.data);
         }).catch(function (err) {
-          console.log('error');
+          console.log("error");
 
           _this.setState({
             updating: false
           });
 
-          alert('Something went wrong with the request. Please try again.');
+          alert("Something went wrong with the request. Please try again.");
         });
       }
     });
@@ -1056,20 +1090,20 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       });
     });
 
-    var circleId = Helper$1.safeReadParams(props, 'circleId');
+    var circleId = Helper$1.safeReadParams(props, "circleId");
     _this.state = {
       circleId: circleId,
       circle: _.find(props.circles, function (c) {
         return c.Id === circleId;
       }),
-      title: '',
+      title: "",
       showWarnings: false,
       success: false,
       users: [],
       selectedUsers: [],
-      userSearch: '',
+      userSearch: "",
       isPublic: false,
-      selectedOption: 'visibility'
+      selectedOption: "visibility"
     };
     return _this;
   }
@@ -1091,7 +1125,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         this.setState({
           image: url
         });
-        this.imageInput.getWrappedInstance().setValue(url);
+        this.imageInput.setValue(url);
       } else {
         setTimeout(function () {
           _this2.checkSetImage(url);
@@ -1124,9 +1158,9 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     value: function renderSuccess() {
       if (!this.state.success) return null;
       return /*#__PURE__*/React.createElement(Components$3.SuccessPopup, {
-        text: "".concat(_.capitalize(values.entityName), " has been ").concat(this.state.circleId == null ? 'added' : 'edited'),
+        text: "".concat(_.capitalize(values.entityName), " has been ").concat(this.state.circleId == null ? "added" : "edited"),
         buttons: [{
-          type: 'outlined',
+          type: "outlined",
           onClick: function onClick() {
             window.history.back();
           },
@@ -1173,7 +1207,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         label: "Do you want to make this ".concat(values.entityName, " a public ").concat(values.entityName, "?"),
         isActive: this.state.isPublic,
         options: [{
-          Label: 'Yes',
+          Label: "Yes",
           Value: true,
           onChange: function onChange() {
             return _this5.setState({
@@ -1181,7 +1215,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
             });
           }
         }, {
-          Label: 'No',
+          Label: "No",
           Value: false,
           onChange: function onChange() {
             return _this5.setState({
@@ -1201,7 +1235,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     value: function renderSelectedOption() {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         style: {
-          display: this.state.selectedOption === 'visibility' ? 'block' : 'none'
+          display: this.state.selectedOption === "visibility" ? "block" : "none"
         }
       }, this.renderVisibility()));
     }
@@ -1209,14 +1243,14 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     key: "renderOptionsSection",
     value: function renderOptionsSection() {
       var options = [{
-        key: 'visibility',
-        icon: 'people3',
-        text: 'Visibility'
+        key: "visibility",
+        icon: "people3",
+        text: "Visibility"
       }];
 
       if (!this.props.circleAllowPublicCircles) {
         options = _.filter(options, function (o) {
-          return o.key !== 'visibility';
+          return o.key !== "visibility";
         });
       }
 
@@ -1240,7 +1274,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Components$3.Text, {
         type: "formTitleLarge",
         className: "marginBottom-24"
-      }, this.state.circleId == null ? 'New' : 'Edit', " ", _.capitalize(values.entityName)), /*#__PURE__*/React.createElement("div", {
+      }, this.state.circleId == null ? "New" : "Edit", " ", _.capitalize(values.entityName)), /*#__PURE__*/React.createElement("div", {
         className: "flex flex-reverse"
       }, /*#__PURE__*/React.createElement(Components$3.ImageInput, {
         ref: function ref(_ref2) {
@@ -1424,7 +1458,7 @@ var Circle = /*#__PURE__*/function (_Component) {
 
               case 3:
                 res = _context.sent;
-                console.log('getData', res.data);
+                console.log("getData", res.data);
                 circle = _.find(res.data, function (c) {
                   return c.Id === _this.state.circleId;
                 });
@@ -1442,7 +1476,7 @@ var Circle = /*#__PURE__*/function (_Component) {
               case 10:
                 _context.prev = 10;
                 _context.t0 = _context["catch"](0);
-                console.error('getData', _context.t0);
+                console.error("getData", _context.t0);
 
                 _this.setState({
                   loadingAll: false
@@ -1474,8 +1508,8 @@ var Circle = /*#__PURE__*/function (_Component) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                startOf = moment(date, 'YYYY-MM-DD').startOf('d');
-                endOf = moment(date, 'YYYY-MM-DD').endOf('d');
+                startOf = moment(date, "YYYY-MM-DD").startOf("d");
+                endOf = moment(date, "YYYY-MM-DD").endOf("d");
                 _context2.next = 4;
                 return circleActions.getMessages(_this.state.circleId, 10000, startOf.valueOf(), endOf.valueOf());
 
@@ -1529,13 +1563,13 @@ var Circle = /*#__PURE__*/function (_Component) {
       var circle = _this.state.circle;
 
       if (!circle) {
-        return '';
+        return "";
       }
 
       if (circle.IsPrivate) {
         return "PM: ".concat(circle.Audience.map(function (user) {
           return user.displayName;
-        }).join(', '));
+        }).join(", "));
       }
 
       return circle.Title;
@@ -1543,13 +1577,13 @@ var Circle = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onHandleChange", function (event) {
       var stateChange = {};
-      stateChange[event.target.getAttribute('id')] = event.target.value;
+      stateChange[event.target.getAttribute("id")] = event.target.value;
 
       _this.setState(stateChange);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onImageUpdated", function (image) {
-      console.log('updated image');
+      console.log("updated image");
       console.log(image);
 
       _this.setState({
@@ -1565,7 +1599,7 @@ var Circle = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFileUpdated", function (url) {
-      console.log('updated url');
+      console.log("updated url");
       console.log(url);
 
       _this.setState({
@@ -1586,7 +1620,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       });
 
       if (m) {
-        var input = document.getElementById('messageInput');
+        var input = document.getElementById("messageInput");
         if (input) input.focus();
       }
     });
@@ -1594,7 +1628,7 @@ var Circle = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleMessageDateChange", function (date) {
       _this.setState({
         messageDate: date,
-        messageDateText: moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY'),
+        messageDateText: moment(date, "YYYY-MM-DD").format("DD/MM/YYYY"),
         showMessageDate: false,
         messages: []
       });
@@ -1632,7 +1666,7 @@ var Circle = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
-      if (event.key === 'Enter' && !event.shiftKey) {
+      if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
 
         _this.sendMessage();
@@ -1667,7 +1701,7 @@ var Circle = /*#__PURE__*/function (_Component) {
                 if (m._id === messageToDelete._id) {
                   return _objectSpread$3(_objectSpread$3({}, m), {}, {
                     deleted: true,
-                    text: ' '
+                    text: " "
                   });
                 }
 
@@ -1697,7 +1731,7 @@ var Circle = /*#__PURE__*/function (_Component) {
             case 11:
               _context4.prev = 11;
               _context4.t0 = _context4["catch"](5);
-              console.error('Failed to delete message:', _context4.t0); // Revert the optimistic update on failure
+              console.error("Failed to delete message:", _context4.t0); // Revert the optimistic update on failure
 
               revertedMessages = _this.state.messages.map(function (m) {
                 if (m._id === messageToDelete._id) {
@@ -1712,7 +1746,7 @@ var Circle = /*#__PURE__*/function (_Component) {
                 deletingMessageId: null
               });
 
-              alert('Failed to delete message. Please try again.');
+              alert("Failed to delete message. Please try again.");
 
             case 17:
             case "end":
@@ -1770,7 +1804,7 @@ var Circle = /*#__PURE__*/function (_Component) {
 
       _this.setState({
         messages: [].concat(_toConsumableArray(_this.state.messages), [clonedMessage]),
-        messageInput: '',
+        messageInput: "",
         imageInput: null,
         imageInputShowing: false,
         fileInput: null,
@@ -1782,18 +1816,18 @@ var Circle = /*#__PURE__*/function (_Component) {
 
         _this.scrollToBottom();
 
-        _this.imageInput && _this.imageInput.getWrappedInstance().setValue(null);
-        _this.fileInput && _this.fileInput.getWrappedInstance().setValue(null);
+        _this.imageInput && _this.imageInput.setValue(null);
+        _this.fileInput && _this.fileInput.setValue(null);
       }, 100);
     });
 
-    var circleId = Helper.safeReadParams(props, 'circleId');
+    var circleId = Helper.safeReadParams(props, "circleId");
     _this.state = {
       circleId: circleId,
       circle: _.find(props.circles, function (c) {
         return c.Id === circleId;
       }),
-      messageInput: '',
+      messageInput: "",
       messages: [],
       images: [],
       files: [],
@@ -1842,7 +1876,7 @@ var Circle = /*#__PURE__*/function (_Component) {
     value: function mergeMessages(receivedMessages, excludePending) {
       var _this2 = this;
 
-      var newMessages = _.sortBy(_.concat(this.state.messages, receivedMessages), 'createdAt');
+      var newMessages = _.sortBy(_.concat(this.state.messages, receivedMessages), "createdAt");
 
       this.setState({
         messages: _.filter(_.uniqBy(newMessages, function (m) {
@@ -1936,17 +1970,17 @@ var Circle = /*#__PURE__*/function (_Component) {
         },
         onKeyDown: this.onKeyDown
       }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FontAwesome, {
-        className: "chat_imageIcon".concat(this.state.imageInputShowing ? ' chat_imageIcon-selected' : ''),
+        className: "chat_imageIcon".concat(this.state.imageInputShowing ? " chat_imageIcon-selected" : ""),
         name: "camera",
         onClick: this.showImageInput
       }), /*#__PURE__*/React.createElement(FontAwesome, {
-        className: "chat_imageIcon".concat(this.state.fileInputShowing ? ' chat_imageIcon-selected' : ''),
+        className: "chat_imageIcon".concat(this.state.fileInputShowing ? " chat_imageIcon-selected" : ""),
         name: "paperclip",
         onClick: this.showFileInput
       })), /*#__PURE__*/React.createElement("div", {
         className: "overflow-x",
         style: {
-          display: this.state.imageInputShowing ? 'block' : 'none'
+          display: this.state.imageInputShowing ? "block" : "none"
         }
       }, /*#__PURE__*/React.createElement(Components$2.ImageInput, {
         ref: function ref(_ref5) {
@@ -1961,7 +1995,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       })), /*#__PURE__*/React.createElement("div", {
         className: "overflow-x",
         style: {
-          display: this.state.fileInputShowing ? 'block' : 'none'
+          display: this.state.fileInputShowing ? "block" : "none"
         }
       }, /*#__PURE__*/React.createElement(Components$2.FileInput, {
         ref: function ref(_ref6) {
@@ -1995,11 +2029,11 @@ var Circle = /*#__PURE__*/function (_Component) {
       var isDeleting = this.state.deletingMessageId === m._id;
       return /*#__PURE__*/React.createElement("div", {
         key: m._id,
-        className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '').concat(isDeleting ? ' message-deleting' : '')
+        className: "message".concat(isSelf ? " message-self" : "").concat(m.uploading ? " message-uploading" : "").concat(isDeleting ? " message-deleting" : "")
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "h5-noUpper",
         className: "message_time"
-      }, moment.utc(m.createdAt).local().format('D MMM YYYY • h:mma')), /*#__PURE__*/React.createElement("div", {
+      }, moment.utc(m.createdAt).local().format("D MMM YYYY • h:mma")), /*#__PURE__*/React.createElement("div", {
         className: "message_inner"
       }, /*#__PURE__*/React.createElement(Components$2.ProfilePic, {
         size: 40,
@@ -2010,17 +2044,17 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body",
         className: "message_name"
-      }, m.user.name, m.replyingTo && !isDeleted ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && !isDeleted && /*#__PURE__*/React.createElement("div", {
+      }, m.user.name, m.replyingTo && !isDeleted ? " replied to ".concat(m.replyingTo.user.name) : ""), m.replyingTo && !isDeleted && /*#__PURE__*/React.createElement("div", {
         className: "message_replyBubble"
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body",
         className: "message_text"
-      }, Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100)))), /*#__PURE__*/React.createElement("div", {
+      }, Helper.toParagraphed((m.replyingTo.text || "").substr(0, 100)))), /*#__PURE__*/React.createElement("div", {
         className: "message_bubble"
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body",
         className: "message_text"
-      }, isDeleted ? '[Message deleted]' : Helper.toParagraphed(m.text)), !isDeleted && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, (m.image || []).map(function (url, i) {
+      }, isDeleted ? "[Message deleted]" : Helper.toParagraphed(m.text)), !isDeleted && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, (m.image || []).map(function (url, i) {
         return /*#__PURE__*/React.createElement("a", {
           href: url,
           target: "_blank",
@@ -2039,8 +2073,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       })))), !isDeleted && /*#__PURE__*/React.createElement("div", {
         className: "message_reply",
         style: {
-          display: 'flex',
-          gap: '16px'
+          display: "flex",
+          gap: "16px"
         }
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "button",
@@ -2077,7 +2111,7 @@ var Circle = /*#__PURE__*/function (_Component) {
     value: function renderEmptyDate() {
       return this.renderMessage({
         system: true,
-        text: 'No messages on this date'
+        text: "No messages on this date"
       });
     }
   }, {
@@ -2092,7 +2126,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "chat_section_titleSection"
       }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "chat_section_titleSection_caret",
-        name: "chevron-".concat(this.state.membersExpanded ? 'up' : 'down'),
+        name: "chevron-".concat(this.state.membersExpanded ? "up" : "down"),
         onClick: this.toggleMembers
       }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
@@ -2110,7 +2144,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "chat_section_titleSection"
       }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "chat_section_titleSection_caret",
-        name: "chevron-".concat(this.state.imagesExpanded ? 'up' : 'down'),
+        name: "chevron-".concat(this.state.imagesExpanded ? "up" : "down"),
         onClick: this.toggleImages
       }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
@@ -2133,7 +2167,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "chat_section_titleSection"
       }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "chat_section_titleSection_caret",
-        name: "chevron-".concat(this.state.filesExpanded ? 'up' : 'down'),
+        name: "chevron-".concat(this.state.filesExpanded ? "up" : "down"),
         onClick: this.toggleFiles
       }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
@@ -2164,7 +2198,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "chat_replyTo_container"
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "h5"
-      }, "Replying to ", m && m.user && !_.isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !_.isEmpty(m.text) && /*#__PURE__*/React.createElement(Components$2.Text, {
+      }, "Replying to", " ", m && m.user && !_.isEmpty(m.user.displayName) ? m.user.displayName : ""), m && !_.isEmpty(m.text) && /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body"
       }, m.text.substr(0, 50))), /*#__PURE__*/React.createElement("div", {
         className: "chat_replyTo_remove"
@@ -2184,14 +2218,14 @@ var Circle = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(Components$2.Popup, {
         title: "Delete Message",
         buttons: [{
-          text: 'Delete',
+          text: "Delete",
           onClick: this.onConfirmDelete,
-          type: 'primary',
+          type: "primary",
           isActive: true
         }, {
-          text: 'Cancel',
+          text: "Cancel",
           onClick: this.onCancelDelete,
-          type: 'tertiary',
+          type: "tertiary",
           isActive: true
         }],
         onClose: this.onCancelDelete,
@@ -2208,8 +2242,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(Components$2.OverlayPage, {
         fullPage: true,
         fullPageStyle: {
-          display: 'flex',
-          flexDirection: 'column'
+          display: "flex",
+          flexDirection: "column"
         }
       }, this.renderDeleteConfirmPopup(), /*#__PURE__*/React.createElement(Components$2.Header, {
         rightContent: this.renderHeaderRight()