@plusscommunities/pluss-circles-web-groups 1.5.3 → 1.5.5-auth.0

package/dist/index.umd.js

@@ -356,12 +356,46 @@
       }
 
       return deleteMessage;
+    }(),
+    markAsRead: function () {
+      var _markAsRead = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4(circleId, userId) {
+        return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                return _context4.abrupt("return", Session$4.authedFunction({
+                  method: 'post',
+                  url: Helper$3.getUrl('groups', 'resetunread'),
+                  data: {
+                    groupID: circleId,
+                    userID: userId
+                  }
+                }));
+
+              case 1:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      function markAsRead(_x9, _x10) {
+        return _markAsRead.apply(this, arguments);
+      }
+
+      return markAsRead;
     }()
   };
 
   var Apis$1 = PlussCore__namespace.Apis;
   var analyticsActions = Apis$1.analyticsActions;
 
+  var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+  var css = "/* Badge styling for unread count */\n:root {\n  --badge-bg-color: #597db4; /* COLOUR_BRANDING_OFF */\n}\n\n.badgeTag {\n  font-size: 11px;\n  font-weight: 400;\n  padding: 3px 10px;\n  background-color: var(--badge-bg-color) !important;\n  color: #fff !important;\n  border-radius: 999px !important;\n  border: none !important;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  letter-spacing: 0.02em;\n}\n\n/* Unread filter info banner */\n.unreadFilterBanner {\n  background-color: #f0f4f8;\n  border-left: 3px solid var(--badge-bg-color);\n  border-radius: 4px;\n  padding: 12px 16px;\n  margin-top: 16px;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n}\n\n.unreadFilterContent {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n}\n\n.unreadFilterIcon {\n  font-size: 16px;\n  color: var(--badge-bg-color);\n  flex-shrink: 0;\n}\n\n.unreadFilterText {\n  font-size: 14px;\n  line-height: 1.5;\n  color: #333333;\n}\n\n.unreadFilterButton {\n  background: none;\n  border: none;\n  color: var(--badge-bg-color);\n  font-size: 14px;\n  font-weight: 500;\n  text-decoration: underline;\n  cursor: pointer;\n  padding: 4px 8px;\n  margin-left: 4px;\n  min-height: 32px;\n  min-width: 32px;\n  transition: all 0.2s ease;\n}\n\n.unreadFilterButton:hover {\n  background-color: rgba(89, 125, 180, 0.1);\n  text-decoration: none;\n}\n\n.unreadFilterButton:focus {\n  outline: 2px solid var(--badge-bg-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Mobile responsiveness */\n@media (max-width: 768px) {\n  .unreadFilterBanner {\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 12px;\n  }\n\n  .unreadFilterContent {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .unreadFilterText {\n    font-size: 13px;\n  }\n}\n\n";
+  n(css,{});
+
   function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); 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); }; }
 
   function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -398,7 +432,7 @@
 
                 case 3:
                   res = _context.sent;
-                  console.log('getData', res.data);
+                  console.log("getData", res.data);
 
                   _this.props.circlesLoaded(res.data);
 
@@ -412,7 +446,7 @@
                 case 9:
                   _context.prev = 9;
                   _context.t0 = _context["catch"](0);
-                  console.error('getData', _context.t0);
+                  console.error("getData", _context.t0);
 
                   _this.setState({
                     loadingAll: false
@@ -427,6 +461,12 @@
         })));
       });
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "selectUnreadFilter", function (showUnreadOnly) {
+        _this.setState({
+          showUnreadOnly: showUnreadOnly
+        });
+      });
+
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "canAddNew", function () {
         var auth = _this.props.auth;
         return Session$3.validateAccess(auth.site, values.permission, auth);
@@ -494,9 +534,15 @@
         });
       });
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "selectSort", function (sortType) {
+        _this.setState({
+          sortBy: sortType
+        });
+      });
+
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_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);
       });
@@ -508,14 +554,14 @@
           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__default['default'](_assertThisInitialized__default['default'](_this), "getTypeFilterText", function (type) {
-        if (type === 'private') {
-          return 'Private Message';
+        if (type === "private") {
+          return "Private Message";
         }
 
         return ___default['default'].capitalize(values.entityName);
@@ -525,14 +571,17 @@
         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",
+        showUnreadOnly: false,
+        pollingInterval: null
       };
       return _this;
     }
@@ -540,27 +589,77 @@
     _createClass__default['default'](Circles, [{
       key: "componentDidMount",
       value: function componentDidMount() {
-        this.getData();
+        var _this2 = this;
+
+        this.getData(); // Poll for updates every 10 seconds
+
+        this.pollingInterval = setInterval(function () {
+          _this2.getData();
+        }, 10000);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        if (this.pollingInterval) {
+          clearInterval(this.pollingInterval);
+        }
+      }
+    }, {
+      key: "isCircleUnread",
+      value: function isCircleUnread(circle) {
+        var userId = this.props.user.Id;
+
+        if (!circle.Unread || !circle.Unread[userId]) {
+          return false;
+        }
+
+        return circle.Unread[userId] > 0;
+      }
+    }, {
+      key: "getUnreadCount",
+      value: function getUnreadCount(circle) {
+        var userId = this.props.user.Id;
+
+        if (!circle.Unread || !circle.Unread[userId]) {
+          return 0;
+        }
+
+        return circle.Unread[userId];
       }
     }, {
       key: "getCircles",
       value: function getCircles() {
-        var _this2 = this;
+        var _this3 = this;
 
         var result = this.props.circles;
 
         if (this.state.selectedTypeFilter) {
           result = ___default['default'].filter(result, function (circle) {
-            return _this2.state.selectedTypeFilter === 'circle' ? !circle.IsPrivate : circle.IsPrivate;
+            return _this3.state.selectedTypeFilter === "circle" ? !circle.IsPrivate : circle.IsPrivate;
           });
         }
 
         if (this.state.selectedUserFilter) {
           result = ___default['default'].filter(result, function (circle) {
             return ___default['default'].some(circle.Audience, function (user) {
-              return user.userId === _this2.state.selectedUserFilter.userId;
+              return user.userId === _this3.state.selectedUserFilter.userId;
             });
           });
+        } // Apply sorting
+
+
+        result = ___default['default'].sortBy(result, function (circle) {
+          return moment__default['default'](circle.Changed).valueOf();
+        });
+
+        if (this.state.sortBy === "newest") {
+          result.reverse();
+
+          if (this.state.showUnreadOnly) {
+            result = ___default['default'].filter(result, function (circle) {
+              return _this3.isCircleUnread(circle);
+            });
+          }
         }
 
         return result;
@@ -568,7 +667,7 @@
     }, {
       key: "getUsers",
       value: function getUsers() {
-        var _this3 = this;
+        var _this4 = this;
 
         var users = [];
         this.props.circles.forEach(function (circle) {
@@ -578,10 +677,10 @@
         });
         users = ___default['default'].sortBy(___default['default'].uniqBy(users, function (user) {
           return user.userId;
-        }), 'displayName');
+        }), "displayName");
         return ___default['default'].filter(users, function (u) {
-          if (!___default['default'].isEmpty(_this3.state.userSearch)) {
-            return (u.displayName || '').toLowerCase().indexOf(_this3.state.userSearch.toLowerCase()) > -1;
+          if (!___default['default'].isEmpty(_this4.state.userSearch)) {
+            return (u.displayName || "").toLowerCase().indexOf(_this4.state.userSearch.toLowerCase()) > -1;
           }
 
           return true;
@@ -590,7 +689,7 @@
     }, {
       key: "validateCircleAdmin",
       value: function validateCircleAdmin(circle, onlyCreator) {
-        var _this4 = this;
+        var _this5 = this;
 
         if (Session$3.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
           return true;
@@ -601,21 +700,31 @@
         }
 
         return ___default['default'].some(circle.Audience, function (user) {
-          return user.userId === _this4.props.user.Id && user.isAdmin;
+          return user.userId === _this5.props.user.Id && user.isAdmin;
         });
       }
     }, {
       key: "renderRow",
       value: function renderRow(circle) {
-        var _this5 = this;
+        var _this6 = this;
 
+        var unreadCount = this.getUnreadCount(circle);
+        var badge = unreadCount > 0 ? /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
+          className: css.badgeTag,
+          text: "".concat(unreadCount, " new")
+        }) : null;
         return /*#__PURE__*/React__default['default'].createElement("tr", {
           key: circle.Id
         }, /*#__PURE__*/React__default['default'].createElement("td", {
           className: "table-TitleColumn"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "flex flex-center",
+          style: {
+            gap: "8px"
+          }
         }, /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
           to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
-        }, this.getTitle(circle))), /*#__PURE__*/React__default['default'].createElement("td", null, moment__default['default'](circle.Changed).local().format('D MMM YYYY')), /*#__PURE__*/React__default['default'].createElement("td", null, circle.Audience.map(function (user) {
+        }, this.getTitle(circle)), badge)), /*#__PURE__*/React__default['default'].createElement("td", null, moment__default['default'](circle.Changed).local().format("D MMM YYYY")), /*#__PURE__*/React__default['default'].createElement("td", null, circle.Audience.map(function (user) {
           return /*#__PURE__*/React__default['default'].createElement(Components$4.ProfilePic, {
             size: 30,
             image: user.profilePic,
@@ -626,8 +735,8 @@
           className: "table-options"
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           style: {
-            display: 'flex',
-            alignItems: 'center'
+            display: "flex",
+            alignItems: "center"
           }
         }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
           to: "/".concat(values.featureKey, "/edit/").concat(circle.Id)
@@ -636,31 +745,69 @@
             fontSize: 20,
             padding: 5,
             marginLeft: 12,
-            cursor: 'pointer'
+            cursor: "pointer"
           },
           name: "pencil"
         })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement("a", {
           onClick: function onClick() {
-            _this5.removeCircle(circle);
+            _this6.removeCircle(circle);
           }
         }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
           style: {
             fontSize: 20,
             padding: 5,
             marginLeft: 12,
-            cursor: 'pointer'
+            cursor: "pointer"
           },
           name: "minus-circle"
         })))));
       }
+    }, {
+      key: "renderUnreadFilterInfo",
+      value: function renderUnreadFilterInfo() {
+        var _this7 = this;
+
+        var showUnreadOnly = this.state.showUnreadOnly;
+
+        if (!showUnreadOnly) {
+          return null;
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: css.unreadFilterBanner
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: css.unreadFilterContent
+        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          name: "info-circle",
+          className: css.unreadFilterIcon
+        }), /*#__PURE__*/React__default['default'].createElement("span", {
+          className: css.unreadFilterText
+        }, "Showing only items with new messages.", " ", /*#__PURE__*/React__default['default'].createElement("button", {
+          className: css.unreadFilterButton,
+          onClick: function onClick() {
+            return _this7.selectUnreadFilter(false);
+          },
+          "aria-label": "Turn off unread filter"
+        }, "Turn off filter"))));
+      }
     }, {
       key: "renderFilters",
       value: function renderFilters() {
+        var _this8 = this;
+
         var userFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           className: "marginRight-10",
           onClick: this.openUserFilter,
           text: "User"
         });
+        var unreadFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
+          className: "marginRight-10",
+          onClick: function onClick() {
+            return _this8.selectUnreadFilter(!_this8.state.showUnreadOnly);
+          },
+          leftIcon: this.state.showUnreadOnly ? "check" : null,
+          text: "Unread Only"
+        });
         var typeFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           className: "marginRight-10",
           onClick: this.openTypeFilter,
@@ -695,12 +842,28 @@
         }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
           type: "h5",
           className: "marginRight-20"
-        }, "Filter by"), userFilter, typeFilter);
+        }, "Filter by"), userFilter, typeFilter, unreadFilter, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
+          type: "h5",
+          className: "marginRight-20 marginLeft-20"
+        }, "Sort by:"), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
+          className: "marginRight-10",
+          onClick: function onClick() {
+            return _this8.selectSort("newest");
+          },
+          leftIcon: this.state.sortBy === "newest" ? "check" : null,
+          text: "Newest first"
+        }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
+          onClick: function onClick() {
+            return _this8.selectSort("oldest");
+          },
+          leftIcon: this.state.sortBy === "oldest" ? "check" : null,
+          text: "Oldest first"
+        }));
       }
     }, {
       key: "renderUserFilterPopup",
       value: function renderUserFilterPopup() {
-        var _this6 = this;
+        var _this9 = this;
 
         if (!this.state.userFilterOpen) {
           return null;
@@ -720,7 +883,7 @@
           placeholder: "Enter name",
           value: this.state.userSearch,
           onChange: function onChange(e) {
-            return _this6.onHandleChange(e);
+            return _this9.onHandleChange(e);
           },
           alwaysShowLabel: true
         }), this.getUsers().map(function (user) {
@@ -728,7 +891,7 @@
             key: user.userId,
             user: user,
             onClick: function onClick() {
-              _this6.selectUserFilter(user);
+              _this9.selectUserFilter(user);
             }
           });
         }));
@@ -736,7 +899,7 @@
     }, {
       key: "renderTypeFilterPopup",
       value: function renderTypeFilterPopup() {
-        var _this7 = this;
+        var _this10 = this;
 
         if (!this.state.typeFilterOpen) {
           return null;
@@ -750,13 +913,13 @@
           onClose: this.closeTypeFilter
         }, /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           onClick: function onClick() {
-            _this7.selectTypeFilter('circle');
+            _this10.selectTypeFilter("circle");
           },
           text: ___default['default'].capitalize(values.entityName),
           className: "marginRight-10"
         }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           onClick: function onClick() {
-            _this7.selectTypeFilter('private');
+            _this10.selectTypeFilter("private");
           },
           text: "Private Message"
         }));
@@ -764,7 +927,7 @@
     }, {
       key: "render",
       value: function render() {
-        var _this8 = this;
+        var _this11 = this;
 
         return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React__default['default'].createElement(Components$4.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$4.AddButton, {
           onClick: this.onAddNew,
@@ -774,21 +937,21 @@
         }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
           type: "h1",
           className: ""
-        }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
+        }, values.textFeatureTitle), this.renderFilters(), this.renderUnreadFilterInfo(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
           className: "plussTable",
           striped: true,
           bordered: true,
           condensed: true,
           hover: true,
           style: {
-            minWidth: '100%'
+            minWidth: "100%"
           }
         }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", null, "Title"), /*#__PURE__*/React__default['default'].createElement("th", null, "Last updated"), /*#__PURE__*/React__default['default'].createElement("th", null, "Members"), /*#__PURE__*/React__default['default'].createElement("th", {
           style: {
             width: 50
           }
         }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.getCircles().map(function (circle) {
-          return _this8.renderRow(circle);
+          return _this11.renderRow(circle);
         })))));
       }
     }]);
@@ -850,7 +1013,7 @@
           if (res.data != null && !___default['default'].isEmpty(res.data.results.Items)) {
             _this.setState({
               users: ___default['default'].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
@@ -874,7 +1037,7 @@
           }
 
           if (!___default['default'].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;
@@ -928,7 +1091,7 @@
 
                 case 3:
                   res = _context.sent;
-                  console.log('getData', res.data);
+                  console.log("getData", res.data);
                   circle = ___default['default'].find(res.data, function (c) {
                     return c.Id === _this.state.circleId;
                   });
@@ -948,7 +1111,7 @@
                 case 11:
                   _context.prev = 11;
                   _context.t0 = _context["catch"](0);
-                  console.error('getData', _context.t0);
+                  console.error("getData", _context.t0);
 
                   _this.setState({
                     loadingAll: false
@@ -965,7 +1128,7 @@
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_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);
       });
@@ -988,7 +1151,7 @@
         };
 
         if (___default['default'].isEmpty(_this.state.title) && ___default['default'].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);
@@ -1029,17 +1192,17 @@
               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) {
@@ -1048,17 +1211,17 @@
               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.");
           });
         }
       });
@@ -1079,20 +1242,20 @@
         });
       });
 
-      var circleId = Helper$1.safeReadParams(props, 'circleId');
+      var circleId = Helper$1.safeReadParams(props, "circleId");
       _this.state = {
         circleId: circleId,
         circle: ___default['default'].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;
     }
@@ -1114,7 +1277,7 @@
           this.setState({
             image: url
           });
-          this.imageInput.getWrappedInstance().setValue(url);
+          this.imageInput.setValue(url);
         } else {
           setTimeout(function () {
             _this2.checkSetImage(url);
@@ -1147,9 +1310,9 @@
       value: function renderSuccess() {
         if (!this.state.success) return null;
         return /*#__PURE__*/React__default['default'].createElement(Components$3.SuccessPopup, {
-          text: "".concat(___default['default'].capitalize(values.entityName), " has been ").concat(this.state.circleId == null ? 'added' : 'edited'),
+          text: "".concat(___default['default'].capitalize(values.entityName), " has been ").concat(this.state.circleId == null ? "added" : "edited"),
           buttons: [{
-            type: 'outlined',
+            type: "outlined",
             onClick: function onClick() {
               window.history.back();
             },
@@ -1196,7 +1359,7 @@
           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({
@@ -1204,7 +1367,7 @@
               });
             }
           }, {
-            Label: 'No',
+            Label: "No",
             Value: false,
             onChange: function onChange() {
               return _this5.setState({
@@ -1224,7 +1387,7 @@
       value: function renderSelectedOption() {
         return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
           style: {
-            display: this.state.selectedOption === 'visibility' ? 'block' : 'none'
+            display: this.state.selectedOption === "visibility" ? "block" : "none"
           }
         }, this.renderVisibility()));
       }
@@ -1232,14 +1395,14 @@
       key: "renderOptionsSection",
       value: function renderOptionsSection() {
         var options = [{
-          key: 'visibility',
-          icon: 'people3',
-          text: 'Visibility'
+          key: "visibility",
+          icon: "people3",
+          text: "Visibility"
         }];
 
         if (!this.props.circleAllowPublicCircles) {
           options = ___default['default'].filter(options, function (o) {
-            return o.key !== 'visibility';
+            return o.key !== "visibility";
           });
         }
 
@@ -1263,7 +1426,7 @@
         }, /*#__PURE__*/React__default['default'].createElement(Components$3.Text, {
           type: "formTitleLarge",
           className: "marginBottom-24"
-        }, this.state.circleId == null ? 'New' : 'Edit', " ", ___default['default'].capitalize(values.entityName)), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, this.state.circleId == null ? "New" : "Edit", " ", ___default['default'].capitalize(values.entityName)), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-reverse"
         }, /*#__PURE__*/React__default['default'].createElement(Components$3.ImageInput, {
           ref: function ref(_ref2) {
@@ -1447,7 +1610,7 @@
 
                 case 3:
                   res = _context.sent;
-                  console.log('getData', res.data);
+                  console.log("getData", res.data);
                   circle = ___default['default'].find(res.data, function (c) {
                     return c.Id === _this.state.circleId;
                   });
@@ -1465,7 +1628,7 @@
                 case 10:
                   _context.prev = 10;
                   _context.t0 = _context["catch"](0);
-                  console.error('getData', _context.t0);
+                  console.error("getData", _context.t0);
 
                   _this.setState({
                     loadingAll: false
@@ -1497,8 +1660,8 @@
             while (1) {
               switch (_context2.prev = _context2.next) {
                 case 0:
-                  startOf = moment__default['default'](date, 'YYYY-MM-DD').startOf('d');
-                  endOf = moment__default['default'](date, 'YYYY-MM-DD').endOf('d');
+                  startOf = moment__default['default'](date, "YYYY-MM-DD").startOf("d");
+                  endOf = moment__default['default'](date, "YYYY-MM-DD").endOf("d");
                   _context2.next = 4;
                   return circleActions.getMessages(_this.state.circleId, 10000, startOf.valueOf(), endOf.valueOf());
 
@@ -1552,13 +1715,13 @@
         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;
@@ -1566,13 +1729,13 @@
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_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__default['default'](_assertThisInitialized__default['default'](_this), "onImageUpdated", function (image) {
-        console.log('updated image');
+        console.log("updated image");
         console.log(image);
 
         _this.setState({
@@ -1588,7 +1751,7 @@
       });
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onFileUpdated", function (url) {
-        console.log('updated url');
+        console.log("updated url");
         console.log(url);
 
         _this.setState({
@@ -1609,7 +1772,7 @@
         });
 
         if (m) {
-          var input = document.getElementById('messageInput');
+          var input = document.getElementById("messageInput");
           if (input) input.focus();
         }
       });
@@ -1617,7 +1780,7 @@
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "handleMessageDateChange", function (date) {
         _this.setState({
           messageDate: date,
-          messageDateText: moment__default['default'](date, 'YYYY-MM-DD').format('DD/MM/YYYY'),
+          messageDateText: moment__default['default'](date, "YYYY-MM-DD").format("DD/MM/YYYY"),
           showMessageDate: false,
           messages: []
         });
@@ -1655,7 +1818,7 @@
       });
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onKeyDown", function (event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        if (event.key === "Enter" && !event.shiftKey) {
           event.preventDefault();
 
           _this.sendMessage();
@@ -1690,7 +1853,7 @@
                   if (m._id === messageToDelete._id) {
                     return _objectSpread$3(_objectSpread$3({}, m), {}, {
                       deleted: true,
-                      text: ' '
+                      text: " "
                     });
                   }
 
@@ -1720,7 +1883,7 @@
               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) {
@@ -1735,7 +1898,7 @@
                   deletingMessageId: null
                 });
 
-                alert('Failed to delete message. Please try again.');
+                alert("Failed to delete message. Please try again.");
 
               case 17:
               case "end":
@@ -1752,6 +1915,32 @@
         });
       });
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "markCircleAsRead", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee5() {
+        return _regeneratorRuntime__default['default'].wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                _context5.prev = 0;
+                _context5.next = 3;
+                return circleActions.markAsRead(_this.state.circleId, _this.props.user.Id);
+
+              case 3:
+                _context5.next = 8;
+                break;
+
+              case 5:
+                _context5.prev = 5;
+                _context5.t0 = _context5["catch"](0);
+                console.error("Failed to mark circle as read:", _context5.t0);
+
+              case 8:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5, null, [[0, 5]]);
+      })));
+
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "sendMessage", function () {
         var message = {
           _id: Helper.randomString(),
@@ -1793,7 +1982,7 @@
 
         _this.setState({
           messages: [].concat(_toConsumableArray__default['default'](_this.state.messages), [clonedMessage]),
-          messageInput: '',
+          messageInput: "",
           imageInput: null,
           imageInputShowing: false,
           fileInput: null,
@@ -1805,18 +1994,18 @@
 
           _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: ___default['default'].find(props.circles, function (c) {
           return c.Id === circleId;
         }),
-        messageInput: '',
+        messageInput: "",
         messages: [],
         images: [],
         files: [],
@@ -1836,6 +2025,7 @@
     _createClass__default['default'](Circle, [{
       key: "componentDidMount",
       value: function componentDidMount() {
+        this.markCircleAsRead();
         this.checkGetData();
         this.connect();
         this.props.setNavData({
@@ -1865,7 +2055,7 @@
       value: function mergeMessages(receivedMessages, excludePending) {
         var _this2 = this;
 
-        var newMessages = ___default['default'].sortBy(___default['default'].concat(this.state.messages, receivedMessages), 'createdAt');
+        var newMessages = ___default['default'].sortBy(___default['default'].concat(this.state.messages, receivedMessages), "createdAt");
 
         this.setState({
           messages: ___default['default'].filter(___default['default'].uniqBy(newMessages, function (m) {
@@ -1959,21 +2149,21 @@
           },
           onKeyDown: this.onKeyDown
         }), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          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__default['default'].createElement(FontAwesome__default['default'], {
-          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__default['default'].createElement("div", {
           className: "overflow-x",
           style: {
-            display: this.state.imageInputShowing ? 'block' : 'none'
+            display: this.state.imageInputShowing ? "block" : "none"
           }
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.ImageInput, {
-          ref: function ref(_ref5) {
-            _this5.imageInput = _ref5;
+          ref: function ref(_ref6) {
+            _this5.imageInput = _ref6;
           },
           multiple: true,
           limit: 10,
@@ -1984,11 +2174,11 @@
         })), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "overflow-x",
           style: {
-            display: this.state.fileInputShowing ? 'block' : 'none'
+            display: this.state.fileInputShowing ? "block" : "none"
           }
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.FileInput, {
-          ref: function ref(_ref6) {
-            _this5.fileInput = _ref6;
+          ref: function ref(_ref7) {
+            _this5.fileInput = _ref7;
           },
           multiple: true,
           limit: 10,
@@ -2018,11 +2208,11 @@
         var isDeleting = this.state.deletingMessageId === m._id;
         return /*#__PURE__*/React__default['default'].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__default['default'].createElement(Components$2.Text, {
           type: "h5-noUpper",
           className: "message_time"
-        }, moment__default['default'].utc(m.createdAt).local().format('D MMM YYYY • h:mma')), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, moment__default['default'].utc(m.createdAt).local().format("D MMM YYYY • h:mma")), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_inner"
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.ProfilePic, {
           size: 40,
@@ -2033,17 +2223,17 @@
         }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+        }, m.user.name, m.replyingTo && !isDeleted ? " replied to ".concat(m.replyingTo.user.name) : ""), m.replyingTo && !isDeleted && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_replyBubble"
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "body",
           className: "message_text"
-        }, Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100)))), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, Helper.toParagraphed((m.replyingTo.text || "").substr(0, 100)))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_bubble"
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "body",
           className: "message_text"
-        }, isDeleted ? '[Message deleted]' : Helper.toParagraphed(m.text)), !isDeleted && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", null, (m.image || []).map(function (url, i) {
+        }, isDeleted ? "[Message deleted]" : Helper.toParagraphed(m.text)), !isDeleted && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", null, (m.image || []).map(function (url, i) {
           return /*#__PURE__*/React__default['default'].createElement("a", {
             href: url,
             target: "_blank",
@@ -2062,8 +2252,8 @@
         })))), !isDeleted && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_reply",
           style: {
-            display: 'flex',
-            gap: '16px'
+            display: "flex",
+            gap: "16px"
           }
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "button",
@@ -2100,7 +2290,7 @@
       value: function renderEmptyDate() {
         return this.renderMessage({
           system: true,
-          text: 'No messages on this date'
+          text: "No messages on this date"
         });
       }
     }, {
@@ -2115,7 +2305,7 @@
           className: "chat_section_titleSection"
         }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
           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__default['default'].createElement("div", {
           className: "flex-1"
@@ -2133,7 +2323,7 @@
           className: "chat_section_titleSection"
         }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
           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__default['default'].createElement("div", {
           className: "flex-1"
@@ -2156,7 +2346,7 @@
           className: "chat_section_titleSection"
         }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
           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__default['default'].createElement("div", {
           className: "flex-1"
@@ -2187,7 +2377,7 @@
           className: "chat_replyTo_container"
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "h5"
-        }, "Replying to ", m && m.user && !___default['default'].isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !___default['default'].isEmpty(m.text) && /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+        }, "Replying to", " ", m && m.user && !___default['default'].isEmpty(m.user.displayName) ? m.user.displayName : ""), m && !___default['default'].isEmpty(m.text) && /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "body"
         }, m.text.substr(0, 50))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "chat_replyTo_remove"
@@ -2207,14 +2397,14 @@
         return /*#__PURE__*/React__default['default'].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,
@@ -2231,8 +2421,8 @@
         return /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPage, {
           fullPage: true,
           fullPageStyle: {
-            display: 'flex',
-            flexDirection: 'column'
+            display: "flex",
+            flexDirection: "column"
           }
         }, this.renderDeleteConfirmPopup(), /*#__PURE__*/React__default['default'].createElement(Components$2.Header, {
           rightContent: this.renderHeaderRight()
@@ -2282,8 +2472,8 @@
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "chat_newMessage"
         }, this.renderChatInput()), this.renderReplyTo(), /*#__PURE__*/React__default['default'].createElement("div", {
-          ref: function ref(_ref7) {
-            return _this8.chat = _ref7;
+          ref: function ref(_ref8) {
+            return _this8.chat = _ref8;
           },
           className: "chat_messages"
         }, ___default['default'].isEmpty(this.state.messages) && !___default['default'].isEmpty(this.state.messageDate) && this.renderEmptyDate(), this.state.messages.map(function (m) {