From 8d8183eabb92f73cc202b51541460a0e0238e70b Mon Sep 17 00:00:00 2001
From: Tim Miller-Williams <tim.millerwilliams@gmail.com>
Date: Tue, 28 Apr 2020 15:17:55 +0100
Subject: [PATCH 1/4] Fix 'component' case sensitivity

Component does not work in Vue 3
---
 client/components/Chat.vue    | 2 +-
 client/components/Message.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 8c91d100..2537d81d 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -64,7 +64,7 @@
 					<div class="chat">
 						<div class="messages">
 							<div class="msg">
-								<Component
+								<component
 									:is="specialComponent"
 									:network="network"
 									:channel="channel"
diff --git a/client/components/Message.vue b/client/components/Message.vue
index f2b14b0c..2003e22c 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -19,7 +19,7 @@
 		</template>
 		<template v-else-if="isAction()">
 			<span class="from"><span class="only-copy">*** </span></span>
-			<Component :is="messageComponent" :network="network" :message="message" />
+			<component :is="messageComponent" :network="network" :message="message" />
 		</template>
 		<template v-else-if="message.type === 'action'">
 			<span class="from"><span class="only-copy">* </span></span>

From 8263b178613be6266fb5a9695b78162094e8ae65 Mon Sep 17 00:00:00 2001
From: Tim Miller-Williams <tim.millerwilliams@gmail.com>
Date: Tue, 28 Apr 2020 15:21:49 +0100
Subject: [PATCH 2/4] Address warning in Vue 3

Property "unreadMarkerShown" was accessed during render but is not
defined on instance
---
 client/components/MessageList.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index 1e3e9128..092ecef2 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -63,6 +63,8 @@ import Message from "./Message.vue";
 import MessageCondensed from "./MessageCondensed.vue";
 import DateMarker from "./DateMarker.vue";
 
+let unreadMarkerShown = false;
+
 export default {
 	name: "MessageList",
 	components: {
@@ -183,7 +185,7 @@ export default {
 		});
 	},
 	beforeUpdate() {
-		this.unreadMarkerShown = false;
+		unreadMarkerShown = false;
 	},
 	beforeDestroy() {
 		eventbus.off("resize", this.handleResize);
@@ -205,8 +207,8 @@ export default {
 			return new Date(previousMessage.time).getDay() !== new Date(message.time).getDay();
 		},
 		shouldDisplayUnreadMarker(id) {
-			if (!this.unreadMarkerShown && id > this.channel.firstUnread) {
-				this.unreadMarkerShown = true;
+			if (!unreadMarkerShown && id > this.channel.firstUnread) {
+				unreadMarkerShown = true;
 				return true;
 			}
 

From 06d6dbe3a3eb1f01b7f7c522ad24a45d15e1869e Mon Sep 17 00:00:00 2001
From: Tim Miller-Williams <tim.millerwilliams@gmail.com>
Date: Tue, 28 Apr 2020 15:27:09 +0100
Subject: [PATCH 3/4] Fix usage of v-for and v-if on same component

---
 client/components/NetworkList.vue | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index d7d420df..d2c28d47 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -106,17 +106,18 @@
 					@start="onDragStart"
 					@end="onDragEnd"
 				>
-					<Channel
-						v-for="(channel, index) in network.channels"
-						v-if="index > 0"
-						:key="channel.id"
-						:channel="channel"
-						:network="network"
-						:active="
-							$store.state.activeChannel &&
-							channel === $store.state.activeChannel.channel
-						"
-					/>
+					<template v-for="(channel, index) in network.channels">
+						<Channel
+							v-if="index > 0"
+							:key="channel.id"
+							:channel="channel"
+							:network="network"
+							:active="
+								$store.state.activeChannel &&
+								channel === $store.state.activeChannel.channel
+							"
+						/>
+					</template>
 				</Draggable>
 			</div>
 		</Draggable>

From 13a7a4b5c192f93467b54d2a542bb2b437745bfe Mon Sep 17 00:00:00 2001
From: Tim Miller-Williams <tim.millerwilliams@gmail.com>
Date: Tue, 28 Apr 2020 20:05:46 +0100
Subject: [PATCH 4/4] Remove vue/no-use-v-if-with-v-for eslint override

---
 .eslintrc.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.eslintrc.yml b/.eslintrc.yml
index d67763b0..251c77ec 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -57,7 +57,6 @@ rules:
   yoda: error
   vue/require-default-prop: off
   vue/no-v-html: off
-  vue/no-use-v-if-with-v-for: off
 
 plugins:
   - vue