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

151
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(() => { readObserver.observe(elRef.value);
if (readObserver) readObserver.disconnect();
if (connection) connection.dispose(); connection = stream.useChannel('main');
connection.on('readAllNotifications', () => readObserver.disconnect());
watch(props.notification.isRead, () => {
readObserver.disconnect();
}); });
}
});
const followRequestDone = ref(false); onUnmounted(() => {
const groupInviteDone = ref(false); if (readObserver) readObserver.disconnect();
if (connection) connection.dispose();
});
const acceptFollowRequest = () => { const followRequestDone = ref(false);
followRequestDone.value = true; const groupInviteDone = ref(false);
os.api('following/requests/accept', { userId: props.notification.user.id });
};
const rejectFollowRequest = () => { const acceptFollowRequest = () => {
followRequestDone.value = true; followRequestDone.value = true;
os.api('following/requests/reject', { userId: props.notification.user.id }); os.api('following/requests/accept', { userId: props.notification.user.id });
}; };
const acceptGroupInvitation = () => { const rejectFollowRequest = () => {
groupInviteDone.value = true; followRequestDone.value = true;
os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id }); os.api('following/requests/reject', { userId: props.notification.user.id });
}; };
const rejectGroupInvitation = () => { const acceptGroupInvitation = () => {
groupInviteDone.value = true; groupInviteDone.value = true;
os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id }); os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
}; };
useTooltip(reactionRef, (showing) => { const rejectGroupInvitation = () => {
os.popup(XReactionTooltip, { groupInviteDone.value = true;
showing, os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction, };
emojis: props.notification.note.emojis,
targetElement: reactionRef.value.$el,
}, {}, 'closed');
});
return { useTooltip(reactionRef, (showing) => {
getNoteSummary: (note: misskey.entities.Note) => getNoteSummary(note), os.popup(XReactionTooltip, {
followRequestDone, showing,
groupInviteDone, reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
notePage, emojis: props.notification.note.emojis,
userPage, targetElement: reactionRef.value.$el,
acceptFollowRequest, }, {}, 'closed');
rejectFollowRequest,
acceptGroupInvitation,
rejectGroupInvitation,
elRef,
reactionRef,
i18n,
};
},
}); });
</script> </script>