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

package/src/screens/Circle.js

@@ -1,760 +1,861 @@
-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 FontAwesome from 'react-fontawesome';
-import moment from 'moment';
-import { values } from '../values.config';
+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 FontAwesome from "react-fontawesome";
+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.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,
-    });
-  };
-
-  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.getWrappedInstance().setValue(null);
-      this.fileInput && this.fileInput.getWrappedInstance().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">
-        <FontAwesome className="chat_send" name="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>
-            <FontAwesome
-              className={`chat_imageIcon${this.state.imageInputShowing ? ' chat_imageIcon-selected' : ''}`}
-              name="camera"
-              onClick={this.showImageInput}
-            />
-            <FontAwesome
-              className={`chat_imageIcon${this.state.fileInputShowing ? ' chat_imageIcon-selected' : ''}`}
-              name="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}`}>
-          <FontAwesome className="header_back" name="cog" />
-        </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">
-            <FontAwesome
-              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">
-            <FontAwesome
-              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">
-            <FontAwesome
-              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.SVGIcon
-            className="removeIcon"
-            icon="close"
-            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()}>
-          <FontAwesome
-            className="header_back"
-            name="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.SVGIcon
-                          colour={Colours.COLOUR_DUSK_LIGHT}
-                          icon="close"
-                          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>
-    );
-  }
+	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">
+				<FontAwesome
+					className="chat_send"
+					name="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>
+						<FontAwesome
+							className={`chat_imageIcon${this.state.imageInputShowing ? " chat_imageIcon-selected" : ""}`}
+							name="camera"
+							onClick={this.showImageInput}
+						/>
+						<FontAwesome
+							className={`chat_imageIcon${this.state.fileInputShowing ? " chat_imageIcon-selected" : ""}`}
+							name="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}`}>
+					<FontAwesome className="header_back" name="cog" />
+				</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">
+						<FontAwesome
+							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">
+						<FontAwesome
+							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">
+						<FontAwesome
+							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.SVGIcon
+						className="removeIcon"
+						icon="close"
+						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()}>
+					<FontAwesome
+						className="header_back"
+						name="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.SVGIcon
+													colour={Colours.COLOUR_DUSK_LIGHT}
+													icon="close"
+													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),
-  };
+	const { circles } = state[values.reducerKey];
+	const { auth } = state;
+	return {
+		circles,
+		auth,
+		user: Helper.getUserFromState(state),
+	};
 };
 
-export default connect(mapStateToProps, { circlesLoaded, setNavData: Actions.setNavData })(Circle);
+export default connect(mapStateToProps, {
+	circlesLoaded,
+	setNavData: Actions.setNavData,
+})(Circle);