mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
refactor: ♻️ Rewrite timeline rendering code
This commit is contained in:
Jesse Wierzbinski
parent
091615b04e
commit
d6f36eaecf
24 changed files with 392 additions and 435 deletions
|
|
@ -1,23 +1,36 @@
|
|||
<template>
|
||||
<Timeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
|
||||
<Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
|
||||
:error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
|
||||
:update-item="updateItem" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Status } from "@lysand-org/client/types";
|
||||
import Timeline from "./timeline.vue";
|
||||
|
||||
const client = useClient();
|
||||
|
||||
const props = defineProps<{
|
||||
id?: string;
|
||||
id: string;
|
||||
}>();
|
||||
|
||||
const client = useClient();
|
||||
const timelineParameters = ref({});
|
||||
const { timeline, loadNext, loadPrev } = useAccountTimeline(
|
||||
client.value,
|
||||
props.id || null,
|
||||
timelineParameters,
|
||||
);
|
||||
const {
|
||||
error,
|
||||
hasReachedEnd,
|
||||
isLoading,
|
||||
items,
|
||||
loadNext,
|
||||
loadPrev,
|
||||
removeItem,
|
||||
updateItem,
|
||||
} = useAccountTimeline(client.value, props.id);
|
||||
|
||||
// Example of how to handle global events
|
||||
useListen("note:delete", ({ id }) => {
|
||||
timeline.value = timeline.value.filter((note) => note.id !== id);
|
||||
removeItem(id);
|
||||
});
|
||||
|
||||
useListen("note:edit", (updatedNote) => {
|
||||
updateItem(updatedNote);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,18 +1,32 @@
|
|||
<template>
|
||||
<Timeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
|
||||
<Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
|
||||
:error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
|
||||
:update-item="updateItem" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Status } from "@lysand-org/client/types";
|
||||
import { useHomeTimeline } from "~/composables/HomeTimeline";
|
||||
import Timeline from "./timeline.vue";
|
||||
|
||||
const client = useClient();
|
||||
const timelineParameters = ref({});
|
||||
const { timeline, loadNext, loadPrev } = useHomeTimeline(
|
||||
client.value,
|
||||
timelineParameters,
|
||||
);
|
||||
|
||||
const {
|
||||
error,
|
||||
hasReachedEnd,
|
||||
isLoading,
|
||||
items,
|
||||
loadNext,
|
||||
loadPrev,
|
||||
removeItem,
|
||||
updateItem,
|
||||
} = useHomeTimeline(client.value);
|
||||
|
||||
// Example of how to handle global events
|
||||
useListen("note:delete", ({ id }) => {
|
||||
timeline.value = timeline.value.filter((note) => note.id !== id);
|
||||
removeItem(id);
|
||||
});
|
||||
|
||||
useListen("note:edit", (updatedNote) => {
|
||||
updateItem(updatedNote);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,18 +1,32 @@
|
|||
<template>
|
||||
<Timeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
|
||||
<Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
|
||||
:error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
|
||||
:update-item="updateItem" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Status } from "@lysand-org/client/types";
|
||||
import { useLocalTimeline } from "~/composables/LocalTimeline";
|
||||
import Timeline from "./timeline.vue";
|
||||
|
||||
const client = useClient();
|
||||
const timelineParameters = ref({});
|
||||
const { timeline, loadNext, loadPrev } = useLocalTimeline(
|
||||
client.value,
|
||||
timelineParameters,
|
||||
);
|
||||
|
||||
const {
|
||||
error,
|
||||
hasReachedEnd,
|
||||
isLoading,
|
||||
items,
|
||||
loadNext,
|
||||
loadPrev,
|
||||
removeItem,
|
||||
updateItem,
|
||||
} = useLocalTimeline(client.value);
|
||||
|
||||
// Example of how to handle global events
|
||||
useListen("note:delete", ({ id }) => {
|
||||
timeline.value = timeline.value.filter((note) => note.id !== id);
|
||||
removeItem(id);
|
||||
});
|
||||
|
||||
useListen("note:edit", (updatedNote) => {
|
||||
updateItem(updatedNote);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,47 +1,24 @@
|
|||
<template>
|
||||
<Notif v-for="notif of timeline" :key="notif.id" :notification="notif" />
|
||||
<span ref="skeleton"></span>
|
||||
<Notif 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">
|
||||
<iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
|
||||
<span>No more notifications, you've seen them all</span>
|
||||
</div>
|
||||
<Timeline type="notification" :items="(items as Notification[])" :is-loading="isLoading"
|
||||
:has-reached-end="hasReachedEnd" :error="error" :load-next="loadNext" :load-prev="loadPrev"
|
||||
:remove-item="removeItem" :update-item="updateItem" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Notif from "../social-elements/notifications/notif.vue";
|
||||
import type { Notification } from "@lysand-org/client/types";
|
||||
import { useNotificationTimeline } from "~/composables/NotificationTimeline";
|
||||
import Timeline from "./timeline.vue";
|
||||
|
||||
const client = useClient();
|
||||
|
||||
const isLoading = ref(true);
|
||||
|
||||
const timelineParameters = ref({});
|
||||
const hasReachedEnd = ref(false);
|
||||
const { timeline, loadNext, loadPrev } = useNotificationTimeline(
|
||||
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 {
|
||||
error,
|
||||
hasReachedEnd,
|
||||
isLoading,
|
||||
items,
|
||||
loadNext,
|
||||
loadPrev,
|
||||
removeItem,
|
||||
updateItem,
|
||||
} = useNotificationTimeline(client.value);
|
||||
</script>
|
||||
|
|
@ -1,18 +1,32 @@
|
|||
<template>
|
||||
<Timeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
|
||||
<Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
|
||||
:error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
|
||||
:update-item="updateItem" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Status } from "@lysand-org/client/types";
|
||||
import { usePublicTimeline } from "~/composables/PublicTimeline";
|
||||
import Timeline from "./timeline.vue";
|
||||
|
||||
const client = useClient();
|
||||
const timelineParameters = ref({});
|
||||
const { timeline, loadNext, loadPrev } = usePublicTimeline(
|
||||
client.value,
|
||||
timelineParameters,
|
||||
);
|
||||
|
||||
const {
|
||||
error,
|
||||
hasReachedEnd,
|
||||
isLoading,
|
||||
items,
|
||||
loadNext,
|
||||
loadPrev,
|
||||
removeItem,
|
||||
updateItem,
|
||||
} = usePublicTimeline(client.value);
|
||||
|
||||
// Example of how to handle global events
|
||||
useListen("note:delete", ({ id }) => {
|
||||
timeline.value = timeline.value.filter((note) => note.id !== id);
|
||||
removeItem(id);
|
||||
});
|
||||
|
||||
useListen("note:edit", (updatedNote) => {
|
||||
updateItem(updatedNote);
|
||||
});
|
||||
</script>
|
||||
26
components/timelines/timeline-item.vue
Normal file
26
components/timelines/timeline-item.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<component :is="itemComponent" :element="item" @update="$emit('update', $event)"
|
||||
@delete="$emit('delete', item?.id)" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Notification, Status } from "@lysand-org/client/types";
|
||||
import { computed } from "vue";
|
||||
import NoteItem from "../social-elements/notes/note.vue";
|
||||
import NotificationItem from "../social-elements/notifications/notif.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
item?: Status | Notification;
|
||||
type: "status" | "notification";
|
||||
}>();
|
||||
|
||||
const itemComponent = computed(() => {
|
||||
if (props.type === "status") {
|
||||
return NoteItem;
|
||||
}
|
||||
if (props.type === "notification") {
|
||||
return NotificationItem;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,69 +1,92 @@
|
|||
<!-- Timeline.vue -->
|
||||
<template>
|
||||
<TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
|
||||
leave-to-class="opacity-0 scale-90">
|
||||
<Note v-for="note of timeline" :key="note.id" :note="note" />
|
||||
</TransitionGroup>
|
||||
<span ref="skeleton"></span>
|
||||
<Note v-for="_ of 5" v-if="!hasReachedEnd" :skeleton="true" />
|
||||
<div class="timeline">
|
||||
<TransitionGroup name="timeline-item" tag="div" class="timeline-items">
|
||||
<TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
|
||||
@delete="removeItem" />
|
||||
</TransitionGroup>
|
||||
|
||||
<div v-if="hasReachedEnd" class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
|
||||
<iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
|
||||
<span>No more posts, you've seen them all</span>
|
||||
<TimelineItem v-if="isLoading" :type="type" v-for="_ in 5" />
|
||||
|
||||
<div v-if="error" class="timeline-error">
|
||||
{{ error.message }}
|
||||
</div>
|
||||
|
||||
<div v-if="hasReachedEnd && items.length > 0"
|
||||
class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
|
||||
<span class="text-lg font-semibold">You've scrolled so far, there's nothing left to show.</span>
|
||||
<span class="text-sm">You can always go back and see what you missed.</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="hasReachedEnd && items.length === 0"
|
||||
class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
|
||||
<span class="text-lg font-semibold">There's nothing to show here.</span>
|
||||
<span class="text-sm">Either you're all caught up or there's nothing to show.</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!infiniteScroll.value" class="py-10 px-4">
|
||||
<Button theme="secondary" @click="loadNext" :disabled="isLoading" class="w-full">
|
||||
Load More
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-else ref="loadMoreTrigger" class="h-20"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Status } from "@lysand-org/client/types";
|
||||
import Note from "../social-elements/notes/note.vue";
|
||||
import type { Notification, Status } from "@lysand-org/client/types";
|
||||
import { useIntersectionObserver } from "@vueuse/core";
|
||||
import { onMounted, watch } from "vue";
|
||||
import Button from "~/packages/ui/components/buttons/button.vue";
|
||||
import { SettingIds } from "~/settings";
|
||||
import TimelineItem from "./timeline-item.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
timeline: Status[];
|
||||
loadNext: () => Promise<void>;
|
||||
loadPrev: () => Promise<void>;
|
||||
items: Status[] | Notification[];
|
||||
type: "status" | "notification";
|
||||
isLoading: boolean;
|
||||
hasReachedEnd: boolean;
|
||||
error: Error | null;
|
||||
loadNext: () => void;
|
||||
loadPrev: () => void;
|
||||
removeItem: (id: string) => void;
|
||||
updateItem: ((item: Status) => void) | ((item: Notification) => void);
|
||||
}>();
|
||||
|
||||
const isLoading = ref(true);
|
||||
const emit = defineEmits<(e: "update") => void>();
|
||||
|
||||
const hasReachedEnd = ref(false);
|
||||
const skeleton = ref<HTMLSpanElement | null>(null);
|
||||
const loadMoreTrigger = ref<HTMLElement | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
useIntersectionObserver(skeleton, async (entries) => {
|
||||
if (
|
||||
entries[0]?.isIntersecting &&
|
||||
!hasReachedEnd.value &&
|
||||
!isLoading.value
|
||||
) {
|
||||
isLoading.value = true;
|
||||
await props.loadNext();
|
||||
}
|
||||
});
|
||||
useIntersectionObserver(loadMoreTrigger, ([observer]) => {
|
||||
if (observer?.isIntersecting && !props.isLoading && !props.hasReachedEnd) {
|
||||
props.loadNext();
|
||||
}
|
||||
});
|
||||
|
||||
useListen("composer:send", () => {
|
||||
props.loadPrev();
|
||||
});
|
||||
|
||||
// Every 5 seconds, load newer posts (prev)
|
||||
useIntervalFn(() => {
|
||||
props.loadPrev();
|
||||
}, 10000);
|
||||
const infiniteScroll = useSetting(SettingIds.InfiniteScroll);
|
||||
|
||||
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;
|
||||
}
|
||||
() => props.items,
|
||||
() => {
|
||||
emit("update");
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
onMounted(() => {
|
||||
props.loadNext();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.timeline-item-enter-active,
|
||||
.timeline-item-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.timeline-item-enter-from,
|
||||
.timeline-item-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue