Criar uma Fatura - Passo a Passo

1. Criar um Formulário: Primeiramente, é necessário um formulário para coletar os detalhes. Este é o local onde o usuário insere as informações da nova fatura;
2. Utilizar uma Server Action: Criar uma ação especial no servidor para processar os dados do formulário. Quando alguém preenche o formulário, essa ação é acionada;
3. Obter Dados do Formulário: Dentro da Server Action, extrair as informações do formulário. É como desembrulhar uma caixa para ver o que há dentro;
4. Verificar e Preparar os Dados: Analisar os dados e garantir que estão corretos. É como conferir se os ingredientes de uma receita estão frescos e adequados. Quando tudo estiver certo, preparar para inserir no banco de dados;
5. Inserir Dados: Inserir os dados no banco de dados;
6. Atualizar o Cache e Retornar à Página de Faturas: Após adicionar os dados, atualizar o cache. Isso garante que todos tenham acesso às informações mais recentes. Em seguida, redirecionar o usuário para a página de faturas para visualizar a nova fatura criada.

Voltar ao Projeto

1. Criar um Formulário

Crie uma nova pasta chamada 'create' dentro do diretório app/dashboard/invoices. Crie um novo arquivo chamado page.tsx dentro desta pasta. Este arquivo servirá como uma nova página permitindo que os usuários gerem uma fatura.

Copie e cole o código a seguir no arquivo page.tsx:

A página utiliza um Server Component para coletar informações do usuário e, em seguida, enviá-las para um componente <Form> já pronto. Veja a estrutura do componente <Form>:

• Lista suspensa para usuários;
• Campo de entrada para o valor;
• Botões de opção para o status;
• Botão de envio para finalizar.

Ao clicar no botão "Create Invoice", você será direcionado para um formulário que solicitará o preenchimento das informações necessárias.

2. Utilizar uma Server Action

1. Navegar até o diretório lib;
2. Criar um novo arquivo chamado actions.ts;
3. Adicionar a diretiva 'use server' no início;
   • Por que 'use server'? - Permite que as funções sejam versáteis e utilizáveis tanto em componentes Client quanto Server. É uma forma prática de organizar Server Actions, mas também podemos inseri-las diretamente em Server Components, se necessário.
4. Criação de uma função Server Action.

Em seguida, dentro do componente <Form>, importar createInvoice do arquivo actions.ts. Incluir um atributo action no elemento <form> e invocar a action createInvoice.

3. Obter Dados do Formulário

Retorne ao app/lib/actions.ts para extrair os valores de formData utilizando o método .get(name). Após concluir esta tarefa, é possível preencher o formulário e revisar os dados inseridos no console do terminal.

Resultado:

4. Verificar e Preparar os Dados

Antes de armazenar os dados do formulário no banco de dados, é fundamental verificar se estão no formato correto e possuem os tipos adequados. Neste curso, estamos utilizando um formato específico para os dados da tabela de invoice.

Para facilitar esse processo, temos algumas opções para validação de tipos. Em vez de verificar manualmente os tipos, podemos utilizar o Zod, uma biblioteca de validação orientada a TypeScript. É uma ferramenta útil que simplifica a tarefa de validação.

Veja o que precisamos fazer no arquivo actions.ts:

1. Importar o Zod no arquivo actions.ts;
2. Criar um schema usando o Zod que corresponda à estrutura do objeto do formulário. Esse schema funciona como um conjunto de regras para garantir que o formData esteja correto antes de ser inserido no banco de dados.

Em seguida, passamos o rawFormData para CreateInvoice para validar os tipos.

Vamos converter o valor para centavos e criar uma nova data no formato "YYYY-MM-DD" utilizando JavaScript puro.

5. Inserir Dados

Agora que temos todos os valores necessários, podemos utilizar sql para enviá-los ao banco de dados.

6. Atualizar Cache e Voltar para Faturas

O Next.js possui um recurso útil chamado Client-side Router Cache. Ele acompanha por onde os usuários navegaram no site por um determinado período. Esse cache, combinado com o prefetching, garante que os usuários possam alternar entre diferentes páginas rapidamente, sem sobrecarregar o servidor com muitas requisições.

Agora, veja o que queremos fazer:

1. Como atualizamos os dados na página de faturas, queremos garantir que os usuários vejam as informações mais recentes. Para isso, limpamos o cache utilizando a função revalidatePath. Isso garante que uma nova requisição seja enviada ao servidor, trazendo os dados mais atualizados;
2. Após atualizar os dados e limpar o cache, queremos direcionar o usuário de volta para a página de faturas de forma suave. Fazemos isso utilizando a função redirect. É como dar instruções para que ele retorne ao local anterior.

Na Prática