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

package/src/screens/Circle.js

@@ -1,860 +0,0 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import _ from "lodash";
-import { Link } from "react-router-dom";
-import { PlussCore } from "../feature.config";
-import { circlesLoaded } from "../actions";
-import { circleActions } from "../apis";
-import { Icon } from "@components";
-import moment from "moment";
-import { values } from "../values.config";
-
-const { Components, Helper, Actions, Session, Colours } = PlussCore;
-
-class Circle extends Component {
-	constructor(props) {
-		super(props);
-		const circleId = Helper.safeReadParams(props, "circleId");
-		this.state = {
-			circleId,
-			circle: _.find(props.circles, (c) => {
-				return c.Id === circleId;
-			}),
-			messageInput: "",
-			messages: [],
-			images: [],
-			files: [],
-			membersExpanded: true,
-			replyingTo: null,
-			showDeleteConfirm: false,
-			messageToDelete: null,
-			deletingMessageId: null,
-			imageInput: null,
-			fileInput: null,
-			imageInputShowing: false,
-			fileInputShowing: false,
-		};
-	}
-
-	componentDidMount() {
-		this.markCircleAsRead();
-		this.checkGetData();
-		this.connect();
-		this.props.setNavData({ hideSideMenu: true });
-		this.getFiles();
-	}
-
-	componentWillUnmount() {
-		this.props.setNavData({ hideSideMenu: false });
-		this.disconnect();
-	}
-
-	scrollToBottom() {
-		if (!this.chat) return;
-		const scrollHeight = this.chat.scrollHeight;
-		const height = this.chat.clientHeight;
-		const maxScrollTop = scrollHeight - height;
-		this.chat.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
-	}
-
-	getFiles = () => {
-		circleActions.getFiles(this.state.circleId).then((res) => {
-			this.setState({
-				files: res.data,
-			});
-		});
-		circleActions.getImages(this.state.circleId).then((res) => {
-			this.setState({
-				images: res.data,
-			});
-		});
-	};
-
-	checkGetData = () => {
-		if (this.state.circle) {
-			return;
-		}
-		const { auth } = this.props;
-		this.setState({ loadingAll: true }, async () => {
-			try {
-				const res = await circleActions.getAll(auth.site);
-				console.log("getData", res.data);
-				const circle = _.find(res.data, (c) => {
-					return c.Id === this.state.circleId;
-				});
-
-				this.props.circlesLoaded(res.data);
-				this.setState({ loadingAll: false, circle });
-			} catch (error) {
-				console.error("getData", error);
-				this.setState({ loadingAll: false });
-			}
-		});
-	};
-
-	mergeMessages(receivedMessages, excludePending) {
-		const newMessages = _.sortBy(
-			_.concat(this.state.messages, receivedMessages),
-			"createdAt",
-		);
-
-		this.setState({
-			messages: _.filter(
-				_.uniqBy(newMessages, (m) => {
-					return m._id;
-				}),
-				(m) => {
-					return !excludePending || !m.uploading;
-				},
-			),
-		});
-		if (!_.isEmpty(receivedMessages)) {
-			setTimeout(() => {
-				this.scrollToBottom();
-			}, 100);
-		}
-	}
-
-	connect = () => {
-		this.getMessages();
-
-		this.interval = setInterval(this.getMessages, 2000);
-	};
-
-	disconnect = () => {
-		clearInterval(this.interval);
-	};
-
-	getMaxTime() {
-		const maxMessage = _.maxBy(this.state.messages, (m) => {
-			return m.createdAt;
-		});
-		if (maxMessage) {
-			return maxMessage.createdAt;
-		}
-		return 0;
-	}
-
-	getDateMessages = async (date) => {
-		const startOf = moment(date, "YYYY-MM-DD").startOf("d");
-		const endOf = moment(date, "YYYY-MM-DD").endOf("d");
-		const res = await circleActions.getMessages(
-			this.state.circleId,
-			10000,
-			startOf.valueOf(),
-			endOf.valueOf(),
-		);
-		this.mergeMessages(res.data);
-	};
-
-	getMessages = async (excludePending) => {
-		const res = await circleActions.getMessages(
-			this.state.circleId,
-			50,
-			this.getMaxTime() + 1,
-		);
-
-		this.mergeMessages(res.data, excludePending);
-	};
-
-	getCircle() {
-		return this.state.circle || { IsPrivate: true };
-	}
-
-	getTitle = () => {
-		const { circle } = this.state;
-		if (!circle) {
-			return "";
-		}
-		if (circle.IsPrivate) {
-			return `PM: ${circle.Audience.map((user) => {
-				return user.displayName;
-			}).join(", ")}`;
-		}
-		return circle.Title;
-	};
-
-	onHandleChange = (event) => {
-		var stateChange = {};
-		stateChange[event.target.getAttribute("id")] = event.target.value;
-		this.setState(stateChange);
-	};
-
-	onImageUpdated = (image) => {
-		console.log("updated image");
-		console.log(image);
-		this.setState({
-			imageInput: image,
-		});
-	};
-
-	showImageInput = () => {
-		this.setState({
-			imageInputShowing: true,
-			fileInputShowing: false,
-		});
-	};
-
-	onFileUpdated = (url) => {
-		console.log("updated url");
-		console.log(url);
-		this.setState({
-			fileInput: url,
-		});
-	};
-
-	showFileInput = () => {
-		this.setState({
-			imageInputShowing: false,
-			fileInputShowing: true,
-		});
-	};
-
-	onReply = (m) => {
-		this.setState({
-			replyingTo: m,
-		});
-		if (m) {
-			const input = document.getElementById("messageInput");
-			if (input) input.focus();
-		}
-	};
-
-	isMember() {
-		const audience = this.getCircle().Audience || [];
-		return _.some(audience, (u) => {
-			return u.userId === this.props.user.Id;
-		});
-	}
-
-	handleMessageDateChange = (date) => {
-		this.setState({
-			messageDate: date,
-			messageDateText: moment(date, "YYYY-MM-DD").format("DD/MM/YYYY"),
-			showMessageDate: false,
-			messages: [],
-		});
-
-		this.disconnect();
-		this.getDateMessages(date);
-	};
-
-	onClearDate = () => {
-		this.setState(
-			{
-				messageDate: undefined,
-				messageDateText: undefined,
-				showMessageDate: false,
-				messages: [],
-			},
-			this.connect,
-		);
-	};
-
-	toggleMembers = () => {
-		this.setState({
-			membersExpanded: !this.state.membersExpanded,
-		});
-	};
-
-	toggleImages = () => {
-		this.setState({
-			imagesExpanded: !this.state.imagesExpanded,
-		});
-	};
-
-	toggleFiles = () => {
-		this.setState({
-			filesExpanded: !this.state.filesExpanded,
-		});
-	};
-
-	onKeyDown = (event) => {
-		if (event.key === "Enter" && !event.shiftKey) {
-			event.preventDefault();
-			this.sendMessage();
-		}
-	};
-
-	onDeleteMessage = (message) => {
-		this.setState({
-			showDeleteConfirm: true,
-			messageToDelete: message,
-		});
-	};
-
-	onConfirmDelete = async () => {
-		const { messageToDelete } = this.state;
-		if (!messageToDelete) return;
-
-		// Optimistically update UI - mark as deleted immediately
-		const updatedMessages = this.state.messages.map((m) => {
-			if (m._id === messageToDelete._id) {
-				return { ...m, deleted: true, text: " " };
-			}
-			return m;
-		});
-
-		this.setState({
-			messages: updatedMessages,
-			showDeleteConfirm: false,
-			deletingMessageId: messageToDelete._id,
-			messageToDelete: null,
-		});
-
-		try {
-			await circleActions.deleteMessage(
-				messageToDelete._id,
-				this.state.circleId,
-			);
-			// Message already marked as deleted, just clear the deleting state
-			this.setState({ deletingMessageId: null });
-		} catch (error) {
-			console.error("Failed to delete message:", error);
-			// Revert the optimistic update on failure
-			const revertedMessages = this.state.messages.map((m) => {
-				if (m._id === messageToDelete._id) {
-					return messageToDelete;
-				}
-				return m;
-			});
-			this.setState({
-				messages: revertedMessages,
-				deletingMessageId: null,
-			});
-			alert("Failed to delete message. Please try again.");
-		}
-	};
-
-	onCancelDelete = () => {
-		this.setState({
-			showDeleteConfirm: false,
-			messageToDelete: null,
-		});
-	};
-
-	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(),
-			text: this.state.messageInput,
-			user: {
-				_id: this.props.user.Id,
-				name: this.props.user.displayName,
-				avatar: this.props.user.profilePic,
-			},
-		};
-
-		if (!_.isEmpty(this.state.imageInput)) {
-			message.image = this.state.imageInput;
-		}
-
-		if (!_.isEmpty(this.state.fileInput)) {
-			message.attachments = this.state.fileInput;
-		}
-
-		if (
-			_.isEmpty(message.text) &&
-			_.isEmpty(message.image) &&
-			_.isEmpty(message.attachments)
-		) {
-			return;
-		}
-
-		if (this.state.replyingTo) {
-			message.replyingTo = this.state.replyingTo;
-		}
-
-		const clonedMessage = _.cloneDeep(message);
-		clonedMessage.uploading = true;
-
-		circleActions.sendMessage(this.state.circleId, message).then((res) => {
-			Object.keys(res.data).forEach((key) => {
-				clonedMessage[key] = res.data[key];
-			});
-			clonedMessage.uploading = false;
-			this.getMessages(true);
-		});
-		this.setState({
-			messages: [...this.state.messages, clonedMessage],
-			messageInput: "",
-			imageInput: null,
-			imageInputShowing: false,
-			fileInput: null,
-			fileInputShowing: false,
-		});
-		setTimeout(() => {
-			this.onReply(null);
-			this.scrollToBottom();
-			this.imageInput && this.imageInput.setValue(null);
-			this.fileInput && this.fileInput.setValue(null);
-		}, 100);
-	};
-
-	validateCircleAdmin() {
-		if (
-			Session.validateAccess(
-				this.props.auth.site,
-				values.permission,
-				this.props.auth,
-			)
-		) {
-			return true;
-		}
-		return _.some(this.getCircle().Audience, (user) => {
-			return user.userId === this.props.user.Id && user.isAdmin;
-		});
-	}
-
-	renderChatInput() {
-		if (!this.isMember()) {
-			return (
-				<Components.Text type="highlightedHelp" className="chat_noMessage">
-					You can't send a message to this {_.capitalize(values.entityName)} as
-					you are not a member.
-				</Components.Text>
-			);
-		}
-		return (
-			<div className="chat_inputFlex">
-				<Icon
-					className="chat_send"
-					icon="fa-paper-plane"
-					onClick={this.sendMessage}
-				/>
-				<div className="chat_inputContainer">
-					<Components.GenericInput
-						id="messageInput"
-						type="textarea"
-						className="chat_input"
-						componentClass="textarea"
-						placeholder="Enter message..."
-						value={this.state.messageInput}
-						onChange={(e) => this.onHandleChange(e)}
-						inputStyle={{
-							minHeight: 50,
-						}}
-						onKeyDown={this.onKeyDown}
-					/>
-					<div>
-						<Icon
-							className={`chat_imageIcon${this.state.imageInputShowing ? " chat_imageIcon-selected" : ""}`}
-							icon="fa-camera"
-							onClick={this.showImageInput}
-						/>
-						<Icon
-							className={`chat_imageIcon${this.state.fileInputShowing ? " chat_imageIcon-selected" : ""}`}
-							icon="fa-paperclip"
-							onClick={this.showFileInput}
-						/>
-					</div>
-					<div
-						className="overflow-x"
-						style={{ display: this.state.imageInputShowing ? "block" : "none" }}
-					>
-						<Components.ImageInput
-							ref={(ref) => {
-								this.imageInput = ref;
-							}}
-							multiple
-							limit={10}
-							refreshCallback={this.onImageUpdated}
-							noMenu
-							noCompress
-							noDownload
-						/>
-					</div>
-					<div
-						className="overflow-x"
-						style={{ display: this.state.fileInputShowing ? "block" : "none" }}
-					>
-						<Components.FileInput
-							ref={(ref) => {
-								this.fileInput = ref;
-							}}
-							multiple
-							limit={10}
-							refreshCallback={this.onFileUpdated}
-							noDownload
-							accept="application/pdf"
-							simpleStyle
-						/>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	renderMessage(m) {
-		if (m.system) {
-			return (
-				<div key={m._id} className="message">
-					<Components.Text type="h5" className="message_system">
-						{m.text}
-					</Components.Text>
-				</div>
-			);
-		}
-		const isSelf = m.user._id === this.props.user.Id;
-		const isDeleted = m.deleted === true;
-		const isDeleting = this.state.deletingMessageId === m._id;
-
-		return (
-			<div
-				key={m._id}
-				className={`message${isSelf ? " message-self" : ""}${m.uploading ? " message-uploading" : ""}${isDeleting ? " message-deleting" : ""}`}
-			>
-				<Components.Text type="h5-noUpper" className="message_time">
-					{moment.utc(m.createdAt).local().format("D MMM YYYY • h:mma")}
-				</Components.Text>
-				<div className="message_inner">
-					<Components.ProfilePic
-						size={40}
-						image={m.user.avatar}
-						className="message_profilePic"
-					/>
-					<div className="message_bubbleContainer">
-						<Components.Text type="body" className="message_name">
-							{m.user.name}
-							{m.replyingTo && !isDeleted
-								? ` replied to ${m.replyingTo.user.name}`
-								: ""}
-						</Components.Text>
-						{m.replyingTo && !isDeleted && (
-							<div className="message_replyBubble">
-								<Components.Text type="body" className="message_text">
-									{Helper.toParagraphed(
-										(m.replyingTo.text || "").substr(0, 100),
-									)}
-								</Components.Text>
-							</div>
-						)}
-						<div className="message_bubble">
-							<Components.Text type="body" className="message_text">
-								{isDeleted ? "[Message deleted]" : Helper.toParagraphed(m.text)}
-							</Components.Text>
-							{!isDeleted && (
-								<>
-									<div>
-										{(m.image || []).map((url, i) => {
-											return (
-												<a href={url} target="_blank" key={i}>
-													<img
-														className="message_image"
-														src={url}
-														alt={Helper.getFileName(url)}
-													/>
-												</a>
-											);
-										})}
-									</div>
-									<div>
-										{(m.attachments || []).map((url, i) => {
-											return (
-												<Components.Attachment
-													source={url}
-													key={i}
-													white={isSelf}
-												/>
-											);
-										})}
-									</div>
-								</>
-							)}
-						</div>
-						{!isDeleted && (
-							<div
-								className="message_reply"
-								style={{ display: "flex", gap: "16px" }}
-							>
-								<Components.Text
-									type="button"
-									onClick={() => {
-										this.onReply(m);
-									}}
-								>
-									Reply
-								</Components.Text>
-								{isSelf && (
-									<Components.Text
-										type="button"
-										onClick={() => {
-											this.onDeleteMessage(m);
-										}}
-									>
-										Delete
-									</Components.Text>
-								)}
-							</div>
-						)}
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	renderHeaderRight() {
-		if (!this.validateCircleAdmin() || this.getCircle().IsPrivate) {
-			return <div className="flex flex-center"></div>;
-		}
-		return (
-			<div className="flex flex-center">
-				<Link to={`/${values.featureKey}/edit/${this.state.circleId}`}>
-					<Icon className="header_back" icon="fa-gear" />
-				</Link>
-			</div>
-		);
-	}
-
-	renderEmptyDate() {
-		return this.renderMessage({
-			system: true,
-			text: "No messages on this date",
-		});
-	}
-
-	renderSideBar() {
-		const members = this.getCircle().Audience || [];
-		return (
-			<div className="chat_sideBar">
-				<div className="chat_section">
-					<div className="chat_section_titleSection">
-						<Icon
-							className="chat_section_titleSection_caret"
-							name={`chevron-${this.state.membersExpanded ? "up" : "down"}`}
-							onClick={this.toggleMembers}
-						/>
-						<div className="flex-1">
-							<Components.Text type="formTitleMedium">
-								Member{Helper.getPluralS(members.length)} ({members.length})
-							</Components.Text>
-						</div>
-					</div>
-					{this.state.membersExpanded && (
-						<div className="paddingTop-8">
-							{members.map((user) => {
-								return <Components.UserListing user={user} />;
-							})}
-						</div>
-					)}
-				</div>
-				<div className="chat_section">
-					<div className="chat_section_titleSection">
-						<Icon
-							className="chat_section_titleSection_caret"
-							name={`chevron-${this.state.imagesExpanded ? "up" : "down"}`}
-							onClick={this.toggleImages}
-						/>
-						<div className="flex-1">
-							<Components.Text type="formTitleMedium">
-								Image{Helper.getPluralS(this.state.images.length)} (
-								{this.state.images.length})
-							</Components.Text>
-						</div>
-					</div>
-					{this.state.imagesExpanded && (
-						<div className="paddingTop-8">
-							{this.state.images.map((image) => {
-								return (
-									<a href={image.Url} target="_blank">
-										<img
-											src={image.Url}
-											className="chat_section_image"
-											alt={Helper.getFileName(image.Url)}
-										/>
-									</a>
-								);
-							})}
-						</div>
-					)}
-				</div>
-				<div className="chat_section">
-					<div className="chat_section_titleSection">
-						<Icon
-							className="chat_section_titleSection_caret"
-							name={`chevron-${this.state.filesExpanded ? "up" : "down"}`}
-							onClick={this.toggleFiles}
-						/>
-						<div className="flex-1">
-							<Components.Text type="formTitleMedium">
-								File{Helper.getPluralS(this.state.files.length)} (
-								{this.state.files.length})
-							</Components.Text>
-						</div>
-					</div>
-					{this.state.filesExpanded && (
-						<div className="paddingTop-8">
-							{this.state.files.map((file, i) => {
-								return <Components.Attachment source={file.Url} key={i} />;
-							})}
-						</div>
-					)}
-				</div>
-			</div>
-		);
-	}
-
-	renderReplyTo() {
-		if (!this.state.replyingTo) {
-			return null;
-		}
-		const m = this.state.replyingTo;
-		return (
-			<div className="chat_replyTo">
-				<div className="chat_replyTo_container">
-					<Components.Text type="h5">
-						Replying to{" "}
-						{m && m.user && !_.isEmpty(m.user.displayName)
-							? m.user.displayName
-							: ""}
-					</Components.Text>
-					{m && !_.isEmpty(m.text) && (
-						<Components.Text type="body">
-							{m.text.substr(0, 50)}
-						</Components.Text>
-					)}
-				</div>
-				<div className="chat_replyTo_remove">
-					<Components.Icon
-						className="removeIcon"
-						icon="xmark"
-						onClick={() => {
-							this.onReply(null);
-						}}
-						colour={Colours.COLOUR_DUSK}
-					/>
-				</div>
-			</div>
-		);
-	}
-
-	renderDeleteConfirmPopup() {
-		if (!this.state.showDeleteConfirm) return null;
-
-		return (
-			<Components.Popup
-				title="Delete Message"
-				buttons={[
-					{
-						text: "Delete",
-						onClick: this.onConfirmDelete,
-						type: "primary",
-						isActive: true,
-					},
-					{
-						text: "Cancel",
-						onClick: this.onCancelDelete,
-						type: "tertiary",
-						isActive: true,
-					},
-				]}
-				onClose={this.onCancelDelete}
-				hasPadding
-			>
-				<Components.Text type="body">
-					Are you sure you want to delete this message? This action cannot be
-					undone.
-				</Components.Text>
-			</Components.Popup>
-		);
-	}
-
-	render() {
-		return (
-			<Components.OverlayPage
-				fullPage
-				fullPageStyle={{ display: "flex", flexDirection: "column" }}
-			>
-				{this.renderDeleteConfirmPopup()}
-				<Components.Header rightContent={this.renderHeaderRight()}>
-					<Icon
-						className="header_back"
-						icon="fa-angle-left"
-						onClick={() => {
-							window.history.back();
-						}}
-					/>
-					<Components.Text type="formTitleLarge" className="header_title">
-						{this.getTitle()}
-					</Components.Text>
-				</Components.Header>
-				<div className="flex flex-1 flex-reverse overflow-hidden">
-					{this.renderSideBar()}
-					<div className="flex-1 flex flex-column overflow-hidden">
-						<Components.Header onlyContainer>
-							<div className="flex flex-center flex-1 paddingHorizontal-16">
-								<Components.Text type="h5" className="marginRight-20">
-									Filter by
-								</Components.Text>
-								<div>
-									<Components.GenericInput
-										id="messageDate"
-										label="Date"
-										alwaysShowLabel
-										value={this.state.messageDateText}
-										readOnly
-										onClick={() =>
-											this.setState({
-												showMessageDate: !this.state.showMessageDate,
-											})
-										}
-										rightContent={
-											!_.isEmpty(this.state.messageDate) && (
-												<Components.Icon
-													colour={Colours.COLOUR_DUSK_LIGHT}
-													icon="fa-xmark"
-													className="timepicker_clear"
-													onClick={this.onClearDate}
-												/>
-											)
-										}
-									/>
-									{this.state.showMessageDate && (
-										<Components.DatePicker
-											hideTop
-											selectedDate={this.state.messageDate}
-											selectDate={this.handleMessageDateChange}
-										/>
-									)}
-								</div>
-							</div>
-						</Components.Header>
-						<div className="chat">
-							<div className="chat_newMessage">{this.renderChatInput()}</div>
-							{this.renderReplyTo()}
-							<div ref={(ref) => (this.chat = ref)} className="chat_messages">
-								{_.isEmpty(this.state.messages) &&
-									!_.isEmpty(this.state.messageDate) &&
-									this.renderEmptyDate()}
-								{this.state.messages.map((m) => {
-									return this.renderMessage(m);
-								})}
-							</div>
-						</div>
-					</div>
-				</div>
-			</Components.OverlayPage>
-		);
-	}
-}
-
-const mapStateToProps = (state) => {
-	const { circles } = state[values.reducerKey];
-	const { auth } = state;
-	return {
-		circles,
-		auth,
-		user: Helper.getUserFromState(state),
-	};
-};
-
-export default connect(mapStateToProps, {
-	circlesLoaded,
-	setNavData: Actions.setNavData,
-})(Circle);