Avoid stale connected account fallback; post via mock social API and add JSON headers

components/ContentScheduler.tsx

@@ -1,7 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { oauthService } from '../services/oauthService';
 import Spinner from './Spinner';
 
+interface SocialAccount {
+  id: string;
+  platform: string;
+  username: string;
+  status: 'connected' | 'disconnected';
+  connectedAt?: string;
+}
+
 interface ScheduledPost {
   id: string;
   platform: string;
@@ -34,17 +41,21 @@ const ContentScheduler: React.FC<ContentSchedulerProps> = ({ availableContent =
   const [recurringCount, setRecurringCount] = useState(4);
   const [isScheduling, setIsScheduling] = useState(false);
   const [filterStatus, setFilterStatus] = useState<string>('all');
+  const [connectedAccounts, setConnectedAccounts] = useState<SocialAccount[]>([]);
+
+  const socialApiBase = 'http://localhost:3001/api/social';
 
   const platforms = [
-    { id: 'instagram', name: 'Instagram', icon: '📷' },
-    { id: 'twitter', name: 'Twitter/X', icon: '🐦' },
-    { id: 'linkedin', name: 'LinkedIn', icon: '💼' },
-    { id: 'facebook', name: 'Facebook', icon: '👍' },
-    { id: 'tiktok', name: 'TikTok', icon: '🎵' }
+    { id: 'instagram', name: 'Instagram', icon: '📷', apiName: 'Instagram' },
+    { id: 'twitter', name: 'Twitter/X', icon: '🐦', apiName: 'Twitter' },
+    { id: 'linkedin', name: 'LinkedIn', icon: '💼', apiName: 'LinkedIn' },
+    { id: 'facebook', name: 'Facebook', icon: '👍', apiName: 'Facebook' },
+    { id: 'tiktok', name: 'TikTok', icon: '🎵', apiName: 'TikTok' }
   ];
 
   useEffect(() => {
     loadScheduledPosts();
+    fetchConnectedAccounts();
     setupScheduler();
 
     // Load sample content if none provided
@@ -71,6 +82,20 @@ const ContentScheduler: React.FC<ContentSchedulerProps> = ({ availableContent =
     }
   }, []);
 
+  const fetchConnectedAccounts = async (): Promise<SocialAccount[]> => {
+    try {
+      const res = await fetch(`${socialApiBase}/accounts`);
+      if (res.ok) {
+        const data = await res.json();
+        setConnectedAccounts(data);
+        return data;
+      }
+    } catch (error) {
+      console.error('Failed to fetch connected accounts:', error);
+    }
+    return [];
+  };
+
   const loadScheduledPosts = () => {
     const stored = localStorage.getItem('scheduled_posts');
     if (stored) {
@@ -106,12 +131,32 @@ const ContentScheduler: React.FC<ContentSchedulerProps> = ({ availableContent =
 
     for (const post of postsToCheck) {
       try {
-        if (!oauthService.isConnected(post.platform)) {
-          updatePostStatus(post.id, 'failed', `${post.platform} is not connected`);
+        const latestAccounts = await fetchConnectedAccounts();
+        const platformConfig = platforms.find(platform => platform.id === post.platform);
+        const apiPlatform = platformConfig?.apiName ?? post.platform;
+        const isConnected = latestAccounts.some(account => account.platform === apiPlatform);
+
+        if (!isConnected) {
+          updatePostStatus(post.id, 'failed', `${platformConfig?.name ?? post.platform} is not connected`);
           continue;
         }
 
-        const result = await oauthService.postToPlatform(post.platform, post.content);
+        const response = await fetch(`${socialApiBase}/publish`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            platform: apiPlatform,
+            content: post.content.caption,
+            image: post.content.imageUrl ?? post.content.videoUrl
+          })
+        });
+
+        if (!response.ok) {
+          const errorBody = await response.json().catch(() => ({}));
+          throw new Error(errorBody.error || response.statusText);
+        }
+
+        const result = await response.json();
         updatePostStatus(post.id, 'posted', undefined, result);
       } catch (error: any) {
         updatePostStatus(post.id, 'failed', error.message);
@@ -313,7 +358,7 @@ const ContentScheduler: React.FC<ContentSchedulerProps> = ({ availableContent =
           <h5 className="text-sm font-medium text-gray-300 mb-2">Select Platforms</h5>
           <div className="flex flex-wrap gap-2">
             {platforms.map(platform => {
-              const isConnected = oauthService.isConnected(platform.id);
+              const isConnected = connectedAccounts.some(account => account.platform === platform.apiName);
               const isSelected = selectedPlatforms.includes(platform.id);
 
               return (

services/oauthService.ts

@@ -331,7 +331,8 @@ class OAuthService {
     const mediaResponse = await fetch(`${apiUrl}/${account.userId}/media`, {
       method: 'POST',
       headers: {
-        'Authorization': `Bearer ${accessToken}`
+        'Authorization': `Bearer ${accessToken}`,
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         image_url: content.imageUrl,
@@ -346,7 +347,8 @@ class OAuthService {
     const publishResponse = await fetch(`${apiUrl}/${account.userId}/media_publish`, {
       method: 'POST',
       headers: {
-        'Authorization': `Bearer ${accessToken}`
+        'Authorization': `Bearer ${accessToken}`,
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         creation_id: mediaData.id
@@ -366,7 +368,8 @@ class OAuthService {
       const mediaResponse = await fetch(`${apiUrl}/media/upload`, {
         method: 'POST',
         headers: {
-          'Authorization': `Bearer ${accessToken}`
+          'Authorization': `Bearer ${accessToken}`,
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
           media: content.imageUrl
@@ -394,7 +397,7 @@ class OAuthService {
 
     const postData: any = {
       author: `urn:li:person:${account.userId}`,
-      lifecycleState: 'pUBLISHED',
+      lifecycleState: 'PUBLISHED',
       specificContent: {
         'com.linkedin.ugc.ShareContent': {
           shareCommentary: {
@@ -450,7 +453,8 @@ class OAuthService {
     const response = await fetch(`${apiUrl}/${account.userId}/feed`, {
       method: 'POST',
       headers: {
-        'Authorization': `Bearer ${accessToken}`
+        'Authorization': `Bearer ${accessToken}`,
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify(postData)
     });