diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts index 1fc7618c..e79c5dc6 100644 --- a/next-ui/src/components.d.ts +++ b/next-ui/src/components.d.ts @@ -32,7 +32,7 @@ declare module 'vue' { HistoryExpandDuplicatePageDeleted: typeof import('./components/history/expand/DuplicatePageDeleted.vue')['default'] HistoryExpandSeriesDirectoryDeleted: typeof import('./components/history/expand/SeriesDirectoryDeleted.vue')['default'] HistoryExpandTable: typeof import('./components/history/expand/Table.vue')['default'] - HistoryTable: typeof import('./components/history/Table.vue')['default'] + HistoryTable: typeof import('./components/history/HistoryTable.vue')['default'] ImportBooksDirectorySelection: typeof import('./components/import/books/DirectorySelection.vue')['default'] ImportBooksTransientBooksTable: typeof import('./components/import/books/TransientBooksTable.vue')['default'] ImportReadlistTable: typeof import('./components/import/readlist/Table.vue')['default'] diff --git a/next-ui/src/components/history/Table.mdx b/next-ui/src/components/history/HistoryTable.mdx similarity index 100% rename from next-ui/src/components/history/Table.mdx rename to next-ui/src/components/history/HistoryTable.mdx diff --git a/next-ui/src/components/history/Table.vue b/next-ui/src/components/history/HistoryTable.vue similarity index 86% rename from next-ui/src/components/history/Table.vue rename to next-ui/src/components/history/HistoryTable.vue index a0be2b62..c210d660 100644 --- a/next-ui/src/components/history/Table.vue +++ b/next-ui/src/components/history/HistoryTable.vue @@ -101,6 +101,7 @@ import { historicalEventMessages } from '@/utils/i18n/enum/historical-event' import type { MessageDescriptor } from '@formatjs/intl/src/types' import { seriesDetailQuery } from '@/colada/series' import { bookDetailQuery } from '@/colada/books' +import { useMemoize } from '@vueuse/core' const intl = useIntl() @@ -200,31 +201,33 @@ function getExpandedComponent(eventType: string): Component | null { } } -const seriesCache = reactive>({}) -const seriesCacheNotFound = reactive([]) -const booksCache = reactive>({}) -const booksCacheNotFound = reactive([]) +const seriesCache = reactive>({}) +const booksCache = reactive>({}) + +const getSeriesTitle = useMemoize(async (seriesId: string) => + useQuery(seriesDetailQuery, () => ({ seriesId: seriesId })) + .refresh(true) + .then(({ data }) => data?.metadata.title) + .catch(() => undefined), +) + +const getBookTitle = useMemoize(async (bookId: string) => + useQuery(bookDetailQuery, () => ({ bookId: bookId })) + .refresh(true) + .then(({ data }) => data?.metadata.title) + .catch(() => undefined), +) watch(data, (data) => { for (const seriesId of new Set(data?.content?.map((s) => s.seriesId))) { - if (seriesId && !seriesCacheNotFound.includes(seriesId) && !(seriesId in seriesCache)) { - const { refresh } = useQuery(seriesDetailQuery, () => ({ seriesId: seriesId })) - refresh(true) - .then(({ data }) => { - if (data) seriesCache[seriesId] = data.metadata.title - }) - .catch(() => seriesCacheNotFound.push(seriesId)) + if (seriesId) { + void getSeriesTitle(seriesId).then((title) => (seriesCache[seriesId] = title)) } } for (const bookId of new Set(data?.content?.map((s) => s.bookId))) { - if (bookId && !booksCacheNotFound.includes(bookId) && !(bookId in booksCache)) { - const { refresh } = useQuery(bookDetailQuery, () => ({ bookId: bookId })) - refresh(true) - .then(({ data }) => { - if (data) booksCache[bookId] = data.metadata.title - }) - .catch(() => booksCacheNotFound.push(bookId)) + if (bookId) { + void getBookTitle(bookId).then((title) => (booksCache[bookId] = title)) } } }) diff --git a/next-ui/src/components/history/Table.stories.ts b/next-ui/src/components/history/Table.stories.ts index 900a3a5b..40a637e9 100644 --- a/next-ui/src/components/history/Table.stories.ts +++ b/next-ui/src/components/history/Table.stories.ts @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite' -import Table from './Table.vue' +import HistoryTable from './HistoryTable.vue' import { delay, http } from 'msw' import { response401Unauthorized } from '@/mocks/api/handlers' import { httpTyped } from '@/mocks/api/httpTyped' @@ -8,19 +8,19 @@ import { mockPage } from '@/mocks/api/pageable' import { PageRequest } from '@/types/PageRequest' const meta = { - component: Table, + component: HistoryTable, render: (args: object) => ({ - components: { Table }, + components: { HistoryTable }, setup() { return { args } }, - template: '', + template: '', }), parameters: { // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout }, args: {}, -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj @@ -32,7 +32,7 @@ export const Default: Story = { export const Loading: Story = { parameters: { msw: { - handlers: [http.all('*/api/v1/history', async () => await delay(5_000))], + handlers: [http.all('*/api/*', async () => await delay(5_000))], }, }, }