feat: ハッシュタグTL (#175)

* enhance: ハッシュタグをリアルタイムで更新するように * 新しい投稿が追加されるたびリロードするのを防ぐように * update changelog --------- Co-authored-by: Esurio <[email protected]>
bettaku · Sep 13, 2024 · f080a57 · f080a57
1 parent 212368d
commit f080a57
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 5 deletions.
diff --git a/CHANGELOG_engawa.md b/CHANGELOG_engawa.md
@@ -28,6 +28,7 @@
 
 ### Server
 - Breaking: OpenSearchを利用不可に
+- ハッシュタグをストリーミングで流すように
 
 ### Misc
 

diff --git a/packages/backend/src/server/api/endpoints/hashtags/search.ts b/packages/backend/src/server/api/endpoints/hashtags/search.ts
@@ -42,7 +42,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const hashtags = await this.hashtagsRepository.createQueryBuilder('tag')
-				.where('tag.name like :q', { q: sqlLikeEscape(ps.query.toLowerCase()) + '%' })
+				.where('tag.name ILIKE :q', { q: sqlLikeEscape(ps.query.toLowerCase()) + '%' })
 				.orderBy('tag.mentionedLocalUsersCount', 'DESC')
 				.groupBy('tag.id')
 				.limit(ps.limit)

diff --git a/packages/cherrypick-js/etc/cherrypick-js.api.md b/packages/cherrypick-js/etc/cherrypick-js.api.md
@@ -734,7 +734,7 @@ export type Channels = {
     };
     hashtag: {
         params: {
-            q?: string;
+            q?: string[][];
         };
         events: {
             note: (payload: Note) => void;

diff --git a/packages/cherrypick-js/src/streaming.types.ts b/packages/cherrypick-js/src/streaming.types.ts
@@ -147,7 +147,7 @@ export type Channels = {
 	};
 	hashtag: {
 		params: {
-			q?: string;
+			q?: string[][];
 		};
 		events: {
 			note: (payload: Note) => void;

diff --git a/packages/frontend/src/pages/tag.vue b/packages/frontend/src/pages/tag.vue
@@ -20,14 +20,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import MkNotes from '@/components/MkNotes.vue';
 import MkButton from '@/components/MkButton.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import * as os from '@/os.js';
+import { useStream } from '@/stream';
+import * as Misskey from 'cherrypick-js';
+import { globalEvents } from '@/events';
 
 const props = defineProps<{
 	tag: string;
@@ -42,13 +45,58 @@ const pagination = {
 };
 const notes = ref<InstanceType<typeof MkNotes>>();
 
+//#region ChannelConnection
+let connection: Misskey.ChannelConnection | null = null;
+
+const stream = useStream();
+
+function connectChannel() {
+	connection = stream.useChannel('hashtag', {
+		q: [[props.tag]],
+	});
+	connection?.on('note', note => {
+		notes.value?.pagingComponent?.prepend(note);
+	});
+}
+
+function disconnectChannel() {
+	if (connection) connection.dispose();
+}
+
+function refreshChannel() {
+	if (!defaultStore.state.disableStreamingTimeline) {
+		disconnectChannel();
+		connectChannel();
+	}
+}
+
+onMounted(() => {
+	globalEvents.on('reloadTimeline',() => reloadTimeline());
+});
+
+onUnmounted(() => {
+	disconnectChannel();
+});
+
+refreshChannel();
+
+function reloadTimeline() {
+	return new Promise<void>((res) => {
+		if (notes.value == null) return;
+
+		notes.value.pagingComponent?.reload().then(() => {
+			res();
+		});
+	});
+}
+//#endregion
+
 async function post() {
 	defaultStore.set('postFormHashtags', props.tag);
 	defaultStore.set('postFormWithHashtags', true);
 	await os.post();
 	defaultStore.set('postFormHashtags', '');
 	defaultStore.set('postFormWithHashtags', false);
-	notes.value?.pagingComponent?.reload();
 }
 
 const headerActions = computed(() => []);
@@ -59,6 +107,10 @@ definePageMetadata(() => ({
 	title: props.tag,
 	icon: 'ti ti-hash',
 }));
+
+defineExpose({
+	reloadTimeline,
+});
 </script>
 
 <style lang="scss" module>