fix(table): pagesize

app/person/dashboard/components/PersonalProjectTable.tsx

@@ -8,6 +8,10 @@ import {
   SettingCustomPageSizeControl,
   usePersistentPageSizeOptions,
 } from "@/components/setting/PageSurface"
+import {
+  getPersistedPageSizeOptions,
+  resolvePageSizeWithinOptions,
+} from "@/components/setting/pageSize"
 import { Button, Group, Stack, Text } from "@mantine/core"
 import { DatePickerInput, type DatesRangeValue } from "@mantine/dates"
 
@@ -66,7 +70,13 @@ export default function PersonalProjectTable() {
   const [loading, setLoading] = useState(false)
 
   const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(10)
+  const [pageSize, setPageSize] = useState(() =>
+    resolvePageSizeWithinOptions(
+      10,
+      getPersistedPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS),
+      10
+    )
+  )
   const {
     recordsPerPageOptions,
     addCustomPageSize,

app/person/dashboard/components/PersonalTaskTable.tsx

@@ -14,6 +14,10 @@ import {
   SettingListHeader,
   usePersistentPageSizeOptions,
 } from "@/components/setting/PageSurface"
+import {
+  getPersistedPageSizeOptions,
+  resolvePageSizeWithinOptions,
+} from "@/components/setting/pageSize"
 import { Button, Group, Stack, Text, UnstyledButton } from "@mantine/core"
 import { IconRefresh } from "@tabler/icons-react"
 import { DataTableColumn } from "mantine-datatable"
@@ -27,7 +31,13 @@ export default function PersonalTaskTable() {
   const setBackProps = useBackUrlStore((s) => s.setBackProps)
 
   const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(10)
+  const [pageSize, setPageSize] = useState(() =>
+    resolvePageSizeWithinOptions(
+      10,
+      getPersistedPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS),
+      10
+    )
+  )
   const {
     recordsPerPageOptions,
     addCustomPageSize,

app/person/report/page.tsx

@@ -18,6 +18,10 @@ import {
   SettingPage,
   usePersistentPageSizeOptions,
 } from "@/components/setting/PageSurface"
+import {
+  getPersistedPageSizeOptions,
+  resolvePageSizeWithinOptions,
+} from "@/components/setting/pageSize"
 import {
   Badge,
   Button,
@@ -126,7 +130,13 @@ export default function PersonReportPage() {
   const [queryTrigger, setQueryTrigger] = useState(0)
 
   const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(20)
+  const [pageSize, setPageSize] = useState(() =>
+    resolvePageSizeWithinOptions(
+      20,
+      getPersistedPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS),
+      20
+    )
+  )
   const {
     recordsPerPageOptions,
     addCustomPageSize,

components/setting/pageSize.ts

@@ -0,0 +1,71 @@
+const CUSTOM_PAGE_SIZE_STORAGE_KEY = "cowa:custom-records-per-page-options:v1"
+
+function normalizePageSizeOptions(values: number[]) {
+  return Array.from(
+    new Set(values.filter((value) => Number.isInteger(value) && value > 0))
+  ).sort((a, b) => a - b)
+}
+
+function normalizeCustomPageSizeCache(value: unknown) {
+  if (!Array.isArray(value)) return []
+
+  return normalizePageSizeOptions(value.map((item) => Number(item)))
+}
+
+export function resolvePageSizeWithinOptions(
+  pageSize: number | undefined,
+  availableOptions: number[],
+  fallbackPageSize: number
+) {
+  const normalizedOptions = normalizePageSizeOptions(availableOptions)
+
+  if (
+    typeof pageSize === "number" &&
+    Number.isInteger(pageSize) &&
+    pageSize > 0 &&
+    normalizedOptions.includes(pageSize)
+  ) {
+    return pageSize
+  }
+
+  if (
+    Number.isInteger(fallbackPageSize) &&
+    fallbackPageSize > 0 &&
+    normalizedOptions.includes(fallbackPageSize)
+  ) {
+    return fallbackPageSize
+  }
+
+  return normalizedOptions[0] ?? fallbackPageSize
+}
+
+export function getPersistedPageSizeOptions(defaultOptions: number[]) {
+  const normalizedDefaultOptions = normalizePageSizeOptions(defaultOptions)
+
+  if (typeof window === "undefined") {
+    return normalizedDefaultOptions
+  }
+
+  try {
+    const rawValue = window.localStorage.getItem(CUSTOM_PAGE_SIZE_STORAGE_KEY)
+    if (!rawValue) {
+      return normalizedDefaultOptions
+    }
+
+    const parsedValue = JSON.parse(rawValue) as
+      | { state?: { customPageSizeCache?: unknown } }
+      | number[]
+      | null
+
+    const customPageSizeCache = Array.isArray(parsedValue)
+      ? normalizeCustomPageSizeCache(parsedValue)
+      : normalizeCustomPageSizeCache(parsedValue?.state?.customPageSizeCache)
+
+    return normalizePageSizeOptions([
+      ...normalizedDefaultOptions,
+      ...customPageSizeCache,
+    ])
+  } catch {
+    return normalizedDefaultOptions
+  }
+}