Merge pull request #95 from cometchat-pro/v3

V3

Author: aaliya-shaikh

CometChatWorkspace/package-lock.json

@@ -1,13 +1,13 @@
 {
 	"name": "cometchat-pro-react-ui-kit",
-	"version": "3.0.2-beta1-1",
+	"version": "3.0.5-1",
 	"description": "CometChat UI Kit for React App",
 	"author": "CometChat",
 	"dependencies": {
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-scripts": "^4.0.3",
-		"@cometchat-pro/chat": "3.0.2-beta1",
+		"@cometchat-pro/chat": "3.0.5",
 		"@emotion/core": "^10.0.35",
 		"dateformat": "^4.0.0",
 		"emoji-mart": "^3.0.0",

CometChatWorkspace/package.json

@@ -291,7 +291,7 @@ class CometChatConversationList extends React.Component {
 		//if chat window is not open, mark message as delivered
 		if ((this.getContext().type === "" || Object.keys(this.getContext().item).length === 0) 
 		&& message.hasOwnProperty("deliveredAt") === false) {
-			CometChat.markAsDelivered(message);
+			CometChat.markAsDelivered(message).catch(error => {});
 		}
 	};
 

CometChatWorkspace/src/components/Chats/CometChatConversationList/index.js

@@ -185,10 +185,8 @@ class CometChatGroupList extends React.PureComponent {
 				this.updateMemberRemoved(group, options);
 				break;
 			case enums.GROUP_MEMBER_ADDED:
-				this.updateMemberAdded(group, options);
-				break;
 			case enums.GROUP_MEMBER_JOINED:
-				this.updateMemberJoined(group, options);
+				this.updateMemberAddition(group, options);
 				break;
 			default:
 				break;
@@ -223,70 +221,32 @@ class CometChatGroupList extends React.PureComponent {
 		}
 	};
 
-	updateMemberAdded = (group, options) => {
+	// Callback for when group member is added or joined
+	updateMemberAddition = (group, options) => {
 		let grouplist = [...this.state.grouplist];
 
 		//search for group
 		let groupKey = grouplist.findIndex(g => g.guid === group.guid);
 
 		if (groupKey > -1) {
+			if (options && this.loggedInUser.uid === options.user.uid){
 			let groupObj = {...grouplist[groupKey]};
-
-			let membersCount = parseInt(group.membersCount);
-
-			let scope = group.hasOwnProperty("scope") ? group.scope : "";
-			let hasJoined = group.hasOwnProperty("hasJoined") ? group.hasJoined : false;
-
-			if (options && this.loggedInUser.uid === options.user.uid) {
-				scope = CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT;
-				hasJoined = true;
-			}
-
-			let newgroupObj = Object.assign({}, groupObj, {membersCount: membersCount, scope: scope, hasJoined: hasJoined});
+			let hasJoined = true;
+			let newgroupObj = Object.assign({}, groupObj, { hasJoined: hasJoined});
 
 			grouplist.splice(groupKey, 1, newgroupObj);
 			this.setState({grouplist: grouplist});
 		} else {
-			let groupObj = {...group};
-
-			let scope = groupObj.hasOwnProperty("scope") ? groupObj.scope : "";
-			let hasJoined = groupObj.hasOwnProperty("hasJoined") ? groupObj.hasJoined : false;
+			let groupObj = {...grouplist[groupKey]};
 			let membersCount = parseInt(groupObj.membersCount);
 
-			if (options && this.loggedInUser.uid === options.user.uid) {
-				scope = CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT;
-				hasJoined = true;
-			}
-
-			let newgroupObj = Object.assign({}, groupObj, {membersCount: membersCount, scope: scope, hasJoined: hasJoined});
-
-			grouplist.unshift(newgroupObj);
-			this.setState({grouplist: grouplist});
+			let newgroupObj = Object.assign({},groupObj, {membersCount: membersCount});
+			grouplist.splice(groupKey, 1, newgroupObj);
+			this.setState({grouplist:grouplist});
 		}
-	};
 
-	updateMemberJoined = (group, options) => {
-		let grouplist = [...this.state.grouplist];
-
-		//search for group
-		let groupKey = grouplist.findIndex(g => g.guid === group.guid);
-
-		if (groupKey > -1) {
-			let groupObj = {...grouplist[groupKey]};
-
-			let scope = groupObj.scope;
-			let membersCount = parseInt(group.membersCount);
-
-			if (options && this.loggedInUser.uid === options.user.uid) {
-				scope = CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT;
-			}
-
-			let newgroupObj = Object.assign({}, groupObj, {membersCount: membersCount, scope: scope});
-
-			grouplist.splice(groupKey, 1, newgroupObj);
-			this.setState({grouplist: grouplist});
 		}
-	};
+		};
 
 	updateMemberChanged = (group, options) => {
 		let grouplist = [...this.state.grouplist];

CometChatWorkspace/src/components/Groups/CometChatGroupList/index.js

@@ -171,7 +171,7 @@ class CometChatMessageList extends React.PureComponent {
 
 						//mark the message as read
 						if (message.hasOwnProperty("readAt") === false) {
-							CometChat.markAsRead(message);
+							CometChat.markAsRead(message).catch(error => {});
 							this.props.actionGenerated(enums.ACTIONS["MESSAGE_READ"], message);
 						}
 					}
@@ -343,13 +343,13 @@ class CometChatMessageList extends React.PureComponent {
 	markMessageAsDelivered = message => {
 
 		if (message.sender?.uid !== this.state.loggedInUser?.uid && message.hasOwnProperty("deliveredAt") === false) {
-			CometChat.markAsDelivered(message);
+			CometChat.markAsDelivered(message).catch(error => {});
 		}
 	};
 
 	markMessageAsRead = (message, type) => {
 		if (message.hasOwnProperty("readAt") === false) {
-			CometChat.markAsRead(message);
+			CometChat.markAsRead(message).catch(error => {});
 		}
 	};
 

CometChatWorkspace/src/components/Messages/CometChatMessageList/index.js

@@ -1034,7 +1034,7 @@ class CometChatMessages extends React.PureComponent {
 			messageComposer = null;
 		}
 
-		if (this.getContext().type === CometChat.RECEIVER_TYPE.USER && Object.keys(this.getContext().item).length && this.getContext().item.blockedByMe) {
+		if (this.getContext()?.type === CometChat.RECEIVER_TYPE.USER && Object.keys(this.getContext().item).length && this.getContext().item.blockedByMe) {
 			messageComposer = null;
 			messageList = null;
 			blockedUser = <CometChatBlockedUser user={this.item} />;

CometChatWorkspace/src/components/Messages/CometChatMessages/index.js

@@ -158,7 +158,7 @@ class CometChatReceiverPollMessageBubble extends React.Component {
 			}
 
 			let checkIcon = null;
-			if (optionData.hasOwnProperty("voters") && optionData.voters.hasOwnProperty(this.loggedInUser?.uid)) {
+			if (optionData.hasOwnProperty("voters") && optionData.voters.hasOwnProperty(this.state.loggedInUser?.uid)) {
 				checkIcon = <i css={checkIconStyle(checkImg, this.context)}></i>;
 			}
 

CometChatWorkspace/src/components/Messages/Extensions/CometChatReceiverPollMessageBubble/index.js

@@ -1,3 +1,4 @@
+
 export const messageContainerStyle = () => {
 
     return {
@@ -17,7 +18,7 @@ export const messageContainerStyle = () => {
 export const messageWrapperStyle = () => {
 
     return {
-        width: "auto",
+        width: "100%",
         flex: "1 1",
         alignSelf: "flex-start",
         display: "flex",
@@ -41,6 +42,7 @@ export const messageDetailStyle = () => {
         flex: "1 1",
         display: "flex",
         flexDirection: "column",
+	width: "calc(100% - 36px)",
     }
 }
 
@@ -150,7 +152,7 @@ export const answerWrapperStyle = (state, optionData, context) => {
     let widthProp = "calc(100% - 40px)";
 	if (optionData.hasOwnProperty("voters") && optionData.voters.hasOwnProperty(state?.loggedInUser?.uid)) {
 		//countPadding = "0px 8px";
-		widthProp = "calc(100% - 40px)";
+		widthProp = "calc(100% - 80px)";
 	}
 
 	return {
@@ -159,7 +161,7 @@ export const answerWrapperStyle = (state, optionData, context) => {
 		display: "flex",
 		alignItems: "center",
 		minHeight: "35px",
-        padding: "0 16px",
+        	padding: "0 16px",
 		height: "100%",
 		zIndex: "2",
 		p: {
@@ -170,7 +172,7 @@ export const answerWrapperStyle = (state, optionData, context) => {
 			fontSize: "14px",
 		},
 		span: {
-			maxWidth: "40px",
+			width: "40px",
 			padding: countPadding,
 			fontWeight: "bold",
 			display: "inline-block",
@@ -182,7 +184,7 @@ export const answerWrapperStyle = (state, optionData, context) => {
 export const checkIconStyle = (img, context) => {
 
 	return {
-		width: "24px",
+		width: "40px",
 		height: "24px",
 		mask: `url(${img}) center center no-repeat`,
 		backgroundColor: `${context.theme.secondaryTextColor}`,
@@ -211,4 +213,4 @@ export const messageReactionsWrapperStyle = () => {
         justifyContent: "flex-start",
         minHeight: "36px",
     }
-}
+}