Load new posts on a thread since last api load

src/components/routes/Thread.vue

@@ -58,9 +58,10 @@
 	import ThreadPost from '../ThreadPost'
 	import ThreadPostPlaceholder from '../ThreadPostPlaceholder'
 
-	import throttle from 'lodash.throttle'
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
 
+	import throttle from 'lodash.throttle'
+
 	export default {
 		name: 'Thread',
 		components: {
@@ -197,6 +198,15 @@
 			document.addEventListener('scroll', throttle(setHeader, 200));
 
 			this.loadInitialPosts()
+			
+			socket.emit('join', 'thread/' + this.$route.params.id)
+			socket.on('new post', post => {
+				this.$store.dispatch('loadNewPostsSinceLoad', post)
+			})
+		},
+		destroyed () {
+			socket.emit('leave', 'thread/' + this.$route.params.id)
+			socket.off('new post')
 		}
 	}
 </script>

src/store/modules/thread.js

@@ -121,6 +121,18 @@ const actions = {
 					AjaxErrorHandler(vue.$store)
 				})
 		}
+	},
+	loadNewPostsSinceLoad ({ state,  commit }, post) {
+		if(state.nextPostsCount < 10) {
+			let nextURL = state.nextURL
+			let baseURL = '/api/v1/thread/' + state.threadId + '?limit=10&from='
+
+			commit('incrementNextPostsCount')
+			
+			if(nextURL === null) {
+				commit('setNextURL', baseURL + (post.postNumber-1))
+			}
+		}
 	}
 }
 
@@ -180,6 +192,9 @@ const mutations = {
 	setPostCounts (state, meta) {
 		state.previousPostsCount = meta.previousPostsCount
 		state.nextPostsCount = meta.nextPostsCount
+	},
+	incrementNextPostsCount (state) {
+		state.nextPostsCount++
 	}
 }