From 793ec1b6b0a1becde1de9a99d560ac1ec2f4ac52 Mon Sep 17 00:00:00 2001 From: kdletters Date: Wed, 15 Jul 2026 20:02:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=90=8E=E5=8F=B0=E7=B4=A0?= =?UTF-8?q?=E6=9D=90=E6=9F=A5=E8=AF=A2=E5=88=86=E9=A1=B5=E4=B8=8E=E4=BB=BB?= =?UTF-8?q?=E5=8A=A1=E5=BD=92=E7=BB=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 支持陶泥号解析、稳定游标和后台素材多页查询 补齐查询防抖、请求取消、刷新保留与加载更多状态 新增可信来源索引和拆分批次完成事实，修复跨项目与删除切片归组 同步生成绑定、数据契约、项目记忆和回归测试 --- apps/admin-web/src/api/adminApiClient.ts | 3 +- apps/admin-web/src/api/adminApiTypes.ts | 1 + .../pages/AdminEditorAssetQueryPage.test.tsx | 459 +++++++- .../src/pages/AdminEditorAssetQueryPage.tsx | 163 ++- docs/project-memory/shared-memory/pitfalls.md | 8 + ...架构】图片画布编辑器MVP接入方案-2026-06-11.md | 4 +- ...】server-rs与SpacetimeDB数据契约-2026-05-15.md | 18 +- server-rs/crates/api-server/src/admin.rs | 413 +++++-- .../crates/api-server/src/editor_project.rs | 142 ++- .../crates/shared-contracts/src/admin.rs | 1 + .../spacetime-client/src/editor_project.rs | 50 + server-rs/crates/spacetime-client/src/lib.rs | 3 +- .../crates/spacetime-client/src/mapper.rs | 4 +- .../src/mapper/editor_project.rs | 62 + .../spacetime-client/src/module_bindings.rs | 69 ++ .../admin_editor_asset_snapshot_type.rs | 1 + ...asset_group_cohort_and_return_procedure.rs | 62 + .../editor_asset_create_input_type.rs | 2 + ..._asset_group_cohort_complete_input_type.rs | 20 + .../editor_asset_group_cohort_table.rs | 162 +++ .../editor_asset_group_cohort_type.rs | 67 ++ ...or_asset_group_source_lookup_input_type.rs | 18 + ...tor_asset_group_source_provenance_table.rs | 174 +++ ...itor_asset_group_source_provenance_type.rs | 64 ++ .../editor_asset_snapshot_type.rs | 1 + .../src/module_bindings/editor_asset_type.rs | 9 + ...asset_group_source_and_return_procedure.rs | 59 + .../src/editor_project_storage.rs | 1008 ++++++++++++++++- .../crates/spacetime-module/src/migration.rs | 7 + 29 files changed, 2885 insertions(+), 169 deletions(-) create mode 100644 server-rs/crates/spacetime-client/src/module_bindings/complete_editor_asset_group_cohort_and_return_procedure.rs create mode 100644 server-rs/crates/spacetime-client/src/module_bindings/editor_asset_group_cohort_complete_input_type.rs create mode 100644 server-rs/crates/spacetime-client/src/module_bindings/editor_asset_group_cohort_table.rs create mode 100644 server-rs/crates/spacetime-client/src/module_bindings/editor_asset_group_cohort_type.rs create mode 100644 server-rs/crates/spacetime-client/src/module_bindings/editor_asset_group_source_lookup_input_type.rs create mode 100644 server-rs/crates/spacetime-client/src/module_bindings/editor_asset_group_source_provenance_table.rs create mode 100644 server-rs/crates/spacetime-client/src/module_bindings/editor_asset_group_source_provenance_type.rs create mode 100644 server-rs/crates/spacetime-client/src/module_bindings/find_editor_asset_group_source_and_return_procedure.rs diff --git a/apps/admin-web/src/api/adminApiClient.ts b/apps/admin-web/src/api/adminApiClient.ts index 73540117a..8b1f4eb25 100644 --- a/apps/admin-web/src/api/adminApiClient.ts +++ b/apps/admin-web/src/api/adminApiClient.ts @@ -398,10 +398,11 @@ export function getAdminAssetReadUrl( export function listAdminEditorAssets( token: string, query: AdminEditorAssetListQuery = {}, + signal?: AbortSignal, ) { return request( `/admin/api/editor-assets${buildEditorAssetListQuery(query)}`, - { token }, + { token, signal }, ); } diff --git a/apps/admin-web/src/api/adminApiTypes.ts b/apps/admin-web/src/api/adminApiTypes.ts index 8841b9ae0..67d5740f0 100644 --- a/apps/admin-web/src/api/adminApiTypes.ts +++ b/apps/admin-web/src/api/adminApiTypes.ts @@ -460,6 +460,7 @@ export interface AdminEditorAssetPayload { model?: string | null; provider?: string | null; taskId?: string | null; + groupTaskId?: string | null; assetKind?: string | null; generationInputs?: Record | null; sourceResourceId?: string | null; diff --git a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx index 9d360b81c..5bd550cd3 100644 --- a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx +++ b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx @@ -15,10 +15,16 @@ import { getAdminAssetReadUrl, listAdminEditorAssets, } from '../api/adminApiClient'; -import type { AdminEditorAssetPayload } from '../api/adminApiTypes'; +import type { + AdminEditorAssetListResponse, + AdminEditorAssetPayload, +} from '../api/adminApiTypes'; import { AdminEditorAssetQueryPage } from './AdminEditorAssetQueryPage'; vi.mock('../api/adminApiClient', () => ({ + formatAdminApiError: vi.fn((error: unknown) => + error instanceof Error ? error.message : '请求失败', + ), getAdminAssetReadUrl: vi.fn(), isAdminApiError: vi.fn( (error: unknown) => @@ -186,6 +192,16 @@ function generatedAssetAt(index: number): AdminEditorAssetPayload { }; } +function createDeferred() { + let resolve!: (value: T | PromiseLike) => void; + let reject!: (reason?: unknown) => void; + const promise = new Promise((resolvePromise, rejectPromise) => { + resolve = resolvePromise; + reject = rejectPromise; + }); + return { promise, resolve, reject }; +} + function thumbnailElementForLabel(label: string) { const row = screen.getByText(label).closest('tr'); const thumbnail = row?.querySelector('.admin-asset-query-thumb'); @@ -215,8 +231,8 @@ test('后台素材查询按用户、搜索和时间调用查询接口', async () await screen.findByRole('img', { name: '素材：角色形象 1' }); - fireEvent.change(screen.getByLabelText('用户 ID'), { - target: { value: 'user-1' }, + fireEvent.change(screen.getByLabelText('用户 ID / 陶泥号'), { + target: { value: 'SY-00000055' }, }); fireEvent.change(screen.getByLabelText('搜索'), { target: { value: '陶泥角色' }, @@ -229,16 +245,329 @@ test('后台素材查询按用户、搜索和时间调用查询接口', async () }); await waitFor(() => { - expect(listAdminEditorAssets).toHaveBeenLastCalledWith('admin-token', { - ownerUserId: 'user-1', - keyword: '陶泥角色', - createdAfter: '2026-07-01T00:00:00+08:00', - createdBefore: '2026-07-04T23:59:59.999+08:00', - limit: 80, - }); + expect(listAdminEditorAssets).toHaveBeenLastCalledWith( + 'admin-token', + { + ownerUserId: 'SY-00000055', + keyword: '陶泥角色', + createdAfter: '2026-07-01T00:00:00+08:00', + createdBefore: '2026-07-04T23:59:59.999+08:00', + limit: 80, + }, + expect.anything(), + ); }); }); +test('后台素材查询逐字输入时只请求最终筛选值', async () => { + installIntersectionObserverMock(); + render( + , + ); + + await screen.findByText('角色形象 1'); + vi.mocked(listAdminEditorAssets).mockClear(); + vi.useFakeTimers(); + const ownerInput = screen.getByLabelText('用户 ID / 陶泥号'); + const values = [ + 'S', + 'SY', + 'SY-', + 'SY-0', + 'SY-00', + 'SY-000', + 'SY-0000', + 'SY-00000', + 'SY-000000', + 'SY-0000005', + 'SY-00000055', + ]; + for (const [index, value] of values.entries()) { + fireEvent.change(ownerInput, { target: { value } }); + if (index < values.length - 1) { + await act(async () => { + await vi.advanceTimersByTimeAsync(250); + }); + expect(listAdminEditorAssets).not.toHaveBeenCalled(); + } + } + + expect(listAdminEditorAssets).not.toHaveBeenCalled(); + await act(async () => { + await vi.advanceTimersByTimeAsync(299); + }); + expect(listAdminEditorAssets).not.toHaveBeenCalled(); + await act(async () => { + await vi.advanceTimersByTimeAsync(1); + }); + expect(listAdminEditorAssets).toHaveBeenCalledTimes(1); + expect(listAdminEditorAssets).toHaveBeenLastCalledWith( + 'admin-token', + { + ownerUserId: 'SY-00000055', + keyword: null, + createdAfter: null, + createdBefore: null, + limit: 80, + }, + expect.anything(), + ); +}); + +test('后台素材查询只应用最新筛选请求的结果和加载状态', async () => { + const staleResponse = createDeferred(); + const currentResponse = createDeferred(); + vi.mocked(listAdminEditorAssets) + .mockResolvedValueOnce({ + entries: [generatedAsset], + nextCursor: null, + }) + .mockImplementationOnce(() => staleResponse.promise) + .mockImplementationOnce(() => currentResponse.promise); + + render( + , + ); + + await screen.findByText('角色形象 1'); + fireEvent.change(screen.getByLabelText('用户 ID / 陶泥号'), { + target: { value: 'user-stale' }, + }); + await waitFor(() => expect(listAdminEditorAssets).toHaveBeenCalledTimes(2)); + fireEvent.change(screen.getByLabelText('用户 ID / 陶泥号'), { + target: { value: 'SY-00000055' }, + }); + await waitFor(() => expect(listAdminEditorAssets).toHaveBeenCalledTimes(3)); + + await act(async () => { + staleResponse.resolve({ + entries: [ + { ...generatedAsset, assetId: 'asset-stale', label: '旧筛选素材' }, + ], + nextCursor: 'cursor-stale', + }); + await staleResponse.promise; + }); + + expect(screen.queryByText('旧筛选素材')).toBeNull(); + expect(screen.getByRole('button', { name: '刷新中' })).toBeTruthy(); + + await act(async () => { + currentResponse.resolve({ + entries: [ + { ...generatedAsset, assetId: 'asset-current', label: '当前筛选素材' }, + ], + nextCursor: null, + }); + await currentResponse.promise; + }); + + expect(await screen.findByText('当前筛选素材')).toBeTruthy(); + expect(screen.queryByText('旧筛选素材')).toBeNull(); + expect(screen.getByRole('button', { name: '刷新' })).toBeTruthy(); +}); + +test('后台素材查询筛选失败时隐藏旧结果且不展示空态', async () => { + vi.mocked(listAdminEditorAssets) + .mockResolvedValueOnce({ + entries: [generatedAssetAt(1)], + nextCursor: 'cursor-old', + }) + .mockRejectedValueOnce(new Error('筛选失败')); + + render( + , + ); + + expect(await screen.findByText('角色形象 1')).toBeTruthy(); + expect(screen.getByRole('button', { name: '读取更多' })).toBeTruthy(); + + fireEvent.change(screen.getByLabelText('用户 ID / 陶泥号'), { + target: { value: 'SY-00000055' }, + }); + + expect(screen.queryByText('角色形象 1')).toBeNull(); + expect(screen.queryByRole('button', { name: '读取更多' })).toBeNull(); + expect(await screen.findByText('筛选失败')).toBeTruthy(); + expect(screen.queryByText('角色形象 1')).toBeNull(); + expect(screen.queryByRole('button', { name: '读取更多' })).toBeNull(); + expect(screen.queryByText('暂无生成素材')).toBeNull(); +}); + +test('后台素材查询取消旧筛选请求时不展示错误', async () => { + installIntersectionObserverMock(); + let staleSignal: AbortSignal | undefined; + vi.mocked(listAdminEditorAssets) + .mockResolvedValueOnce({ + entries: [generatedAsset], + nextCursor: null, + }) + .mockImplementationOnce((_token, _query, signal) => { + staleSignal = signal; + return new Promise((_resolve, reject) => { + signal?.addEventListener( + 'abort', + () => reject(new DOMException('请求已取消', 'AbortError')), + { once: true }, + ); + }); + }) + .mockResolvedValueOnce({ + entries: [ + { ...generatedAsset, assetId: 'asset-current', label: '最新筛选素材' }, + ], + nextCursor: null, + }); + + render( + , + ); + + await screen.findByText('角色形象 1'); + fireEvent.change(screen.getByLabelText('搜索'), { + target: { value: '旧筛选' }, + }); + await waitFor(() => expect(listAdminEditorAssets).toHaveBeenCalledTimes(2)); + expect(staleSignal?.aborted).toBe(false); + vi.useFakeTimers(); + + fireEvent.change(screen.getByLabelText('搜索'), { + target: { value: '最新筛选' }, + }); + expect(staleSignal?.aborted).toBe(true); + await act(async () => { + await Promise.resolve(); + }); + expect(screen.queryByRole('status')).toBeNull(); + expect(listAdminEditorAssets).toHaveBeenCalledTimes(2); + + await act(async () => { + await vi.advanceTimersByTimeAsync(299); + }); + expect(listAdminEditorAssets).toHaveBeenCalledTimes(2); + expect(screen.queryByRole('status')).toBeNull(); + await act(async () => { + await vi.advanceTimersByTimeAsync(1); + }); + expect(listAdminEditorAssets).toHaveBeenCalledTimes(3); + expect(screen.getByText('最新筛选素材')).toBeTruthy(); + expect(screen.queryByRole('status')).toBeNull(); +}); + +test('后台素材查询手动刷新失败时保留当前结果和游标', async () => { + const refreshResponse = createDeferred(); + vi.mocked(listAdminEditorAssets) + .mockResolvedValueOnce({ + entries: [generatedAssetAt(1)], + nextCursor: 'cursor-1', + }) + .mockImplementationOnce(() => refreshResponse.promise); + + render( + , + ); + + expect(await screen.findByText('角色形象 1')).toBeTruthy(); + fireEvent.click(screen.getByRole('button', { name: '刷新' })); + expect(screen.getByText('角色形象 1')).toBeTruthy(); + expect( + screen.getByRole('button', { name: '读取更多' }).hasAttribute('disabled'), + ).toBe(true); + + await act(async () => { + refreshResponse.reject(new Error('刷新失败')); + try { + await refreshResponse.promise; + } catch { + // The page owns the rejected request. + } + }); + + expect(await screen.findByText('刷新失败')).toBeTruthy(); + expect(screen.getByText('角色形象 1')).toBeTruthy(); + expect( + screen.getByRole('button', { name: '读取更多' }).hasAttribute('disabled'), + ).toBe(false); + expect(screen.queryByText('暂无生成素材')).toBeNull(); +}); + +test('后台素材查询读取更多进行中手动刷新失败时保留原页', async () => { + const staleLoadMoreResponse = createDeferred(); + const refreshResponse = createDeferred(); + let staleLoadMoreSignal: AbortSignal | undefined; + vi.mocked(listAdminEditorAssets) + .mockResolvedValueOnce({ + entries: [generatedAssetAt(1)], + nextCursor: 'cursor-1', + }) + .mockImplementationOnce((_token, _query, signal) => { + staleLoadMoreSignal = signal; + return staleLoadMoreResponse.promise; + }) + .mockImplementationOnce(() => refreshResponse.promise) + .mockResolvedValueOnce({ + entries: [generatedAssetAt(81)], + nextCursor: null, + }); + + render( + , + ); + + fireEvent.click(await screen.findByRole('button', { name: '读取更多' })); + await waitFor(() => expect(listAdminEditorAssets).toHaveBeenCalledTimes(2)); + expect(staleLoadMoreSignal?.aborted).toBe(false); + + fireEvent.click(screen.getByRole('button', { name: '刷新' })); + expect(staleLoadMoreSignal?.aborted).toBe(true); + expect(listAdminEditorAssets).toHaveBeenCalledTimes(3); + expect(screen.getByText('角色形象 1')).toBeTruthy(); + expect( + screen.getByRole('button', { name: '读取更多' }).hasAttribute('disabled'), + ).toBe(true); + + await act(async () => { + refreshResponse.reject(new Error('刷新失败')); + try { + await refreshResponse.promise; + } catch { + // The page owns the rejected request. + } + }); + + expect(await screen.findByText('刷新失败')).toBeTruthy(); + expect(screen.getByText('角色形象 1')).toBeTruthy(); + expect( + screen.getByRole('button', { name: '读取更多' }).hasAttribute('disabled'), + ).toBe(false); + + await act(async () => { + staleLoadMoreResponse.resolve({ + entries: [ + { ...generatedAsset, assetId: 'asset-stale', label: '旧分页素材' }, + ], + nextCursor: 'cursor-stale', + }); + await staleLoadMoreResponse.promise; + }); + expect(screen.queryByText('旧分页素材')).toBeNull(); + + fireEvent.click(screen.getByRole('button', { name: '读取更多' })); + expect(await screen.findByText('角色形象 81')).toBeTruthy(); + expect(listAdminEditorAssets).toHaveBeenLastCalledWith( + 'admin-token', + { + ownerUserId: null, + keyword: null, + createdAfter: null, + createdBefore: null, + limit: 80, + cursor: 'cursor-1', + }, + expect.anything(), + ); +}); + test('后台素材查询不展示分类筛选和分类列', async () => { render( , @@ -493,13 +822,87 @@ test('后台素材查询读取更多后为新进入可视区域的素材换签', objectKey: 'generated-character-drafts/editor/spec-81.png', expireSeconds: 300, }); - expect(listAdminEditorAssets).toHaveBeenLastCalledWith('admin-token', { - ownerUserId: null, - keyword: null, - createdAfter: null, - createdBefore: null, - limit: 80, - cursor: 'cursor-1', + expect(listAdminEditorAssets).toHaveBeenLastCalledWith( + 'admin-token', + { + ownerUserId: null, + keyword: null, + createdAfter: null, + createdBefore: null, + limit: 80, + cursor: 'cursor-1', + }, + expect.anything(), + ); +}); + +test('后台素材查询筛选刷新后忽略旧读取更多响应和游标', async () => { + const staleLoadMoreResponse = createDeferred(); + const refreshedResponse = createDeferred(); + let staleLoadMoreSignal: AbortSignal | undefined; + vi.mocked(listAdminEditorAssets) + .mockResolvedValueOnce({ + entries: [generatedAssetAt(1)], + nextCursor: 'cursor-old', + }) + .mockImplementationOnce((_token, _query, signal) => { + staleLoadMoreSignal = signal; + return staleLoadMoreResponse.promise; + }) + .mockImplementationOnce(() => refreshedResponse.promise) + .mockResolvedValueOnce({ entries: [], nextCursor: null }); + + render( + , + ); + + fireEvent.click(await screen.findByRole('button', { name: '读取更多' })); + await waitFor(() => expect(listAdminEditorAssets).toHaveBeenCalledTimes(2)); + fireEvent.change(screen.getByLabelText('用户 ID / 陶泥号'), { + target: { value: 'SY-00000055' }, + }); + expect(staleLoadMoreSignal?.aborted).toBe(true); + await waitFor(() => expect(listAdminEditorAssets).toHaveBeenCalledTimes(3)); + await waitFor(() => + expect(screen.queryByRole('button', { name: '读取更多' })).toBeNull(), + ); + + await act(async () => { + refreshedResponse.resolve({ + entries: [ + { ...generatedAsset, assetId: 'asset-current', label: '当前用户素材' }, + ], + nextCursor: 'cursor-current', + }); + await refreshedResponse.promise; + }); + expect(await screen.findByText('当前用户素材')).toBeTruthy(); + + await act(async () => { + staleLoadMoreResponse.resolve({ + entries: [ + { ...generatedAsset, assetId: 'asset-stale', label: '旧分页素材' }, + ], + nextCursor: 'cursor-stale', + }); + await staleLoadMoreResponse.promise; + }); + + expect(screen.queryByText('旧分页素材')).toBeNull(); + fireEvent.click(screen.getByRole('button', { name: '读取更多' })); + await waitFor(() => { + expect(listAdminEditorAssets).toHaveBeenLastCalledWith( + 'admin-token', + { + ownerUserId: 'SY-00000055', + keyword: null, + createdAfter: null, + createdBefore: null, + limit: 80, + cursor: 'cursor-current', + }, + expect.anything(), + ); }); }); @@ -962,6 +1365,28 @@ test('后台素材查询可查看素材详情', async () => { expect(within(dialog).getByText(/"style": "clay"/u)).toBeTruthy(); }); +test('后台素材详情分别展示真实操作和归组 Task ID', async () => { + vi.mocked(listAdminEditorAssets).mockResolvedValueOnce({ + entries: [ + { + ...generatedAsset, + taskId: 'editor-atlas-split-operation-1', + groupTaskId: 'vector-engine-source-task-1', + }, + ], + nextCursor: null, + }); + render( + , + ); + + fireEvent.click(await screen.findByRole('button', { name: '详情' })); + + const dialog = screen.getByRole('dialog', { name: '素材详情' }); + expect(within(dialog).getByText('editor-atlas-split-operation-1')).toBeTruthy(); + expect(within(dialog).getByText('vector-engine-source-task-1')).toBeTruthy(); +}); + test('后台素材查询可打开弹窗查看完整提示词', async () => { render( , diff --git a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx index e23a00aae..ee2337e62 100644 --- a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx +++ b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx @@ -1,6 +1,6 @@ import { ChevronDown, ChevronRight, Eye, FileText, RefreshCcw, X } from 'lucide-react'; import { Fragment, type ReactNode } from 'react'; -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { getAdminAssetReadUrl, @@ -24,6 +24,7 @@ const ADMIN_ASSET_READ_EXPIRE_SECONDS = 300; const ADMIN_ASSET_READ_DISPATCH_SPACING_MS = 40; const ADMIN_ASSET_READ_RETRY_DELAYS_MS = [400, 1_200, 3_000] as const; const ADMIN_ASSET_THUMBNAIL_ROOT_MARGIN = '240px 0px'; +const ADMIN_EDITOR_ASSET_FILTER_DEBOUNCE_MS = 300; const AUDIO_ASSET_COVER_SRC = `${import.meta.env.DEV ? import.meta.env.BASE_URL : '/'}creation-home/audio-asset-cover.png`; let adminAssetReadDispatchTail = Promise.resolve(); @@ -37,6 +38,9 @@ export function AdminEditorAssetQueryPage({ const [createdAfter, setCreatedAfter] = useState(''); const [createdBefore, setCreatedBefore] = useState(''); const [nextCursor, setNextCursor] = useState(null); + const [committedQueryKey, setCommittedQueryKey] = useState( + null, + ); const [isLoading, setIsLoading] = useState(false); const [isLoadingMore, setIsLoadingMore] = useState(false); const [errorMessage, setErrorMessage] = useState(''); @@ -51,49 +55,147 @@ export function AdminEditorAssetQueryPage({ title: string; prompt: string; } | null>(null); + const listRequestGenerationRef = useRef(0); + const listRequestAbortControllerRef = useRef(null); + const automaticQueryInitializedRef = useRef(false); + const automaticQueryTokenRef = useRef(token); + const activeQuery = buildListQuery(); + const activeQueryKey = editorAssetListQueryKey(token, activeQuery); + const hasCurrentQuerySnapshot = committedQueryKey === activeQueryKey; + const visibleEntries = hasCurrentQuerySnapshot ? entries : []; + const visibleNextCursor = hasCurrentQuerySnapshot ? nextCursor : null; useEffect(() => { - void refreshPage(); + const runImmediately = + !automaticQueryInitializedRef.current || + automaticQueryTokenRef.current !== token; + automaticQueryInitializedRef.current = true; + automaticQueryTokenRef.current = token; + + if (runImmediately) { + void refreshPage(); + return; + } + + invalidateListRequest(); + setIsLoading(true); + setIsLoadingMore(false); + setErrorMessage(''); + const timer = setTimeout( + () => void refreshPage(), + ADMIN_EDITOR_ASSET_FILTER_DEBOUNCE_MS, + ); + return () => clearTimeout(timer); // eslint-disable-next-line react-hooks/exhaustive-deps }, [token, ownerUserId, keyword, createdAfter, createdBefore]); + useEffect( + () => () => { + automaticQueryInitializedRef.current = false; + invalidateListRequest(); + }, + [], + ); + async function refreshPage() { + const query = buildListQuery(); + const queryKey = editorAssetListQueryKey(token, query); + const { requestGeneration, abortController } = beginListRequest(); setIsLoading(true); + setIsLoadingMore(false); setErrorMessage(''); try { - const response = await listAdminEditorAssets(token, buildListQuery()); + const response = await listAdminEditorAssets( + token, + query, + abortController.signal, + ); + if (listRequestGenerationRef.current !== requestGeneration) { + return; + } setEntries(response.entries); setNextCursor(response.nextCursor ?? null); + setCommittedQueryKey(queryKey); } catch (error: unknown) { + if ( + listRequestGenerationRef.current !== requestGeneration || + isAbortError(error) + ) { + return; + } handlePageError(error, onUnauthorized, setErrorMessage); } finally { - setIsLoading(false); + if (listRequestGenerationRef.current === requestGeneration) { + if (listRequestAbortControllerRef.current === abortController) { + listRequestAbortControllerRef.current = null; + } + setIsLoading(false); + } } } async function loadMore() { - if (!nextCursor || isLoadingMore) { + if (!visibleNextCursor || isLoading || isLoadingMore) { return; } + const query = buildListQuery(); + const queryKey = editorAssetListQueryKey(token, query); + if (committedQueryKey !== queryKey) { + return; + } + const cursor = visibleNextCursor; + const { requestGeneration, abortController } = beginListRequest(); setIsLoadingMore(true); setErrorMessage(''); try { - const response = await listAdminEditorAssets(token, { - ...buildListQuery(), - cursor: nextCursor, - }); + const response = await listAdminEditorAssets( + token, + { + ...query, + cursor, + }, + abortController.signal, + ); + if (listRequestGenerationRef.current !== requestGeneration) { + return; + } setEntries((current) => mergeAssetEntries(current, response.entries)); setNextCursor(response.nextCursor ?? null); } catch (error: unknown) { + if ( + listRequestGenerationRef.current !== requestGeneration || + isAbortError(error) + ) { + return; + } handlePageError(error, onUnauthorized, setErrorMessage); } finally { - setIsLoadingMore(false); + if (listRequestGenerationRef.current === requestGeneration) { + if (listRequestAbortControllerRef.current === abortController) { + listRequestAbortControllerRef.current = null; + } + setIsLoadingMore(false); + } } } + function beginListRequest() { + invalidateListRequest(); + const abortController = new AbortController(); + listRequestAbortControllerRef.current = abortController; + const requestGeneration = listRequestGenerationRef.current; + return { requestGeneration, abortController }; + } + + function invalidateListRequest() { + listRequestGenerationRef.current += 1; + listRequestAbortControllerRef.current?.abort(); + listRequestAbortControllerRef.current = null; + } + function buildListQuery(): AdminEditorAssetListQuery { return { - ownerUserId: ownerUserId || null, + ownerUserId: ownerUserId.trim() || null, keyword: keyword.trim() || null, createdAfter: dateInputToStartRfc3339(createdAfter), createdBefore: dateInputToEndRfc3339(createdBefore), @@ -143,7 +245,7 @@ export function AdminEditorAssetQueryPage({ />