Como integrar validação de CPF em aplicações Remix com loaders

CPFHUB_API_KEY=SUA_CHAVE_DE_API

// app/services/cpfhub.server.ts
export interface CpfData {
    cpf: string;
    name: string;
    nameUpper: string;
    gender: string;
    birthDate: string;
    day: number;
    month: number;
    year: number;
}

export interface CpfResponse {
    success: boolean;
    data: CpfData;
}

export async function consultarCpf(cpf: string): Promise<CpfResponse> {
    const cpfLimpo = cpf.replace(/\D/g, '');

    if (cpfLimpo.length !== 11) {
    throw new Error('CPF deve conter 11 dígitos');
    }

    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    try {
    const response = await fetch(`https://api.cpfhub.io/cpf/${cpfLimpo}`, {
    method: 'GET',
    headers: {
    'x-api-key': process.env.CPFHUB_API_KEY!,
    'Accept': 'application/json'
    },
    signal: controller.signal
    });

    clearTimeout(timeoutId);

    if (!response.ok) {
    if (response.status === 401) throw new Error('Chave de API inválida');
    throw new Error(`Erro HTTP ${response.status}`);
    }

    return await response.json();
    } catch (error) {
    clearTimeout(timeoutId);
    throw error;
    }
}

// app/routes/cpf.$cpf.tsx
import { json, type LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { consultarCpf } from '~/services/cpfhub.server';

export async function loader({ params }: LoaderFunctionArgs) {
    const cpf = params.cpf;

    if (!cpf) {
    throw new Response('CPF não informado', { status: 400 });
    }

    try {
    const resultado = await consultarCpf(cpf);
    return json(resultado);
    } catch (error) {
    throw new Response(
    error instanceof Error ? error.message : 'Erro na consulta',
    { status: 502 }
    );
    }
}

export default function CpfPage() {
    const resultado = useLoaderData<typeof loader>();

    return (
    <div>
    <h2>Resultado da validação</h2>
    {resultado.success ? (
    <dl>
    <dt>CPF</dt>
    <dd>{resultado.data.cpf}</dd>
    <dt>Nome</dt>
    <dd>{resultado.data.name}</dd>
    <dt>Gênero</dt>
    <dd>{resultado.data.gender === 'M' ? 'Masculino' : 'Feminino'}</dd>
    <dt>Data de nascimento</dt>
    <dd>{resultado.data.birthDate}</dd>
    </dl>
    ) : (
    <p>CPF não encontrado.</p>
    )}
    </div>
    );
}

// app/routes/validar-cpf.tsx
import { json, type ActionFunctionArgs } from '@remix-run/node';
import { Form, useActionData } from '@remix-run/react';
import { consultarCpf, type CpfResponse } from '~/services/cpfhub.server';

interface ActionData {
    resultado?: CpfResponse;
    error?: string;
}

export async function action({ request }: ActionFunctionArgs) {
    const formData = await request.formData();
    const cpf = formData.get('cpf') as string;

    if (!cpf) {
    return json<ActionData>({ error: 'CPF é obrigatório' }, { status: 400 });
    }

    try {
    const resultado = await consultarCpf(cpf);
    return json<ActionData>({ resultado });
    } catch (error) {
    return json<ActionData>({
    error: error instanceof Error ? error.message : 'Erro na consulta'
    }, { status: 502 });
    }
}

export default function ValidarCpfPage() {
    const data = useActionData<typeof action>();

    return (
    <div>
    <h2>Validar CPF</h2>

    <Form method="post">
    <label htmlFor="cpf">CPF:</label>
    <input
    type="text"
    id="cpf"
    name="cpf"
    placeholder="Digite o CPF"
    maxLength={14}
    required
    />
    <button type="submit">Validar</button>
    </Form>

    {data?.error && <p style={{ color: 'red' }}>{data.error}</p>}

    {data?.resultado?.success && (
    <dl>
    <dt>Nome</dt>
    <dd>{data.resultado.data.name}</dd>
    <dt>CPF</dt>
    <dd>{data.resultado.data.cpf}</dd>
    <dt>Data de nascimento</dt>
    <dd>{data.resultado.data.birthDate}</dd>
    </dl>
    )}
    </div>
    );
}

{
    "success": true,
    "data": {
    "cpf": "12345678900",
    "name": "João da Silva",
    "nameUpper": "JOÃO DA SILVA",
    "gender": "M",
    "birthDate": "15/06/1990",
    "day": 15,
    "month": 6,
    "year": 1990
    }
}

// Adicione no mesmo arquivo da rota
export function ErrorBoundary() {
    return (
    <div>
    <h2>Erro na validação</h2>
    <p>Não foi possível consultar o CPF. Tente novamente em alguns instantes.</p>
    </div>
    );
}