Add computed property if username is null (account is deleted)

src/components/AvatarIcon.vue

@@ -1,5 +1,5 @@
 <template>
-	<info-tooltip class='avatar_icon' @hover='loadUser'>
+	<info-tooltip class='avatar_icon' @hover='loadUser' :noEvents='user === null'>
 		<template slot='content'>
 			<template v-if='ajaxUser'>
 				<div class='avatar_icon__header'>
@@ -25,10 +25,10 @@
 			slot='display'
 			class='avatar_icon__icon'
 			:class='{"avatar_icon__icon--small": size === "small"}'
-			:style='{ "background-color": user.color }'
+			:style='{ "background-color": userColor }'
 			@click='goToUser'
 		>
-			{{user.username[0]}}
+			{{userLetter}}
 		</div>
 	</info-tooltip>
 </template>
@@ -46,9 +46,25 @@
 				ajaxUser: null
 			}
 		},
+		computed: {
+			userLetter () {
+				if(this.user) {
+					return this.user.username[0]
+				} else {
+					return ''
+				}
+			},
+			userColor () {
+				if(this.user) {
+					return this.user.color
+				} else {
+					return null
+				}
+			}
+		},
 		methods: {
 			loadUser () {
-				if(this.ajaxUser) return
+				if(this.ajaxUser || this.user === null) return
 
 				this.axios
 					.get('/api/v1/user/' + this.user.username)
@@ -58,6 +74,8 @@
 					.catch(AjaxErrorHandler(this.$store))
 			},
 			goToUser () {
+				if(this.user === null) return
+
 				this.$router.push('/user/' + this.user.username)
 			}
 		}

src/components/InfoTooltip.vue

@@ -27,6 +27,7 @@
 <script>
 	export default {
 		name: 'InfoTooltip',
+		props: ['noEvents'],
 		data () {
 			return {
 				show: false,
@@ -35,6 +36,8 @@
 		},
 		methods: {
 			setState (val) {
+				if(this.noEvents) return
+
 				if(val) {
 					this.pointerEvents = true
 					this.show = true

src/components/PostReply.vue

@@ -2,7 +2,7 @@
 	<info-tooltip class='post_reply' :class='{"post_reply--hover": hover}'>
 		<template slot='content'>
 			<div style='margin-top: -0.25rem;'>
-				<div class='post_reply__username'>{{post.User.username}}</div>
+				<div class='post_reply__username'>{{user.username}}</div>
 				<div class='post_reply__date'>{{post.createdAt | formatDate('date|time', ' - ')}}</div>
 			</div>
 			<div class='post_reply__content'>{{post.content | stripTags | truncate(100)}}</div>
@@ -14,9 +14,9 @@
 		>
 			<div
 				class='post_reply__letter'
-				:style='{"background-color": post.User.color}'
+				:style='{"background-color": user.color}'
 			>
-				{{post.User.username[0]}}
+				{{user.letter}}
 			</div>
 		</div>
 	</info-tooltip>
@@ -28,7 +28,22 @@
 	export default {
 		name: 'PostReply',
 		props: ['post', 'hover'],
-		components: { InfoTooltip }
+		components: { InfoTooltip },
+		computed: {
+			user () {
+				if(this.post.User) {
+					return Object.assign({
+						letter: this.post.User.username[0]
+					}, this.post.User)
+				} else {
+					return {
+						letter: '',
+						color: null,
+						username: '[deleted]'
+					}
+				}
+			}
+		}
 	}
 </script>
 
@@ -80,6 +95,10 @@
 			position: relative;
 			border-radius: 1rem;
 			cursor: pointer;
+
+			@at-root #{&}--no_hover {
+				pointer-events: none;
+			}
 		}
 		@at-root #{&}__letter {
 			height: 1.25rem;

src/components/ReplyingTo.vue

@@ -2,7 +2,7 @@
 	<info-tooltip class='replying_to' @hover='loadPost'>
 		<template slot='content'>
 			<div style='margin-top: -0.25rem;'>
-				<div class='replying_to__username' v-if='post'>{{post.User.username}}</div>
+				<div class='replying_to__username' v-if='post'>{{postUsername}}</div>
 				<div class='replying_to__date' v-if='post'>{{post.createdAt | formatDate('date|time', ' - ')}}</div>
 			</div>
 			<div class='replying_to__content' v-if='post'>{{post.content | stripTags | truncate(100)}}</div>
@@ -14,7 +14,7 @@
 			@click='$emit("click")'
 		>
 			<span class='fa fa-reply replying_to__icon'></span>
-			{{username}}
+			{{username || '[deleted]'}}
 		</div>
 	</info-tooltip>
 </template>
@@ -32,6 +32,15 @@
 				post: null
 			}
 		},
+		computed: {
+			postUsername () {
+				if(this.post.User) {
+					return this.post.User.username
+				} else {
+					return '[deleted]'
+				}
+			}
+		},
 		methods: {
 			loadPost () {
 				if(this.post) return

src/components/ThreadDisplay.vue

@@ -13,7 +13,7 @@
 				<div class='thread_display__meta_bar' @click.self='goToThread'>
 					<div @click.self='goToThread'>
 						By
-						<span class='thread_display__username' ref='username' @click='goToUser'>{{thread.User.username}}</span>
+						<span class='thread_display__username' ref='username' @click='goToUser'>{{threadUsername}}</span>
 						in
 						<span class='thread_display__category' ref='category' @click='goToCategory'>{{thread.Category.name}}</span>
 						&middot;
@@ -29,7 +29,7 @@
 				>
 					<span class='fa fa-reply fa-fw'></span>
 					Latest reply by
-					<span class='thread_display__username'>{{thread.Posts[1].User.username}}</span>
+					<span class='thread_display__username'>{{replyUsername}}</span>
 					&middot;
 					<span class='thread_display__date'>{{thread.Posts[1].createdAt | formatDate}}</span>
 				</div>
@@ -55,6 +55,22 @@
 		components: {
 			AvatarIcon
 		},
+		computed: {
+			threadUsername () {
+				if(this.thread.User) {
+					return this.thread.User.username
+				} else {
+					return '[deleted]'
+				}
+			},
+			replyUsername () {
+				if(this.thread.Posts[1].User) {
+					return this.thread.Posts[1].User.username
+				} else {
+					return '[deleted]'
+				}
+			}
+		},
 		methods: {
 			goToUser () {
 				this.$router.push('/user/' + this.thread.User.username)

src/components/ThreadPost.vue

@@ -15,7 +15,7 @@
 		<div class='post__meta_data'>
 			<avatar-icon :user='post.User' class='post__avatar'></avatar-icon>
 			<div class='post__thread' v-if='showThread' @click='goToThread'>{{post.Thread.name}}</div>
-			<div class='post__user' v-else>{{post.User.username}}</div>
+			<div class='post__user' v-else>{{username}}</div>
 			<replying-to
 				style='margin-right: 0.5rem;'
 				v-if='post.replyingToUsername'
@@ -81,6 +81,15 @@
 				postURL: `${location.origin}/thread/${post.Thread.slug}/${post.ThreadId}/${post.postNumber}`
 			}
 		},
+		computed: {
+			username () {
+				if(this.post.User) {
+					return this.post.User.username
+				} else {
+					return '[deleted]'
+				}
+			}
+		},
 		methods: {
 			setPostFooterState (state) {
 				this.hover = state