feat: Integrate @tanstack/react-query for improved data fetching and state management in HistoryModal; update API error handling and enhance request interceptors for better error notifications

frontend/src/components/HistoryModal.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import api from '../lib/api.js';
+import { useQuery } from '@tanstack/react-query';
 import { useNotify } from './NotifyProvider.jsx';
 import { IconHistory, IconRefresh, IconDeviceFloppy } from '@tabler/icons-react';
 
@@ -8,20 +9,18 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
   const [items, setItems] = useState([]);
   const notify = useNotify();
 
-  const fetchHistory = async () => {
-    if (!resource) return;
-    setLoading(true);
-    try {
-      const res = await api.get(`/history/${resource}`);
-      setItems(Array.isArray(res.data?.items) ? res.data.items : []);
-    } catch (e) {
-      notify.error('Не удалось загрузить историю версий');
-    } finally {
-      setLoading(false);
-    }
-  };
+  const { refetch } = useQuery({
+    queryKey: ['history', resource],
+    enabled: false,
+    queryFn: async () => {
+      const res = await api.get(`/history/${resource}`)
+      const data = Array.isArray(res.data?.items) ? res.data.items : []
+      setItems(data)
+      return data
+    },
+  })
 
-  useEffect(() => { if (show) fetchHistory(); }, [show, resource]);
+  useEffect(() => { if (show) refetch().catch(() => notify.error('Не удалось загрузить историю версий')); }, [show, resource]);
 
   const rollback = async (versionId) => {
     if (!versionId) return;
@@ -54,7 +53,7 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
           <div className="modal-body">
             <div className="d-flex justify-content-between align-items-center mb-2">
               <div className="text-muted small">Ресурс: <code>{resource}</code></div>
-              <button className="btn btn-outline-secondary btn-sm" onClick={fetchHistory} disabled={loading}>
+              <button className="btn btn-outline-secondary btn-sm" onClick={() => refetch()} disabled={loading}>
                 <IconRefresh className={loading ? 'spin' : ''} />
                 <span className="ms-1">Обновить</span>
               </button>