action

import { redirect, type ActionArgs, type WithActionData } from '@gio.js/core';
import { GioForm } from '@gio.js/react';
import { db } from '../../lib/db.server.ts';

export async function action(req: ActionArgs) {
  const form = await req.formData();
  const email = String(form.get('email') ?? '').trim();
  if (!email.includes('@')) {
    return { status: 422, data: { error: 'Enter a valid email', email } };
  }
  await db.messages.insert({ email });
  return redirect('/contact/thanks');                  // 303 See Other
}

export default function Contact({ actionData }: WithActionData<typeof action>) {
  return (
    <GioForm>
      <input name="email" defaultValue={actionData?.email} aria-invalid={actionData ? true : undefined} />
      {actionData && <p role="alert">{actionData.error}</p>}
      <button type="submit">Send</button>
    </GioForm>
  );
}

import { redirect, type ActionArgs, type GetServerSideProps, type InferPageProps } from '@gio.js/core';
import { GioForm } from '@gio.js/react';
import { db, type Todo } from '../../../lib/db.server.ts';

export async function action(req: ActionArgs<'/lists/:id'>) {
  const form = await req.formData();
  const deleteId = form.get('delete');                 // sent only by a Delete button
  if (deleteId !== null) {
    await db.todos.delete(String(deleteId));
  } else {
    await db.todos.insert({ list: req.params.id, title: String(form.get('title') ?? '') });
  }
  return redirect(`/lists/${req.params.id}`);         // reload-safe: the browser GETs the list
}

export const getServerSideProps: GetServerSideProps<{ todos: Todo[] }, '/lists/:id'> = async (ctx) => ({
  props: { todos: await db.todos.inList(ctx.params.id) },
});

export default function List({ todos }: InferPageProps<typeof getServerSideProps>) {
  return (
    <GioForm>
      <input name="title" aria-label="New todo" />
      <button>Add</button>{/* first in the form: Enter in the field adds */}
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.title} <button name="delete" value={todo.id}>Delete</button>
          </li>
        ))}
      </ul>
    </GioForm>
  );
}

import { redirect, type ActionArgs, type WithActionData } from '@gio.js/core';
import { GioForm } from '@gio.js/react';
import { sessions } from '../../lib/session.server.ts';
import { verifyPassword } from '../../lib/users.server.ts';

export async function action(req: ActionArgs) {
  const form = await req.formData();
  const user = await verifyPassword(String(form.get('email')), String(form.get('password')));
  if (user === null) return { status: 401, data: { error: 'Wrong email or password' } };

  const session = sessions.getSession(req);
  session.set('userId', user.id);
  return redirect('/dashboard', { headers: { 'set-cookie': sessions.commitSession(session) } });
}

export default function Login({ actionData }: WithActionData<typeof action>) {
  return (
    <GioForm>
      <input name="email" type="email" autoComplete="username" aria-label="Email" />
      <input name="password" type="password" autoComplete="current-password" aria-label="Password" />
      {actionData && <p role="alert">{actionData.error}</p>}
      <button>Sign in</button>
    </GioForm>
  );
}

import { buildReport } from '../../lib/reports.server.ts';

export async function action() {
  const csv = await buildReport();
  return new Response(csv, {
    headers: {
      'content-type': 'text/csv; charset=utf-8',
      'content-disposition': 'attachment; filename="report.csv"',
    },
  });
}

// A plain form: the browser saves the file and stays on the page.
export default function ExportPage() {
  return (
    <form method="post">
      <button>Download the report</button>
    </form>
  );
}