From 9230334a319c93d1604576778ed39c9de9d510ce Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andreas.nedbal@in2code.de>
Date: Wed, 4 May 2022 05:25:19 +0200
Subject: [PATCH] Refactor settings/notifications to use Composition API
(#8587)
* refactor(client): refactor settings/notifications to use Composition API
* fix(client): use async/await for API methods
---
.../src/pages/settings/notifications.vue | 88 ++++++++-----------
1 file changed, 38 insertions(+), 50 deletions(-)
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index 334216ff33..6fe2ac55a4 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -1,71 +1,59 @@
<template>
<div class="_formRoot">
- <FormLink class="_formBlock" @click="configure"><template #icon><i class="fas fa-cog"></i></template>{{ $ts.notificationSetting }}</FormLink>
+ <FormLink class="_formBlock" @click="configure"><template #icon><i class="fas fa-cog"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
<FormSection>
- <FormLink class="_formBlock" @click="readAllNotifications">{{ $ts.markAsReadAllNotifications }}</FormLink>
- <FormLink class="_formBlock" @click="readAllUnreadNotes">{{ $ts.markAsReadAllUnreadNotes }}</FormLink>
- <FormLink class="_formBlock" @click="readAllMessagingMessages">{{ $ts.markAsReadAllTalkMessages }}</FormLink>
+ <FormLink class="_formBlock" @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
+ <FormLink class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
+ <FormLink class="_formBlock" @click="readAllMessagingMessages">{{ i18n.ts.markAsReadAllTalkMessages }}</FormLink>
</FormSection>
</div>
</template>
<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
+import { defineAsyncComponent, defineExpose } from 'vue';
import FormButton from '@/components/ui/button.vue';
import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue';
import { notificationTypes } from 'misskey-js';
import * as os from '@/os';
import * as symbols from '@/symbols';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
-export default defineComponent({
- components: {
- FormLink,
- FormButton,
- FormSection,
- },
+async function readAllUnreadNotes() {
+ await os.api('i/read-all-unread-notes');
+}
- emits: ['info'],
-
- data() {
- return {
- [symbols.PAGE_INFO]: {
- title: this.$ts.notifications,
- icon: 'fas fa-bell',
- bg: 'var(--bg)',
- },
+async function readAllMessagingMessages() {
+ await os.api('i/read-all-messaging-messages');
+}
+
+async function readAllNotifications() {
+ await os.api('notifications/mark-all-as-read');
+}
+
+function configure() {
+ const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x));
+ os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
+ includingTypes,
+ showGlobalToggle: false,
+ }, {
+ done: async (res) => {
+ const { includingTypes: value } = res;
+ await os.apiWithDialog('i/update', {
+ mutingNotificationTypes: notificationTypes.filter(x => !value.includes(x)),
+ }).then(i => {
+ $i!.mutingNotificationTypes = i.mutingNotificationTypes;
+ });
}
- },
+ }, 'closed');
+}
- methods: {
- readAllUnreadNotes() {
- os.api('i/read-all-unread-notes');
- },
-
- readAllMessagingMessages() {
- os.api('i/read-all-messaging-messages');
- },
-
- readAllNotifications() {
- os.api('notifications/mark-all-as-read');
- },
-
- configure() {
- const includingTypes = notificationTypes.filter(x => !this.$i.mutingNotificationTypes.includes(x));
- os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
- includingTypes,
- showGlobalToggle: false,
- }, {
- done: async (res) => {
- const { includingTypes: value } = res;
- await os.apiWithDialog('i/update', {
- mutingNotificationTypes: notificationTypes.filter(x => !value.includes(x)),
- }).then(i => {
- this.$i.mutingNotificationTypes = i.mutingNotificationTypes;
- });
- }
- }, 'closed');
- },
+defineExpose({
+ [symbols.PAGE_INFO]: {
+ title: i18n.ts.notifications,
+ icon: 'fas fa-bell',
+ bg: 'var(--bg)',
}
});
</script>