keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-23 02:35:10 +00:00
Code Issues 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>
</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,36 +86,22 @@ 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(() => {
onMounted(() => {
if (!props.notification.isRead) {
readObserver = new IntersectionObserver((entries, observer) => {
if (!entries.some(entry => entry.isIntersecting)) return;
@ -134,60 +120,43 @@ export default defineComponent({
readObserver.disconnect();
});
}
});
});
onUnmounted(() => {
onUnmounted(() => {
if (readObserver) readObserver.disconnect();
if (connection) connection.dispose();
});
});
const followRequestDone = ref(false);
const groupInviteDone = ref(false);
const followRequestDone = ref(false);
const groupInviteDone = ref(false);
const acceptFollowRequest = () => {
const acceptFollowRequest = () => {
followRequestDone.value = true;
os.api('following/requests/accept', { userId: props.notification.user.id });
};
};
const rejectFollowRequest = () => {
const rejectFollowRequest = () => {
followRequestDone.value = true;
os.api('following/requests/reject', { userId: props.notification.user.id });
};
};
const acceptGroupInvitation = () => {
const acceptGroupInvitation = () => {
groupInviteDone.value = true;
os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
};
};
const rejectGroupInvitation = () => {
const rejectGroupInvitation = () => {
groupInviteDone.value = true;
os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
};
};
useTooltip(reactionRef, (showing) => {
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 {
getNoteSummary: (note: misskey.entities.Note) => getNoteSummary(note),
followRequestDone,
groupInviteDone,
notePage,
userPage,
acceptFollowRequest,
rejectFollowRequest,
acceptGroupInvitation,
rejectGroupInvitation,
elRef,
reactionRef,
i18n,
};
},
});
</script>