From f9882a0c5cd1364d806d2487fe5f9e4f7e2d8351 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Mon, 10 Jan 2022 00:45:20 +0900 Subject: [PATCH] wip: migrate paging components to composition api --- packages/client/src/components/notes.vue | 3 +- .../client/src/components/notifications.vue | 13 +++--- .../client/src/components/ui/pagination.vue | 13 ++++-- packages/client/src/pages/favorites.vue | 40 ++++++++++++++++--- 4 files changed, 52 insertions(+), 17 deletions(-) diff --git a/packages/client/src/components/notes.vue b/packages/client/src/components/notes.vue index 82703d71c7..d6107216e2 100644 --- a/packages/client/src/components/notes.vue +++ b/packages/client/src/components/notes.vue @@ -32,8 +32,7 @@ const props = defineProps<{ const pagingComponent = ref<InstanceType<typeof MkPagination>>(); const updated = (oldValue, newValue) => { - const i = pagingComponent.value.items.findIndex(n => n === oldValue); - pagingComponent.value.items[i] = newValue; + pagingComponent.value?.updateItem(oldValue.id, () => newValue); }; defineExpose({ diff --git a/packages/client/src/components/notifications.vue b/packages/client/src/components/notifications.vue index aa4b480694..31511fb515 100644 --- a/packages/client/src/components/notifications.vue +++ b/packages/client/src/components/notifications.vue @@ -9,7 +9,7 @@ <template #default="{ items: notifications }"> <XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true"> - <XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" @update:note="noteUpdated(notification.note, $event)"/> + <XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" @update:note="noteUpdated(notification, $event)"/> <XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/> </XList> </template> @@ -62,12 +62,11 @@ const onNotification = (notification) => { } }; -const noteUpdated = (oldValue, newValue) => { - const i = pagingComponent.value.items.findIndex(n => n.note === oldValue); - pagingComponent.value.items[i] = { - ...pagingComponent.value.items[i], - note: newValue, - }; +const noteUpdated = (item, note) => { + pagingComponent.value?.updateItem(item.id, old => ({ + ...old, + note: note, + })); }; onMounted(() => { diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue index ab55b3c5bf..38e1e96041 100644 --- a/packages/client/src/components/ui/pagination.vue +++ b/packages/client/src/components/ui/pagination.vue @@ -205,7 +205,6 @@ const prepend = (item) => { // TODO } else { const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value)); - console.log(item, top); if (isTop) { // Prepend the item @@ -236,7 +235,15 @@ const append = (item) => { items.value.push(item); }; -watch(props.pagination.params, init, { deep: true }); +const updateItem = (id, replacer: (item: any) => any): void => { + const i = items.value.findIndex(item => item.id === id); + items.value[i] = replacer(items.value[i]); +}; + +if (props.pagination.params && isRef(props.pagination.params)) { + watch(props.pagination.params, init, { deep: true }); +} + watch(queue, (a, b) => { if (a.length === 0 && b.length === 0) return; emit('queue', queue.value.length); @@ -253,11 +260,11 @@ onDeactivated(() => { }); defineExpose({ - items, reload, fetchMoreAhead, prepend, append, + updateItem, }); </script> diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue index 588b0fa66c..f530da2a19 100644 --- a/packages/client/src/pages/favorites.vue +++ b/packages/client/src/pages/favorites.vue @@ -1,19 +1,42 @@ <template> <MkSpacer :content-max="800"> - <XNotes :pagination="pagination" :detail="true" :prop="'note'"/> + <MkPagination ref="pagingComponent" :pagination="pagination"> + <template #empty> + <div class="_fullinfo"> + <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <div>{{ $ts.noNotes }}</div> + </div> + </template> + + <template #default="{ items }"> + <XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false"> + <XNote :key="item.id" :note="item.note" :class="$style.note" @update:note="noteUpdated(item, $event)"/> + </XList> + </template> + </MkPagination> </MkSpacer> </template> <script lang="ts" setup> -import XNotes from '@/components/notes.vue'; +import { ref } from 'vue'; +import MkPagination from '@/components/ui/pagination.vue'; +import XNote from '@/components/note.vue'; +import XList from '@/components/date-separated-list.vue'; import * as symbols from '@/symbols'; import { i18n } from '@/i18n'; const pagination = { - endpoint: 'i/favorites', + endpoint: 'i/favorites' as const, limit: 10, - params: () => ({ - }), +}; + +const pagingComponent = ref<InstanceType<typeof MkPagination>>(); + +const noteUpdated = (item, note) => { + pagingComponent.value?.updateItem(item.id, old => ({ + ...old, + note: note, + })); }; defineExpose({ @@ -24,3 +47,10 @@ defineExpose({ }, }); </script> + +<style lang="scss" module> +.note { + background: var(--panel); + border-radius: var(--radius); +} +</style> \ No newline at end of file