Best AI Coding Tools for Remix

import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
import { json, redirect } from '@remix-run/node';
import { useLoaderData, useNavigation, Form } from '@remix-run/react';
import { z } from 'zod';
import { db } from '~/lib/db.server';
import { requireUserId } from '~/lib/session.server';

const CommentSchema = z.object({
  content: z.string().min(1, 'Comment cannot be empty').max(500),
});

export async function loader({ params }: LoaderFunctionArgs) {
  const post = await db.post.findUnique({
    where: { slug: params.slug },
    include: { comments: { include: { author: true }, orderBy: { createdAt: 'desc' } } },
  });
  if (!post) throw new Response('Not Found', { status: 404 });
  return json({ post });
}

export async function action({ request, params }: ActionFunctionArgs) {
  const userId = await requireUserId(request);
  const formData = await request.formData();
  const parsed = CommentSchema.safeParse({ content: formData.get('content') });

  if (!parsed.success) {
    return json({ errors: parsed.error.flatten().fieldErrors }, { status: 400 });
  }

  await db.comment.create({
    data: { content: parsed.data.content, postSlug: params.slug!, authorId: userId },
  });
  return json({ success: true });
}

export default function PostPage() {
  const { post } = useLoaderData<typeof loader>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <Form method="post">
        <textarea name="content" required maxLength={500} />
        <button type="submit" disabled={isSubmitting}>
          {isSubmitting ? 'Posting...' : 'Add Comment'}
        </button>
      </Form>
    </article>
  );
}