Implement a blog feed with fetching and state

Blog Feed Manager

You are building a blog feed component in React. Implement a BlogFeed component that fetches data from an API, displays a list of posts, and handles user interactions.

Requirements

1. Data Fetching: On mount, fetch data from an async fetchPosts() function. Display a loading state while fetching and handle potential error states.
2. Sorting: Provide a toggle to sort the posts by createdAt (newest first) or by title (alphabetical).
3. Optimistic Deletion: When a user clicks 'Delete' on a post:
   • Remove the post from the UI immediately (before the API call completes).
   • Call an async deletePost(postId) function.
   • If the API call fails, revert the state to show the deleted post again and display an error message.
4. Data Structure: Each post has an id (string), title (string), and createdAt (ISO string).

API Interfaces

// Provided functions
async function fetchPosts() { ... }
async function deletePost(postId) { ... }

Example Flow

• Initial State: Empty list, show 'Loading...'.
• Loaded: API returns [{id: '1', title: 'B', createdAt: '2023-01-01'}, {id: '2', title: 'A', createdAt: '2023-02-01'}].
• Sorting: Toggle 'Alphabetical' -> List reorders to 'A', then 'B'.
• Deletion: Click delete on 'A'. 'A' disappears instantly from UI. API call triggers. If deletePost('2') resolves, 'A' remains gone. If it rejects, 'A' reappears.

Constraints

• Use useState and useEffect hooks.
• Ensure the list remains deterministic even when an optimistic update is pending.