(demo) fix lint errors

Author: antoine92190

demo/.eslintrc.js

@@ -1,16 +1,39 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-	extends: ['plugin:vue/essential', 'eslint:recommended'],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-empty-pattern': 'off',
-		'no-unused-vars': 'warn'
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
+	root: true,
+	env: {
+		node: true
+	},
+	extends: ['standard', 'plugin:vue/recommended'],
+	rules: {
+		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+		'vue/no-unused-properties': [
+			'error',
+			{
+				groups: ['props', 'data', 'computed', 'methods', 'setup'],
+				deepData: true
+			}
+		],
+		'no-empty-pattern': 'off',
+		'no-unused-vars': 'warn',
+		'valid-typeof': 'off',
+		indent: 'off',
+		'no-tabs': 'off',
+		'vue/html-indent': 'off',
+		'space-before-function-paren': 'off',
+		'vue/max-attributes-per-line': 'off',
+		'vue/html-self-closing': [
+			'error',
+			{
+				html: {
+					void: 'always',
+					normal: 'always',
+					component: 'always'
+				}
+			}
+		]
+	},
+	parserOptions: {
+		parser: 'babel-eslint'
+	}
 }

demo/package.json

@@ -25,7 +25,7 @@
 		"@vue/eslint-config-standard": "^4.0.0",
 		"babel-eslint": "^10.0.3",
 		"eslint": "^6.7.2",
-		"eslint-plugin-vue": "^6.2.2",
+		"eslint-plugin-vue": "^7.5.0",
 		"node-sass": "^4.14.1",
 		"sass-loader": "^10.1.1",
 		"vue-template-compiler": "^2.6.11"

demo/src/App.vue

@@ -9,21 +9,25 @@
 				<button @click="addData" :disabled="updatingData">Add Data</button>
 			</div> -->
 			<span
+				v-if="showOptions"
 				class="user-logged"
 				:class="{ 'user-logged-dark': theme === 'dark' }"
-				v-if="showOptions"
 			>
 				Logged as
 			</span>
-			<select v-model="currentUserId" v-if="showOptions">
+			<select v-if="showOptions" v-model="currentUserId">
 				<option v-for="user in users" :key="user._id" :value="user._id">
 					{{ user.username }}
 				</option>
 			</select>
 
-			<div class="button-theme" v-if="showOptions">
-				<button @click="theme = 'light'" class="button-light">Light</button>
-				<button @click="theme = 'dark'" class="button-dark">Dark</button>
+			<div v-if="showOptions" class="button-theme">
+				<button class="button-light" @click="theme = 'light'">
+					Light
+				</button>
+				<button class="button-dark" @click="theme = 'dark'">
+					Dark
+				</button>
 				<button class="button-github">
 					<a href="https://github.com/antoine92190/vue-advanced-chat">
 						<img src="@/assets/github.svg" />
@@ -32,11 +36,11 @@
 			</div>
 
 			<chat-container
-				:currentUserId="currentUserId"
+				v-if="showChat"
+				:current-user-id="currentUserId"
 				:theme="theme"
-				:isDevice="isDevice"
+				:is-device="isDevice"
 				@show-demo-options="showDemoOptions = $event"
-				v-if="showChat"
 			/>
 
 			<!-- <div class="version-container">
@@ -84,11 +88,10 @@ export default {
 		}
 	},
 
-	mounted() {
-		this.isDevice = window.innerWidth < 500
-		window.addEventListener('resize', ev => {
-			if (ev.isTrusted) this.isDevice = window.innerWidth < 500
-		})
+	computed: {
+		showOptions() {
+			return !this.isDevice || this.showDemoOptions
+		}
 	},
 
 	watch: {
@@ -98,10 +101,11 @@ export default {
 		}
 	},
 
-	computed: {
-		showOptions() {
-			return !this.isDevice || this.showDemoOptions
-		}
+	mounted() {
+		this.isDevice = window.innerWidth < 500
+		window.addEventListener('resize', ev => {
+			if (ev.isTrusted) this.isDevice = window.innerWidth < 500
+		})
 	},
 
 	methods: {

demo/src/ChatContainer.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="window-container" :class="{ 'window-mobile': isDevice }">
-		<form @submit.prevent="createRoom" v-if="addNewRoom">
-			<input type="text" placeholder="Add username" v-model="addRoomUsername" />
+		<form v-if="addNewRoom" @submit.prevent="createRoom">
+			<input v-model="addRoomUsername" type="text" placeholder="Add username" />
 			<button type="submit" :disabled="disableForm || !addRoomUsername">
 				Create Room
 			</button>
@@ -10,8 +10,8 @@
 			</button>
 		</form>
 
-		<form @submit.prevent="addRoomUser" v-if="inviteRoomId">
-			<input type="text" placeholder="Add username" v-model="invitedUsername" />
+		<form v-if="inviteRoomId" @submit.prevent="addRoomUser">
+			<inpu v-model="invitedUsername" type="text" placeholder="Add username" />
 			<button type="submit" :disabled="disableForm || !invitedUsername">
 				Add User
 			</button>
@@ -20,9 +20,11 @@
 			</button>
 		</form>
 
-		<form @submit.prevent="deleteRoomUser" v-if="removeRoomId">
+		<form v-if="removeRoomId" @submit.prevent="deleteRoomUser">
 			<select v-model="removeUserId">
-				<option default value="">Select User</option>
+				<option default value="">
+					Select User
+				</option>
 				<option v-for="user in removeUsers" :key="user._id" :value="user._id">
 					{{ user.username }}
 				</option>
@@ -91,7 +93,11 @@ export default {
 		ChatWindow
 	},
 
-	props: ['currentUserId', 'theme', 'isDevice'],
+	props: {
+		currentUserId: { type: String, required: true },
+		theme: { type: String, required: true },
+		isDevice: { type: Boolean, required: true }
+	},
 
 	data() {
 		return {
@@ -138,15 +144,6 @@ export default {
 		}
 	},
 
-	mounted() {
-		this.fetchRooms()
-		this.updateUserOnlineStatus()
-	},
-
-	destroyed() {
-		this.resetRooms()
-	},
-
 	computed: {
 		loadedRooms() {
 			return this.rooms.slice(0, this.roomsLoadedCount)
@@ -156,6 +153,15 @@ export default {
 		}
 	},
 
+	mounted() {
+		this.fetchRooms()
+		this.updateUserOnlineStatus()
+	},
+
+	destroyed() {
+		this.resetRooms()
+	},
+
 	methods: {
 		resetRooms() {
 			this.loadingRooms = true
@@ -311,9 +317,10 @@ export default {
 			if (!message.timestamp) return
 
 			let content = message.content
-			if (message.file)
+			if (message.file) {
 				content = `${message.file.name}.${message.file.extension ||
 					message.file.type}`
+			}
 
 			return {
 				...message,
@@ -346,8 +353,9 @@ export default {
 				this.roomId = room.roomId
 			}
 
-			if (this.endMessages && !this.startMessages)
+			if (this.endMessages && !this.startMessages) {
 				return (this.messagesLoaded = true)
+			}
 
 			let ref = messagesRef(room.roomId)
 
@@ -368,10 +376,12 @@ export default {
 
 				let listenerQuery = ref.orderBy('timestamp')
 
-				if (this.startMessages)
+				if (this.startMessages) {
 					listenerQuery = listenerQuery.startAfter(this.startMessages)
-				if (this.endMessages)
+				}
+				if (this.endMessages) {
 					listenerQuery = listenerQuery.endAt(this.endMessages)
+				}
 
 				if (options.reset) this.messages = []
 
@@ -421,12 +431,12 @@ export default {
 				user => message.data().sender_id === user._id
 			)
 
-			const { sender_id, timestamp } = message.data()
+			const { timestamp } = message.data()
 
 			return {
 				...message.data(),
 				...{
-					senderId: sender_id,
+					senderId: message.data().sender_id,
 					_id: message.id,
 					seconds: timestamp.seconds,
 					timestamp: parseTimestamp(timestamp, 'HH:mm'),
@@ -595,7 +605,7 @@ export default {
 			await messagesRef(roomId)
 				.doc(messageId)
 				.update({
-					['file.url']: url
+					'file.url': url
 				})
 		},
 
@@ -677,7 +687,7 @@ export default {
 				.database()
 				.ref('.info/connected')
 				.on('value', snapshot => {
-					if (snapshot.val() == false) return
+					if (snapshot.val() === false) return
 
 					userStatusRef
 						.onDisconnect()