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

package/src/screens/Circles.js

@@ -9,6 +9,7 @@ import { circleActions } from "../apis";
 import { Table } from "react-bootstrap";
 import FontAwesome from "react-fontawesome";
 import { values } from "../values.config";
+import badgeStyles from "./Circles.module.css";
 
 const { Components, Session, Helper } = PlussCore;
 
@@ -18,11 +19,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 +47,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 +94,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;
 	}
@@ -223,12 +260,23 @@ class Circles extends Component {
 	};
 
 	renderRow(circle) {
+		const unreadCount = this.getUnreadCount(circle);
+		const badge = unreadCount > 0 ? (
+			<Components.Tag
+				className={badgeStyles.badgeTag}
+				text={`${unreadCount} new`}
+			/>
+		) : null;
+
 		return (
 			<tr key={circle.Id}>
 				<td className="table-TitleColumn">
-					<Link to={`/${values.featureKey}/${values.entityKey}/${circle.Id}`}>
-						{this.getTitle(circle)}
-					</Link>
+					<div className="flex flex-center" style={{ gap: "8px" }}>
+						<Link to={`/${values.featureKey}/${values.entityKey}/${circle.Id}`}>
+							{this.getTitle(circle)}
+						</Link>
+						{badge}
+					</div>
 				</td>
 				<td>{moment(circle.Changed).local().format("D MMM YYYY")}</td>
 				<td>
@@ -281,6 +329,35 @@ class Circles extends Component {
 		);
 	}
 
+	renderUnreadFilterInfo() {
+		const { showUnreadOnly } = this.state;
+
+		if (!showUnreadOnly) {
+			return null;
+		}
+
+		return (
+			<div className={badgeStyles.unreadFilterBanner}>
+				<div className={badgeStyles.unreadFilterContent}>
+					<FontAwesome
+						name="info-circle"
+						className={badgeStyles.unreadFilterIcon}
+					/>
+					<span className={badgeStyles.unreadFilterText}>
+						Showing only items with new messages.{" "}
+						<button
+							className={badgeStyles.unreadFilterButton}
+							onClick={() => this.selectUnreadFilter(false)}
+							aria-label="Turn off unread filter"
+						>
+							Turn off filter
+						</button>
+					</span>
+				</div>
+			</div>
+		);
+	}
+
 	renderFilters() {
 		let userFilter = (
 			<Components.Tag
@@ -289,6 +366,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"
@@ -331,6 +418,7 @@ class Circles extends Component {
 				</Components.Text>
 				{userFilter}
 				{typeFilter}
+				{unreadFilter}
 				<Components.Text type="h5" className="marginRight-20 marginLeft-20">
 					Sort by:
 				</Components.Text>
@@ -433,6 +521,7 @@ class Circles extends Component {
 						{values.textFeatureTitle}
 					</Components.Text>
 					{this.renderFilters()}
+					{this.renderUnreadFilterInfo()}
 
 					<Table
 						className="plussTable"

package/src/screens/Circles.module.css

@@ -0,0 +1,96 @@
+/* Badge styling for unread count */
+:root {
+  --badge-bg-color: #597db4; /* COLOUR_BRANDING_OFF */
+}
+
+.badgeTag {
+  font-size: 11px;
+  font-weight: 400;
+  padding: 3px 10px;
+  background-color: var(--badge-bg-color) !important;
+  color: #fff !important;
+  border-radius: 999px !important;
+  border: none !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  letter-spacing: 0.02em;
+}
+
+/* Unread filter info banner */
+.unreadFilterBanner {
+  background-color: #f0f4f8;
+  border-left: 3px solid var(--badge-bg-color);
+  border-radius: 4px;
+  padding: 12px 16px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.unreadFilterContent {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.unreadFilterIcon {
+  font-size: 16px;
+  color: var(--badge-bg-color);
+  flex-shrink: 0;
+}
+
+.unreadFilterText {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333333;
+}
+
+.unreadFilterButton {
+  background: none;
+  border: none;
+  color: var(--badge-bg-color);
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 4px 8px;
+  margin-left: 4px;
+  min-height: 32px;
+  min-width: 32px;
+  transition: all 0.2s ease;
+}
+
+.unreadFilterButton:hover {
+  background-color: rgba(89, 125, 180, 0.1);
+  text-decoration: none;
+}
+
+.unreadFilterButton:focus {
+  outline: 2px solid var(--badge-bg-color);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .unreadFilterBanner {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 12px;
+  }
+
+  .unreadFilterContent {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .unreadFilterText {
+    font-size: 13px;
+  }
+}
+