diff --git a/frontend/src/views/forum/ForumThreadView.vue b/frontend/src/views/forum/ForumThreadView.vue
index 3f6c3a86..215cae0c 100644
--- a/frontend/src/views/forum/ForumThreadView.vue
+++ b/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"
>
@@ -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 },
+)