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

package/src/screens/Circles.js

@@ -1,570 +0,0 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import _ from "lodash";
-import moment from "moment";
-import { Link } from "react-router-dom";
-import { PlussCore } from "../feature.config";
-import { circlesLoaded, circleRemoved } from "../actions";
-import { circleActions } from "../apis";
-import { Table } from "react-bootstrap";
-import { Icon } from "@components"
-import { values } from "../values.config";
-import badgeStyles from "./Circles.module.css";
-
-const { Components, Session, Helper } = PlussCore;
-
-class Circles extends Component {
-	constructor(props) {
-		super(props);
-		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 = () => {
-		const { auth } = this.props;
-		this.setState({ loadingAll: true }, async () => {
-			try {
-				const res = await circleActions.getAll(auth.site);
-				console.log("getData", res.data);
-				this.props.circlesLoaded(res.data);
-				this.setState({ loadingAll: false });
-			} catch (error) {
-				console.error("getData", error);
-				this.setState({ loadingAll: false });
-			}
-		});
-	};
-
-	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) {
-			result = _.filter(result, (circle) => {
-				return this.state.selectedTypeFilter === "circle"
-					? !circle.IsPrivate
-					: circle.IsPrivate;
-			});
-		}
-		if (this.state.selectedUserFilter) {
-			result = _.filter(result, (circle) => {
-				return _.some(circle.Audience, (user) => {
-					return user.userId === this.state.selectedUserFilter.userId;
-				});
-			});
-		}
-		// Apply sorting
-		result = _.sortBy(result, (circle) => {
-			return moment(circle.Changed).valueOf();
-		});
-		if (this.state.sortBy === "newest") {
-			result.reverse();
-			if (this.state.showUnreadOnly) {
-				result = _.filter(result, (circle) => {
-					return this.isCircleUnread(circle);
-				});
-			}
-		}
-		return result;
-	}
-
-	getUsers() {
-		let users = [];
-		this.props.circles.forEach((circle) => {
-			circle.Audience.forEach((user) => {
-				users.push(user);
-			});
-		});
-		users = _.sortBy(
-			_.uniqBy(users, (user) => {
-				return user.userId;
-			}),
-			"displayName",
-		);
-		return _.filter(users, (u) => {
-			if (!_.isEmpty(this.state.userSearch)) {
-				return (
-					(u.displayName || "")
-						.toLowerCase()
-						.indexOf(this.state.userSearch.toLowerCase()) > -1
-				);
-			}
-			return true;
-		});
-	}
-
-	validateCircleAdmin(circle, onlyCreator) {
-		if (
-			Session.validateAccess(
-				this.props.auth.site,
-				values.permission,
-				this.props.auth,
-			)
-		) {
-			return true;
-		}
-		if (onlyCreator) {
-			return (
-				(circle.Creator && circle.Creator.userId === this.props.user.Id) ||
-				circle.CreatorId === this.props.user.Id
-			);
-		}
-		return _.some(circle.Audience, (user) => {
-			return user.userId === this.props.user.Id && user.isAdmin;
-		});
-	}
-
-	canAddNew = () => {
-		const { auth } = this.props;
-		return Session.validateAccess(auth.site, values.permission, auth);
-	};
-
-	onAddNew = () => {
-		const { auth } = this.props;
-		if (Session.validateAccess(auth.site, values.permission, auth)) {
-			this.props.history.push(`/${values.featureKey}/add`);
-		}
-	};
-
-	openUserFilter = () => {
-		this.setState({
-			userFilterOpen: true,
-		});
-	};
-
-	closeUserFilter = () => {
-		this.setState({
-			userFilterOpen: false,
-		});
-	};
-
-	selectUserFilter = (user) => {
-		this.setState({
-			selectedUserFilter: user,
-			userFilterOpen: false,
-		});
-	};
-
-	removeUserFilter = (event) => {
-		event.stopPropagation();
-		this.setState({
-			selectedUserFilter: null,
-		});
-	};
-
-	openTypeFilter = () => {
-		this.setState({
-			typeFilterOpen: true,
-		});
-	};
-
-	closeTypeFilter = () => {
-		this.setState({
-			typeFilterOpen: false,
-		});
-	};
-
-	selectTypeFilter = (type) => {
-		this.setState({
-			selectedTypeFilter: type,
-			typeFilterOpen: false,
-		});
-	};
-
-	removeTypeFilter = (event) => {
-		event.stopPropagation();
-		this.setState({
-			selectedTypeFilter: null,
-		});
-	};
-
-	selectSort = (sortType) => {
-		this.setState({
-			sortBy: sortType,
-		});
-	};
-
-	onHandleChange = (event) => {
-		var stateChange = {};
-		stateChange[event.target.getAttribute("id")] = event.target.value;
-		this.setState(stateChange);
-	};
-
-	removeCircle = (circle) => {
-		if (
-			window.confirm(
-				`Are you sure you want to delete that ${values.entityName}? You will no longer be able to access the messages in the ${values.entityName}.`,
-			)
-		) {
-			this.props.circleRemoved(circle.Id);
-			circleActions
-				.delete(circle.Id)
-				.then((res) => {
-					this.getData();
-				})
-				.catch((res) => {
-					alert("Something went wrong with the request. Please try again.");
-				});
-		}
-	};
-
-	getTypeFilterText = (type) => {
-		if (type === "private") {
-			return "Private Message";
-		}
-		return _.capitalize(values.entityName);
-	};
-
-	getTitle = (circle) => {
-		if (circle.IsPrivate) {
-			return `PM: ${circle.Audience.map((user) => {
-				return user.displayName;
-			}).join(", ")}`;
-		}
-		return circle.Title;
-	};
-
-	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">
-					<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>
-					{circle.Audience.map((user) => {
-						return (
-							<Components.ProfilePic
-								size={30}
-								image={user.profilePic}
-								hoverText={user.displayName}
-								containerClass="circleTableProfilePic"
-							/>
-						);
-					})}
-				</td>
-				<td className="table-options">
-					<div style={{ display: "flex", alignItems: "center" }}>
-						{this.validateCircleAdmin(circle) && !circle.IsPrivate && (
-							<Link to={`/${values.featureKey}/edit/${circle.Id}`}>
-								<Icon
-									style={{
-										fontSize: 20,
-										padding: 5,
-										marginLeft: 12,
-										cursor: "pointer",
-									}}
-									icon="fa-pencil"
-								/>
-							</Link>
-						)}
-						{this.validateCircleAdmin(circle, true) && !circle.IsPrivate && (
-							<a
-								onClick={() => {
-									this.removeCircle(circle);
-								}}
-							>
-								<Icon
-									style={{
-										fontSize: 20,
-										padding: 5,
-										marginLeft: 12,
-										cursor: "pointer",
-									}}
-									icon="fa-circle-minus"
-								/>
-							</a>
-						)}
-					</div>
-				</td>
-			</tr>
-		);
-	}
-
-	renderUnreadFilterInfo() {
-		const { showUnreadOnly } = this.state;
-
-		if (!showUnreadOnly) {
-			return null;
-		}
-
-		return (
-			<div className={badgeStyles.unreadFilterBanner}>
-				<div className={badgeStyles.unreadFilterContent}>
-					<Icon
-						icon="fa-circle-info"
-						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
-				className="marginRight-10"
-				onClick={this.openUserFilter}
-				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"
-				onClick={this.openTypeFilter}
-				text="Type"
-			/>
-		);
-
-		if (this.state.selectedUserFilter) {
-			userFilter = (
-				<Components.Tag
-					className="marginRight-10"
-					onClick={this.openUserFilter}
-					rightIcon="close"
-					rightClick={this.removeUserFilter}
-				>
-					<Components.UserListing
-						size={15}
-						user={this.state.selectedUserFilter}
-						textClass="tag_text"
-					/>
-				</Components.Tag>
-			);
-		}
-		if (this.state.selectedTypeFilter) {
-			typeFilter = (
-				<Components.Tag
-					className="marginRight-10"
-					onClick={this.openTypeFilter}
-					rightIcon="close"
-					rightClick={this.removeTypeFilter}
-					text={this.getTypeFilterText(this.state.selectedTypeFilter)}
-				/>
-			);
-		}
-		return (
-			<div className="flex flex-center marginTop-20">
-				<Components.Text type="h5" className="marginRight-20">
-					Filter by
-				</Components.Text>
-				{userFilter}
-				{typeFilter}
-				{unreadFilter}
-				<Components.Text type="h5" className="marginRight-20 marginLeft-20">
-					Sort by:
-				</Components.Text>
-				<Components.Tag
-					className="marginRight-10"
-					onClick={() => this.selectSort("newest")}
-					leftIcon={this.state.sortBy === "newest" ? "check" : null}
-					text="Newest first"
-				/>
-				<Components.Tag
-					onClick={() => this.selectSort("oldest")}
-					leftIcon={this.state.sortBy === "oldest" ? "check" : null}
-					text="Oldest first"
-				/>
-			</div>
-		);
-	}
-
-	renderUserFilterPopup() {
-		if (!this.state.userFilterOpen) {
-			return null;
-		}
-		return (
-			<Components.Popup
-				title="Select User"
-				maxWidth={600}
-				minWidth={400}
-				minHeight={400}
-				hasPadding
-				onClose={this.closeUserFilter}
-			>
-				<Components.GenericInput
-					id="userSearch"
-					type="text"
-					label="Search"
-					placeholder="Enter name"
-					value={this.state.userSearch}
-					onChange={(e) => this.onHandleChange(e)}
-					alwaysShowLabel
-				/>
-				{this.getUsers().map((user) => {
-					return (
-						<Components.UserListing
-							key={user.userId}
-							user={user}
-							onClick={() => {
-								this.selectUserFilter(user);
-							}}
-						/>
-					);
-				})}
-			</Components.Popup>
-		);
-	}
-
-	renderTypeFilterPopup() {
-		if (!this.state.typeFilterOpen) {
-			return null;
-		}
-		return (
-			<Components.Popup
-				title="Select Type"
-				maxWidth={600}
-				minWidth={400}
-				hasPadding
-				onClose={this.closeTypeFilter}
-			>
-				<Components.Tag
-					onClick={() => {
-						this.selectTypeFilter("circle");
-					}}
-					text={_.capitalize(values.entityName)}
-					className="marginRight-10"
-				/>
-				<Components.Tag
-					onClick={() => {
-						this.selectTypeFilter("private");
-					}}
-					text="Private Message"
-				/>
-			</Components.Popup>
-		);
-	}
-
-	render() {
-		return (
-			<div>
-				{this.renderTypeFilterPopup()}
-				{this.renderUserFilterPopup()}
-				<Components.Header>
-					{this.canAddNew() && (
-						<Components.AddButton
-							onClick={this.onAddNew}
-							text={`NEW ${_.upperCase(values.entityName)}`}
-						/>
-					)}
-				</Components.Header>
-				<div className="pageContainer paddingVertical-20 paddingHorizontal-40">
-					<Components.Text type="h1" className="">
-						{values.textFeatureTitle}
-					</Components.Text>
-					{this.renderFilters()}
-					{this.renderUnreadFilterInfo()}
-
-					<Table
-						className="plussTable"
-						striped
-						bordered
-						condensed
-						hover
-						style={{ minWidth: "100%" }}
-					>
-						<thead>
-							<tr>
-								<th>Title</th>
-								<th>Last updated</th>
-								<th>Members</th>
-								<th style={{ width: 50 }} />
-							</tr>
-						</thead>
-						<tbody>
-							{this.getCircles().map((circle) => {
-								return this.renderRow(circle);
-							})}
-						</tbody>
-					</Table>
-				</div>
-			</div>
-		);
-	}
-}
-
-const styles = {};
-
-const mapStateToProps = (state) => {
-	const { circles } = state[values.reducerKey];
-	const { auth } = state;
-
-	return {
-		circles,
-		auth,
-		user: Helper.getUserFromState(state),
-	};
-};
-
-export default connect(mapStateToProps, { circlesLoaded, circleRemoved })(
-	Circles,
-);

package/src/screens/Circles.module.css

@@ -1,95 +0,0 @@
-/* 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;
-	}
-}

package/src/values.config.default.js

@@ -1,34 +0,0 @@
-const values = {
-	featureKey: "circles",
-	entityKey: "circle",
-	entityName: "circle",
-	serviceKey: "circles",
-	permission: "circles",
-	menuIcon: "circle-o",
-
-	reducerKey: "circles",
-
-	actionCircleKey: "CIRCLE",
-
-	textFeatureTitle: "Circles",
-	textAddMenuTitle: "Circle",
-	textEmptyGroups: "You aren't in any Circles",
-	textEmptyPeople: "Contacts will show here",
-
-	componentCircles: "Circles",
-	componentAddCircle: "AddCircle",
-	componentCircle: "Circle",
-
-	inviteKey: "circleInvite",
-	messageKey: "circleMessage",
-	chatRoute: "circleChat",
-	updateKeyUserCircles: "userCircles",
-	allowPublicKey: "circleAllowPublicCircles",
-	allowPublicKeyDefault: false,
-
-	settings: {
-		allowAnyCreate: false,
-	},
-};
-
-export { values };