diff options
Diffstat (limited to 'packages/frontend/src/components/MkReactionsViewer.reaction.vue')
| -rw-r--r-- | packages/frontend/src/components/MkReactionsViewer.reaction.vue | 52 |
1 files changed, 35 insertions, 17 deletions
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue index d0db515219..d532ef9b66 100644 --- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue +++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue @@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { computed, onMounted, shallowRef, watch } from 'vue'; +import { computed, inject, onMounted, shallowRef, watch } from 'vue'; import * as Misskey from 'misskey-js'; import XDetails from '@/components/MkReactionsViewer.details.vue'; import MkReactionIcon from '@/components/MkReactionIcon.vue'; @@ -36,6 +36,12 @@ const props = defineProps<{ note: Misskey.entities.Note; }>(); +const mock = inject<boolean>('mock', false); + +const emit = defineEmits<{ + (ev: 'reactionToggled', emoji: string, newCount: number): void; +}>(); + const buttonEl = shallowRef<HTMLElement>(); const canToggle = computed(() => !props.reaction.match(/@\w/) && $i); @@ -53,6 +59,11 @@ async function toggleReaction() { }); if (confirm.canceled) return; + if (mock) { + emit('reactionToggled', props.reaction, (props.count - 1)); + return; + } + os.api('notes/reactions/delete', { noteId: props.note.id, }).then(() => { @@ -64,6 +75,11 @@ async function toggleReaction() { } }); } else { + if (mock) { + emit('reactionToggled', props.reaction, (props.count + 1)); + return; + } + os.api('notes/reactions/create', { noteId: props.note.id, reaction: props.reaction, @@ -92,24 +108,26 @@ onMounted(() => { if (!props.isInitial) anime(); }); -useTooltip(buttonEl, async (showing) => { - const reactions = await os.apiGet('notes/reactions', { - noteId: props.note.id, - type: props.reaction, - limit: 11, - _cacheKey_: props.count, - }); +if (!mock) { + useTooltip(buttonEl, async (showing) => { + const reactions = await os.apiGet('notes/reactions', { + noteId: props.note.id, + type: props.reaction, + limit: 11, + _cacheKey_: props.count, + }); - const users = reactions.map(x => x.user); + const users = reactions.map(x => x.user); - os.popup(XDetails, { - showing, - reaction: props.reaction, - users, - count: props.count, - targetElement: buttonEl.value, - }, {}, 'closed'); -}, 100); + os.popup(XDetails, { + showing, + reaction: props.reaction, + users, + count: props.count, + targetElement: buttonEl.value, + }, {}, 'closed'); + }, 100); +} </script> <style lang="scss" module> |