import React, { useState, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { fetchPosts, generatePost, createPost, publishPostDirect, deletePost, updatePostContent, clearError } from '../store/reducers/postsSlice'; import { fetchAccounts } from '../store/reducers/accountsSlice'; const Posts = () => { const dispatch = useDispatch(); const { items: posts, loading, error } = useSelector(state => state.posts); const { items: accounts } = useSelector(state => state.accounts); const [selectedAccount, setSelectedAccount] = useState(''); const [postContent, setPostContent] = useState(''); const [isGenerating, setIsGenerating] = useState(false); const [isCreating, setIsCreating] = useState(false); useEffect(() => { dispatch(fetchPosts()); dispatch(fetchAccounts()); dispatch(clearError()); }, [dispatch]); const handleGeneratePost = async () => { setIsGenerating(true); try { const result = await dispatch(generatePost()).unwrap(); // Handle case where content might be a list let content = result.content || 'Generated content will appear here...'; // If content is an array, take the first element if (Array.isArray(content)) { content = content[0] || 'Generated content will appear here...'; } setPostContent(content); } catch (err) { console.error('Failed to generate post:', err); // Show a user-friendly error message dispatch(clearError()); // You can dispatch a new action to set a specific error message // or use a local state variable to display the error } finally { setIsGenerating(false); } }; const handleCreatePost = async (e) => { e.preventDefault(); if (!selectedAccount || !postContent.trim()) { console.log('📝 [Posts] Missing required fields:', { selectedAccount, postContentLength: postContent.trim().length }); return; } console.log('📝 [Posts] Publishing post directly to LinkedIn and saving to database:', { selectedAccount, postContentLength: postContent.length }); setIsCreating(true); try { // First, publish directly to LinkedIn console.log('📝 [Posts] Publishing to LinkedIn'); await dispatch(publishPostDirect({ social_account_id: selectedAccount, text_content: postContent })).unwrap(); console.log('📝 [Posts] Published to LinkedIn successfully'); // Then save to database as already published console.log('📝 [Posts] Saving post to database as published'); await dispatch(createPost({ social_account_id: selectedAccount, text_content: postContent, is_published: true // Mark as published since we've already published it })).unwrap(); console.log('📝 [Posts] Post saved to database'); // Reset form setSelectedAccount(''); setPostContent(''); } catch (err) { console.error('📝 [Posts] Failed to publish and save post:', err); } finally { setIsCreating(false); } }; const handleDeletePost = async (postId) => { try { await dispatch(deletePost(postId)).unwrap(); } catch (err) { console.error('Failed to delete post:', err); } }; const handleContentChange = (content) => { setPostContent(content); }; // Filter published posts const publishedPosts = posts.filter(post => post.is_published); return (
{/* Header Section */}

Post Management

Create and publish your social media posts with intelligent content generation

{/* Stats Cards */}

Total Posts

{posts.length}

Published

{publishedPosts.length}

Accounts

{accounts.length}

{/* Error Display */} {error && (

{error}

)}
{/* Post Creation Section */}

Create New Post

{/* AI Generator */}

AI Content Generator

Powered by AI
{isGenerating && (

Please wait while we generate your post. This may take 2-5 minutes.

)}
{/* Content Editor */}