versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 11:39: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

21
components/timelines/Account.vue Normal file
View file

@ -0,0 +1,21 @@
<template>
<TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" @delete="noteDelete" />
</template>
<script lang="ts" setup>
const props = defineProps<{
id?: string;
}>();
const client = useMegalodon();
const timelineParameters = ref({});
const { timeline, loadNext, loadPrev } = useAccountTimeline(
client.value,
props.id ?? null,
timelineParameters,
);
const noteDelete = async (id: string) => {
timeline.value = timeline.value.filter((note) => note.id !== id);
};
</script>

16
components/timelines/Local.vue Normal file
View file

@ -0,0 +1,16 @@
<template>
<TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" @delete="noteDelete" />
</template>
<script lang="ts" setup>
const client = useMegalodon();
const timelineParameters = ref({});
const { timeline, loadNext, loadPrev } = useLocalTimeline(
client.value,
timelineParameters,
);
const noteDelete = async (id: string) => {
timeline.value = timeline.value.filter((note) => note.id !== id);
};
</script>

41
components/timelines/Public.vue
View file

@ -1,49 +1,16 @@
<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>
<TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" @delete="noteDelete" />
</template>
<script lang="ts" setup>
const client = useMegalodon();
const isLoading = ref(true);
const timelineParameters = ref({});
const hasReachedEnd = ref(false);
const { timeline, loadNext, loadPrev } = usePublicTimeline(
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;
}
});
const noteDelete = async (id: string) => {
timeline.value = timeline.value.filter((note) => note.id !== id);
};
</script>

62
components/timelines/timeline.vue Normal file
View file

@ -0,0 +1,62 @@
<template>
<ClientOnly>
<SocialElementsNotesNote @delete="emits('delete', note.id)" 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>
</template>
<script lang="ts" setup>
import type { Status } from '~/types/mastodon/status';
const props = defineProps<{
timeline: Status[];
loadNext: () => Promise<void>;
loadPrev: () => Promise<void>;
}>();
const emits = defineEmits<{
delete: [id: string];
}>();
const isLoading = ref(true);
const hasReachedEnd = ref(false);
const skeleton = ref<HTMLSpanElement | null>(null);
onMounted(() => {
useIntersectionObserver(skeleton, async (entries) => {
if (
entries[0].isIntersecting &&
!hasReachedEnd.value &&
!isLoading.value
) {
isLoading.value = true;
await props.loadNext();
}
});
});
// Every 5 seconds, load newer posts (prev)
useIntervalFn(() => {
props.loadPrev();
}, 5000);
watch(() => props.timeline, (newTimeline, oldTimeline) => {
// If posts are deleted, don't start loading more posts
if (newTimeline.length === oldTimeline.length - 1) return;
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>