diff options
| -rw-r--r-- | packages/client/src/components/notification.vue | 149 |
1 files changed, 59 insertions, 90 deletions
diff --git a/packages/client/src/components/notification.vue b/packages/client/src/components/notification.vue index 26fbeecb68..32f9fd07d8 100644 --- a/packages/client/src/components/notification.vue +++ b/packages/client/src/components/notification.vue @@ -72,8 +72,8 @@ </div> </template> -<script lang="ts"> -import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue'; +<script lang="ts" setup> +import { ref, onMounted, onUnmounted, watch } from 'vue'; import * as misskey from 'misskey-js'; import XReactionIcon from './reaction-icon.vue'; import MkFollowButton from './follow-button.vue'; @@ -86,108 +86,77 @@ import * as os from '@/os'; import { stream } from '@/stream'; import { useTooltip } from '@/scripts/use-tooltip'; -export default defineComponent({ - components: { - XReactionIcon, MkFollowButton, - }, - - props: { - notification: { - type: Object, - required: true, - }, - withTime: { - type: Boolean, - required: false, - default: false, - }, - full: { - type: Boolean, - required: false, - default: false, - }, - }, +const props = withDefaults(defineProps<{ + notification: misskey.entities.Notification; + withTime?: boolean; + full?: boolean; +}>(), { + withTime: false, + full: false, +}); - setup(props) { - const elRef = ref<HTMLElement>(null); - const reactionRef = ref(null); +const elRef = ref<HTMLElement>(null); +const reactionRef = ref(null); - let readObserver: IntersectionObserver | undefined; - let connection; +let readObserver: IntersectionObserver | undefined; +let connection; - onMounted(() => { - if (!props.notification.isRead) { - readObserver = new IntersectionObserver((entries, observer) => { - if (!entries.some(entry => entry.isIntersecting)) return; - stream.send('readNotification', { - id: props.notification.id, - }); - observer.disconnect(); - }); +onMounted(() => { + if (!props.notification.isRead) { + readObserver = new IntersectionObserver((entries, observer) => { + if (!entries.some(entry => entry.isIntersecting)) return; + stream.send('readNotification', { + id: props.notification.id, + }); + observer.disconnect(); + }); - readObserver.observe(elRef.value); + readObserver.observe(elRef.value); - connection = stream.useChannel('main'); - connection.on('readAllNotifications', () => readObserver.disconnect()); + connection = stream.useChannel('main'); + connection.on('readAllNotifications', () => readObserver.disconnect()); - watch(props.notification.isRead, () => { - readObserver.disconnect(); - }); - } - }); - - onUnmounted(() => { - if (readObserver) readObserver.disconnect(); - if (connection) connection.dispose(); + watch(props.notification.isRead, () => { + readObserver.disconnect(); }); + } +}); - const followRequestDone = ref(false); - const groupInviteDone = ref(false); +onUnmounted(() => { + if (readObserver) readObserver.disconnect(); + if (connection) connection.dispose(); +}); - const acceptFollowRequest = () => { - followRequestDone.value = true; - os.api('following/requests/accept', { userId: props.notification.user.id }); - }; +const followRequestDone = ref(false); +const groupInviteDone = ref(false); - const rejectFollowRequest = () => { - followRequestDone.value = true; - os.api('following/requests/reject', { userId: props.notification.user.id }); - }; +const acceptFollowRequest = () => { + followRequestDone.value = true; + os.api('following/requests/accept', { userId: props.notification.user.id }); +}; - const acceptGroupInvitation = () => { - groupInviteDone.value = true; - os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id }); - }; +const rejectFollowRequest = () => { + followRequestDone.value = true; + os.api('following/requests/reject', { userId: props.notification.user.id }); +}; - const rejectGroupInvitation = () => { - groupInviteDone.value = true; - os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id }); - }; +const acceptGroupInvitation = () => { + groupInviteDone.value = true; + os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id }); +}; - useTooltip(reactionRef, (showing) => { - os.popup(XReactionTooltip, { - showing, - reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction, - emojis: props.notification.note.emojis, - targetElement: reactionRef.value.$el, - }, {}, 'closed'); - }); +const rejectGroupInvitation = () => { + groupInviteDone.value = true; + os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id }); +}; - return { - getNoteSummary: (note: misskey.entities.Note) => getNoteSummary(note), - followRequestDone, - groupInviteDone, - notePage, - userPage, - acceptFollowRequest, - rejectFollowRequest, - acceptGroupInvitation, - rejectGroupInvitation, - elRef, - reactionRef, - i18n, - }; - }, +useTooltip(reactionRef, (showing) => { + os.popup(XReactionTooltip, { + showing, + reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction, + emojis: props.notification.note.emojis, + targetElement: reactionRef.value.$el, + }, {}, 'closed'); }); </script> |