worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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

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

@ -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,
},
const props = withDefaults(defineProps<{
notification: misskey.entities.Notification;
withTime?: boolean;
full?: boolean;
}>(), {
withTime: false,
full: false,
});
props: {
notification: {
type: Object,
required: true,
},
withTime: {
type: Boolean,
required: false,
default: false,
},
full: {
type: Boolean,
required: false,
default: false,
},
},
const elRef = ref<HTMLElement>(null);
const reactionRef = ref(null);
setup(props) {
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();
});
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();
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();
});
const followRequestDone = ref(false);
const groupInviteDone = ref(false);
readObserver.observe(elRef.value);
const acceptFollowRequest = () => {
followRequestDone.value = true;
os.api('following/requests/accept', { userId: props.notification.user.id });
};
connection = stream.useChannel('main');
connection.on('readAllNotifications', () => readObserver.disconnect());
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');
watch(props.notification.isRead, () => {
readObserver.disconnect();
});
}
});
return {
getNoteSummary: (note: misskey.entities.Note) => getNoteSummary(note),
followRequestDone,
groupInviteDone,
notePage,
userPage,
acceptFollowRequest,
rejectFollowRequest,
acceptGroupInvitation,
rejectGroupInvitation,
elRef,
reactionRef,
i18n,
};
},
onUnmounted(() => {
if (readObserver) readObserver.disconnect();
if (connection) connection.dispose();
});
const followRequestDone = ref(false);
const groupInviteDone = ref(false);
const acceptFollowRequest = () => {
followRequestDone.value = true;
os.api('following/requests/accept', { userId: props.notification.user.id });
};
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>