(refactor) add currentUserId prop (replaces 'me')

Author: antoine92190

README.md

@@ -67,7 +67,8 @@ You can import it as a custom component:
     data() {
       return {
         rooms: [],
-        messages: []
+        messages: [],
+        currentUserId: '1234'
       }
     }
   }
@@ -79,23 +80,26 @@ You can import it as a custom component:
 | Prop               | Type    | Required | Default |
 | ------------------ | ------- | -------- | ------- |
 | height             | String  | -        | 600px   |
+| currentUserId (1)  | String  | true     | -       |
 | rooms              | Array   | -        | [ ]     |
-| loadingRooms (1)   | Boolean | -        | false   |
+| loadingRooms (2)   | Boolean | -        | false   |
 | messages           | Array   | -        | [ ]     |
-| messagesLoaded (2) | Boolean | -        | false   |
-| menuActions (3)    | Array   | -        | [ ]     |
-| messageActions (4) | Array   | -        | (4)     |
+| messagesLoaded (3) | Boolean | -        | false   |
+| menuActions (4)    | Array   | -        | [ ]     |
+| messageActions (5) | Array   | -        | (4)     |
 | showFiles          | Boolean | -        | true    |
 | showEmojis         | Boolean | -        | true    |
-| textMessages (5)   | Object  | -        | null    |
-| theme (6)          | Sring   | -        | light   |
-| colors (7)         | Object  | -        | (6)     |
+| textMessages (6)   | Object  | -        | null    |
+| theme (7)          | Sring   | -        | light   |
+| colors (8)         | Object  | -        | (8)     |
 
-(1) `loadingRooms` can be used to show/hide a spinner icon while rooms are loading
+(1) `currentUserId` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
 
-(2) `messagesLoaded` must be manually set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top anymore
+(2) `loadingRooms` can be used to show/hide a spinner icon while rooms are loading
 
-(3) `menuActions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
+(3) `messagesLoaded` must be manually set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top anymore
+
+(4) `menuActions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
 You can then use the [menuActionHandler](#events-api) event to call your own action after clicking a button. Ex:
 
 ```javascript
@@ -115,7 +119,7 @@ menuActions="[
 ]"
 ```
 
-(4) `messageActions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
+(5) `messageActions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
 You can then use the [messageActionHandler](#events-api) event to call your own action after clicking a button. Ex:
 
 ```javascript
@@ -155,7 +159,7 @@ messageActions="[
 ]"
 ```
 
-(5) `textMessages` can be used to replace default texts. Ex:
+(6) `textMessages` can be used to replace default texts. Ex:
 
 ```javascript
 textMessages="{
@@ -168,9 +172,9 @@ textMessages="{
 }"
 ```
 
-(6) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
+(7) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
 
-(7) `colors` can be use to create your own theme. Ex:
+(8) `colors` can be use to create your own theme. Ex:
 
 ```javascript
 colors="{
@@ -298,7 +302,7 @@ rooms="[
 ### Messages prop
 
 Message objects are rendered differently depending on their type. Currently, only text, emoji and file types are supported.<br>
-Each message object has a `sender_id` field which can have the value 'me' or the id of the corresponding agent.
+Each message object has a `sender_id` field which holds the id of the corresponding agent. If `sender_id` matches the `currentUserId` prop, specific UI and actions will be implemented
 
 ```javascript
 messages="[

demo/src/ChatContainer.vue

@@ -48,6 +48,7 @@
 		<chat-window
 			height="calc(100vh - 80px)"
 			:theme="theme"
+			:currentUserId="currentUserId"
 			:rooms="rooms"
 			:loadingRooms="loadingRooms"
 			:messages="messages"
@@ -346,7 +347,7 @@ export default {
 			return {
 				...message.data(),
 				...{
-					sender_id: sender_id === this.currentUserId ? 'me' : sender_id,
+					sender_id,
 					_id: message.id,
 					seconds: timestamp.seconds,
 					timestamp: parseTimestamp(timestamp, 'HH:mm'),
@@ -376,10 +377,7 @@ export default {
 				message.replyMessage = {
 					_id: replyMessage._id,
 					content: replyMessage.content,
-					sender_id:
-						replyMessage.sender_id === 'me'
-							? this.currentUserId
-							: replyMessage.sender_id
+					sender_id: replyMessage.sender_id
 				}
 
 				if (message.replyMessage.file) {

src/ChatWindow/ChatMessage.vue

@@ -10,7 +10,7 @@
 
 		<div
 			class="message-box"
-			:class="{ 'offset-current': message.sender_id === 'me' }"
+			:class="{ 'offset-current': message.sender_id === currentUserId }"
 		>
 			<div
 				class="message-container"
@@ -21,12 +21,12 @@
 					class="message-card"
 					:class="{
 						'message-highlight': isMessageHover(message),
-						'message-current': message.sender_id === 'me',
+						'message-current': message.sender_id === currentUserId,
 						'message-deleted': message.deleted
 					}"
 				>
 					<div
-						v-if="roomUsers.length > 2 && message.sender_id !== 'me'"
+						v-if="roomUsers.length > 2 && message.sender_id !== currentUserId"
 						class="text-username"
 						:class="{
 							'username-reply': !message.deleted && message.replyMessage
@@ -67,7 +67,8 @@
 						<div
 							class="message-image"
 							:class="{
-								'image-loading': isImageLoading && message.sender_id === 'me'
+								'image-loading':
+									isImageLoading && message.sender_id === currentUserId
 							}"
 							:style="{ background: `url(${message.file.url})` }"
 						>
@@ -129,21 +130,23 @@
 						:emojiOpened="emojiOpened"
 						:emojiReaction="true"
 						:roomFooterRef="roomFooterRef"
-						:positionRight="message.sender_id === 'me'"
+						:positionRight="message.sender_id === currentUserId"
 						@addEmoji="sendMessageReaction"
 						@openEmoji="emojiOpened = $event"
 					></emoji-picker>
 
 					<transition
-						:name="message.sender_id === 'me' ? 'slide-left' : 'slide-right'"
+						:name="
+							message.sender_id === currentUserId ? 'slide-left' : 'slide-right'
+						"
 						v-if="filteredMessageActions.length"
 					>
 						<div
 							ref="menuOptions"
 							v-if="optionsOpened"
 							v-click-outside="closeOptions"
 							class="menu-options"
-							:class="{ 'menu-left': message.sender_id !== 'me' }"
+							:class="{ 'menu-left': message.sender_id !== currentUserId }"
 							:style="{ top: `${menuOptionsHeight}px` }"
 						>
 							<div class="menu-list">
@@ -188,12 +191,13 @@ export default {
 	},
 
 	props: {
+		currentUserId: { type: String, required: true },
+		textMessages: { type: Object, required: true },
 		index: { type: Number, required: true },
 		message: { type: Object, required: true },
 		messages: { type: Array, required: true },
 		editedMessage: { type: Object, required: true },
 		roomUsers: { type: Array, default: () => [] },
-		textMessages: { type: Object, required: true },
 		messageActions: { type: Array, required: true },
 		roomFooterRef: { type: HTMLDivElement },
 		newMessages: { type: Array },
@@ -231,7 +235,7 @@ export default {
 	},
 
 	mounted() {
-		if (!this.message.seen && this.message.sender_id !== 'me') {
+		if (!this.message.seen && this.message.sender_id !== this.currentUserId) {
 			this.$emit('addNewMessage', {
 				_id: this.message._id,
 				index: this.index
@@ -262,7 +266,7 @@ export default {
 		},
 		isMessageSeen() {
 			return (
-				this.message.sender_id === 'me' &&
+				this.message.sender_id === this.currentUserId &&
 				this.message.seen &&
 				!this.message.deleted
 			)
@@ -285,7 +289,7 @@ export default {
 			)
 		},
 		filteredMessageActions() {
-			return this.message.sender_id === 'me'
+			return this.message.sender_id === this.currentUserId
 				? this.messageActions
 				: this.messageActions.filter(message => !message.onlyMe)
 		}
@@ -304,7 +308,9 @@ export default {
 			if (this.canEditMessage()) this.hoverMessageId = this.message._id
 		},
 		canEditMessage() {
-			return this.message.sender_id === 'me' && !this.message.deleted
+			return (
+				this.message.sender_id === this.currentUserId && !this.message.deleted
+			)
 		},
 		onLeaveMessage() {
 			this.imageHover = false

src/ChatWindow/ChatWindow.vue

@@ -11,6 +11,7 @@
 			>
 			</rooms-list>
 			<messages-list
+				:currentUserId="currentUserId"
 				:room="room"
 				:messages="messages"
 				:messagesLoaded="messagesLoaded"
@@ -50,6 +51,10 @@ export default {
 
 	props: {
 		height: { type: String, default: '600px' },
+		theme: { type: String, default: 'light' },
+		colors: { type: Object, default: null },
+		textMessages: { type: Object, default: null },
+		currentUserId: { type: String, required: true },
 		rooms: { type: Array, default: () => [] },
 		loadingRooms: { type: Boolean, default: false },
 		messages: { type: Array, default: () => [] },
@@ -65,10 +70,7 @@ export default {
 		},
 		showFiles: { type: Boolean, default: true },
 		showEmojis: { type: Boolean, default: true },
-		showReactionEmojis: { type: Boolean, default: true },
-		textMessages: { type: Object, default: null },
-		theme: { type: String, default: 'light' },
-		colors: { type: Object, default: null }
+		showReactionEmojis: { type: Boolean, default: true }
 	},
 
 	data() {

src/ChatWindow/MessagesList.vue

@@ -51,6 +51,7 @@
 				<transition-group name="fade-message">
 					<div v-for="(message, i) in messages" :key="message._id">
 						<chat-message
+							:currentUserId="currentUserId"
 							:message="message"
 							:index="i"
 							:messages="messages"
@@ -204,15 +205,16 @@ export default {
 	},
 
 	props: {
+		currentUserId: { type: String, required: true },
+		textMessages: { type: Object, required: true },
 		room: { type: Object, required: true },
 		messages: { type: Array, required: true },
 		messagesLoaded: { type: Boolean, required: true },
 		menuActions: { type: Array, required: true },
 		messageActions: { type: Array, required: true },
 		showFiles: { type: Boolean, required: true },
 		showEmojis: { type: Boolean, required: true },
-		showReactionEmojis: { type: Boolean, required: true },
-		textMessages: { type: Object, required: true }
+		showReactionEmojis: { type: Boolean, required: true }
 	},
 
 	data() {

src/ChatWindow/RoomsList.vue

@@ -69,10 +69,10 @@ export default {
 	components: { ChatLoader, SvgIcon },
 
 	props: {
+		textMessages: { type: Object, required: true },
 		rooms: { type: Array, required: true },
 		loadingRooms: { type: Boolean, required: true },
-		room: { type: Object, required: true },
-		textMessages: { type: Object, required: true }
+		room: { type: Object, required: true }
 	},
 
 	data() {