(refactor) rename components

Author: antoine92190

src/ChatWindow/ChatWindow.vue

@@ -13,7 +13,7 @@
 				@addRoom="addRoom"
 			>
 			</rooms-list>
-			<messages-list
+			<room
 				:currentUserId="currentUserId"
 				:room="room"
 				:messages="messages"
@@ -37,14 +37,14 @@
 				@messageActionHandler="messageActionHandler"
 				@sendMessageReaction="sendMessageReaction"
 			>
-			</messages-list>
+			</room>
 		</div>
 	</div>
 </template>
 
 <script>
 import RoomsList from './RoomsList'
-import MessagesList from './MessagesList'
+import Room from './Room'
 const { roomsValid, partcipantsValid } = require('../utils/roomValidation')
 import locales from '../locales'
 import { defaultThemeStyles, cssThemeVars } from '../themes'
@@ -53,7 +53,7 @@ export default {
 	name: 'chat-container',
 	components: {
 		RoomsList,
-		MessagesList
+		Room
 	},
 
 	props: {

src/ChatWindow/ChatLoader.vue src/ChatWindow/Loader.vuesrc/ChatWindow/ChatLoader.vue renamed to src/ChatWindow/Loader.vue

@@ -11,7 +11,7 @@
 
 <script>
 export default {
-	name: 'chat-loader',
+	name: 'loader',
 	props: ['show', 'infinite']
 }
 </script>

src/ChatWindow/ChatMessage.vue src/ChatWindow/Message.vuesrc/ChatWindow/ChatMessage.vue renamed to src/ChatWindow/Message.vue

@@ -61,10 +61,10 @@
 					</div>
 
 					<div class="image-container" v-else-if="isImage">
-						<chat-loader
+						<loader
 							:style="{ top: `${imageResponsive.loaderTop}px` }"
 							:show="isImageLoading"
-						></chat-loader>
+						></loader>
 						<div
 							class="message-image"
 							:class="{
@@ -194,12 +194,12 @@
 <script>
 import SvgIcon from './SvgIcon'
 import vClickOutside from 'v-click-outside'
-import ChatLoader from './ChatLoader'
+import Loader from './Loader'
 import EmojiPicker from './EmojiPicker'
 
 export default {
-	name: 'chat-message',
-	components: { SvgIcon, ChatLoader, EmojiPicker },
+	name: 'message',
+	components: { SvgIcon, Loader, EmojiPicker },
 
 	directives: {
 		clickOutside: vClickOutside.directive

src/ChatWindow/MessagesList.vue src/ChatWindow/Room.vuesrc/ChatWindow/MessagesList.vue renamed to src/ChatWindow/Room.vue

@@ -39,7 +39,7 @@
 		</div>
 		<div ref="scrollContainer" class="container-scroll">
 			<div class="messages-container">
-				<chat-loader :show="loadingMessages"></chat-loader>
+				<loader :show="loadingMessages"></loader>
 				<transition name="fade-message">
 					<div class="text-started" v-if="showNoMessages">
 						{{ textMessages.MESSAGES_EMPTY }}
@@ -56,15 +56,15 @@
 						@infinite="loadMoreMessages"
 					>
 						<div slot="spinner">
-							<chat-loader :show="true" :infinite="true"></chat-loader>
+							<loader :show="true" :infinite="true"></loader>
 						</div>
 						<div slot="no-results"></div>
 						<div slot="no-more"></div>
 					</infinite-loading>
 				</transition>
 				<transition-group name="fade-message">
 					<div v-for="(message, i) in messages" :key="message._id">
-						<chat-message
+						<message
 							:currentUserId="currentUserId"
 							:message="message"
 							:index="i"
@@ -83,7 +83,7 @@
 							@addNewMessage="addNewMessage"
 							@sendMessageReaction="sendMessageReaction"
 							@hideOptions="hideOptions = $event"
-						></chat-message>
+						></message>
 					</div>
 				</transition-group>
 			</div>
@@ -200,19 +200,19 @@
 <script>
 import InfiniteLoading from 'vue-infinite-loading'
 import vClickOutside from 'v-click-outside'
-import ChatLoader from './ChatLoader'
-import ChatMessage from './ChatMessage'
+import Loader from './Loader'
+import Message from './Message'
 import SvgIcon from './SvgIcon'
 import EmojiPicker from './EmojiPicker'
 import emojis from 'vue-emoji-picker/src/emojis'
 const { messagesValid } = require('../utils/roomValidation')
 
 export default {
-	name: 'messages-list',
+	name: 'room',
 	components: {
 		InfiniteLoading,
-		ChatLoader,
-		ChatMessage,
+		Loader,
+		Message,
 		SvgIcon,
 		EmojiPicker
 	},

src/ChatWindow/RoomsList.vue

@@ -19,7 +19,7 @@
 			</div>
 		</div>
 
-		<chat-loader :show="loadingRooms"></chat-loader>
+		<loader :show="loadingRooms"></loader>
 
 		<div class="rooms-empty" v-if="!loadingRooms && !rooms.length">
 			No rooms
@@ -64,13 +64,13 @@
 </template>
 
 <script>
-import ChatLoader from './ChatLoader'
+import Loader from './Loader'
 import filteredUsers from '../utils/filterItems'
 import SvgIcon from './SvgIcon'
 
 export default {
 	name: 'rooms-list',
-	components: { ChatLoader, SvgIcon },
+	components: { Loader, SvgIcon },
 
 	props: {
 		textMessages: { type: Object, required: true },