Refactor frontend API calls into hooks and complete task states

frontend/src/hooks/useBlocklist.ts

@@ -9,6 +9,7 @@ import {
   fetchBlocklists,
   fetchImportLog,
   fetchSchedule,
+  previewBlocklist,
   runImportNow,
   updateBlocklist,
   updateSchedule,
@@ -35,6 +36,7 @@ export interface UseBlocklistsReturn {
   createSource: (payload: BlocklistSourceCreate) => Promise<BlocklistSource>;
   updateSource: (id: number, payload: BlocklistSourceUpdate) => Promise<BlocklistSource>;
   removeSource: (id: number) => Promise<void>;
+  previewSource: (id: number) => Promise<PreviewResponse>;
 }
 
 /**
@@ -99,7 +101,20 @@ export function useBlocklists(): UseBlocklistsReturn {
     setSources((prev) => prev.filter((s) => s.id !== id));
   }, []);
 
-  return { sources, loading, error, refresh: load, createSource, updateSource, removeSource };
+  const previewSource = useCallback(async (id: number): Promise<PreviewResponse> => {
+    return previewBlocklist(id);
+  }, []);
+
+  return {
+    sources,
+    loading,
+    error,
+    refresh: load,
+    createSource,
+    updateSource,
+    removeSource,
+    previewSource,
+  };
 }
 
 // ---------------------------------------------------------------------------