Add loading previous posts (as well as new ones

src/components/ScrollLoad.vue

@@ -1,12 +1,22 @@
 <template>
 	<div class='scroll_load'>
+		<div class='scroll_load__button' :class='{"scroll_load__button--hidden": !showPrevious}'>
+			<loading-button
+				class='button'
+				:loading='loading'
+				:dark='true'
+				@click='$emit("loadPrevious")'
+			>
+				Load previous posts...
+			</loading-button>
+		</div>
 		<slot></slot>
-		<div class='scroll_load__button' :class='{"scroll_load__button--hidden": !show}'>
+		<div class='scroll_load__button' :class='{"scroll_load__button--hidden": !showNext}'>
 			<loading-button
 				class='button'
 				:loading='loading'
 				:dark='true'
-				@click='$emit("load")'
+				@click='$emit("loadNext")'
 			>
 				Load more posts...
 			</loading-button>
@@ -20,7 +30,7 @@
 
 	export default {
 		name: 'ScrollLoad',
-		props: ['loading', 'show'],
+		props: ['loading', 'showNext', 'showPrevious'],
 		components: {
 			LoadingButton
 		},
@@ -28,7 +38,11 @@
 			onScroll (e) {
 				if(document.body.scrollHeight - document.body.scrollTop - 150 <= document.body.clientHeight) {
 					if(!this.loading) {
-						this.$emit('load')
+						this.$emit('loadNext')
+					}
+				} else if(document.body.scrollTop <= 200) {
+					if(!this.loading) {
+						this.$emit('loadPrevious')
 					}
 				}
 			}

src/components/routes/Thread.vue

@@ -26,13 +26,15 @@
 		<div class='posts'>
 			<scroll-load
 				:loading='loadingPosts'
-				:show='$store.state.thread.nextURL !== null'
-				@load='loadNewPosts'
+				:showNext='$store.state.thread.nextURL !== null'
+				:showPrevious='$store.state.thread.previousURL !== null'
+				@loadNext='loadNextPosts'
+				@loadPrevious='loadPreviousPosts'
 			>
 				<thread-post
 					v-for='(post, index) in posts'
 					@reply='replyUser'
-					@goToPost='goToPost'
+					@goToPost='$router.push({ params: { post_id: post.id } })'
 					:post='post'
 					:show-reply='true'
 					:highlight='highlightedPostIndex === index'
@@ -114,33 +116,71 @@
 			addPost () {
 				this.$store.dispatch('addPostAsync', this);
 			},
-			loadNewPosts () {
-				this.$store.dispatch('loadNewPostsAsync', this);
+			loadNextPosts () {
+				let vue = this
+				this.$store.dispatch('loadPostsAsync', { vue, previous: false });
 			},
-			goToPost (postId) {
+			loadPreviousPosts () {
+				let vue = this
+				this.$store.dispatch('loadPostsAsync', { vue, previous: true });
+			},
+			loadInitialPosts () {
+				let postId = this.$route.params.post_id
+				let apiURL = '/api/v1/thread/' + this.$route.params.id
+				if(postId) {
+					apiURL += '?postId=' + postId
+				}
+
+				console.log('here')
+
+				this.axios
+					.get(apiURL)
+					.then(res => {
+						this.$store.commit('setThread', res.data)
+						this.$store.commit('setNextURL', res.data.meta.nextURL)
+						this.$store.commit('setPreviousURL', res.data.meta.previousURL)
+						this.$store.commit('setPosts', res.data.Posts)
+
+						if(postId) {
+							this.highlightPost(+postId)
+						}
+					}).catch(AjaxErrorHandler(this.$store))
+
+			},	
+			goToPost (id) {
+				this.$router.push({ params: { post_id: id } })
+				this.loadInitialPosts()
+			},
+			highlightPost (postId) {
 				for(var i = 0; i < this.posts.length; i++) {
 					let post = this.posts[i]
 
 					if(post.id === postId) {
-						let postTop = this.$refs.posts[i].$el.getBoundingClientRect().top
-						let header = this.$refs.title.getBoundingClientRect().height
-						window.scrollTo(0, postTop - header - 32)
+						this.$nextTick(() => {
+							let postTop = this.$refs.posts[i].$el.getBoundingClientRect().top
+							let header = this.$refs.title.getBoundingClientRect().height
+							window.scrollTo(0, postTop - header - 32)
+
+							this.highlightedPostIndex = i
 
-						this.highlightedPostIndex = i
-						setTimeout(() => {
-							if(this.highlightedPostIndex === i) {
-								this.highlightedPostIndex = null
-							}
-						}, 3000)
+							setTimeout(() => {
+								if(this.highlightedPostIndex === i) {
+									this.highlightedPostIndex = null
+								}
+							}, 3000)
+						})
 
 						break;
 					}
 				}
 			}
 		},
+		watch: {
+			'$route': 'loadInitialPosts'
+		},
 		created () {
-			var self = this;
-			var setHeader = function() {
+			let self = this;
+			let setHeader = function() {
 				if(!self.$refs.title) return;
 
 				if(self.$refs.title.getBoundingClientRect().top <= 32) {
@@ -153,20 +193,7 @@
 			setHeader();
 			document.addEventListener('scroll', throttle(setHeader, 200));
 
-			let apiURL = '/api/v1/thread/' + this.$route.params.id
-
-			if(this.$route.params.post_id) {
-				apiURL += '?postId=' + this.$route.params.post_id 
-			}
-
-			this.axios
-				.get(apiURL)
-				.then(res => {
-					this.$store.commit('setThread', res.data)
-					this.$store.commit('setNextURL', res.data.meta.nextURL)
-					this.$store.commit('setPreviousURL', res.data.meta.previousURL)
-					this.$store.commit('setPosts', res.data.Posts)
-				}).catch(AjaxErrorHandler(this.$store))
+			this.loadInitialPosts()
 		}
 	}
 </script>

src/components/routes/UserPosts.vue

@@ -3,8 +3,8 @@
 		<div class='user_posts__title'>Posts by {{username}}</div>
 		<scroll-load
 			:loading='loadingPosts'
-			:show='nextURL !== null'
-			@load='loadNewPosts'
+			:showNext='nextURL !== null'
+			@loadNext='loadNewPosts'
 			v-if='sortedPosts.length'
 		>
 			<thread-post

src/components/routes/UserThreads.vue

@@ -3,8 +3,8 @@
 		<div class='user_threads__title'>Threads by {{username}}</div>
 		<scroll-load
 			:loading='loadingThreads'
-			:show='nextURL !== null'
-			@load='loadNewThreads'
+			:showNext='nextURL !== null'
+			@loadNext='loadNewThreads'
 			v-if='threads.length'
 		>
 			<div

src/store/modules/thread.js

@@ -51,23 +51,35 @@ const actions = {
 			})
 			.catch(AjaxErrorHandler(vue.$store))
 	},
-	loadNewPostsAsync ({ state, commit, rootState }, vue) {
+	loadPostsAsync ({ state, commit, rootState }, { vue, previous }) {
+		let URL
+
 		commit('setLoadingPostsState', true)
 
-		let nextURL = state.nextURL
+		if(previous) {
+			URL = state.previousURL
+		} else {
+			URL = state.nextURL
+		}
 
-		if(nextURL === null) {
+		if(URL === null) {
 			commit('setLoadingPostsState', false)
 		} else {
 			vue.axios
-				.get(nextURL)
+				.get(URL)
 				.then(res => {
 					let currentPostsIds = state.posts.map(p => p.id)
 					let filteredPosts =
 						res.data.Posts.filter(p => !currentPostsIds.includes(p.id))
 
-					commit('addPost', filteredPosts)
-					commit('setNextURL', res.data.meta.nextURL)
+					if(previous) {
+						commit('prependPosts', filteredPosts)
+						commit('setPreviousURL', res.data.meta.previousURL)
+					} else {
+						commit('addPost', filteredPosts)
+						commit('setNextURL', res.data.meta.nextURL)
+					}
+
 					commit('setLoadingPostsState', false)
 				})
 				.catch(AjaxErrorHandler(vue.$store))
@@ -87,6 +99,9 @@ const mutations = {
 			state.posts.push(post)
 		}
 	},
+	prependPosts (state, posts) {
+		state.posts.unshift(...posts)
+	},
 	addReplyBubble (state, post) {
 		let repliedToPost = {}, index