feat: implement pagination for server list with customizable items pe… (#534)

2026-01-06 14:47:56 -05:00 · 2026-01-01 13:36:09 +08:00
parent 7f2fca9636
commit 0be6c36e12
12 changed files with 384 additions and 43 deletions
--- a/frontend/src/components/ui/Pagination.tsx
+++ b/frontend/src/components/ui/Pagination.tsx
@@ -1,16 +1,20 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
+  disabled?: boolean;
 }

 const Pagination: React.FC<PaginationProps> = ({
  currentPage,
  totalPages,
-  onPageChange
+  onPageChange,
+  disabled = false
 }) => {
+  const { t } = useTranslation();
  // Generate page buttons
  const getPageButtons = () => {
    const buttons = [];
@@ -95,26 +99,26 @@ const Pagination: React.FC<PaginationProps> = ({
    <div className="flex justify-center items-center my-6">
      <button
        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
-        disabled={currentPage === 1}
-        className={`px-3 py-1 rounded mr-2 ${currentPage === 1
+        disabled={disabled || currentPage === 1}
+        className={`px-3 py-1 rounded mr-2 ${disabled || currentPage === 1
          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
          : 'bg-gray-200 hover:bg-gray-300 text-gray-700 btn-secondary'
          }`}
      >
-        &laquo; Prev
+        &laquo; {t('common.previous')}
      </button>

      <div className="flex">{getPageButtons()}</div>

      <button
        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
-        disabled={currentPage === totalPages}
-        className={`px-3 py-1 rounded ml-2 ${currentPage === totalPages
+        disabled={disabled || currentPage === totalPages}
+        className={`px-3 py-1 rounded ml-2 ${disabled || currentPage === totalPages
          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
          : 'bg-gray-200 hover:bg-gray-300 text-gray-700 btn-secondary'
          }`}
      >
-        Next &raquo;
+        {t('common.next')} &raquo;
      </button>
    </div>
  );
--- a/frontend/src/contexts/ServerContext.tsx
+++ b/frontend/src/contexts/ServerContext.tsx
@@ -17,6 +17,16 @@ const CONFIG = {
  },
 };

+// Pagination info type
+interface PaginationInfo {
+  page: number;
+  limit: number;
+  total: number;
+  totalPages: number;
+  hasNextPage: boolean;
+  hasPrevPage: boolean;
+}
+
 // Context type definition
 interface ServerContextType {
  servers: Server[];
@@ -24,6 +34,11 @@ interface ServerContextType {
  setError: (error: string | null) => void;
  isLoading: boolean;
  fetchAttempts: number;
+  pagination: PaginationInfo | null;
+  currentPage: number;
+  serversPerPage: number;
+  setCurrentPage: (page: number) => void;
+  setServersPerPage: (limit: number) => void;
  triggerRefresh: () => void;
  refreshIfNeeded: () => void; // Smart refresh with debounce
  handleServerAdd: () => void;
@@ -45,6 +60,9 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
  const [refreshKey, setRefreshKey] = useState(0);
  const [isInitialLoading, setIsInitialLoading] = useState(true);
  const [fetchAttempts, setFetchAttempts] = useState(0);
+  const [pagination, setPagination] = useState<PaginationInfo | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [serversPerPage, setServersPerPage] = useState(10);

  // Timer reference for polling
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -73,18 +91,31 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
      const fetchServers = async () => {
        try {
          console.log('[ServerContext] Fetching servers from API...');
-          const data = await apiGet('/servers');
+          // Build query parameters for pagination
+          const params = new URLSearchParams();
+          params.append('page', currentPage.toString());
+          params.append('limit', serversPerPage.toString());
+          const data = await apiGet(`/servers?${params.toString()}`);

          // Update last fetch time
          lastFetchTimeRef.current = Date.now();

          if (data && data.success && Array.isArray(data.data)) {
            setServers(data.data);
+            // Update pagination info if available
+            if (data.pagination) {
+              setPagination(data.pagination);
+            } else {
+              setPagination(null);
+            }
          } else if (data && Array.isArray(data)) {
+            // Compatibility handling for non-paginated responses
            setServers(data);
+            setPagination(null);
          } else {
            console.error('Invalid server data format:', data);
            setServers([]);
+            setPagination(null);
          }

          // Reset error state
@@ -114,7 +145,7 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
      // Set up regular polling
      intervalRef.current = setInterval(fetchServers, CONFIG.normal.pollingInterval);
    },
-    [t],
+    [t, currentPage, serversPerPage],
  );

  // Watch for authentication status changes
@@ -150,7 +181,11 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
    const fetchInitialData = async () => {
      try {
        console.log('[ServerContext] Initial fetch - attempt', attemptsRef.current + 1);
-        const data = await apiGet('/servers');
+        // Build query parameters for pagination
+        const params = new URLSearchParams();
+        params.append('page', currentPage.toString());
+        params.append('limit', serversPerPage.toString());
+        const data = await apiGet(`/servers?${params.toString()}`);

        // Update last fetch time
        lastFetchTimeRef.current = Date.now();
@@ -158,6 +193,12 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
        // Handle API response wrapper object, extract data field
        if (data && data.success && Array.isArray(data.data)) {
          setServers(data.data);
+          // Update pagination info if available
+          if (data.pagination) {
+            setPagination(data.pagination);
+          } else {
+            setPagination(null);
+          }
          setIsInitialLoading(false);
          // Initialization successful, start normal polling (skip immediate to avoid duplicate fetch)
          startNormalPolling({ immediate: false });
@@ -165,6 +206,7 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
        } else if (data && Array.isArray(data)) {
          // Compatibility handling, if API directly returns array
          setServers(data);
+          setPagination(null);
          setIsInitialLoading(false);
          // Initialization successful, start normal polling (skip immediate to avoid duplicate fetch)
          startNormalPolling({ immediate: false });
@@ -173,6 +215,7 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
          // If data format is not as expected, set to empty array
          console.error('Invalid server data format:', data);
          setServers([]);
+          setPagination(null);
          setIsInitialLoading(false);
          // Initialization successful but data is empty, start normal polling (skip immediate)
          startNormalPolling({ immediate: false });
@@ -227,7 +270,7 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
    return () => {
      clearTimer();
    };
-  }, [refreshKey, t, isInitialLoading, startNormalPolling]);
+  }, [refreshKey, t, isInitialLoading, startNormalPolling, currentPage, serversPerPage]);

  // Manually trigger refresh (always refreshes)
  const triggerRefresh = useCallback(() => {
@@ -383,12 +426,28 @@ export const ServerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
    [t, triggerRefresh],
  );

+  // Handle page change
+  const handlePageChange = useCallback((page: number) => {
+    setCurrentPage(page);
+  }, []);
+
+  // Handle servers per page change
+  const handleServersPerPageChange = useCallback((limit: number) => {
+    setServersPerPage(limit);
+    setCurrentPage(1); // Reset to first page when changing page size
+  }, []);
+
  const value: ServerContextType = {
    servers,
    error,
    setError,
    isLoading: isInitialLoading,
    fetchAttempts,
+    pagination,
+    currentPage,
+    serversPerPage,
+    setCurrentPage: handlePageChange,
+    setServersPerPage: handleServersPerPageChange,
    triggerRefresh,
    refreshIfNeeded,
    handleServerAdd,
--- a/frontend/src/pages/ServersPage.tsx
+++ b/frontend/src/pages/ServersPage.tsx
@@ -8,6 +8,7 @@ import EditServerForm from '@/components/EditServerForm';
 import { useServerData } from '@/hooks/useServerData';
 import DxtUploadForm from '@/components/DxtUploadForm';
 import JSONImportForm from '@/components/JSONImportForm';
+import Pagination from '@/components/ui/Pagination';

 const ServersPage: React.FC = () => {
  const { t } = useTranslation();
@@ -17,6 +18,11 @@ const ServersPage: React.FC = () => {
    error,
    setError,
    isLoading,
+    pagination,
+    currentPage,
+    serversPerPage,
+    setCurrentPage,
+    setServersPerPage,
    handleServerAdd,
    handleServerEdit,
    handleServerRemove,
@@ -151,19 +157,66 @@ const ServersPage: React.FC = () => {
          <p className="text-gray-600">{t('app.noServers')}</p>
        </div>
      ) : (
-        <div className="space-y-6">
-          {servers.map((server, index) => (
-            <ServerCard
-              key={index}
-              server={server}
-              onRemove={handleServerRemove}
-              onEdit={handleEditClick}
-              onToggle={handleServerToggle}
-              onRefresh={triggerRefresh}
-              onReload={handleServerReload}
-            />
-          ))}
-        </div>
+        <>
+          <div className="space-y-6">
+            {servers.map((server, index) => (
+              <ServerCard
+                key={index}
+                server={server}
+                onRemove={handleServerRemove}
+                onEdit={handleEditClick}
+                onToggle={handleServerToggle}
+                onRefresh={triggerRefresh}
+                onReload={handleServerReload}
+              />
+            ))}
+          </div>
+
+          <div className="flex items-center mb-4">
+            <div className="flex-[2] text-sm text-gray-500">
+              {pagination ? (
+                t('common.showing', {
+                  start: (pagination.page - 1) * pagination.limit + 1,
+                  end: Math.min(pagination.page * pagination.limit, pagination.total),
+                  total: pagination.total
+                })
+              ) : (
+                t('common.showing', {
+                  start: 1,
+                  end: servers.length,
+                  total: servers.length
+                })
+              )}
+            </div>
+            <div className="flex-[4] flex justify-center">
+              {pagination && pagination.totalPages > 1 && (
+                <Pagination
+                  currentPage={currentPage}
+                  totalPages={pagination.totalPages}
+                  onPageChange={setCurrentPage}
+                  disabled={isLoading}
+                />
+              )}
+            </div>
+            <div className="flex-[2] flex items-center justify-end space-x-2">
+              <label htmlFor="perPage" className="text-sm text-gray-600">
+                {t('common.itemsPerPage')}:
+              </label>
+              <select
+                id="perPage"
+                value={serversPerPage}
+                onChange={(e) => setServersPerPage(Number(e.target.value))}
+                disabled={isLoading}
+                className="border rounded p-1 text-sm btn-secondary outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <option value={5}>5</option>
+                <option value={10}>10</option>
+                <option value={20}>20</option>
+                <option value={50}>50</option>
+              </select>
+            </div>
+          </div>
+        </>
      )}

      {editingServer && (