Fix pagination in profile timeline

This commit is contained in:
silverpill 2022-12-23 13:53:34 +00:00
parent d942127d06
commit 0da1700a7a
5 changed files with 18 additions and 17 deletions

View file

@ -65,6 +65,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from "vue" import { onMounted } from "vue"
import { $ } from "vue/macros"
import { PAGE_SIZE } from "@/api/common" import { PAGE_SIZE } from "@/api/common"
import { updateNotificationMarker } from "@/api/markers" import { updateNotificationMarker } from "@/api/markers"
@ -79,11 +80,11 @@ import { humanizeDate } from "@/utils/dates"
const { ensureAuthToken } = useCurrentUser() const { ensureAuthToken } = useCurrentUser()
const { getActorAddress } = useInstanceInfo() const { getActorAddress } = useInstanceInfo()
const { notifications } = useNotifications() let { notifications } = $(useNotifications())
onMounted(async () => { onMounted(async () => {
// Update notification timeline marker // Update notification timeline marker
const firstNotification = notifications.value[0] const firstNotification = notifications[0]
if (firstNotification) { if (firstNotification) {
await updateNotificationMarker( await updateNotificationMarker(
ensureAuthToken(), ensureAuthToken(),
@ -102,17 +103,17 @@ function getSenderInfo(notification: Notification): string {
} }
function onPostDeleted(notificationIndex: number) { function onPostDeleted(notificationIndex: number) {
notifications.value.splice(notificationIndex, 1) notifications.splice(notificationIndex, 1)
} }
function isPageFull(): boolean { function isPageFull(): boolean {
return notifications.value.length >= PAGE_SIZE return notifications.length >= PAGE_SIZE
} }
async function loadNextPage() { async function loadNextPage() {
const maxId = notifications.value[notifications.value.length - 1].id const maxId = notifications[notifications.length - 1].id
const newItems = await getNotifications(ensureAuthToken(), maxId) const newItems = await getNotifications(ensureAuthToken(), maxId)
notifications.value.push(...newItems) notifications = [...notifications, ...newItems]
} }
</script> </script>

View file

@ -553,7 +553,7 @@ async function loadNextPage(maxId: string) {
tabName !== "posts-with-replies", tabName !== "posts-with-replies",
maxId, maxId,
) )
posts.push(...nextPage) posts = [...posts, ...nextPage]
} }
async function loadFollowListNextPage() { async function loadFollowListNextPage() {

View file

@ -54,7 +54,7 @@ async function loadNextPage() {
const authToken = ensureAuthToken() const authToken = ensureAuthToken()
const offset = profiles.length const offset = profiles.length
const nextPage = await getProfiles(authToken, offset) const nextPage = await getProfiles(authToken, offset)
profiles.push(...nextPage) profiles = [...profiles, ...nextPage]
} }
</script> </script>

View file

@ -31,7 +31,7 @@ onMounted(async () => {
async function loadNextPage(maxId: string) { async function loadNextPage(maxId: string) {
const authToken = ensureAuthToken() const authToken = ensureAuthToken()
const nextPage = await getPublicTimeline(authToken, maxId) const nextPage = await getPublicTimeline(authToken, maxId)
posts.push(...nextPage) posts = [...posts, ...nextPage]
} }
</script> </script>

View file

@ -13,7 +13,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue" import { onMounted } from "vue"
import { $, $ref } from "vue/macros"
import { useRoute } from "vue-router" import { useRoute } from "vue-router"
import { Post, getTagTimeline } from "@/api/posts" import { Post, getTagTimeline } from "@/api/posts"
@ -22,24 +23,23 @@ import SidebarLayout from "@/components/SidebarLayout.vue"
import { useCurrentUser } from "@/store/user" import { useCurrentUser } from "@/store/user"
const route = useRoute() const route = useRoute()
const posts = ref<Post[]>([]) const { authToken } = $(useCurrentUser())
let posts = $ref<Post[]>([])
onMounted(async () => { onMounted(async () => {
const { authToken } = useCurrentUser() posts = await getTagTimeline(
posts.value = await getTagTimeline( authToken,
authToken.value,
route.params.tagName as string, route.params.tagName as string,
) )
}) })
async function loadNextPage(maxId: string) { async function loadNextPage(maxId: string) {
const { authToken } = useCurrentUser()
const nextPage = await getTagTimeline( const nextPage = await getTagTimeline(
authToken.value, authToken,
route.params.tagName as string, route.params.tagName as string,
maxId, maxId,
) )
posts.value.push(...nextPage) posts = [...posts, ...nextPage]
} }
</script> </script>