feat: make forum thread reload its search parameters from the url

frontend/src/views/forum/ForumThreadView.vue

@@ -10,7 +10,7 @@
       :totalPages
       :initialPage
       :totalItems="totalPosts"
-      @change-page="fetchForumThreadPosts($event.page, $event.pageSize, null)"
+      @change-page="changePage($event.page)"
       :page-size="pageSize"
     >
       <GeneralComment v-for="post in forumThreadPosts" :key="post.id" :comment="post" />
@@ -66,7 +66,10 @@ import PaginatedResults from '@/components/PaginatedResults.vue'
 import { nextTick } from 'vue'
 import { scrollToHash } from '@/services/helpers'
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { watch } from 'vue'
 
+const router = useRouter()
 const route = useRoute()
 const { t } = useI18n()
 
@@ -85,13 +88,24 @@ const sendingPost = ref(false)
 const bbcodeEditorEmptyInput = ref(false)
 const siteName = import.meta.env.VITE_SITE_NAME
 
-const fetchForumThreadPosts = async (page: number | null, page_size: number, post_id: number | null) => {
+const fetchForumThreadPostsFromUrl = async () => {
+  let page: number | null = 1
+  if (route.query.page) {
+    page = parseInt(route.query.page as string)
+    initialPage = page
+  } else if (route.query.post_id) {
+    page = null
+  }
+  const post_id = route.query.post_id ? parseInt(route.query.post_id as string) : null
   const paginatedPosts = await getForumThreadPosts({
     thread_id: parseInt(route.params.id as string),
-    page,
-    page_size,
-    post_id,
+    page: page,
+    page_size: pageSize.value,
+    post_id: post_id,
   })
+  // emptying this variable resets the pagination
+  forumThreadPosts.value.length = 0
+  await nextTick()
   forumThreadPosts.value = paginatedPosts.results
   totalPosts.value = paginatedPosts.total_items
   await nextTick()
@@ -103,17 +117,7 @@ const fetchForumThreadPosts = async (page: number | null, page_size: number, pos
 }
 
 onMounted(async () => {
-  let page: number | null = 1
-  if (route.query.page) {
-    page = parseInt(route.query.page as string)
-    initialPage = page
-  } else if (route.query.post_id) {
-    page = null
-  }
-  ;[forumThread.value] = await Promise.all([
-    getForumThread(+route.params.id!),
-    fetchForumThreadPosts(page, pageSize.value, route.query.post_id ? parseInt(route.query.post_id as string) : null),
-  ])
+  ;[forumThread.value] = await Promise.all([getForumThread(+route.params.id!), fetchForumThreadPostsFromUrl()])
 
   document.title = forumThread.value ? `${forumThread.value.name} - ${siteName}` : `Forum thread - ${siteName}`
 })
@@ -155,6 +159,19 @@ const sendPost = async () => {
   bbcodeEditorEmptyInput.value = true
   sendingPost.value = false
 }
+
+const changePage = (page: number) => {
+  currentPage.value = page
+  router.push({ query: { page } })
+}
+
+watch(
+  () => route.query,
+  () => {
+    fetchForumThreadPostsFromUrl()
+  },
+  { deep: true },
+)
 </script>
 
 <style scoped>