GPT

Component Implementation

'use client' import { useState, useEffect } from 'react' import { useRouter } from 'next/navigation' import { getPosts, createPost, updatePost, deletePost } from '@/app/actions/posts' import type { Post } from '@prisma/

Prompt text

Original English text. Replace placeholders with your own details.

'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { getPosts, createPost, updatePost, deletePost } from '@/app/actions/posts'
import type { Post } from '@prisma/client'

export default function PostsPage() {
 const router = useRouter()
 const [posts, setPosts] = useState<Post[]>([])
 const [loading, setLoading] = useState(true)
 const [error, setError] = useState<string | null>(null)
 const [newPost, setNewPost] = useState({
 title: '',
 content: '',
 authorId: ''
 })

 useEffect(() => {
 loadPosts()
 }, [])

 async function loadPosts() {
 try {
 const data = await getPosts()
 setPosts(data)
 } catch (e) {
 setError('Failed to load posts')
 } finally {
 setLoading(false)
 }
 }

 async function handleSubmit(e: React.FormEvent) {
 e.preventDefault()
 setLoading(true)
 setError(null)
 try {
 await createPost({
 ...newPost,
 authorId: parseInt(newPost.authorId)
 })
 setNewPost({ title: '', content: '', authorId: '' })
 await loadPosts()
 router.refresh()
 } catch (e) {
 setError('Failed to create post')
 } finally {
 setLoading(false)
 }
 }

 async function handleTogglePublish(id: number, published: boolean) {
 setLoading(true)
 setError(null)
 try {
 await updatePost(id, { published: !published })
 await loadPosts()
 router.refresh()
 } catch (e) {
 setError(`Failed to update post ${id}`)
 } finally {
 setLoading(false)
 }
 }

 async function handleDelete(id: number) {
 setLoading(true)
 setError(null)
 try {
 await deletePost(id)
 await loadPosts()
 router.refresh()
 } catch (e) {
 setError(`Failed to delete post ${id}`)
 } finally {
 setLoading(false)
 }
 }

 if (loading) return <div>Loading...</div>
 if (error) return <div className="error">{error}</div>

 return (
 <div>
 <h1>Posts</h1>

 <form onSubmit={handleSubmit} className="form">
 <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" disabled={loading}>Add Post</button>
 </form>

 <ul className="list">
 {posts.map((post) => (
 <li key={post.id} className="list-item">
 <div className="post-header">
 <h2>{post.title}</h2>
 <div className="post-actions">
 <button
 onClick={() => handleTogglePublish(post.id, post.published)}
 disabled={loading}
 >
 {post.published ? 'Unpublish' : 'Publish'}
 </button>
 <button
 onClick={() => handleDelete(post.id)}
 disabled={loading}
 >
 Delete
 </button>
 </div>
 </div>
 <p>{post.content}</p>
 <p className="post-meta">By: {post.author.name}</p>
 </li>
 ))}
 </ul>

 <style jsx>{`
 .error {
 color: red;
 margin-bottom: 1rem;
 }

 .form {
 margin-bottom: 2rem;
 }

 .form input {
 margin-right: 0.5rem;
 }

 .list {
 list-style: none;
 padding: 0;
 }

 .list-item {
 margin-bottom: 2rem;
 padding: 1rem;
 border: 1px solid #eee;
 border-radius: 4px;
 }

 .post-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
 }

 .post-header h2 {
 margin: 0;
 }

 .post-actions button {
 margin-left: 0.5rem;
 }

 .post-meta {
 color: #666;
 font-size: 0.9rem;
 margin-top: 1rem;
 }
 `}</style>
 </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 →