GPT

Component Implementation

'use client' import { useState } from 'react' import { useRouter } from 'next/navigation' import { getUsers, createUser, deleteUser } from '@/app/actions/users' import { useEffect } from 'react' import type { User } fro

Prompt text

Original English text. Replace placeholders with your own details.

'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { getUsers, createUser, deleteUser } from '@/app/actions/users'
import { useEffect } from 'react'
import type { User } from '@prisma/client'

export default function UsersPage() {
 const router = useRouter()
 const [users, setUsers] = useState<User[]>([])
 const [loading, setLoading] = useState(true)
 const [error, setError] = useState<string | null>(null)
 const [newUser, setNewUser] = useState({ email: '', name: '' })

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

 async function loadUsers() {
 try {
 const data = await getUsers()
 setUsers(data)
 } catch (e) {
 setError('Failed to load users')
 } finally {
 setLoading(false)
 }
 }

 async function handleSubmit(e: React.FormEvent) {
 e.preventDefault()
 setLoading(true)
 setError(null)
 try {
 await createUser(newUser)
 setNewUser({ email: '', name: '' })
 await loadUsers()
 router.refresh()
 } catch (e) {
 setError('Failed to create user')
 } finally {
 setLoading(false)
 }
 }

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

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

 return (
 <div>
 <h1>Users</h1>

 <form onSubmit={handleSubmit} className="form">
 <input
 type="email"
 placeholder="Email"
 value={newUser.email}
 onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
 required
 />
 <input
 type="text"
 placeholder="Name"
 value={newUser.name}
 onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
 />
 <button type="submit" disabled={loading}>Add User</button>
 </form>

 <ul className="list">
 {users.map((user) => (
 <li key={user.id} className="list-item">
 <span>{user.name} ({user.email})</span>
 <button
 onClick={() => handleDelete(user.id)}
 disabled={loading}
 >
 Delete
 </button>
 </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 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.5rem;
 border-bottom: 1px solid #eee;
 }

 .list-item button {
 margin-left: 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 →