perf: dataTotal about optimized

Author: gemini2035

src/components/editor/operator/sheet/SheetOperator.tsx

@@ -16,7 +16,6 @@ import {
 
 export interface SheetOperatorProps {}
 
-const paginationSize = 60
 // const defaultRarityFilter = Array.from(
 //   new Array(Math.max(...OPERATORS.map(({ rarity }) => rarity)) + 1).keys(),
 // ).slice(Math.min(...OPERATORS.map(({ rarity }) => rarity)))
@@ -105,7 +104,7 @@ const SheetOperator: FC<SheetOperatorProps> = () => {
 
   const {
     data: operatorsAfterFiltered,
-    meta: { pagination: paginationAfterFiltered },
+    meta: { dataTotal },
   } = useOperatorAfterFiltered(profFilter, pagination)
 
   // prof listener
@@ -116,10 +115,8 @@ const SheetOperator: FC<SheetOperatorProps> = () => {
 
   // pagination listener
   useEffect(() => {
-    if (paginationAfterFiltered.total === pagination.total) return
-    setPagination(paginationAfterFiltered)
-    if (paginationAfterFiltered.current === 1) toTop()
-  }, [pagination.total, paginationAfterFiltered])
+    if (pagination.current === 1) toTop()
+  }, [pagination])
 
   return (
     <>
@@ -140,7 +137,7 @@ const SheetOperator: FC<SheetOperatorProps> = () => {
                   </div>
                 ))}
               </div>
-              <ShowMore {...{ pagination, setPagination }} />
+              <ShowMore {...{ pagination, setPagination, dataTotal }} />
             </>
           ) : (
             OperatorNoData

src/components/editor/operator/sheet/sheetOperator/ShowMore.tsx

@@ -6,27 +6,28 @@ import { PaginationFilter } from './useOperatorFilter'
 
 export interface ShowMoreProp {
   pagination: PaginationFilter
+  dataTotal: number
   setPagination: Dispatch<SetStateAction<PaginationFilter>>
 }
 
 export const defaultPagination: PaginationFilter = {
   current: 1,
   size: 60,
-  total: 0,
 }
 
 export const ShowMore: FC<ShowMoreProp> = ({
-  pagination: { current, size, total },
+  pagination: { current, size },
+  dataTotal,
   setPagination,
 }) => {
   const lastIndex = current * size
 
   return (
     <div className="flex items-center justify-center pt-3 cursor-default">
-      {lastIndex >= total ? (
+      {lastIndex >= dataTotal ? (
         <>
-          <H6>已经展示全部干员了({total})</H6>
-          {total > size && (
+          <H6>已经展示全部干员了({dataTotal})</H6>
+          {dataTotal > size && (
             <H6
               className="ml-1 cursor-pointer text-sm text-gray-500 hover:text-inherit hover:underline"
               onClick={() => setPagination(defaultPagination)}
@@ -45,7 +46,7 @@ export const ShowMore: FC<ShowMoreProp> = ({
             }))
           }
         >
-          显示更多干员(剩余{total - lastIndex})
+          显示更多干员(剩余{dataTotal - lastIndex})
         </H6>
       )}
     </div>

src/components/editor/operator/sheet/sheetOperator/useOperatorFilter.tsx

@@ -31,7 +31,6 @@ export interface RarityFilter {
 export interface PaginationFilter {
   size: number
   current: number
-  total: number
 }
 
 const generateCustomizedOperInfo = (name: string): OperatorInfo => ({
@@ -53,7 +52,7 @@ export const useOperatorAfterFiltered = (
   const filterResult = useProfFilterHandle(profFilter)
   //   rarity about
 
-  const total = filterResult.length
+  const dataTotal = filterResult.length
   //   pagination about
 
   //   filterResult
@@ -62,10 +61,7 @@ export const useOperatorAfterFiltered = (
     // return data after being paginated
     data: paginationFilterHandle(paginationFilter, filterResult),
     meta: {
-      pagination: {
-        ...paginationFilter,
-        total,
-      },
+      dataTotal,
     },
   }
 }