From 475b7556d817072955ca8ff27fe3e36d980e91c3 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andreas.nedbal@in2code.de>
Date: Sun, 1 May 2022 04:52:19 +0200
Subject: [PATCH] Refactor instance-mute to use Composition API (#8580)
* refactor(client): refactor instance-mute to use Composition API
* Apply review suggestion from @Johann150
Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
* Apply review suggestion from @Johann150
Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
---
.../src/pages/settings/instance-mute.vue | 76 ++++++++-----------
1 file changed, 30 insertions(+), 46 deletions(-)
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue
index f84a209b60..bcc2ee85ad 100644
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ b/packages/client/src/pages/settings/instance-mute.vue
@@ -1,67 +1,51 @@
<template>
<div class="_formRoot">
- <MkInfo>{{ $ts._instanceMute.title }}</MkInfo>
+ <MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
<FormTextarea v-model="instanceMutes" class="_formBlock">
- <template #label>{{ $ts._instanceMute.heading }}</template>
- <template #caption>{{ $ts._instanceMute.instanceMuteDescription }}<br>{{ $ts._instanceMute.instanceMuteDescription2 }}</template>
+ <template #label>{{ i18n.ts._instanceMute.heading }}</template>
+ <template #caption>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br>{{ i18n.ts._instanceMute.instanceMuteDescription2 }}</template>
</FormTextarea>
- <MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+ <MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
</div>
</template>
-<script>
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { defineExpose, ref, watch } from 'vue';
import FormTextarea from '@/components/form/textarea.vue';
import MkInfo from '@/components/ui/info.vue';
import MkButton from '@/components/ui/button.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
-export default defineComponent({
- components: {
- MkButton,
- FormTextarea,
- MkInfo,
- },
+const instanceMutes = ref($i!.mutedInstances.join('\n'));
+const changed = ref(false);
- emits: ['info'],
+async function save() {
+ let mutes = instanceMutes.value
+ .trim().split('\n')
+ .map(el => el.trim())
+ .filter(el => el);
- data() {
- return {
- [symbols.PAGE_INFO]: {
- title: this.$ts.instanceMute,
- icon: 'fas fa-volume-mute'
- },
- tab: 'soft',
- instanceMutes: '',
- changed: false,
- }
- },
+ await os.api('i/update', {
+ mutedInstances: mutes,
+ });
- watch: {
- instanceMutes: {
- handler() {
- this.changed = true;
- },
- deep: true
- },
- },
+ changed.value = false;
- async created() {
- this.instanceMutes = this.$i.mutedInstances.join('\n');
- },
+ // Refresh filtered list to signal to the user how they've been saved
+ instanceMutes.value = mutes.join('\n');
+}
- methods: {
- async save() {
- let mutes = this.instanceMutes.trim().split('\n').map(el => el.trim()).filter(el => el);
- await os.api('i/update', {
- mutedInstances: mutes,
- });
- this.changed = false;
+watch(instanceMutes, () => {
+ changed.value = true;
+});
- // Refresh filtered list to signal to the user how they've been saved
- this.instanceMutes = mutes.join('\n');
- },
+defineExpose({
+ [symbols.PAGE_INFO]: {
+ title: i18n.ts.instanceMute,
+ icon: 'fas fa-volume-mute'
}
-})
+});
</script>