(refacto) replace string interpolation by v-html

advanced-chat · Apr 29, 2020 · 36432b4 · 36432b4
1 parent 4d76f81
commit 36432b4
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 47 deletions.
diff --git a/src/ChatWindow/Message.vue b/src/ChatWindow/Message.vue
@@ -1,12 +1,11 @@
 <template>
 	<div>
-		<div class="card-date" v-if="showDate">
-			{{ message.date }}
-		</div>
-
-		<div class="line-new" v-if="newMessage._id === message._id">
-			{{ textMessages.NEW_MESSAGES }}
-		</div>
+		<div class="card-date" v-if="showDate" v-html="message.date"></div>
+		<div
+			class="line-new"
+			v-if="newMessage._id === message._id"
+			v-html="textMessages.NEW_MESSAGES"
+		></div>
 
 		<div
 			class="message-box"
@@ -36,14 +35,14 @@
 							'username-reply': !message.deleted && message.replyMessage
 						}"
 					>
-						<span>{{ message.username }}</span>
+						<span v-html="message.username"></span>
 					</div>
 
 					<div
 						v-if="!message.deleted && message.replyMessage"
 						class="reply-message"
 					>
-						<div class="reply-username">{{ replyUsername }}</div>
+						<div class="reply-username" v-html="replyUsername"></div>
 
 						<div class="image-reply-container" v-if="isImageReply">
 							<div
@@ -54,15 +53,18 @@
 							></div>
 						</div>
 
-						<div class="reply-content">{{ message.replyMessage.content }}</div>
+						<div
+							class="reply-content"
+							v-html="message.replyMessage.content"
+						></div>
 					</div>
 
 					<div v-if="message.deleted">
-						<span>{{ textMessages.MESSAGE_DELETED }}</span>
+						<span v-html="textMessages.MESSAGE_DELETED"></span>
 					</div>
 
 					<div v-else-if="!message.file">
-						<span>{{ message.content }}</span>
+						<span v-html="message.content"></span>
 					</div>
 
 					<div class="image-container" v-else-if="isImage">
@@ -98,7 +100,7 @@
 								</div>
 							</transition>
 						</div>
-						<span>{{ message.content }}</span>
+						<span v-html="message.content"></span>
 					</div>
 
 					<div v-else class="file-message">
@@ -108,14 +110,14 @@
 						>
 							<svg-icon name="document" />
 						</div>
-						<span>{{ message.content }}</span>
+						<span v-html="message.content"></span>
 					</div>
 
 					<div class="text-timestamp">
 						<div class="icon-edited" v-if="message.edited && !message.deleted">
 							<svg-icon name="pencil" />
 						</div>
-						<span>{{ message.timestamp }}</span>
+						<span v-html="message.timestamp"></span>
 						<span v-if="isMessageSeen">
 							<svg-icon name="checkmark" class="icon-check" />
 						</span>
@@ -186,9 +188,11 @@
 									v-for="action in filteredMessageActions"
 									:key="action.name"
 								>
-									<div class="menu-item" @click="messageActionHandler(action)">
-										{{ action.title }}
-									</div>
+									<div
+										class="menu-item"
+										v-html="action.title"
+										@click="messageActionHandler(action)"
+									></div>
 								</div>
 							</div>
 						</div>

diff --git a/src/ChatWindow/Room.vue b/src/ChatWindow/Room.vue
@@ -16,13 +16,13 @@
 					:style="{ 'background-image': `url('${room.avatar}')` }"
 				></div>
 				<div>
-					<div class="room-name">{{ room.roomName }}</div>
-					<div v-if="typingUsers" class="room-info">
-						{{ typingUsers }} {{ textMessages.IS_TYPING }}
-					</div>
-					<div v-else class="room-info">
-						{{ userStatus }}
-					</div>
+					<div class="room-name" v-html="room.roomName"></div>
+					<div
+						v-if="typingUsers"
+						class="room-info"
+						v-html="typingUsers + '' + textMessages.IS_TYPING"
+					></div>
+					<div v-else class="room-info" v-html="userStatus"></div>
 				</div>
 				<div
 					class="svg-button room-options"
@@ -39,9 +39,11 @@
 					>
 						<div class="menu-list">
 							<div v-for="action in menuActions" :key="action.name">
-								<div class="menu-item" @click="menuActionHandler(action)">
-									{{ action.title }}
-								</div>
+								<div
+									class="menu-item"
+									v-html="action.title"
+									@click="menuActionHandler(action)"
+								></div>
 							</div>
 						</div>
 					</div>
@@ -53,12 +55,18 @@
 			<div class="messages-container">
 				<div :class="{ 'messages-hidden': loadingMessages }">
 					<transition name="fade-message">
-						<div class="text-started" v-if="showNoMessages">
-							{{ textMessages.MESSAGES_EMPTY }}
-						</div>
-						<div class="text-started" v-if="showMessagesStarted">
-							{{ textMessages.CONVERSATION_STARTED }} {{ messages[0].date }}
-						</div>
+						<div
+							class="text-started"
+							v-if="showNoMessages"
+							v-html="textMessages.MESSAGES_EMPTY"
+						></div>
+						<div
+							class="text-started"
+							v-if="showMessagesStarted"
+							v-html="
+								textMessages.CONVERSATION_STARTED + ' ' + messages[0].date
+							"
+						></div>
 					</transition>
 					<transition name="fade-message">
 						<infinite-loading
@@ -118,8 +126,8 @@
 							class="image-reply"
 						/>
 						<div class="reply-info">
-							<div class="reply-username">{{ messageReply.username }}</div>
-							<div class="reply-content">{{ messageReply.content }}</div>
+							<div class="reply-username" v-html="messageReply.username"></div>
+							<div class="reply-content" v-html="messageReply.content"></div>
 						</div>
 					</div>
 
@@ -149,7 +157,7 @@
 					<div class="icon-file">
 						<svg-icon name="file" />
 					</div>
-					<div class="file-message">{{ message }}</div>
+					<div class="file-message" v-html="message"></div>
 					<div class="svg-button icon-remove" @click="resetMessage(null, true)">
 						<svg-icon name="close" />
 					</div>

diff --git a/src/ChatWindow/RoomsList.vue b/src/ChatWindow/RoomsList.vue
@@ -24,9 +24,11 @@
 
 		<loader :show="loadingRooms"></loader>
 
-		<div class="rooms-empty" v-if="!loadingRooms && !rooms.length">
-			{{ textMessages.ROOMS_EMPTY }}
-		</div>
+		<div
+			class="rooms-empty"
+			v-if="!loadingRooms && !rooms.length"
+			v-html="textMessages.ROOMS_EMPTY"
+		></div>
 
 		<div v-if="!loadingRooms" class="room-list">
 			<div
@@ -48,12 +50,12 @@
 							class="state-circle"
 							:class="{ 'state-online': userStatus(room) === 'online' }"
 						></div>
-						<div class="room-name text-ellipsis">
-							{{ room.roomName }}
-						</div>
-						<div class="text-date" v-if="room.lastMessage">
-							{{ room.lastMessage.timestamp }}
-						</div>
+						<div class="room-name text-ellipsis" v-html="room.roomName"></div>
+						<div
+							class="text-date"
+							v-if="room.lastMessage"
+							v-html="room.lastMessage.timestamp"
+						></div>
 					</div>
 					<div
 						class="text-last text-ellipsis"
@@ -63,7 +65,7 @@
 						<span v-if="room.lastMessage.seen">
 							<svg-icon name="checkmark" class="icon-check" />
 						</span>
-						<span>{{ room.lastMessage.content }}</span>
+						<span v-html="room.lastMessage.content"></span>
 					</div>
 				</div>
 			</div>