enhance(note): show not found page instead of error page
This commit is contained in:
parent
75cda4d4d1
commit
e54259308d
2 changed files with 52 additions and 2 deletions
43
packages/frontend/src/components/MkNoteNotFound.vue
Normal file
43
packages/frontend/src/components/MkNoteNotFound.vue
Normal file
|
@ -0,0 +1,43 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" appear>
|
||||
<div :class="$style.root">
|
||||
<img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
|
||||
<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.noNotes }}</p>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { serverErrorImageUrl } from '@/instance.js';
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.img {
|
||||
vertical-align: bottom;
|
||||
height: 300px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
</style>
|
|
@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkSpacer :contentMax="800">
|
||||
<div>
|
||||
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
|
||||
<div v-if="note">
|
||||
<div v-if="note && !note.isHidden">
|
||||
<div v-if="showNext" class="_margin">
|
||||
<MkNotes class="" :pagination="showNext === 'channel' ? nextChannelPagination : nextUserPagination" :noGap="true" :disableAutoLoad="true"/>
|
||||
</div>
|
||||
|
@ -39,7 +39,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkNotes class="" :pagination="showPrev === 'channel' ? prevChannelPagination : prevUserPagination" :noGap="true"/>
|
||||
</div>
|
||||
</div>
|
||||
<MkError v-else-if="error" @retry="fetchNote()"/>
|
||||
<MkError v-else-if="error && iAmModerator" @retry="fetchNote()"/>
|
||||
<MkNoteNotFound v-else-if="!isFetching || note == null || note?.isHidden || error"/>
|
||||
<MkLoading v-else/>
|
||||
</Transition>
|
||||
</div>
|
||||
|
@ -61,6 +62,8 @@ import { i18n } from '@/i18n.js';
|
|||
import { dateString } from '@/filters/date.js';
|
||||
import MkClipPreview from '@/components/MkClipPreview.vue';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import MkNoteNotFound from '@/components/MkNoteNotFound.vue';
|
||||
import { iAmModerator } from '@/account.js';
|
||||
|
||||
const props = defineProps<{
|
||||
noteId: string;
|
||||
|
@ -73,6 +76,8 @@ const showPrev = ref<'user' | 'channel' | false>(false);
|
|||
const showNext = ref<'user' | 'channel' | false>(false);
|
||||
const error = ref();
|
||||
|
||||
let isFetching = true;
|
||||
|
||||
const prevUserPagination: Paging = {
|
||||
endpoint: 'users/notes',
|
||||
limit: 10,
|
||||
|
@ -127,7 +132,9 @@ function fetchNote() {
|
|||
clips.value = _clips;
|
||||
});
|
||||
}
|
||||
isFetching = false;
|
||||
}).catch(err => {
|
||||
isFetching = false;
|
||||
error.value = err;
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue