add SkFetchNote to render a note by ID

1 files changed, 74 insertions, 0 deletions

diff --git a/packages/frontend/src/components/SkFetchNote.vue b/packages/frontend/src/components/SkFetchNote.vue
new file mode 100644
index 0000000000..57577aa15b
--- /dev/null
+++ b/packages/frontend/src/components/SkFetchNote.vue
@@ -0,0 +1,74 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkLazy @show="showing = true">
+	<MkLoading v-if="state === 'loading'"/>
+
+	<div v-if="state === 'error'">{{ i18n.ts.cannotLoadNote }}</div>
+
+	<DynamicNote v-if="state === 'done' && note" :note="note"/>
+</MkLazy>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/scripts/misskey-api';
+import DynamicNote from '@/components/DynamicNote.vue';
+
+const props = withDefaults(defineProps<{
+	noteId: string,
+	lazy?: boolean,
+}>(), {
+	lazy: true,
+});
+
+// Lazy-load, unless props.lazy is false.
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const showing = ref(!props.lazy);
+const state = ref<'loading' | 'error' | 'done'>('loading');
+const note = ref<Misskey.entities.Note | null>(null);
+
+watch(
+	[
+		() => props.noteId,
+		() => showing.value,
+	],
+	async ([noteId, show]) => {
+		// Wait until the note is visible to avoid bombarding the API with requests.
+		if (!show) return;
+
+		// Unload the old note
+		note.value = null;
+		state.value = 'loading';
+
+		// Fetch the new note
+		const newNote = await misskeyApi('notes/show', { noteId }).catch(() => null);
+
+		// Check for race conditions (ex. the note changed again while the first request was still running)
+		if (noteId !== props.noteId) return;
+
+		// Check for errors
+		if (!newNote) {
+			state.value = 'error';
+			return;
+		}
+
+		// Display the new note
+		note.value = newNote;
+		state.value = 'done';
+	},
+	{
+		immediate: true,
+	},
+);
+
+</script>
+
+<style module lang="scss">
+
+</style>