From f9882a0c5cd1364d806d2487fe5f9e4f7e2d8351 Mon Sep 17 00:00:00 2001 From: syuilo 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>(); 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 @@ @@ -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, }); 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 @@ + + \ No newline at end of file