detail page

src/widgets/history/lib/useHistory.ts

@@ -3,6 +3,9 @@ import { useState, useEffect, useCallback } from 'react';
 import { DEFAULT_PAGE_SIZE } from './constants';
 import { HistoryState } from './types';
 import { DEFAULT_HISTORY_ITEMS } from './mock';
+import { useQuery } from '@tanstack/react-query';
+import { links } from '@/shared/request/links';
+import { apiRequest } from '@/shared/request/apiRequest';
 
 interface UseHistoryReturn extends HistoryState {
   refetch: () => void;
@@ -20,27 +23,37 @@ export const useHistory = (pageSize = DEFAULT_PAGE_SIZE): UseHistoryReturn => {
   const [currentPage, setCurrentPage] = useState(1);
   const [total, setTotal] = useState(0);
 
-  const loadHistory = useCallback(
-    async (page: number) => {
-      setState((prev) => ({ ...prev, status: 'loading', error: null }));
-      setTotal(0);
-      console.log(page);
+  const { data, refetch } = useQuery({
+    queryKey: ['history'],
+    queryFn: () => apiRequest('GET', links.history),
+    select: (response) => {
+      const { results, total } = response.data as {
+        results: [];
+        total: number;
+      };
+      return { results, total };
     },
-    [pageSize],
-  );
+  });
 
   useEffect(() => {
-    loadHistory(currentPage);
-  }, [currentPage, loadHistory]);
+    if (data) {
+      setState({
+        items: data?.results || [],
+        status: 'success',
+        error: null,
+      });
+      setTotal(data?.total || 0);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    refetch();
+  }, [currentPage]);
 
   const goToPage = useCallback((page: number) => {
     setCurrentPage(page);
   }, []);
 
-  const refetch = useCallback(() => {
-    loadHistory(currentPage);
-  }, [currentPage, loadHistory]);
-
   const totalPages = Math.ceil(total / pageSize);
 
   return {

src/widgets/history/ui/historyPage.tsx

@@ -4,19 +4,11 @@ import { useTranslations } from 'next-intl';
 import { useHistory } from '../lib/useHistory';
 import { HistoryTable } from './historyTable';
 import { Pagination } from './pagination';
-import { useQuery } from '@tanstack/react-query';
-import { apiRequest } from '@/shared/request/apiRequest';
-import { links } from '@/shared/request/links';
 
 // ─── Page Header ───────────────────────────────────────────────────────────────
 
 const PageHeader: React.FC = () => {
   const t = useTranslations('HistoryPage');
-  const { data } = useQuery({
-    queryKey: ['history'],
-    queryFn: () => apiRequest('GET', links.history),
-  });
-  console.log('History data:', data); // Debugging log
 
   return (
     <div className="mb-6">