progress enforcing adr-0005

src/pages/admin/ActivityLog.tsx

@@ -1,9 +1,9 @@
 // src/pages/admin/ActivityLog.tsx
-import React, { useState, useEffect } from 'react';
-import { fetchActivityLog } from '../../services/apiClient';
+import React from 'react';
 import { ActivityLogItem } from '../../types';
 import { UserProfile } from '../../types';
 import { formatDistanceToNow } from 'date-fns';
+import { useActivityLogQuery } from '../../hooks/queries/useActivityLogQuery';
 
 export type ActivityLogClickHandler = (log: ActivityLogItem) => void;
 
@@ -74,33 +74,8 @@ const renderLogDetails = (log: ActivityLogItem, onLogClick?: ActivityLogClickHan
 };
 
 export const ActivityLog: React.FC<ActivityLogProps> = ({ userProfile, onLogClick }) => {
-  const [logs, setLogs] = useState<ActivityLogItem[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!userProfile) {
-      setIsLoading(false);
-      return;
-    }
-
-    const loadLogs = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const response = await fetchActivityLog(20, 0);
-        if (!response.ok)
-          throw new Error((await response.json()).message || 'Failed to fetch logs');
-        setLogs(await response.json());
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load activity.');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadLogs();
-  }, [userProfile]);
+  // Use TanStack Query for data fetching (ADR-0005 Phase 5)
+  const { data: logs = [], isLoading, error } = useActivityLogQuery(20, 0);
 
   if (!userProfile) {
     return null; // Don't render the component if the user is not logged in
@@ -112,7 +87,7 @@ export const ActivityLog: React.FC<ActivityLogProps> = ({ userProfile, onLogClic
         Recent Activity
       </h3>
       {isLoading && <p className="text-gray-500 dark:text-gray-400">Loading activity...</p>}
-      {error && <p className="text-red-500">{error}</p>}
+      {error && <p className="text-red-500">{error.message}</p>}
       {!isLoading && !error && logs.length === 0 && (
         <p className="text-gray-500 dark:text-gray-400">No recent activity to show.</p>
       )}