versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Timeline refactors, timelines now auto-refresh

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-04-26 21:39:26 -10:00
parent 3004bf4816
commit b14a616ef4
No known key found for this signature in database
7 changed files with 135 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

46
pages/[username]/index.vue
View file

@ -1,19 +1,7 @@
<template>
<NuxtLayout name="app">
<SocialElementsUsersAccount v-if="isMobile" :account="account ?? undefined" />
<ClientOnly>
<div class="w-full">
<SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
<span ref="skeleton"></span>
<SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<Icon name="tabler:message-off" class="h-6 w-6" />
<span>No more posts, you've seen them all</span>
</div>
</div>
</ClientOnly>
<TimelinesAccount :id="accountId ?? undefined" :key="accountId ?? undefined" />
<template #right>
<SocialElementsUsersAccount v-if="!isMobile" :account="account ?? undefined" />
@ -44,42 +32,10 @@ const account = computed<Account | null>(
);
const accountId = computed(() => account.value?.id ?? null);
onMounted(async () => {
useIntersectionObserver(skeleton, async (entries) => {
if (
entries[0].isIntersecting &&
!hasReachedEnd.value &&
!isLoadingTimeline.value
) {
isLoadingTimeline.value = true;
await loadNext();
}
});
});
useServerSeoMeta({
title: account.value?.display_name,
description: account.value?.note,
ogImage: account.value?.avatar,
profileUsername: account.value?.acct,
});
const isLoadingTimeline = ref(true);
const timelineParameters = ref({});
const hasReachedEnd = ref(false);
const { timeline, loadNext, loadPrev } = useAccountTimeline(
client.value,
accountId,
timelineParameters,
);
const skeleton = ref<HTMLSpanElement | null>(null);
watch(timeline, (newTimeline, oldTimeline) => {
isLoadingTimeline.value = false;
// If less than NOTES_PER_PAGE statuses are returned, we have reached the end
if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
hasReachedEnd.value = true;
}
});
</script>

44
pages/local.vue
View file

@ -1,51 +1,9 @@
<template>
<ClientOnly>
<SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
<span ref="skeleton"></span>
<SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<Icon name="tabler:message-off" class="h-6 w-6" />
<span>No more posts, you've seen them all</span>
</div>
</ClientOnly>
<TimelinesLocal />
</template>
<script lang="ts" setup>
definePageMeta({
layout: "app",
});
const client = useMegalodon();
const isLoading = ref(true);
const timelineParameters = ref({});
const hasReachedEnd = ref(false);
const { timeline, loadNext, loadPrev } = useLocalTimeline(
client.value,
timelineParameters,
);
const skeleton = ref<HTMLSpanElement | null>(null);
onMounted(() => {
useIntersectionObserver(skeleton, async (entries) => {
if (
entries[0].isIntersecting &&
!hasReachedEnd.value &&
!isLoading.value
) {
isLoading.value = true;
await loadNext();
}
});
});
watch(timeline, (newTimeline, oldTimeline) => {
isLoading.value = false;
// If less than NOTES_PER_PAGE statuses are returned, we have reached the end
if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
hasReachedEnd.value = true;
}
});
</script>