GPT

Component Implementation

import { useState } from 'react' import { usePosts } from '../hooks/usePosts' export function Posts() { const { posts, isLoading, error, createPost, updatePost, deletePost } = usePosts() const [newPost, setNewPost] =

Prompt text

Original English text. Replace placeholders with your own details.

import { useState } from 'react'
import { usePosts } from '../hooks/usePosts'

export function Posts() {
 const { posts, isLoading, error, createPost, updatePost, deletePost } = usePosts()
 const [newPost, setNewPost] = useState({
 title: '',
 content: '',
 authorId: ''
 })

 if (isLoading) return <div>Loading...</div>
 if (error) return <div>Error: {error.message}</div>

 const handleSubmit = (e: React.FormEvent) => {
 e.preventDefault()
 createPost({
 ...newPost,
 authorId: parseInt(newPost.authorId)
 })
 setNewPost({ title: '', content: '', authorId: '' })
 }

 const togglePublish = (id: number, published: boolean) => {
 updatePost({ id, data: { published: !published } })
 }

 return (
 <div>
 <h2>Posts</h2>

 <form onSubmit={handleSubmit}>
 <input
 type="text"
 placeholder="Title"
 value={newPost.title}
 onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
 required
 />
 <input
 type="text"
 placeholder="Content"
 value={newPost.content}
 onChange={(e) => setNewPost({ ...newPost, content: e.target.value })}
 />
 <input
 type="number"
 placeholder="Author ID"
 value={newPost.authorId}
 onChange={(e) => setNewPost({ ...newPost, authorId: e.target.value })}
 required
 />
 <button type="submit">Add Post</button>
 </form>

 <ul>
 {posts?.map((post) => (
 <li key={post.id}>
 <h3>{post.title}</h3>
 <p>{post.content}</p>
 <p>By: {post.author.name}</p>
 <button onClick={() => togglePublish(post.id, post.published)}>
 {post.published ? 'Unpublish' : 'Publish'}
 </button>
 <button onClick={() => deletePost(post.id)}>Delete</button>
 </li>
 ))}
 </ul>
 </div>
 )
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →