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

package/dist/index.umd.js

@@ -44,30 +44,30 @@
   var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 
   var values = {
-    featureKey: 'circles',
-    entityKey: 'circle',
-    entityName: 'circle',
-    serviceKey: 'circles',
-    permission: 'circles',
-    menuIcon: 'circle-o',
+    featureKey: 'groups',
+    entityKey: 'group',
+    entityName: 'group',
+    serviceKey: 'groups',
+    permission: 'groups',
+    menuIcon: 'comments',
     isFontAwesome: true,
-    reducerKey: 'circles',
-    actionCircleKey: 'CIRCLE',
-    textFeatureTitle: 'Circles',
-    textAddMenuTitle: 'Circle',
-    textEmptyGroups: "You aren't in any Circles",
+    reducerKey: 'groups',
+    actionCircleKey: 'GROUP',
+    textFeatureTitle: 'Groups',
+    textAddMenuTitle: 'Group',
+    textEmptyGroups: "You aren't in any Groups",
     textEmptyPeople: 'Contacts will show here',
-    componentCircles: 'Circles',
-    componentAddCircle: 'AddCircle',
-    componentCircle: 'Circle',
-    inviteKey: 'circleInvite',
-    messageKey: 'circleMessage',
-    chatRoute: 'circleChat',
-    updateKeyUserCircles: 'userCircles',
-    allowPublicKey: 'circleAllowPublicCircles',
-    allowPublicKeyDefault: false,
+    componentCircles: 'Groups',
+    componentAddCircle: 'AddGroup',
+    componentCircle: 'Group',
+    inviteKey: 'groupInvite',
+    messageKey: 'groupMessage',
+    chatRoute: 'groupChat',
+    updateKeyUserCircles: 'userGroups',
+    allowPublicKey: 'groupAllowPublicGroups',
+    allowPublicKeyDefault: true,
     settings: {
-      allowAnyCreate: false
+      allowAnyCreate: true
     }
   };
 
@@ -356,6 +356,35 @@
       }
 
       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('notifications', '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;
     }()
   };
 
@@ -427,6 +456,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);
@@ -539,7 +574,9 @@
 
       _this.state = {
         userSearch: "",
-        sortBy: "newest"
+        sortBy: "newest",
+        showUnreadOnly: false,
+        pollingInterval: null
       };
       return _this;
     }
@@ -547,25 +584,60 @@
     _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
@@ -577,6 +649,12 @@
 
         if (this.state.sortBy === "newest") {
           result.reverse();
+
+          if (this.state.showUnreadOnly) {
+            result = ___default['default'].filter(result, function (circle) {
+              return _this3.isCircleUnread(circle);
+            });
+          }
         }
 
         return result;
@@ -584,7 +662,7 @@
     }, {
       key: "getUsers",
       value: function getUsers() {
-        var _this3 = this;
+        var _this4 = this;
 
         var users = [];
         this.props.circles.forEach(function (circle) {
@@ -596,8 +674,8 @@
           return user.userId;
         }), "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;
@@ -606,7 +684,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;
@@ -617,13 +695,13 @@
         }
 
         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;
 
         return /*#__PURE__*/React__default['default'].createElement("tr", {
           key: circle.Id
@@ -657,7 +735,7 @@
           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: {
@@ -672,13 +750,21 @@
     }, {
       key: "renderFilters",
       value: function renderFilters() {
-        var _this6 = this;
+        var _this7 = 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 _this7.selectUnreadFilter(!_this7.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,
@@ -713,19 +799,19 @@
         }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
           type: "h5",
           className: "marginRight-20"
-        }, "Filter by"), userFilter, typeFilter, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
+        }, "Filter by"), userFilter, unreadFilter, typeFilter, /*#__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 _this6.selectSort("newest");
+            return _this7.selectSort("newest");
           },
           leftIcon: this.state.sortBy === "newest" ? "check" : null,
           text: "Newest first"
         }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           onClick: function onClick() {
-            return _this6.selectSort("oldest");
+            return _this7.selectSort("oldest");
           },
           leftIcon: this.state.sortBy === "oldest" ? "check" : null,
           text: "Oldest first"
@@ -734,7 +820,7 @@
     }, {
       key: "renderUserFilterPopup",
       value: function renderUserFilterPopup() {
-        var _this7 = this;
+        var _this8 = this;
 
         if (!this.state.userFilterOpen) {
           return null;
@@ -754,7 +840,7 @@
           placeholder: "Enter name",
           value: this.state.userSearch,
           onChange: function onChange(e) {
-            return _this7.onHandleChange(e);
+            return _this8.onHandleChange(e);
           },
           alwaysShowLabel: true
         }), this.getUsers().map(function (user) {
@@ -762,7 +848,7 @@
             key: user.userId,
             user: user,
             onClick: function onClick() {
-              _this7.selectUserFilter(user);
+              _this8.selectUserFilter(user);
             }
           });
         }));
@@ -770,7 +856,7 @@
     }, {
       key: "renderTypeFilterPopup",
       value: function renderTypeFilterPopup() {
-        var _this8 = this;
+        var _this9 = this;
 
         if (!this.state.typeFilterOpen) {
           return null;
@@ -784,13 +870,13 @@
           onClose: this.closeTypeFilter
         }, /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           onClick: function onClick() {
-            _this8.selectTypeFilter("circle");
+            _this9.selectTypeFilter("circle");
           },
           text: ___default['default'].capitalize(values.entityName),
           className: "marginRight-10"
         }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           onClick: function onClick() {
-            _this8.selectTypeFilter("private");
+            _this9.selectTypeFilter("private");
           },
           text: "Private Message"
         }));
@@ -798,7 +884,7 @@
     }, {
       key: "render",
       value: function render() {
-        var _this9 = this;
+        var _this10 = 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,
@@ -822,7 +908,7 @@
             width: 50
           }
         }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.getCircles().map(function (circle) {
-          return _this9.renderRow(circle);
+          return _this10.renderRow(circle);
         })))));
       }
     }]);
@@ -1786,6 +1872,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(),
@@ -1870,6 +1982,7 @@
     _createClass__default['default'](Circle, [{
       key: "componentDidMount",
       value: function componentDidMount() {
+        this.markCircleAsRead();
         this.checkGetData();
         this.connect();
         this.props.setNavData({
@@ -2006,8 +2119,8 @@
             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,
@@ -2021,8 +2134,8 @@
             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,
@@ -2316,8 +2429,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) {

package/package.json

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

package/src/apis/circleActions.js

@@ -113,4 +113,14 @@ export const circleActions = {
       },
     });
   },
+  markAsRead: async (circleId, userId) => {
+    return Session.authedFunction({
+      method: 'post',
+      url: Helper.getUrl('notifications', 'resetunread'),
+      data: {
+        groupID: circleId,
+        userID: userId,
+      },
+    });
+  },
 };

package/src/screens/Circle.js

@@ -37,6 +37,7 @@ class Circle extends Component {
 	}
 
 	componentDidMount() {
+		this.markCircleAsRead();
 		this.checkGetData();
 		this.connect();
 		this.props.setNavData({ hideSideMenu: true });
@@ -332,6 +333,14 @@ class Circle extends Component {
 		});
 	};
 
+
+	markCircleAsRead = async () => {
+		try {
+			await circleActions.markAsRead(this.state.circleId, this.props.user.Id);
+		} catch (error) {
+			console.error("Failed to mark circle as read:", error);
+		}
+	};
 	sendMessage = () => {
 		const message = {
 			_id: Helper.randomString(),

package/src/screens/Circles.js

@@ -18,11 +18,17 @@ class Circles extends Component {
 		this.state = {
 			userSearch: "",
 			sortBy: "newest",
+			showUnreadOnly: false,
+		pollingInterval: null,
 		};
 	}
 
 	componentDidMount() {
 		this.getData();
+		// Poll for updates every 10 seconds
+		this.pollingInterval = setInterval(() => {
+			this.getData();
+		}, 10000);
 	}
 
 	getData = () => {
@@ -40,6 +46,31 @@ class Circles extends Component {
 		});
 	};
 
+	componentWillUnmount() {
+		if (this.pollingInterval) {
+			clearInterval(this.pollingInterval);
+		}
+	}
+
+	isCircleUnread(circle) {
+		const userId = this.props.user.Id;
+		if (!circle.Unread || !circle.Unread[userId]) {
+			return false;
+		}
+		return circle.Unread[userId] > 0;
+	}
+
+	getUnreadCount(circle) {
+		const userId = this.props.user.Id;
+		if (!circle.Unread || !circle.Unread[userId]) {
+			return 0;
+		}
+		return circle.Unread[userId];
+	}
+
+	selectUnreadFilter = (showUnreadOnly) => {
+		this.setState({ showUnreadOnly });
+	};
 	getCircles() {
 		let result = this.props.circles;
 		if (this.state.selectedTypeFilter) {
@@ -62,6 +93,11 @@ class Circles extends Component {
 		});
 		if (this.state.sortBy === "newest") {
 			result.reverse();
+		if (this.state.showUnreadOnly) {
+			result = _.filter(result, (circle) => {
+				return this.isCircleUnread(circle);
+			});
+		}
 		}
 		return result;
 	}
@@ -289,6 +325,16 @@ class Circles extends Component {
 				text="User"
 			/>
 		);
+
+		let unreadFilter = (
+			<Components.Tag
+				className="marginRight-10"
+				onClick={() => this.selectUnreadFilter(!this.state.showUnreadOnly)}
+				leftIcon={this.state.showUnreadOnly ? "check" : null}
+				text="Unread Only"
+			/>
+		);
+
 		let typeFilter = (
 			<Components.Tag
 				className="marginRight-10"
@@ -330,6 +376,7 @@ class Circles extends Component {
 					Filter by
 				</Components.Text>
 				{userFilter}
+				{unreadFilter}
 				{typeFilter}
 				<Components.Text type="h5" className="marginRight-20 marginLeft-20">
 					Sort by: