Add UserThreads page

src/components/routes/User.vue

@@ -26,7 +26,7 @@
 					{{item.name}}
 				</div>
 			</div>
-			<router-view class='user__view'></router-view>
+			<router-view class='user__view' :username='username'></router-view>
 		</div>
 	</div>
 </template>
@@ -40,7 +40,7 @@
 			return {
 				menuItems: [
 					{ name: 'Posts', route: 'posts' }, 
-					{ name: 'Threads started', route: 'threads' }
+					{ name: 'Threads', route: 'threads' }
 				],
 				selected: 0,
 

src/components/routes/UserPosts.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class='user_posts' :class='{ "user_posts--no_border_bottom": !posts.length }'>
-		<div class='user_posts__title'>Posts by username</div>
+		<div class='user_posts__title'>Posts by {{username}}</div>
 		<scroll-load
 			:loading='loadingPosts'
 			:show='nextURL !== null'
@@ -26,6 +26,7 @@
 
 	export default {
 		name: 'user',
+		props: ['username'],
 		components: {
 			ThreadPost,
 			ScrollLoad

src/components/routes/UserThreads.vue

@@ -1,18 +1,120 @@
 <template>
-	<div>
-		Threads
+	<div class='user_threads'>
+		<div class='user_threads__title'>Threads by {{username}}</div>
+		<scroll-load
+			:loading='loadingThreads'
+			:show='nextURL !== null'
+			@load='loadNewThreads'
+			v-if='threads.length'
+		>
+			<div
+				class='user_threads__thread'
+				v-for='(thread, index) in threads'
+				:class='{"user_threads__thread--last": index === threads.length-1}'
+				@click='goToThread(thread)'
+			>
+				<div class='user_threads__thread_bar'>
+					<div class='user_threads__category'>{{thread.Category.name}}</div>
+					<div class='user_threads__date'>{{thread.createdAt | formatDate('date')}}</div>
+				</div>
+				<div class='user_threads__name'>{{thread.name}}</div>
+			</div>
+		</scroll-load>
+		<template v-else>This user hasn't started any threads yet</template>
 	</div>
 </template>
 
 <script>
+	import ScrollLoad from '../ScrollLoad'
+	import ThreadPost from '../ThreadPost'
+
+	import AjaxErrorHandler from '../../assets/js/errorHandler'
+
 	export default {
 		name: 'userThreads',
-		components: {},
-		computed: {},
-		methods: {}
+		props: ['username'],
+		components: {
+			ThreadPost,
+			ScrollLoad
+		},
+		data () {
+			return {
+				threads: [],
+				loadingThreads: false,
+				nextURL: ''
+			}
+		},
+		methods: {
+			loadNewThreads () {
+				if(this.nextURL === null) return
+
+				this.loadingThreads = true
+
+				this.axios
+					.get(this.nextURL)
+					.then(res => {
+						this.loadingThreads = false
+
+						this.threads.push(...res.data.Threads)
+						this.nextURL = res.data.meta.nextURL
+					})
+					.catch((e) => {
+						this.loadingThreads = false
+
+						AjaxErrorHandler(this.$store)(e)
+					})
+			},
+			goToThread (thread) {
+				this.$router.push('/thread/' + thread.slug + '/' + thread.id)
+			}
+		},
+		created () {
+			this.axios
+				.get(`/api/v1/user/${this.$route.params.username}?threads=true`)
+				.then(res => {
+					this.threads = res.data.Threads
+					this.nextURL = res.data.meta.nextURL
+				})
+				.catch(AjaxErrorHandler(this.$store))
+		}
 	}
 </script>
 
 <style lang='scss' scoped>
 	@import '../../assets/scss/variables.scss';
+
+	.user_threads {
+		@at-root #{&}__title {
+			font-size: 1.5rem;
+			margin-bottom: 1rem;
+		}
+
+		@at-root #{&}__thread {
+			border-top: thin solid $color__gray--primary;
+			padding: 0.75rem;
+			cursor: pointer;
+			background-color: #fff;
+
+			transition: all 0.2s;
+
+			&:hover {
+				background-color: $color__lightgray--primary;
+			}
+
+			@at-root #{&}--last {
+				border-bottom: thin solid $color__gray--primary;
+			}
+		}
+		@at-root #{&}__thread_bar {
+			display: flex;
+			margin-bottom: 0.25rem;
+		}
+		@at-root #{&}__date {
+			margin-left: 0.5rem;
+			color: $color__gray--darkest;
+		}
+		@at-root #{&}__name {
+			font-size: 1.25rem;
+		}
+	}
 </style>