fix: reset object pagination when changing folders

Author: cxymds

components/object/list.tsx

@@ -39,6 +39,11 @@ import { exportFile } from "@/lib/export-file"
 import { getContentType } from "@/lib/mime-types"
 import { formatBytes } from "@/lib/functions"
 import { buildBucketPath } from "@/lib/bucket-path"
+import {
+  createObjectListScope,
+  shouldApplyObjectListResponse,
+  shouldResetObjectListPagination,
+} from "@/lib/object-list-state"
 import {
   resolveBucketVersioningState,
   shouldForceDeleteObjects,
@@ -104,14 +109,34 @@ export function ObjectList({
   const [deleteAllVersions, setDeleteAllVersions] = React.useState(false)
 
   const prefix = decodeURIComponent(path)
+  const listScope = React.useMemo(
+    () =>
+      createObjectListScope({
+        bucket,
+        prefix,
+        pageSize,
+        showDeleted,
+      }),
+    [bucket, prefix, pageSize, showDeleted],
+  )
   const canBulkDelete = canCapability("objects.bulkDelete", { bucket, prefix })
   const canBulkDownload = canCapability("objects.download", { bucket, prefix })
 
   const bucketPath = React.useCallback((p?: string | string[]) => buildBucketPath(bucket, p), [bucket])
+  const requestIdRef = React.useRef(0)
+  const activeScopeRef = React.useRef(listScope)
+  const previousScopeRef = React.useRef(listScope)
+
+  React.useEffect(() => {
+    activeScopeRef.current = listScope
+  }, [listScope])
 
   const fetchObjects = React.useCallback(
-    async (tokenOverride?: string) => {
-      const token = tokenOverride !== undefined ? tokenOverride : continuationToken
+    async (options?: { token?: string; resetPagination?: boolean }) => {
+      const token = options?.resetPagination ? undefined : (options?.token ?? continuationToken)
+      const requestId = requestIdRef.current + 1
+      requestIdRef.current = requestId
+      const requestScope = activeScopeRef.current
       setLoading(true)
       try {
         const response = await listObject(bucket, prefix || undefined, pageSize, token, {
@@ -124,6 +149,17 @@ export function ObjectList({
           NextContinuationToken?: string
         }
 
+        if (
+          !shouldApplyObjectListResponse({
+            requestId,
+            activeRequestId: requestIdRef.current,
+            requestScope,
+            activeScope: activeScopeRef.current,
+          })
+        ) {
+          return
+        }
+
         setNextToken(r.NextContinuationToken)
 
         const prefixItems: ObjectRow[] = (r.CommonPrefixes ?? []).map((item) => ({
@@ -142,7 +178,18 @@ export function ObjectList({
 
         setData([...prefixItems, ...objectItems])
       } finally {
-        setTimeout(() => setLoading(false), 200)
+        window.setTimeout(() => {
+          if (
+            shouldApplyObjectListResponse({
+              requestId,
+              activeRequestId: requestIdRef.current,
+              requestScope,
+              activeScope: activeScopeRef.current,
+            })
+          ) {
+            setLoading(false)
+          }
+        }, 200)
       }
     },
     [bucket, prefix, pageSize, continuationToken, showDeleted, listObject],
@@ -151,17 +198,19 @@ export function ObjectList({
   const prevRefreshTriggerRef = React.useRef(refreshTrigger)
 
   React.useEffect(() => {
+    const shouldResetPagination = shouldResetObjectListPagination(previousScopeRef.current, listScope)
+    previousScopeRef.current = listScope
     const isRefresh = prevRefreshTriggerRef.current !== refreshTrigger
     prevRefreshTriggerRef.current = refreshTrigger
 
-    if (isRefresh) {
+    if (isRefresh || shouldResetPagination) {
       setContinuationToken(undefined)
       setTokenHistory([])
-      void fetchObjects(undefined)
+      void fetchObjects({ resetPagination: true })
     } else {
       void fetchObjects()
     }
-  }, [bucket, prefix, pageSize, continuationToken, showDeleted, refreshTrigger, fetchObjects])
+  }, [listScope, bucket, prefix, pageSize, continuationToken, showDeleted, refreshTrigger, fetchObjects])
 
   const prevDeleteTaskIdsRef = React.useRef<Set<string>>(new Set())
 
@@ -175,7 +224,7 @@ export function ObjectList({
       const anyActive = currentDeleteTasks.some((t) => ["pending", "running"].includes(t.status))
       if (!anyActive) {
         // No more active delete tasks, refresh the list
-        void fetchObjects()
+        void fetchObjects({ resetPagination: true })
       }
     }
 
@@ -576,7 +625,7 @@ export function ObjectList({
                 ) : null}
               </>
             ) : null}
-            <Button variant="outline" onClick={() => (onRefresh ?? fetchObjects)()}>
+            <Button variant="outline" onClick={() => (onRefresh ? onRefresh() : void fetchObjects({ resetPagination: true }))}>
               <RiRefreshLine className="size-4" />
               <span>{t("Refresh")}</span>
             </Button>

lib/object-list-state.ts

@@ -0,0 +1,39 @@
+export interface ObjectListScope {
+  bucket: string
+  prefix: string
+  pageSize: number
+  showDeleted: boolean
+}
+
+interface ObjectListResponseGuardParams {
+  requestId: number
+  activeRequestId: number
+  requestScope: ObjectListScope
+  activeScope: ObjectListScope
+}
+
+export function createObjectListScope(scope: ObjectListScope): ObjectListScope {
+  return scope
+}
+
+export function isSameObjectListScope(left: ObjectListScope, right: ObjectListScope): boolean {
+  return (
+    left.bucket === right.bucket &&
+    left.prefix === right.prefix &&
+    left.pageSize === right.pageSize &&
+    left.showDeleted === right.showDeleted
+  )
+}
+
+export function shouldResetObjectListPagination(previousScope: ObjectListScope, nextScope: ObjectListScope): boolean {
+  return !isSameObjectListScope(previousScope, nextScope)
+}
+
+export function shouldApplyObjectListResponse({
+  requestId,
+  activeRequestId,
+  requestScope,
+  activeScope,
+}: ObjectListResponseGuardParams): boolean {
+  return requestId === activeRequestId && isSameObjectListScope(requestScope, activeScope)
+}

tests/lib/object-list-state.test.ts

@@ -0,0 +1,121 @@
+import test from "node:test"
+import assert from "node:assert/strict"
+import {
+  createObjectListScope,
+  shouldApplyObjectListResponse,
+  shouldResetObjectListPagination,
+} from "../../lib/object-list-state.js"
+
+test("shouldResetObjectListPagination returns false for the same listing scope", () => {
+  const previousScope = createObjectListScope({
+    bucket: "bucket-a",
+    prefix: "folder-a/",
+    pageSize: 25,
+    showDeleted: false,
+  })
+  const nextScope = createObjectListScope({
+    bucket: "bucket-a",
+    prefix: "folder-a/",
+    pageSize: 25,
+    showDeleted: false,
+  })
+
+  assert.equal(shouldResetObjectListPagination(previousScope, nextScope), false)
+})
+
+test("shouldResetObjectListPagination returns true when prefix changes", () => {
+  const previousScope = createObjectListScope({
+    bucket: "bucket-a",
+    prefix: "folder-a/",
+    pageSize: 25,
+    showDeleted: false,
+  })
+  const nextScope = createObjectListScope({
+    bucket: "bucket-a",
+    prefix: "",
+    pageSize: 25,
+    showDeleted: false,
+  })
+
+  assert.equal(shouldResetObjectListPagination(previousScope, nextScope), true)
+})
+
+test("shouldResetObjectListPagination returns true when the bucket changes", () => {
+  const previousScope = createObjectListScope({
+    bucket: "bucket-a",
+    prefix: "",
+    pageSize: 25,
+    showDeleted: false,
+  })
+  const nextScope = createObjectListScope({
+    bucket: "bucket-b",
+    prefix: "",
+    pageSize: 25,
+    showDeleted: false,
+  })
+
+  assert.equal(shouldResetObjectListPagination(previousScope, nextScope), true)
+})
+
+test("shouldApplyObjectListResponse rejects stale requests", () => {
+  assert.equal(
+    shouldApplyObjectListResponse({
+      requestId: 2,
+      activeRequestId: 3,
+      requestScope: createObjectListScope({
+        bucket: "bucket-a",
+        prefix: "",
+        pageSize: 25,
+        showDeleted: false,
+      }),
+      activeScope: createObjectListScope({
+        bucket: "bucket-a",
+        prefix: "",
+        pageSize: 25,
+        showDeleted: false,
+      }),
+    }),
+    false,
+  )
+})
+
+test("shouldApplyObjectListResponse rejects responses from an old scope", () => {
+  assert.equal(
+    shouldApplyObjectListResponse({
+      requestId: 3,
+      activeRequestId: 3,
+      requestScope: createObjectListScope({
+        bucket: "bucket-a",
+        prefix: "folder-a/",
+        pageSize: 25,
+        showDeleted: false,
+      }),
+      activeScope: createObjectListScope({
+        bucket: "bucket-a",
+        prefix: "",
+        pageSize: 25,
+        showDeleted: false,
+      }),
+    }),
+    false,
+  )
+})
+
+test("shouldApplyObjectListResponse accepts the latest response for the current scope", () => {
+  const scope = createObjectListScope({
+    bucket: "bucket-a",
+    prefix: "",
+    pageSize: 25,
+    showDeleted: false,
+  })
+
+  assert.equal(
+    shouldApplyObjectListResponse({
+      requestId: 4,
+      activeRequestId: 4,
+      requestScope: scope,
+      activeScope: scope,
+    }),
+    true,
+  )
+})