feat: implement extraction event handling and update extraction list on status changes

src/pages/ExtractionsPage.tsx

@@ -15,7 +15,8 @@ import {
   type ExtractionStatus,
   extractionsService,
 } from '@/lib/api/services/extractions'
-import { useEffect, useState } from 'react'
+import { EXTRACTION_EVENTS, extractionEvents } from '@/lib/events'
+import { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 export function ExtractionsPage() {
@@ -51,7 +52,7 @@ export function ExtractionsPage() {
     return () => clearTimeout(handler)
   }, [searchQuery])
 
-  const fetchExtractions = async () => {
+  const fetchExtractions = useCallback(async () => {
     try {
       setLoading(true)
       setError(null)
@@ -74,11 +75,11 @@ export function ExtractionsPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [debouncedSearchQuery, sortBy, sortOrder, statusFilter, currentPage, pageSize])
 
   useEffect(() => {
     fetchExtractions()
-  }, [debouncedSearchQuery, sortBy, sortOrder, statusFilter, currentPage, pageSize])
+  }, [fetchExtractions])
 
   // Reset to page 1 when filters change
   useEffect(() => {
@@ -87,6 +88,33 @@ export function ExtractionsPage() {
     }
   }, [debouncedSearchQuery, sortBy, sortOrder, statusFilter, pageSize])
 
+  // Listen for extraction events to refresh the list
+  useEffect(() => {
+    const handleExtractionStatusUpdate = () => {
+      fetchExtractions()
+    }
+
+    const handleExtractionCompleted = () => {
+      fetchExtractions()
+    }
+
+    const handleExtractionFailed = () => {
+      fetchExtractions()
+    }
+
+    // Subscribe to extraction events
+    extractionEvents.on(EXTRACTION_EVENTS.EXTRACTION_STATUS_UPDATED, handleExtractionStatusUpdate)
+    extractionEvents.on(EXTRACTION_EVENTS.EXTRACTION_COMPLETED, handleExtractionCompleted)
+    extractionEvents.on(EXTRACTION_EVENTS.EXTRACTION_FAILED, handleExtractionFailed)
+
+    return () => {
+      // Cleanup event listeners
+      extractionEvents.off(EXTRACTION_EVENTS.EXTRACTION_STATUS_UPDATED, handleExtractionStatusUpdate)
+      extractionEvents.off(EXTRACTION_EVENTS.EXTRACTION_COMPLETED, handleExtractionCompleted)
+      extractionEvents.off(EXTRACTION_EVENTS.EXTRACTION_FAILED, handleExtractionFailed)
+    }
+  }, [fetchExtractions])
+
   const handlePageChange = (page: number) => {
     setCurrentPage(page)
   }
@@ -112,6 +140,9 @@ export function ExtractionsPage() {
       setUrl('')
       setShowCreateDialog(false)
 
+      // Emit event for new extraction created
+      extractionEvents.emit(EXTRACTION_EVENTS.EXTRACTION_CREATED, response.extraction)
+
       // Refresh the extractions list
       fetchExtractions()
     } catch (err) {