GPT

Basic Database Operations

// app/routes/users.tsx import { json, type LoaderFunctionArgs } from '@remix-run/node'; import { useLoaderData } from '@remix-run/react'; import { sql } from '~/lib/db.server'; interface User { id: number; name: stri

Prompt text

Original English text. Replace placeholders with your own details.

// app/routes/users.tsx
import { json, type LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { sql } from '~/lib/db.server';

interface User {
 id: number;
 name: string;
 email: string;
}

export async function loader({ request }: LoaderFunctionArgs) {
 try {
 const users = await sql<User[]>`
 SELECT id, name, email
 FROM users
 ORDER BY name ASC
 `;
 return json({ users });
 } catch (error: any) {
 throw new Error(`Failed to fetch users: ${error.message}`);
 }
}

export async function action({ request }: LoaderFunctionArgs) {
 const formData = await request.formData();
 const action = formData.get('action');

 try {
 switch (action) {
 case 'create': {
 const name = formData.get('name') as string;
 const email = formData.get('email') as string;

 const [user] = await sql<User[]>`
 INSERT INTO users (name, email)
 VALUES (${name}, ${email})
 RETURNING id, name, email
 `;
 return json({ user });
 }

 case 'update': {
 const id = parseInt(formData.get('id') as string);
 const name = formData.get('name') as string;
 const email = formData.get('email') as string;

 const [user] = await sql<User[]>`
 UPDATE users
 SET name = ${name}, email = ${email}
 WHERE id = ${id}
 RETURNING id, name, email
 `;
 return json({ user });
 }

 case 'delete': {
 const id = parseInt(formData.get('id') as string);
 await sql`DELETE FROM users WHERE id = ${id}`;
 return json({ success: true });
 }

 default:
 throw new Error('Invalid action');
 }
 } catch (error: any) {
 throw new Error(`Failed to perform action: ${error.message}`);
 }
}

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

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

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

 <ul>
 {users.map((user) => (
 <li key={user.id}>
 <form method="post" style={{ display: 'inline' }}>
 <input type="hidden" name="action" value="delete" />
 <input type="hidden" name="id" value={user.id} />
 <span>{user.name} ({user.email})</span>
 <button type="submit">Delete</button>
 </form>
 </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 →