jeder/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor(client): use setup syntax

Browse source
This commit is contained in:
syuilo 2022-06-28 14:34:44 +09:00
parent 31d73f4659
commit 57bb6e611f
1 changed files with 64 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
packages/client/src/components/notification.vue
View file

@ -72,8 +72,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue'; import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import XReactionIcon from './reaction-icon.vue'; import XReactionIcon from './reaction-icon.vue';
import MkFollowButton from './follow-button.vue'; import MkFollowButton from './follow-button.vue';
@ -86,36 +86,22 @@ import * as os from '@/os';
import { stream } from '@/stream'; import { stream } from '@/stream';
import { useTooltip } from '@/scripts/use-tooltip'; import { useTooltip } from '@/scripts/use-tooltip';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { notification: misskey.entities.Notification;
XReactionIcon, MkFollowButton, withTime?: boolean;
}, full?: boolean;
}>(), {
withTime: false,
full: false,
});
props: { const elRef = ref<HTMLElement>(null);
notification: { const reactionRef = ref(null);
type: Object,
required: true,
},
withTime: {
type: Boolean,
required: false,
default: false,
},
full: {
type: Boolean,
required: false,
default: false,
},
},
setup(props) { let readObserver: IntersectionObserver | undefined;
const elRef = ref<HTMLElement>(null); let connection;
const reactionRef = ref(null);
let readObserver: IntersectionObserver | undefined; onMounted(() => {
let connection;
onMounted(() => {
if (!props.notification.isRead) { if (!props.notification.isRead) {
readObserver = new IntersectionObserver((entries, observer) => { readObserver = new IntersectionObserver((entries, observer) => {
if (!entries.some(entry => entry.isIntersecting)) return; if (!entries.some(entry => entry.isIntersecting)) return;
@ -134,60 +120,43 @@ export default defineComponent({
readObserver.disconnect(); readObserver.disconnect();
}); });
} }
}); });
onUnmounted(() => { onUnmounted(() => {
if (readObserver) readObserver.disconnect(); if (readObserver) readObserver.disconnect();
if (connection) connection.dispose(); if (connection) connection.dispose();
}); });
const followRequestDone = ref(false); const followRequestDone = ref(false);
const groupInviteDone = ref(false); const groupInviteDone = ref(false);
const acceptFollowRequest = () => { const acceptFollowRequest = () => {
followRequestDone.value = true; followRequestDone.value = true;
os.api('following/requests/accept', { userId: props.notification.user.id }); os.api('following/requests/accept', { userId: props.notification.user.id });
}; };
const rejectFollowRequest = () => { const rejectFollowRequest = () => {
followRequestDone.value = true; followRequestDone.value = true;
os.api('following/requests/reject', { userId: props.notification.user.id }); os.api('following/requests/reject', { userId: props.notification.user.id });
}; };
const acceptGroupInvitation = () => { const acceptGroupInvitation = () => {
groupInviteDone.value = true; groupInviteDone.value = true;
os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id }); os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
}; };
const rejectGroupInvitation = () => { const rejectGroupInvitation = () => {
groupInviteDone.value = true; groupInviteDone.value = true;
os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id }); os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
}; };
useTooltip(reactionRef, (showing) => { useTooltip(reactionRef, (showing) => {
os.popup(XReactionTooltip, { os.popup(XReactionTooltip, {
showing, showing,
reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction, reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
emojis: props.notification.note.emojis, emojis: props.notification.note.emojis,
targetElement: reactionRef.value.$el, targetElement: reactionRef.value.$el,
}, {}, 'closed'); }, {}, 'closed');
});
return {
getNoteSummary: (note: misskey.entities.Note) => getNoteSummary(note),
followRequestDone,
groupInviteDone,
notePage,
userPage,
acceptFollowRequest,
rejectFollowRequest,
acceptGroupInvitation,
rejectGroupInvitation,
elRef,
reactionRef,
i18n,
};
},
}); });
</script> </script>