feat: save items per page to localStorage and remove i18n cookies

Author: x0sina

dashboard/src/components/admins/AdminsTable.tsx

@@ -10,6 +10,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { cn } from '@/lib/utils'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { Checkbox } from '@/components/ui/checkbox.tsx'
+import { getAdminsPerPageLimitSize, setAdminsPerPageLimitSize } from '@/utils/userPreferenceStorage'
 
 interface AdminFilters {
   sort: string
@@ -105,7 +106,7 @@ const ResetUsersUsageConfirmationDialog = ({ adminUsername, isOpen, onClose, onC
 export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetUsage }: AdminsTableProps) {
   const { t } = useTranslation()
   const [currentPage, setCurrentPage] = useState(0)
-  const [itemsPerPage, setItemsPerPage] = useState(10)
+  const [itemsPerPage, setItemsPerPage] = useState(getAdminsPerPageLimitSize())
   const [isChangingPage, setIsChangingPage] = useState(false)
   const [filters, setFilters] = useState<AdminFilters>({
     sort: '-created_at',
@@ -206,6 +207,9 @@ export default function AdminsTable({ onEdit, onDelete, onToggleStatus, onResetU
     setIsChangingPage(true)
     setItemsPerPage(value)
     setCurrentPage(0) // Reset to first page when items per page changes
+    
+    // Save to localStorage
+    setAdminsPerPageLimitSize(value.toString())
 
     try {
       // Immediate refetch without delay

dashboard/src/components/users/users-table.tsx

@@ -5,7 +5,7 @@ import useDirDetection from '@/hooks/use-dir-detection'
 import { UseEditFormValues } from '@/pages/_dashboard.users'
 import { useGetUsers, UserResponse } from '@/service/api'
 import { useAdmin } from '@/hooks/use-admin'
-import { getUsersPerPageLimitSize } from '@/utils/userPreferenceStorage'
+import { getUsersPerPageLimitSize, setUsersPerPageLimitSize } from '@/utils/userPreferenceStorage'
 import { useQueryClient } from '@tanstack/react-query'
 import { memo, useCallback, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -202,6 +202,9 @@ const UsersTable = memo(() => {
     setIsChangingPage(true)
     setItemsPerPage(value)
     setCurrentPage(0) // Reset to first page when items per page changes
+    
+    // Save to localStorage
+    setUsersPerPageLimitSize(value.toString())
 
     // Remove async/await and setTimeout for instant response
     setIsChangingPage(false)

dashboard/src/locales/i18n.ts

@@ -21,13 +21,13 @@ i18n
       },
       load: 'languageOnly',
       detection: {
-        caches: ['localStorage', 'sessionStorage', 'cookie'],
+        caches: ['localStorage', 'sessionStorage'],
       },
       backend: {
         loadPath: joinURL(import.meta.env.BASE_URL, `statics/locales/{{lng}}.json`),
       },
     },
-    function (err, t) {
+    function (err) {
       if (err) {
         console.error('i18next initialization error:', err)
       }

dashboard/src/utils/userPreferenceStorage.ts

@@ -1,10 +1,22 @@
 const NUM_USERS_PER_PAGE_LOCAL_STORAGE_KEY = 'pasargaurd-num-users-per-page'
-const NUM_USERS_PER_PAGE_DEFAULT = 10
-export const getUsersPerPageLimitSize = () => {
-  const numUsersPerPage = (typeof localStorage !== 'undefined' && localStorage.getItem(NUM_USERS_PER_PAGE_LOCAL_STORAGE_KEY)) || NUM_USERS_PER_PAGE_DEFAULT.toString() // this catches `null` values
-  return parseInt(numUsersPerPage) || NUM_USERS_PER_PAGE_DEFAULT // this catches NaN values
+const NUM_ADMINS_PER_PAGE_LOCAL_STORAGE_KEY = 'pasargaurd-num-admins-per-page'
+const NUM_ITEMS_PER_PAGE_DEFAULT = 10
+
+// Generic function for any table type
+export const getItemsPerPageLimitSize = (tableType: 'users' | 'admins' = 'users') => {
+  const storageKey = tableType === 'users' ? NUM_USERS_PER_PAGE_LOCAL_STORAGE_KEY : NUM_ADMINS_PER_PAGE_LOCAL_STORAGE_KEY
+  const numItemsPerPage = (typeof localStorage !== 'undefined' && localStorage.getItem(storageKey)) || NUM_ITEMS_PER_PAGE_DEFAULT.toString() // this catches `null` values
+  return parseInt(numItemsPerPage) || NUM_ITEMS_PER_PAGE_DEFAULT // this catches NaN values
 }
 
-export const setUsersPerPageLimitSize = (value: string) => {
-  return typeof localStorage !== 'undefined' && localStorage.setItem(NUM_USERS_PER_PAGE_LOCAL_STORAGE_KEY, value)
+export const setItemsPerPageLimitSize = (value: string, tableType: 'users' | 'admins' = 'users') => {
+  const storageKey = tableType === 'users' ? NUM_USERS_PER_PAGE_LOCAL_STORAGE_KEY : NUM_ADMINS_PER_PAGE_LOCAL_STORAGE_KEY
+  return typeof localStorage !== 'undefined' && localStorage.setItem(storageKey, value)
 }
+
+// Legacy functions for backward compatibility
+export const getUsersPerPageLimitSize = () => getItemsPerPageLimitSize('users')
+export const setUsersPerPageLimitSize = (value: string) => setItemsPerPageLimitSize(value, 'users')
+
+export const getAdminsPerPageLimitSize = () => getItemsPerPageLimitSize('admins')
+export const setAdminsPerPageLimitSize = (value: string) => setItemsPerPageLimitSize(value, 'admins')