GPT

Route Examples

// app/routes/users.index.tsx import { json, type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node'; import { useLoaderData, Form } from '@remix-run/react'; import { getUsers, createUser, deleteUser }

Prompt text

Original English text. Replace placeholders with your own details.

// app/routes/users._index.tsx
import { json, type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
import { useLoaderData, Form } from '@remix-run/react';
import { getUsers, createUser, deleteUser } from '~/models/user.server';
import type { User } from '~/db/schema';

export async function loader() {
 try {
 const users = await getUsers();
 return json({ users });
 } catch (error: any) {
 throw new Error(`Failed to fetch users: ${error.message}`);
 }
}

export async function action({ request }: ActionFunctionArgs) {
 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 createUser({ name, email });
 return json({ user });
 }

 case 'delete': {
 const id = parseInt(formData.get('id') as string);
 await deleteUser(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
 name="name"
 placeholder="Name"
 required
 />
 <input
 name="email"
 type="email"
 placeholder="Email"
 required
 />
 <button type="submit">Add User</button>
 </Form>

 {users.length ? (
 <ul>
 {users.map((user) => (
 <li key={user.id}>
 {user.name} ({user.email})
 <Form method="post" style={{ display: 'inline' }}>
 <input type="hidden" name="action" value="delete" />
 <input type="hidden" name="id" value={user.id} />
 <button type="submit">Delete</button>
 </Form>
 </li>
 ))}
 </ul>
 ) : (
 <p>No users found.</p>
 )}
 </div>
 );
}

// app/routes/users.$id.tsx
import { json, type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
import { useLoaderData, Form } from '@remix-run/react';
import { getUserById, updateUser } from '~/models/user.server';

export async function loader({ params }: LoaderFunctionArgs) {
 const id = parseInt(params.id!);

 try {
 const user = await getUserById(id);
 if (!user) {
 throw new Response('Not Found', { status: 404 });
 }
 return json({ user });
 } catch (error: any) {
 throw new Error(`Failed to fetch user: ${error.message}`);
 }
}

export async function action({ params, request }: ActionFunctionArgs) {
 const id = parseInt(params.id!);
 const formData = await request.formData();
 const name = formData.get('name') as string;
 const email = formData.get('email') as string;

 try {
 const user = await updateUser(id, { name, email });
 return json({ user });
 } catch (error: any) {
 throw new Error(`Failed to update user: ${error.message}`);
 }
}

export default function EditUser() {
 const { user } = useLoaderData<typeof loader>();

 return (
 <div>
 <h1>Edit User</h1>

 <Form method="post">
 <input
 name="name"
 defaultValue={user.name}
 placeholder="Name"
 required
 />
 <input
 name="email"
 type="email"
 defaultValue={user.email}
 placeholder="Email"
 required
 />
 <button type="submit">Update User</button>
 </Form>
 </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 →