wip: refactor(client): migrate components to composition api

Fix #8155
This commit is contained in:
syuilo 2022-01-18 21:30:17 +09:00
parent 9885c6ba6c
commit 7588397fb8
3 changed files with 57 additions and 93 deletions

View file

@ -16,6 +16,8 @@ const data = localStorage.getItem('account');
// TODO: 外部からはreadonlyに
export const $i = data ? reactive(JSON.parse(data) as Account) : null;
export const iAmModerator = $i != null && ($i.isAdmin || $i.isModerator);
export async function signout() {
waiting();
localStorage.removeItem('account');
@ -197,10 +199,3 @@ export async function openAccountMenu(ev: MouseEvent) {
align: 'left'
});
}
// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$i: typeof $i;
}
}

View file

@ -28,7 +28,7 @@
<FormSection v-if="iAmModerator">
<template #label>Moderation</template>
<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.stopActivityDelivery }}</FormSwitch>
<FormSwitch :model-value="isBlocked" class="switch" @update:modelValue="changeBlock">{{ $ts.blockThisInstance }}</FormSwitch>
<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ $ts.blockThisInstance }}</FormSwitch>
</FormSection>
<FormSection>
@ -104,15 +104,14 @@
</MkSpacer>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import MkChart from '@/components/chart.vue';
import MkObjectView from '@/components/object-view.vue';
import FormTextarea from '@/components/form/textarea.vue';
import FormLink from '@/components/form/link.vue';
import MkLink from '@/components/link.vue';
import FormSection from '@/components/form/section.vue';
import FormButton from '@/components/ui/button.vue';
import MkKeyValue from '@/components/key-value.vue';
import MkSelect from '@/components/form/select.vue';
import FormSwitch from '@/components/form/switch.vue';
@ -120,87 +119,57 @@ import * as os from '@/os';
import number from '@/filters/number';
import bytes from '@/filters/bytes';
import * as symbols from '@/symbols';
import { iAmModerator } from '@/account';
export default defineComponent({
components: {
FormTextarea,
MkObjectView,
FormButton,
FormLink,
FormSection,
FormSwitch,
MkKeyValue,
MkSelect,
MkChart,
MkLink,
},
const props = defineProps<{
host: string;
}>();
props: {
host: {
type: String,
required: true
}
},
let meta = $ref<misskey.entities.DetailedInstanceMetadata | null>(null);
let instance = $ref<misskey.entities.Instance | null>(null);
let suspended = $ref(false);
let isBlocked = $ref(false);
let chartSrc = $ref('instance-requests');
let chartSpan = $ref('hour');
data() {
return {
async function fetch() {
meta = await os.api('meta', { detail: true });
instance = await os.api('federation/show-instance', {
host: props.host,
});
suspended = instance.isSuspended;
isBlocked = meta.blockedHosts.includes(instance.host);
}
async function toggleBlock(ev) {
if (meta == null) return;
await os.api('admin/update-meta', {
blockedHosts: isBlocked ? meta.blockedHosts.concat([instance.host]) : meta.blockedHosts.filter(x => x !== instance.host)
});
}
async function toggleSuspend(v) {
await os.api('admin/federation/update-instance', {
host: instance.host,
isSuspended: suspended,
});
}
fetch();
defineExpose({
[symbols.PAGE_INFO]: {
title: this.host,
title: props.host,
icon: 'fas fa-info-circle',
bg: 'var(--bg)',
actions: [{
text: `https://${this.host}`,
text: `https://${props.host}`,
icon: 'fas fa-external-link-alt',
handler: () => {
window.open(`https://${this.host}`, '_blank');
window.open(`https://${props.host}`, '_blank');
}
}],
},
instance: null,
suspended: false,
chartSrc: 'instance-requests',
chartSpan: 'hour',
}
},
computed: {
iAmModerator(): boolean {
return this.$i && (this.$i.isAdmin || this.$i.isModerator);
},
isBlocked() {
return this.instance && this.$instance && this.$instance.blockedHosts && this.$instance.blockedHosts.includes(this.instance.host);
}
},
mounted() {
this.fetch();
},
methods: {
number,
bytes,
async fetch() {
this.instance = await os.api('federation/show-instance', {
host: this.host
});
this.suspended = this.instance.isSuspended;
},
changeBlock(e) {
os.api('admin/update-meta', {
blockedHosts: this.isBlocked ? this.meta.blockedHosts.concat([this.instance.host]) : this.meta.blockedHosts.filter(x => x !== this.instance.host)
});
},
async toggleSuspend(v) {
await os.api('admin/federation/update-instance', {
host: this.instance.host,
isSuspended: this.suspended
});
},
}
});
</script>

View file

@ -5,7 +5,7 @@ import * as Acct from 'misskey-js/built/acct';
import * as os from '@/os';
import { userActions } from '@/store';
import { router } from '@/router';
import { $i } from '@/account';
import { $i, iAmModerator } from '@/account';
export function getUserMenu(user) {
const meId = $i ? $i.id : null;
@ -175,7 +175,7 @@ export function getUserMenu(user) {
action: reportAbuse
}]);
if ($i && ($i.isAdmin || $i.isModerator)) {
if (iAmModerator) {
menu = menu.concat([null, {
icon: 'fas fa-microphone-slash',
text: user.isSilenced ? i18n.locale.unsilence : i18n.locale.silence,