GPT

Route Implementation

import { json, type LoaderFunction, type ActionFunction } from '@remix-run/node' import { useLoaderData, Form, useActionData } from '@remix-run/react' import { getUsers, createUser, deleteUser } from '~/models/user.serve

Prompt text

Original English text. Replace placeholders with your own details.

import { json, type LoaderFunction, type ActionFunction } from '@remix-run/node'
import { useLoaderData, Form, useActionData } from '@remix-run/react'
import { getUsers, createUser, deleteUser } from '~/models/user.server'

export const loader: LoaderFunction = async () => {
 const users = await getUsers()
 return json({ users })
}

export const action: ActionFunction = async ({ request }) => {
 const formData = await request.formData()
 const intent = formData.get('intent')

 if (intent === 'create') {
 const email = formData.get('email')
 const name = formData.get('name')

 if (typeof email !== 'string' || typeof name !== 'string') {
 return json({ error: 'Invalid form data' }, { status: 400 })
 }

 try {
 const user = await createUser({ email, name })
 return json({ user })
 } catch (error) {
 return json({ error: 'Failed to create user' }, { status: 500 })
 }
 }

 if (intent === 'delete') {
 const userId = formData.get('userId')

 if (typeof userId !== 'string') {
 return json({ error: 'Invalid user ID' }, { status: 400 })
 }

 try {
 await deleteUser(parseInt(userId))
 return json({ success: true })
 } catch (error) {
 return json({ error: 'Failed to delete user' }, { status: 500 })
 }
 }

 return json({ error: 'Invalid intent' }, { status: 400 })
}

export default function Users() {
 const { users } = useLoaderData<typeof loader>()
 const actionData = useActionData<typeof action>()

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

 {actionData?.error && (
 <div className="error">{actionData.error}</div>
 )}

 <Form method="post" className="user-form">
 <input type="hidden" name="intent" value="create" />
 <input
 type="email"
 name="email"
 placeholder="Email"
 required
 />
 <input
 type="text"
 name="name"
 placeholder="Name"
 />
 <button type="submit">Add User</button>
 </Form>

 <ul className="user-list">
 {users.map((user) => (
 <li key={user.id}>
 <span>{user.name} ({user.email})</span>
 <Form method="post" style={{ display: 'inline' }}>
 <input type="hidden" name="intent" value="delete" />
 <input type="hidden" name="userId" value={user.id} />
 <button type="submit">Delete</button>
 </Form>
 </li>
 ))}
 </ul>

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

 .user-form {
 margin-bottom: 2rem;
 }

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

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

 .user-list li {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.5rem;
 border-bottom: 1px solid #eee;
 }

 .user-list 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 →