profxadke/misskey
1
0
Fork 0
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
Download patch file Download diff file Expand all files Collapse all files

159
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,108 +86,77 @@ 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; if (!props.notification.isRead) {
readObserver = new IntersectionObserver((entries, observer) => {
onMounted(() => { if (!entries.some(entry => entry.isIntersecting)) return;
if (!props.notification.isRead) { stream.send('readNotification', {
readObserver = new IntersectionObserver((entries, observer) => { id: props.notification.id,
if (!entries.some(entry => entry.isIntersecting)) return; });
stream.send('readNotification', { observer.disconnect();
id: props.notification.id,
});
observer.disconnect();
});
readObserver.observe(elRef.value);
connection = stream.useChannel('main');
connection.on('readAllNotifications', () => readObserver.disconnect());
watch(props.notification.isRead, () => {
readObserver.disconnect();
});
}
});
onUnmounted(() => {
if (readObserver) readObserver.disconnect();
if (connection) connection.dispose();
}); });
const followRequestDone = ref(false); readObserver.observe(elRef.value);
const groupInviteDone = ref(false);
const acceptFollowRequest = () => { connection = stream.useChannel('main');
followRequestDone.value = true; connection.on('readAllNotifications', () => readObserver.disconnect());
os.api('following/requests/accept', { userId: props.notification.user.id });
};
const rejectFollowRequest = () => { watch(props.notification.isRead, () => {
followRequestDone.value = true; readObserver.disconnect();
os.api('following/requests/reject', { userId: props.notification.user.id });
};
const acceptGroupInvitation = () => {
groupInviteDone.value = true;
os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
};
const rejectGroupInvitation = () => {
groupInviteDone.value = true;
os.api('users/groups/invitations/reject', { 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');
}); });
}
});
return { onUnmounted(() => {
getNoteSummary: (note: misskey.entities.Note) => getNoteSummary(note), if (readObserver) readObserver.disconnect();
followRequestDone, if (connection) connection.dispose();
groupInviteDone, });
notePage,
userPage, const followRequestDone = ref(false);
acceptFollowRequest, const groupInviteDone = ref(false);
rejectFollowRequest,
acceptGroupInvitation, const acceptFollowRequest = () => {
rejectGroupInvitation, followRequestDone.value = true;
elRef, os.api('following/requests/accept', { userId: props.notification.user.id });
reactionRef, };
i18n,
}; const rejectFollowRequest = () => {
}, followRequestDone.value = true;
os.api('following/requests/reject', { userId: props.notification.user.id });
};
const acceptGroupInvitation = () => {
groupInviteDone.value = true;
os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
};
const rejectGroupInvitation = () => {
groupInviteDone.value = true;
os.api('users/groups/invitations/reject', { 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');
}); });
</script> </script>