feat: display total amount of operations in profile page

guansss · guansss · commit ea80664a291d · 2025-02-21T21:26:34.000+08:00
diff --git a/src/apis/operation-set.ts b/src/apis/operation-set.ts
@@ -67,10 +67,12 @@ export function useOperationSets({
   )
 
   const isReachingEnd = !!pages?.some((page) => !page.hasNext)
+  const total = pages?.[0]?.total ?? 0
   const operationSets = pages?.map((page) => page.data).flat()
 
   return {
     operationSets,
+    total,
     error,
     setSize,
     isValidating,
@@ -125,6 +127,7 @@ export function useOperationSetSearch({
   if (id) {
     return {
       operationSets: [operationSet],
+      total: operationSet ? 1 : 0,
       isReachingEnd: true,
       setSize: noop,
 
diff --git a/src/apis/operation.ts b/src/apis/operation.ts
@@ -92,7 +92,7 @@ export function useOperations({
       // 如果指定了 id 列表，但是列表为空，就直接返回空数据。不然要是直接传空列表，就相当于没有这个参数，
       // 会导致后端返回所有数据
       if (req.copilotIds?.length === 0) {
-        return { data: [], hasNext: false }
+        return { data: [], hasNext: false, total: 0 }
       }
 
       const res = await new OperationApi({
@@ -121,6 +121,7 @@ export function useOperations({
   )
 
   const isReachingEnd = !!pages?.some((page) => !page.hasNext)
+  const total = pages?.[0]?.total ?? 0
 
   const _operations = pages?.map((page) => page.data).flat() ?? []
 
@@ -134,6 +135,7 @@ export function useOperations({
   return {
     error,
     operations,
+    total,
     setSize,
     isValidating,
     isReachingEnd,
diff --git a/src/components/OperationList.tsx b/src/components/OperationList.tsx
@@ -2,77 +2,84 @@ import { Button, NonIdealState } from '@blueprintjs/core'
 
 import { UseOperationsParams, useOperations } from 'apis/operation'
 import { useAtomValue } from 'jotai'
-import { ComponentType, ReactNode } from 'react'
+import { ComponentType, ReactNode, useEffect } from 'react'
 
 import { neoLayoutAtom } from 'store/pref'
 
 import { NeoOperationCard, OperationCard } from './OperationCard'
 import { withSuspensable } from './Suspensable'
 
-export const OperationList: ComponentType<UseOperationsParams> =
-  withSuspensable(
-    (props) => {
-      const neoLayout = useAtomValue(neoLayoutAtom)
+interface OperationListProps extends UseOperationsParams {
+  onUpdate?: (params: { total: number }) => void
+}
 
-      const { operations, setSize, isValidating, isReachingEnd } =
-        useOperations({
-          ...props,
-          suspense: true,
-        })
+export const OperationList: ComponentType<OperationListProps> = withSuspensable(
+  ({ onUpdate, ...params }) => {
+    const neoLayout = useAtomValue(neoLayoutAtom)
 
-      // make TS happy: we got Suspense out there
-      if (!operations) throw new Error('unreachable')
+    const { operations, total, setSize, isValidating, isReachingEnd } =
+      useOperations({
+        ...params,
+        suspense: true,
+      })
 
-      const items: ReactNode = neoLayout ? (
-        <div
-          className="grid gap-4"
-          style={{
-            gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr)',
-          }}
-        >
-          {operations.map((operation) => (
-            <NeoOperationCard operation={operation} key={operation.id} />
-          ))}
-        </div>
-      ) : (
-        operations.map((operation) => (
-          <OperationCard operation={operation} key={operation.id} />
-        ))
-      )
+    // make TS happy: we got Suspense out there
+    if (!operations) throw new Error('unreachable')
 
-      return (
-        <>
-          {items}
+    useEffect(() => {
+      onUpdate?.({ total })
+    }, [total, onUpdate])
 
-          {isReachingEnd && operations.length === 0 && (
-            <NonIdealState
-              icon="slash"
-              title="没有找到任何作业"
-              description="(つД｀)･ﾟ･"
-            />
-          )}
+    const items: ReactNode = neoLayout ? (
+      <div
+        className="grid gap-4"
+        style={{
+          gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr)',
+        }}
+      >
+        {operations.map((operation) => (
+          <NeoOperationCard operation={operation} key={operation.id} />
+        ))}
+      </div>
+    ) : (
+      operations.map((operation) => (
+        <OperationCard operation={operation} key={operation.id} />
+      ))
+    )
 
-          {isReachingEnd && operations.length !== 0 && (
-            <div className="mt-8 w-full tracking-wider text-center select-none text-slate-500">
-              已经到底了哦 (ﾟ▽ﾟ)/
-            </div>
-          )}
+    return (
+      <>
+        {items}
 
-          {!isReachingEnd && (
-            <Button
-              loading={isValidating}
-              text="加载更多"
-              icon="more"
-              className="mt-2"
-              large
-              fill
-              onClick={() => setSize((size) => size + 1)}
-            />
-          )}
-        </>
-      )
-    },
-    {
-      retryOnChange: ['orderBy', 'keyword', 'levelKeyword', 'operator'],
-    },
-  )
+        {isReachingEnd && operations.length === 0 && (
+          <NonIdealState
+            icon="slash"
+            title="没有找到任何作业"
+            description="(つД｀)･ﾟ･"
+          />
+        )}
+
+        {isReachingEnd && operations.length !== 0 && (
+          <div className="mt-8 w-full tracking-wider text-center select-none text-slate-500">
+            已经到底了哦 (ﾟ▽ﾟ)/
+          </div>
+        )}
+
+        {!isReachingEnd && (
+          <Button
+            loading={isValidating}
+            text="加载更多"
+            icon="more"
+            className="mt-2"
+            large
+            fill
+            onClick={() => setSize((size) => size + 1)}
+          />
+        )}
+      </>
+    )
+  },
+  {
+    retryOnChange: ['orderBy', 'keyword', 'levelKeyword', 'operator'],
+  },
+)
diff --git a/src/components/OperationSetList.tsx b/src/components/OperationSetList.tsx
@@ -5,24 +5,32 @@ import {
   useOperationSetSearch,
 } from 'apis/operation-set'
 import { useAtomValue } from 'jotai'
-import { ComponentType, ReactNode } from 'react'
+import { ComponentType, ReactNode, useEffect } from 'react'
 
 import { neoLayoutAtom } from 'store/pref'
 
 import { NeoOperationSetCard, OperationSetCard } from './OperationSetCard'
 import { withSuspensable } from './Suspensable'
 
-export const OperationSetList: ComponentType<UseOperationSetsParams> =
+interface OperationSetListProps extends UseOperationSetsParams {
+  onUpdate?: (params: { total: number }) => void
+}
+
+export const OperationSetList: ComponentType<OperationSetListProps> =
   withSuspensable(
-    (props) => {
+    ({ onUpdate, ...params }) => {
       const neoLayout = useAtomValue(neoLayoutAtom)
 
-      const { operationSets, setSize, isValidating, isReachingEnd } =
-        useOperationSetSearch({ ...props, suspense: true })
+      const { operationSets, total, setSize, isValidating, isReachingEnd } =
+        useOperationSetSearch({ ...params, suspense: true })
 
       // make TS happy: we got Suspense out there
       if (!operationSets) throw new Error('unreachable')
 
+      useEffect(() => {
+        onUpdate?.({ total })
+      }, [total, onUpdate])
+
       const items: ReactNode = neoLayout ? (
         <div
           className="grid gap-4"
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
@@ -3,7 +3,6 @@ import { Button, ButtonGroup, Card } from '@blueprintjs/core'
 import { ComponentType, useState } from 'react'
 import { Navigate, useParams } from 'react-router-dom'
 
-import { withGlobalErrorBoundary } from 'components/GlobalErrorBoundary'
 import { OperationList } from 'components/OperationList'
 import { OperationSetList } from 'components/OperationSetList'
 import { OperationDrawer } from 'components/drawer/OperationDrawer'
@@ -25,6 +24,8 @@ const _ProfilePage: ComponentType = () => {
   const [listMode, setListMode] = useState<'operation' | 'operationSet'>(
     'operation',
   )
+  const [operationCount, setOperationCount] = useState(-1)
+  const [operationSetCount, setOperationSetCount] = useState(-1)
 
   return (
     <div className="flex flex-col md:flex-row px-8 mt-8 max-w-[96rem] mx-auto">
@@ -36,23 +37,33 @@ const _ProfilePage: ComponentType = () => {
               active={listMode === 'operation'}
               onClick={() => setListMode('operation')}
             >
-              作业
+              作业{operationCount === -1 ? '' : ` (${operationCount})`}
             </Button>
             <Button
               icon="folder-close"
               active={listMode === 'operationSet'}
               onClick={() => setListMode('operationSet')}
             >
-              作业集
+              作业集{operationSetCount === -1 ? '' : ` (${operationSetCount})`}
             </Button>
           </ButtonGroup>
         </div>
 
         <div className="tabular-nums">
           {listMode === 'operation' && (
-            <OperationList limit={10} orderBy="id" uploaderId={id} />
+            <OperationList
+              limit={10}
+              orderBy="id"
+              uploaderId={id}
+              onUpdate={({ total }) => setOperationCount(total)}
+            />
+          )}
+          {listMode === 'operationSet' && (
+            <OperationSetList
+              creatorId={id}
+              onUpdate={({ total }) => setOperationSetCount(total)}
+            />
           )}
-          {listMode === 'operationSet' && <OperationSetList creatorId={id} />}
         </div>
       </div>
       <div className="md:w-1/3 order-1 md:order-2">
