@plusscommunities/pluss-circles-web-groups 1.0.11-beta.0

package/src/screens/Circle.js

@@ -0,0 +1,591 @@
+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,
+    };
+  }
+
+  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,
+    });
+  };
+
+  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();
+    }
+  };
+
+  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;
+    }
+
+    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.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;
+    return (
+      <div key={m._id} className={`message${isSelf ? ' message-self' : ''}${m.uploading ? ' message-uploading' : ''}`}>
+        <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}
+            </Components.Text>
+            <div className="message_bubble">
+              <Components.Text type="body" className="message_text">
+                {Helper.toParagraphed(m.text)}
+              </Components.Text>
+              <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>
+          </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, i) => {
+                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>
+    );
+  }
+
+  render() {
+    return (
+      <Components.OverlayPage fullPage fullPageStyle={{ display: 'flex', flexDirection: 'column' }}>
+        <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>
+              <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 styles = {};
+
+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);