Pin Message Feature

examples/full-view-chat/package.json

@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "channelize-chat": "^4.3.0",
+    "channelize-chat": "^4.4.2",
     "lodash": "^4.17.19",
     "moment": "^2.27.0",
     "prop-types": "^15.7.2",

package.json

@@ -25,7 +25,7 @@
     "channelize.io"
   ],
   "dependencies": {
-    "channelize-chat": "^4.2.6",
+    "channelize-chat": "^4.4.2",
     "howler": "^2.2.0",
     "lodash": "^4.17.15",
     "moment": "^2.27.0",

src/actions/messageActions.js

@@ -2,6 +2,9 @@ import {
   LOADING_MESSAGE_LIST,
   MESSAGE_LIST_FAIL,
   MESSAGE_LIST_SUCCESS,
+  LOADING_PINNED_MESSAGE_LIST,
+  PINNED_MESSAGE_LIST_FAIL,
+  PINNED_MESSAGE_LIST_SUCCESS,
   SENDING_MESSAGE,
   SEND_MESSAGE_FAIL,
   SEND_MESSAGE_SUCCESS,
@@ -19,7 +22,9 @@ import {
   DELETE_MESSAGES_FOR_EVERYONE_SUCCESS,
   DELETING_MESSAGES_FOR_ME,
   DELETE_MESSAGES_FOR_ME_FAIL,
-  DELETE_MESSAGES_FOR_ME_SUCCESS
+  DELETE_MESSAGES_FOR_ME_SUCCESS,
+  MESSAGE_PINNED,
+  MESSAGE_UNPINNED,
 } from '../constants';
 
 export const sendFileToConversation = (client, conversation, file, body, attachmentType) => {
@@ -137,6 +142,28 @@ export const getMessageList = (messageListQuery) => {
   };
 };
 
+export const getPinnedMessageList = (pinnedMessageListQuery) => {
+  return dispatch => {
+    dispatch({
+      type: LOADING_PINNED_MESSAGE_LIST,
+      payload: {}
+    });
+    return pinnedMessageListQuery.list((err, response) => {
+      if (err) {
+        dispatch({
+          type: PINNED_MESSAGE_LIST_FAIL,
+          payload: err
+        });
+        return;
+      }
+      dispatch({
+        type: PINNED_MESSAGE_LIST_SUCCESS,
+        payload: response
+      });
+    })
+  };
+};
+
 export const loadMoreMessages = (messageListQuery) => {
   return dispatch => {
     dispatch({
@@ -224,15 +251,38 @@ export const setActiveUserId = (userId) => {
 
 export const registerConversationEventHandlers = (conversation) => {
   return dispatch => {
-    if (!conversation.__isWatching) {
-      return
+    if (conversation.__isWatching) {
+      conversation.on('watcher.message.created', (response) => {
+        dispatch({
+          type: NEW_MESSAGE_RECEIVED_EVENT,
+          payload: response
+        });
+      });
     }
 
-    conversation.on('watcher.message.created', (response) => {
-      dispatch({
-        type: NEW_MESSAGE_RECEIVED_EVENT,
-        payload: response
+    if (conversation.config.pin_messages === true) {
+      conversation.on('message.pinned', (response) => {
+        dispatch({
+          type: MESSAGE_PINNED,
+          payload: response
+        });
+      });  
+
+      conversation.on('message.unpinned', (response) => {
+        dispatch({
+          type: MESSAGE_UNPINNED,
+          payload: response
+        });
       });
-    });
+    }
+
+  }
+}
+
+export const unregisterConversationEventHandlers = (conversation) => {
+  return dispatch => {
+    conversation.off('watcher.message.created');
+    conversation.off('message.pinned');
+    conversation.off('message.unpinned');
   }
 }

src/components/ConversationWindow.js

@@ -9,13 +9,15 @@ import { LANGUAGE_PHRASES, IMAGES } from "../constants";
 import { withChannelizeContext } from '../context';
 import { 
   getMessageList,
+  getPinnedMessageList,
   sendMessageToConversation,
   sendMessageToUserId,
   sendFileToConversation,
   loadMoreMessages as loadMoreMessagesAction,
   setActiveConversation,
   setActiveUserId,
   registerConversationEventHandlers,
+  unregisterConversationEventHandlers,
   deleteMessagesForEveryone,
   deleteMessagesForMe
 } from '../actions';
@@ -24,6 +26,7 @@ import { v4 as uuid } from 'uuid';
 import throttle from 'lodash/throttle';
 import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
+import { PinnedMessageList } from './PinnedMessageList';
 
 class ConversationWindow extends PureComponent {
 
@@ -126,6 +129,11 @@ class ConversationWindow extends PureComponent {
 
     if ((!prevProps.conversation && conversation) || (prevProps.conversation.id != conversation.id)) {
       this._init();
+
+      // Unregister previous active conversation event handlers
+      if (prevProps.conversation) {
+        this.props.unregisterConversationEventHandlers(prevProps.conversation);
+      }
     }
 
     // Scroll to bottom on initial message loading
@@ -165,6 +173,9 @@ class ConversationWindow extends PureComponent {
     conversation.stopWatching(() => {
       this.props.setActiveConversation(null);
     });
+
+    this.props.unregisterConversationEventHandlers(conversation);
+
   }
 
   _markAsRead = (conversation) => {
@@ -255,6 +266,11 @@ class ConversationWindow extends PureComponent {
     messageListQuery.skip = this.skip;
     this.props.getMessageList(messageListQuery);
 
+    // Load messages
+    let pinnedMessageListQuery = conversation.createMessageListQuery();
+    pinnedMessageListQuery.pinned = true;
+    this.props.getPinnedMessageList(pinnedMessageListQuery);
+
     // Mark as read conversation
     if (conversation.unreadMessageCount > 0) {
       conversation.markAsRead();
@@ -480,6 +496,8 @@ class ConversationWindow extends PureComponent {
       loading,
       loadingMoreMessages,
       list,
+      pinnedLoading,
+      pinnedList,
       conversation,
       showCloseIcon,
       showChevron,
@@ -497,6 +515,7 @@ class ConversationWindow extends PureComponent {
     if (!conversation) {
       conversation = dummyConversation
       list = [];
+      pinnedList = [];
     }
 
     // Modify message list
@@ -567,6 +586,10 @@ class ConversationWindow extends PureComponent {
           }}/>
         }
 
+        {
+          conversation && pinnedList && pinnedList.length > 0 && <PinnedMessageList></PinnedMessageList>
+        }
+
         <div id="ch_messages_box" ref={this.chMessageBoxRef} className="ch-messages-box" onScroll={this.onScroll}>
           { <div className="ch-conversation-padding"> </div>}
 
@@ -674,13 +697,15 @@ ConversationWindow = connect(
   mapStateToProps,
    {
     getMessageList,
+    getPinnedMessageList,
     sendMessageToConversation,
     sendMessageToUserId,
     sendFileToConversation,
     loadMoreMessagesAction,
     setActiveConversation,
     setActiveUserId,
     registerConversationEventHandlers,
+    unregisterConversationEventHandlers,
     deleteMessagesForEveryone,
     deleteMessagesForMe
    }

src/components/MessageSimple.js

@@ -137,14 +137,19 @@ class MessageSimple extends Component {
 									}
 								</div>
 							</div>
-							<div className="ch-msg-more-icon">
-								<i className="material-icons" onClick={()=>this.toggleMoreOptions()}>more_vert</i>
-							</div>
-							<OutsideClickHandler onOutsideClick={()=>this.hideMoreOptions()}>
-								<div onClick={()=>this.toggleMoreOptions()}>
-									{ showMoreOptions && renderMoreOptions && renderMoreOptions()}
+							{
+								renderMoreOptions && 
+								<React.Fragment>
+								<div className="ch-msg-more-icon">
+									<i className="material-icons" onClick={()=>this.toggleMoreOptions()}>more_vert</i>
 								</div>
-							</OutsideClickHandler>
+								<OutsideClickHandler onOutsideClick={()=>this.hideMoreOptions()}>
+									<div onClick={()=>this.toggleMoreOptions()}>
+										{ showMoreOptions && renderMoreOptions()}
+									</div>
+								</OutsideClickHandler>
+								</React.Fragment>
+							}
 						</div>
 					</div>
 				}

src/components/PinnedMessageList.js

@@ -0,0 +1,97 @@
+import React, { PureComponent } from 'react';
+import { Loader } from "./Loader";
+import { MessageSimple } from "./MessageSimple";
+import { connect } from 'react-redux';
+import { withChannelizeContext } from '../context';
+import PropTypes from 'prop-types';
+
+class PinnedMessageList extends PureComponent {
+
+	constructor(props) {
+    super(props);
+    this.limit = 25;
+    this.skip = 0;
+
+    this.state = {
+      text: '',
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    const { userId } = this.props;
+
+    // if userId switches, re-intialize the conversation
+    if (prevProps.userId != userId && userId) {
+      this._init();
+    }
+  }
+
+  // viewMediaToggle(message) {
+  //   let file = message ? message.attachments[0] : null
+  //   this.setState({openMediaFile: file});
+  // }
+
+  render() {
+    let { 
+      pinnedList,
+      pinnedLoading,
+      error,
+      Message,
+    } = this.props;
+
+    return (
+
+
+      <div id="ch_pinned_messages_box" ref={this.chPinnedMessageBoxRef} className="ch-messages-box ch-pinned-messages-box">
+      { <div className="ch-conversation-padding"> </div>}
+
+
+      { error && <div className="center error">{error}</div>}
+
+      <div className="ch-msg-list">
+
+        { pinnedLoading &&  <Loader />}
+
+        { !pinnedList.length && !pinnedLoading && <div className="center no-record-found">No Pinned Messages !</div>}
+
+        { pinnedList.length &&
+          pinnedList.map(message => {
+            return <Message 
+                key={message.id} 
+                message={message} 
+                showMoreOptions={false}
+                // onClickEvent={()=>this.viewMediaToggle(message)} 
+              />
+          })
+        }
+
+      </div>
+    </div>
+
+
+      );
+  }
+}
+
+PinnedMessageList = withChannelizeContext(PinnedMessageList);
+
+PinnedMessageList.propTypes = {
+  Message: PropTypes.elementType,
+  pinnedList: PropTypes.array,
+}
+
+PinnedMessageList.defaultProps = {
+  Message: MessageSimple,
+  pinnedList: [],
+};
+
+const mapStateToProps = ({message, client}, ownProps) => {
+  return {...message }
+}
+
+PinnedMessageList = connect(
+  mapStateToProps,
+  { }
+)(PinnedMessageList);
+
+export { PinnedMessageList }

src/constants.js

@@ -123,6 +123,11 @@ export const LOAD_MORE_CONVERSATIONS_SUCCESS = 'LOAD_MORE_CONVERSATIONS_SUCCESS'
 export const LOADING_MESSAGE_LIST = 'LOADING_MESSAGE_LIST'
 export const MESSAGE_LIST_FAIL = 'MESSAGE_LIST_FAIL'
 export const MESSAGE_LIST_SUCCESS = 'MESSAGE_LIST_SUCCESS'
+
+export const LOADING_PINNED_MESSAGE_LIST = 'LOADING_PINNED_MESSAGE_LIST'
+export const PINNED_MESSAGE_LIST_SUCCESS = 'PINNED_MESSAGE_LIST_SUCCESS'
+export const PINNED_MESSAGE_LIST_FAIL = 'PINNED_MESSAGE_LIST_FAIL'
+
 export const SENDING_MESSAGE = 'SENDING_MESSAGE'
 export const SEND_MESSAGE_FAIL = 'SEND_MESSAGE_FAIL'
 export const SEND_MESSAGE_SUCCESS = 'SEND_MESSAGE_SUCCESS'
@@ -142,4 +147,6 @@ export const DELETE_MESSAGES_FOR_EVERYONE_FAIL = 'DELETE_MESSAGES_FOR_EVERYONE_F
 export const DELETE_MESSAGES_FOR_EVERYONE_SUCCESS = 'DELETE_MESSAGES_FOR_EVERYONE_SUCCESS'
 export const DELETING_MESSAGES_FOR_ME = 'DELETING_MESSAGES_FOR_ME'
 export const DELETE_MESSAGES_FOR_ME_FAIL = 'DELETE_MESSAGES_FOR_ME_FAIL'
-export const DELETE_MESSAGES_FOR_ME_SUCCESS = 'DELETE_MESSAGES_FOR_ME_SUCCESS'
+export const DELETE_MESSAGES_FOR_ME_SUCCESS = 'DELETE_MESSAGES_FOR_ME_SUCCESS'
+export const MESSAGE_PINNED = 'MESSAGE_PINNED'
+export const MESSAGE_UNPINNED = 'MESSAGE_UNPINNED'