Edição de Categorias usando Chakra UI no CrazyStack Next.js

Na aula "Componente genérico de Criação de Categoria usando Chakra UI" aprendemos como criar um componente reutilizável para a criação de categorias usando a biblioteca de interface de usuário Chakra UI. O componente foi projetado de maneira genérica para poder ser facilmente adaptado para outras entidades que possuam os mesmos campos básicos, como nome e descrição. Ao longo da aula, foram mostrados conceitos importantes, como a utilização de formulários controlados, a validação de dados, a definição de tipos e interfaces e a reutilização de componentes.

O vídeo dessa aula está publicada no bootcamp CrazyStack, se você ainda não garantiu sua vaga clique aqui

O resultado final é um componente que pode ser facilmente utilizado em outras partes do código com poucas ou nenhuma alteração necessária.

CreateItemActions (molécula)

import { Link, HStack } from "@chakra-ui/react";
import { Flex, Button } from "shared/ui";
interface CreateItemActionsProps {
  isLoadingSaveButton: boolean;
  cancelRoute: string;
}

export const CreateItemActions = ({
  isLoadingSaveButton,
  cancelRoute,
}: CreateItemActionsProps) => {
  return (
    <Flex mt="8" justify="flex-end">
      <HStack spacing="4">
        <Link href={cancelRoute}>
          <Button colorScheme={"whiteAlpha"}>Cancelar</Button>
        </Link>
        <Button type="submit" isLoading={isLoadingSaveButton} colorScheme="green">
          Salvar
        </Button>
      </HStack>
    </Flex>
  );
};

O código apresenta a definição da molécula CreateItemActions, que é responsável por renderizar os botões de ação da criação de um item genérico. Ela é construída com base nos componentes do Chakra UI, como Link, HStack e Button, que facilitam a estilização e o layout da página. A molécula recebe dois parâmetros: isLoadingSaveButton, que é um valor booleano que indica se o botão de salvar está em um estado de carregamento, e cancelRoute, que é uma string que indica a rota para a qual o usuário será redirecionado ao cancelar a criação do item.

Dentro da molécula, há um container Flex que ajuda na disposição dos botões, posicionando-os no canto inferior direito. O HStack é usado para agrupar os botões e adiciona um espaçamento entre eles. O primeiro botão é um Link que leva o usuário de volta para a página de listagem, e o segundo botão é um Button com a opção de enviar a criação do item para a API. Quando o valor de isLoadingSaveButton é verdadeiro, o botão de salvar exibe um ícone de carregamento. O colorScheme é usado para definir o esquema de cores do botão, e o texto exibido é "Salvar".

Em resumo, a molécula CreateItemActions é uma composição de componentes do Chakra UI e é usada para renderizar botões de ação para criar um item genérico em uma página de formulário.

GridForm (molécula)

A molécula GridForm é um componente genérico que implementa um grid responsivo para formulários, o qual pode ser utilizado em diversos contextos. Ele recebe como parâmetro children, que são os componentes filhos que devem ser renderizados dentro do grid.

No contexto do Atomic Design, GridForm é uma molécula, uma vez que não é específico de uma página, mas sim um componente genérico que pode ser utilizado em diversas partes do projeto. Ele é responsável por definir a estrutura e a organização dos campos de um formulário de forma responsiva, garantindo a consistência visual do projeto. Como molécula, ele é utilizado em conjunto com outros componentes para construir organismos, templates e páginas mais complexas.

import { SimpleGrid } from "@chakra-ui/react";
import { ReactNode } from "react";
interface GridFormProps {
  children: ReactNode;
}

export const GridForm = ({ children }: GridFormProps) => {
  return (
    <SimpleGrid minChildWidth="240px" spacing={["6", "8"]} w="100%">
      {children}
    </SimpleGrid>
  );
};

O código acima apresenta a definição da molécula GridForm, que é responsável por renderizar um grid simples para um formulário, que pode conter outros componentes.

Ele importa a biblioteca SimpleGrid do Chakra UI e o ReactNode do React. Em seguida, define a interface GridFormProps, que especifica que a propriedade children deve ser do tipo ReactNode.

A função GridForm recebe a propriedade children, que é a única que pode ser passada para esse componente. Ela é responsável por renderizar o grid com os filhos passados.

O grid é definido com a tag SimpleGrid, que recebe as propriedades minChildWidth, que define a largura mínima de cada item filho no grid, e spacing, que define o espaçamento entre cada item. A propriedade w é definida como 100% para preencher todo o espaço disponível.

Dessa forma, a molécula GridForm pode ser utilizada para criar grids simples para formulários, ajudando na organização dos componentes de uma página.

BoxCreateItem (organismo)

explique detalhadamente e de forma didática o código a seguir:

import { Divider, Heading, VStack } from "@chakra-ui/react";
import { CreateItemActions, Box } from "shared/ui";
interface BoxCreateItemProps {
  onSubmit: any;
  title: string;
  isLoadingSaveButton: boolean;
  cancelRoute: string;
  children: any;
}
export const BoxCreateItem = ({
  onSubmit,
  isLoadingSaveButton = false,
  cancelRoute = "/",
  children,
  title = "Criar novo registro",
}: BoxCreateItemProps) => {
  return (
    <Box as="form" flex="1" borderRadius={8} bg="purple.800" p="8" onSubmit={onSubmit}>
      <Heading size="lg" fontWeight={"normal"}>
        {title}
      </Heading>
      <Divider my="6" borderColor="purple.700" />
      <VStack spacing={["6", "8"]}>{children}</VStack>
      <CreateItemActions
        isLoadingSaveButton={isLoadingSaveButton}
        cancelRoute={cancelRoute}
      />
    </Box>
  );
};

O código apresenta a definição do organismo BoxCreateItem, que é responsável por renderizar um componente de caixa (Box) para criação de um novo item genérico. Ele agrega outros componentes, como o título (Heading), a divisória (Divider), os campos do formulário (children) e as ações de criação (CreateItemActions).

A interface BoxCreateItemProps define as propriedades que podem ser passadas para o componente BoxCreateItem. Essas propriedades incluem:

• onSubmit: uma função que será executada quando o formulário for enviado.
• title: uma string que representa o título do componente de caixa.
• isLoadingSaveButton: um valor booleano que indica se o botão de salvar está em um estado de carregamento.
• cancelRoute: uma string que indica a rota para a qual o usuário será redirecionado ao cancelar a criação do item.
• children: elementos filhos que serão renderizados dentro do componente.

A função BoxCreateItem recebe as propriedades definidas em BoxCreateItemProps e retorna a estrutura do componente.

Dentro do retorno, temos o componente Box do Chakra UI, que é utilizado como um formulário (as="form") e possui algumas propriedades como flex="1" (para ocupar todo o espaço disponível), borderRadius={8} (para definir bordas arredondadas), bg="purple.800" (para definir o fundo roxo) e p="8" (para adicionar espaçamento interno).

Em seguida, temos o componente Heading do Chakra UI, que renderiza um título. Ele recebe a propriedade size="lg" para definir o tamanho do título como "lg" (large) e fontWeight={"normal"} para definir a espessura da fonte como "normal". O conteúdo do título é definido pela propriedade title recebida ou, caso não seja fornecida, o valor padrão "Criar novo registro" é exibido.

Logo após, temos o componente Divider do Chakra UI, que renderiza uma linha de divisória. Ele recebe a propriedade my="6" para adicionar espaçamento vertical de 6 unidades (pode ser ajustado conforme a necessidade) e borderColor="purple.700" para definir a cor da linha como roxo mais escuro.

Em seguida, temos o componente VStack do Chakra UI, que é utilizado para empilhar verticalmente os elementos filhos (os campos do formulário). Ele recebe a propriedade spacing={["6", "8"]} para adicionar espaçamento vertical de 6 unidades em telas menores e 8 unidades em telas maiores. Os elementos filhos são renderizados dentro deste componente.

Por fim, temos o componente CreateItemActions, que foi explicado anteriormente. Ele é responsável por renderizar os botões de ação para criar um item genérico. As propriedades isLoadingSaveButton e cancelRoute são passadas para este componente.

Resumindo, o BoxCreateItem é um organismo que encapsula outros componentes para criar uma caixa de criação de um novo item genérico. Ele possui um formulário, um título, uma linha de divisória, campos de formulário e ações de criação. As propriedades podem ser passadas para personalizar o comportamento e a aparência do componente.

EditCategoryForm (feature)

import { CategoryProps } from "entidades/category";
import { useEditCategory } from "./editCategory.hook";
import { BoxCreateItem, FormControl, GenericDetailsItem, GridForm } from "shared/ui";

export interface EditCategoryFormProps {
  category: CategoryProps;
}
export const EditCategoryForm = ({ category }: EditCategoryFormProps) => {
  const { formState, register, handleSubmit, handleEditCategory } = useEditCategory({
    category,
  });
  return (
    <BoxCreateItem
      onSubmit={handleSubmit(handleEditCategory)}
      title={"Editar categoria"}
      isLoadingSaveButton={formState.isSubmitting}
      cancelRoute={"/categorys/1"}
    >
      <GenericDetailsItem
        item={category}
        fields={[
          { id: "_id", label: "Id" },
          { id: "name", label: "Nome" },
          { id: "createdById", label: "Id do criador" },
          { id: "createdAt", label: "Data de criação" },
        ]}
      />
      <GridForm>
        <FormControl
          label="Nome da categoria"
          error={formState.errors.name}
          {...register("name")}
        />
      </GridForm>
    </BoxCreateItem>
  );
};

O código apresenta a definição da feature EditCategoryForm, que é responsável por renderizar um formulário para edição de uma categoria. Ele utiliza outros componentes, como BoxCreateItem, FormControl, GenericDetailsItem e GridForm, para criar a estrutura do formulário e exibir os detalhes da categoria a ser editada.

A interface EditCategoryFormProps define as propriedades que podem ser passadas para o componente EditCategoryForm. Neste caso, é esperado que seja passada a propriedade category, que representa a categoria a ser editada.

A função EditCategoryForm recebe as propriedades definidas em EditCategoryFormProps e retorna a estrutura do componente.

Dentro do retorno, temos a utilização do componente BoxCreateItem. Ele é utilizado como um invólucro para o formulário de edição. Recebe várias propriedades, incluindo:

• onSubmit: a função handleSubmit(handleEditCategory) é executada quando o formulário é submetido. Ela é responsável por lidar com a edição da categoria.
• title: define o título do componente de caixa como "Editar categoria".
• isLoadingSaveButton: recebe o valor de formState.isSubmitting, que indica se o formulário está em um estado de envio (carregamento).
• cancelRoute: define a rota para a qual o usuário será redirecionado ao cancelar a edição da categoria.

Dentro do componente BoxCreateItem, temos o componente GenericDetailsItem, que renderiza os detalhes da categoria a ser editada. Ele recebe a propriedade item com o valor da categoria e a propriedade fields, que é um array de objetos que define os campos a serem exibidos. Cada objeto no array possui as propriedades id, que representa o identificador do campo, e label, que representa o rótulo do campo.

Em seguida, temos o componente GridForm, que é utilizado para criar um grid responsivo para o formulário de edição. Dentro do GridForm, temos o componente FormControl, que representa um campo de formulário. Ele recebe a propriedade label para definir o rótulo do campo, error para exibir um erro (caso exista) e register("name") para registrar o campo "name" no formulário.

Resumindo, o EditCategoryForm é uma feature que renderiza um formulário de edição de categoria. Ele utiliza diversos componentes para criar a estrutura do formulário, exibir os detalhes da categoria e capturar as alterações feitas pelo usuário.

EditCategory Lib

import { SubmitHandler, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { EditCategoryFormProps } from "./EditCategoryForm";
export type EditCategoryFormData = {
  name: string;
};

export type SubmitEditCategoryHandler = SubmitHandler<EditCategoryFormData>;

export const editCategoryFormSchema = yup.object().shape({
  name: yup.string().required("Nome é obrigatório"),
});

export const useEditCategoryLib = (props: EditCategoryFormProps) => {
  const { category: currentCategory } = props;
  const formProps = useForm<EditCategoryFormData>({
    resolver: yupResolver(editCategoryFormSchema),
    defaultValues: {
      name: currentCategory?.name ?? "",
    },
  });
  return { ...formProps };
};

O código apresenta a definição da lib EditCategoryLib, que é responsável por fornecer uma função customizada para gerenciar o formulário de edição de categoria. Essa lib utiliza as bibliotecas react-hook-form e yup para realizar a validação dos dados do formulário.

A interface EditCategoryFormData define os dados esperados pelo formulário de edição. Neste caso, espera-se apenas o campo name, que representa o nome da categoria a ser editada.

A type SubmitEditCategoryHandler é definida como um alias para SubmitHandler<EditCategoryFormData>, que é um tipo fornecido pela biblioteca react-hook-form. Esse tipo representa a função que será chamada quando o formulário for submetido.

Em seguida, é definido o esquema de validação do formulário através da constante editCategoryFormSchema. Essa constante utiliza a biblioteca yup para definir as regras de validação dos campos do formulário. No caso, o campo name é definido como uma string obrigatória, e caso não seja preenchido, uma mensagem de erro será exibida.

A função useEditCategoryLib é exportada e recebe as propriedades props definidas em EditCategoryFormProps. Essas propriedades incluem a categoria atual que está sendo editada.

Dentro da função useEditCategoryLib, é utilizado o hook useForm fornecido pela biblioteca react-hook-form. Esse hook retorna várias propriedades e funções para o gerenciamento do formulário. É passado como parâmetro um objeto de configuração que inclui:

• resolver: utiliza o yupResolver para validar os dados do formulário com base no esquema definido em editCategoryFormSchema.
• defaultValues: define os valores iniciais do formulário. No caso, o campo name recebe o valor do nome da categoria atual, ou uma string vazia caso a categoria seja nula ou indefinida.

Por fim, a função useEditCategoryLib retorna todas as propriedades e funções fornecidas pelo hook useForm para serem utilizadas dentro do componente EditCategoryForm.

Resumindo, a lib EditCategoryLib fornece uma função customizada useEditCategoryLib que encapsula o gerenciamento do formulário de edição de categoria. Ela utiliza as bibliotecas react-hook-form e yup para realizar a validação dos dados e retorna as propriedades e funções necessárias para o funcionamento do formulário.

EditCategory Hook

import { useUi } from "shared/libs";
import { EditCategoryFormProps } from "./EditCategoryForm";
import {
  EditCategoryFormData,
  SubmitEditCategoryHandler,
  useEditCategoryLib,
} from "./editCategory.lib";
import { useRouter } from "next/router";
import { api } from "shared/api";
import { useMutation } from "@tanstack/react-query";
export const useEditCategory = (props: EditCategoryFormProps) => {
  const { showModal } = useUi();
  const { category: currentCategory } = props;
  const router = useRouter();
  const editCategory = useMutation(async (category: EditCategoryFormData) => {
    try {
      const { data } = await api.patch(`/category/update?_id=${currentCategory._id}`, {
        ...category,
        updatedAt: new Date(),
      });
      if (!data) {
        showModal({
          content: "Ocorreu um erro inesperado no servidor, tente novamente mais tarde",
          title: "Erro no servidor",
          type: "error",
        });
        return;
      }
      showModal({
        content:
          "Categoria editada com sucesso, você será redirecionado para a lista de categorias",
        title: "Sucesso",
        type: "success",
      });
      router.push("/categorys/1");
      return data;
    } catch (error) {
      showModal({
        content: "Ocorreu um erro inesperado no servidor, tente novamente mais tarde",
        title: "Erro no servidor",
        type: "error",
      });
    }
  }, {});
  const { register, handleSubmit, formState } = useEditCategoryLib(props);
  const handleEditCategory: SubmitEditCategoryHandler = async (
    values: EditCategoryFormData
  ) => {
    await editCategory.mutateAsync(values);
  };
  return { formState, register, handleSubmit, handleEditCategory };
};

O código apresenta um hook personalizado chamado useEditCategory, que é responsável por fornecer as funcionalidades necessárias para a edição de uma categoria. Ele utiliza outros hooks e funções para implementar essas funcionalidades.

Primeiro, o hook useUi é importado da lib compartilhada (shared/libs). Esse hook provavelmente fornece funcionalidades relacionadas à interface do usuário, como exibir modais.

Em seguida, é importada a interface EditCategoryFormProps definida em EditCategoryForm.

As importações relacionadas à lib editCategory.lib incluem EditCategoryFormData, SubmitEditCategoryHandler e useEditCategoryLib. Esses são tipos e função definidos na lib editCategory.lib que são necessários para o funcionamento do hook useEditCategory.

O hook useRouter é importado do pacote next/router. Ele é utilizado para acessar o objeto de roteamento do Next.js, que permite redirecionar o usuário para outra página após a edição da categoria.

A importação api provavelmente se refere a um cliente HTTP personalizado utilizado para fazer chamadas à API.

O hook useMutation é importado do pacote @tanstack/react-query. Ele é utilizado para realizar uma mutação assíncrona, que no contexto desse código representa a chamada à API para editar a categoria.

Dentro do hook useEditCategory, são definidas algumas constantes e funções.

A constante showModal é extraída do hook useUi, que provavelmente é uma função para exibir modais na interface do usuário.

A constante currentCategory é extraída das propriedades recebidas pelo hook useEditCategory.

Em seguida, é declarada a função editCategory, que utiliza o hook useMutation. Essa função é assíncrona e representa a ação de editar a categoria. Dentro dessa função, ocorre uma chamada à API usando o cliente api.patch. Os dados da categoria são enviados para a rota /category/update com o ID da categoria atualmente selecionada. O objeto de categoria a ser atualizado é composto pelos dados passados como argumento e também inclui a propriedade updatedAt, que recebe a data e hora atual. Se a resposta da API for bem-sucedida, uma modal de sucesso é exibida e o usuário é redirecionado para a lista de categorias. Caso ocorra algum erro na resposta da API, uma modal de erro é exibida.

Em seguida, a função useEditCategoryLib é chamada e passada como argumento as propriedades recebidas pelo hook useEditCategory. Esse hook retorna algumas propriedades e funções do react-hook-form para serem utilizadas no formulário.

A função handleEditCategory é declarada como uma função assíncrona que recebe os valores do formulário. Essa função utiliza o método mutateAsync fornecido pelo hook useMutation para executar a mutação, ou seja, realizar a edição da categoria.

Por fim, o hook useEditCategory retorna um objeto que contém as seguintes propriedades e funções:

• formState: o estado do formulário fornecido pelo react-hook-form.
• register: a função de registro dos campos do formulário fornecida pelo react-hook-form.
• handleSubmit: a função para lidar com a submissão

do formulário fornecida pelo react-hook-form.

• handleEditCategory: a função que executa a edição da categoria quando o formulário é submetido.

Em resumo, o hook useEditCategory encapsula a lógica necessária para editar uma categoria. Ele utiliza hooks e funções externas, como useUi, useRouter, useMutation e useEditCategoryLib, para implementar as funcionalidades de edição, chamadas à API e interação com o formulário.

CategoryEditPage

explique detalhadamente e de forma didática o código a seguir:

import { Box, Head } from "shared/ui";
import { EditCategoryForm } from "features/category/edit";
import { CategoryProps } from "entidades/category";
type CategoryEditProps = {
  data: CategoryProps;
  id: string;
};
export const CategoryEditPage = ({ data, id }: CategoryEditProps) => {
  const props = { category: data };
  return (
    <>
      <Head
        title={"Belezix Admin | Categorias"}
        description="Página de edição de categorias do painel de Admin Belezix"
      />
      <Box flex="1" borderRadius={8} bg="purple.800" p="8">
        <EditCategoryForm {...props} />
      </Box>
    </>
  );
};

O código apresenta um componente chamado CategoryEditPage, que é responsável por renderizar a página de edição de uma categoria. Ele recebe as propriedades data e id, que representam os dados da categoria e o ID da categoria, respectivamente.

Dentro do componente CategoryEditPage, o objeto props é criado, contendo a propriedade category com o valor de data. Essa propriedade category é passada como propriedade para o componente EditCategoryForm, que é importado do módulo features/category/edit.

Em seguida, o componente Head é renderizado. Esse componente provavelmente é responsável por lidar com as meta tags do cabeçalho da página, como o título e a descrição. No caso desse código, o título da página é definido como "Belezix Admin | Categorias" e a descrição como "Página de edição de categorias do painel de Admin Belezix".

O componente Box é renderizado, e ele é utilizado para envolver o componente EditCategoryForm em uma caixa retangular. Esse Box tem algumas configurações visuais, como borda arredondada e cor de fundo.

Por fim, o componente EditCategoryForm é renderizado dentro do Box, e as propriedades props são passadas para ele utilizando o spread operator ({...props}). Isso permite que o componente EditCategoryForm receba a categoria como propriedade e utilize-a para preencher o formulário de edição.

Resumindo, o CategoryEditPage é responsável por renderizar a página de edição de uma categoria, exibindo o formulário de edição da categoria dentro de um Box. Ele recebe os dados da categoria e o ID como propriedades e os repassa para o componente EditCategoryForm.

edit/[id]

explique detalhadamente e de forma didática o código a seguir:

import { CategoryEditPage } from "screens/category/edit/CategoryEditPage";
import { getCategoryById } from "entidades/category/category.api";
import { GetServerSideProps } from "next";
import { withSSRAuth } from "shared/libs/utils";
export const getServerSideProps: GetServerSideProps = withSSRAuth(async (context) => {
  const id = context?.query?.id;
  if (!id || typeof id !== "string") {
    return {
      notFound: true,
    };
  }
  const data = await getCategoryById(id, context);
  return {
    props: {
      data,
      id,
    },
  };
});
export default CategoryEditPage;

O código apresenta uma página chamada edit/[id], que é responsável por renderizar a página de edição de uma categoria específica com base no seu ID.

O código começa importando o componente CategoryEditPage da pasta screens/category/edit/CategoryEditPage, bem como a função getCategoryById do arquivo category.api na pasta entidades/category.

Em seguida, é definida a função getServerSideProps. Essa função é um método especial do Next.js que permite buscar dados antes de renderizar uma página no servidor. Nesse caso, a função getServerSideProps recebe o contexto como parâmetro, que contém informações sobre a requisição.

Dentro da função getServerSideProps, é chamada a função withSSRAuth. Essa função provavelmente é um middleware de autenticação que verifica se o usuário tem permissão para acessar a página de edição de categoria. Essa função recebe uma função assíncrona anônima como parâmetro, que será executada se a autenticação for bem-sucedida.

Dentro dessa função assíncrona, a variável id é extraída do contexto da requisição. O valor de id é verificado para garantir que seja uma string válida. Se o id não existir ou não for uma string válida, a página é marcada como "notFound", o que resultará em uma resposta 404.

Caso o id seja válido, a função getCategoryById é chamada passando o id e o contexto como parâmetros. Essa função provavelmente faz uma requisição à API para obter os dados da categoria com o ID especificado. O resultado é armazenado na variável data.

Por fim, a função getServerSideProps retorna um objeto com as propriedades props, contendo os valores data e id, que serão repassados para a página CategoryEditPage como propriedades. Isso permite que a página de edição de categoria tenha acesso aos dados da categoria específica.

Em resumo, o arquivo edit/[id] define uma página que renderiza a página de edição de uma categoria específica com base no seu ID. Ele busca os dados da categoria utilizando o ID na função getCategoryById e passa esses dados para o componente CategoryEditPage através das propriedades data e id.

Resumo

Nesta aula, exploramos diferentes trechos de código relacionados à edição de categorias em um sistema web. Começamos entendendo o componente BoxCreateItem, que cria uma caixa para a criação de um novo registro. Em seguida, analisamos o componente EditCategoryForm, responsável pela exibição do formulário de edição de uma categoria específica. Vimos também a biblioteca editCategory.lib, que fornece funcionalidades e validações relacionadas à edição de categorias.

Aprofundando ainda mais, examinamos o useEditCategory, um hook personalizado que combina diferentes recursos, como a manipulação de estado do formulário, registro de campos, envio do formulário e tratamento de erros. Esse hook utiliza a biblioteca react-hook-form em conjunto com o yup para a validação dos dados do formulário.

Na sequência, conhecemos a página CategoryEditPage, que utiliza o componente EditCategoryForm para renderizar a interface de edição de uma categoria. Por fim, analisamos o arquivo edit/[id], onde são definidas as configurações para buscar e fornecer os dados da categoria específica a ser editada.

Ao recapitular todos esses elementos, vimos como eles se relacionam para criar uma experiência de edição de categorias em um sistema web. Através dos componentes, hooks, bibliotecas e páginas, é possível obter um fluxo de edição de categorias completo e funcional, desde a exibição do formulário até a atualização dos dados no servidor.

Essa aula serviu como um exemplo prático de como diferentes partes de um sistema podem se integrar para fornecer uma funcionalidade específica. Espero que você tenha compreendido os conceitos e as práticas apresentadas, e que possa aplicá-los em seus próprios projetos no futuro.

Desafio do Doido

Desafio Prático:

O desafio consiste em expandir a funcionalidade de edição de categorias do sistema web, adicionando um campo adicional ao formulário de edição e atualizando o fluxo de edição no servidor.

Passos a serem seguidos:

1. No arquivo EditCategoryForm.tsx, adicione um novo campo ao formulário de edição da categoria. Por exemplo, você pode adicionar um campo para a descrição da categoria.

2. Atualize a validação do formulário utilizando a biblioteca yup para garantir que o novo campo seja preenchido corretamente.

3. No arquivo editCategory.lib.tsx, atualize a interface EditCategoryFormData para incluir o novo campo adicionado ao formulário.

4. No arquivo CategoryEditPage.tsx, atualize a definição da propriedade fields no componente GenericDetailsItem dentro do componente EditCategoryForm. Inclua o novo campo adicionado ao formulário para que seja exibido na tela de edição.

5. No arquivo edit/[id].tsx, atualize a função editCategory no useMutation. Inclua o novo campo na requisição api.patch para que seja enviado ao servidor e atualize corretamente a categoria.

6. Execute o sistema web e teste a funcionalidade de edição de categorias com o novo campo adicionado. Verifique se o campo é exibido corretamente no formulário, se a validação é aplicada adequadamente e se as informações são atualizadas no servidor.

Este desafio irá testar suas habilidades de expansão e atualização de funcionalidades existentes, bem como sua capacidade de integração de diferentes partes do sistema. Lembre-se de seguir as melhores práticas de desenvolvimento e garantir a consistência do código.

Divirta-se codando e boa sorte!