123

frontend/src/pages/Writer/Images.tsx

@@ -14,7 +14,6 @@ import {
   bulkUpdateImagesStatus,
   ContentImage,
   fetchAPI,
-  publishContent,
 } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { FileIcon, DownloadIcon, BoltIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
@@ -25,6 +24,7 @@ import { useResourceDebug } from '../../hooks/useResourceDebug';
 import PageHeader from '../../components/common/PageHeader';
 import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import { Modal } from '../../components/ui/modal';
+import { BulkWordPressPublish } from '../../components/WordPressPublish';
 
 export default function Images() {
   const toast = useToast();
@@ -208,50 +208,8 @@ export default function Images() {
 
   // Bulk action handler
   const handleBulkAction = useCallback(async (action: string, ids: string[]) => {
-    if (action === 'bulk_publish_wordpress') {
-      // Filter to only publish items that have images generated 
-      const readyItems = images
-        .filter(item => ids.includes(item.content_id.toString()))
-        .filter(item => item.overall_status === 'complete');
-      
-      if (readyItems.length === 0) {
-        toast.warning('No items are ready for WordPress publishing. Items must have generated images and not already be published.');
-        return;
-      }
-      
-      try {
-        let successCount = 0;
-        let failedCount = 0;
-        const errors: string[] = [];
-        
-        // Process each item individually using the existing publishContent function
-        for (const item of readyItems) {
-          try {
-            await publishContent(item.content_id);
-            successCount++;
-          } catch (error: any) {
-            failedCount++;
-            errors.push(`${item.content_title}: ${error.message}`);
-          }
-        }
-        
-        if (successCount > 0) {
-          toast.success(`Successfully published ${successCount} item(s) to WordPress`);
-        }
-        if (failedCount > 0) {
-          toast.warning(`${failedCount} item(s) failed to publish`);
-        }
-        
-        // Reload images to reflect the updated WordPress status
-        loadImages();
-      } catch (error: any) {
-        console.error('Bulk WordPress publish error:', error);
-        toast.error(`Failed to bulk publish to WordPress: ${error.message || 'Network error'}`);
-      }
-    } else {
-      toast.info(`Bulk action "${action}" for ${ids.length} items`);
-    }
-  }, [images, toast, loadImages]);
+    toast.info(`Bulk action "${action}" for ${ids.length} items`);
+  }, [toast]);
 
   // Row action handler
   const handleRowAction = useCallback(async (action: string, row: ContentImagesGroup) => {
@@ -260,13 +218,25 @@ export default function Images() {
       setStatusUpdateRecordName(row.content_title || `Content #${row.content_id}`);
       setIsStatusModalOpen(true);
     } else if (action === 'publish_wordpress') {
-      // Handle WordPress publishing for individual item using existing publishContent function
+      // Handle WordPress publishing for individual item using WordPress API endpoint
       try {
-        // Use the existing publishContent function from the API
-        const result = await publishContent(row.content_id);
-        toast.success(`Successfully published "${row.content_title}" to WordPress! View at: ${result.external_url}`);
-        // Reload images to reflect the updated WordPress status
-        loadImages();
+        const response = await fetchAPI(`/api/wordpress/publish/`, {
+          method: 'POST',
+          body: JSON.stringify({
+            content_id: row.content_id.toString()
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        
+        if (response.success) {
+          toast.success(`Successfully published "${row.content_title}" to WordPress!`);
+          // Reload images to reflect the updated WordPress status
+          loadImages();
+        } else {
+          toast.error(`Failed to publish: ${response.message}`);
+        }
       } catch (error: any) {
         console.error('WordPress publish error:', error);
         toast.error(`Failed to publish to WordPress: ${error.message || 'Network error'}`);
@@ -531,6 +501,24 @@ export default function Images() {
         title="Content Images" 
         badge={{ icon: <FileIcon />, color: 'orange' }}
         navigation={<ModuleNavigationTabs tabs={writerTabs} />}
+        actions={
+          <BulkWordPressPublish
+            contentItems={images.map(item => ({
+              content_id: item.content_id,
+              content_title: item.content_title,
+              overall_status: item.overall_status
+            }))}
+            onPublishComplete={(results) => {
+              if (results.success.length > 0) {
+                toast.success(`Published ${results.success.length} items successfully`);
+              }
+              if (results.failed.length > 0) {
+                toast.error(`Failed to publish ${results.failed.length} items`);
+              }
+              loadImages();
+            }}
+          />
+        }
       />
       <TablePageTemplate
       columns={pageConfig.columns}