在类“类别-rich方式使用UI Chakra”中，我们学习了如何使用Chakra UI常规接口库UI创建可重复使用的组件。该组件已经以托管方式投影，以轻松适应具有相同基本字段的其他实体，例如名称和描述。在整个班级中，都显示了重要的概念，例如使用受控公式，数据验证，类型和接口的定义以及组件的重复使用。

该课程的视频将很快在Bootcamp Crazystack上发布，如果您仍然没有确保您的位置单击aqui

最终结果是一个可以轻松地用于其他部分的组件，而几乎不需要或无需更改。

CreateItemactions（Molão©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>
  );
};

它呈现摩擦claatemactions的定义的方式，该方法负责渲染生成项目创建的动作植物体。它是根据UI脉轮的组件（例如链接，HSTACK和BUTTEN）构建的，这些组件促进了风格化和Pamin的布局。 MOLL接收两个Parano仪表：IsloadingSaveButton，它是一个布尔值，指示保存的botan是否处于加载状态，而UccutRoute则是一个字符串，该字符串指示用户被重新定向以取消用户的创建的路线项目。

在成型内部，有一个弯曲容器，有助于处理按钮，将其定位在右下角。 Hstack用于对按钮进行分组，并在它们之间添加一个空间。第一个Botan是将用户带回列表PADGA的链接，第二个Botan是一个按钮，可以选择将创建从项目发送到API。当isloadingsavebutton的值为真时，保存的botan将显示一个加载。 Colorscheme用于定义植物的配色方案，显示的文本为“保存”。

总而言之，成型生物是一个组件组件，用于渲染动作植物体以创建以padga公式生成的项目。

Gridform（Molé©Cula）

Gridform Cula是一种丰富的基因成分，它实现了公式的响应网格，可以在各种情况下使用。他以子女地铁的身份接受，他们是必须在网格中渲染的孩​​子的组成部分。

在原子设计的背景下，gridform是一个moll，因为它不是针对padga的特定的，而是可以在项目的各个部分中使用的天才组成部分。它负责定义形式领域的结构和组织组织，以确保项目的视觉一致性。作为模具，它与其他组件一起使用以构建生物，模板和更复杂的页面。

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>
  );
};

上面的代码介绍了Gridform Moll的定义，该定义负责为表单提供简单的网格，该网格可以包含其他组件。

它与UI脉轮简单格式库和反应节点有关。然后定义GridFormProps接口，该接口指定儿童属性应为React Node类型。

Gridform函数接收儿童属性，这是可以传递给该组件的等级。她负责与过去的孩子一起渲染网格。

网格是用TAG SimpleGrid定义的，该标签是接收MinchildWidth属性的，该属性定义了网格上每个SON项目的宽度和间距，该属性定义了每个项目之间的空间。 w-专业定义为100％以填充可用的整个空间。

BoxCreateItem（有机体）

详细解释以下内容：

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>
  );
};

呈现BoxCreateItem有机体的定义的方式，该定义负责为创建新项目基因创建现金成分（框）。它添加了其他组件，例如标题（标题），分隔线（分隔），表格（儿童）和创建动作（CreateItemations）。

BoxCreateItemProps接口定义了可以传递给koud0组件的属性。这些属性包括：

• onSubmit：发送表单时将执行的函数。
• title：代表现金部分标题的字符串。
• isLoadingSaveButton：一个布尔值，指示保存植物体是否处于加载状态。
• cancelRoute：一个指示用户将重定向以取消项目创建的途径的字符串。
• children：将在组件中渲染的子元素。

BoxCreateItem函数接收Koud1中定义的属性并返回组件的结构。

在返回范围内，我们拥有UI脉轮的Box组件，该组件用作形式（as="form"），并具有一些属性，例如flex="1"（占据可用的整个空间），borderRadius={8}（定义圆形边缘），，定义圆形边缘）， koud14（定义紫色背景）和koud15（添加内部空间）。

然后，我们拥有UI脉轮的Heading组件，该组件具有标题。它接收size="lg"属性，以将标题的大小定义为“ LG”（大）和fontWeight={"normal"}，以将源厚度定义为“正常”。标题的控制由收到的title属性定义，或者如果未提供，则显示标准值“创建新记录”。

徽标之后，我们拥有UI脉轮的Divider组件，该组件具有分裂线。它接收my="6"属性，以添加6个单位的垂直空间（可以根据需要调整）和borderColor="purple.700"将线的颜色定义为深紫色。

接下来，我们有UI脉轮的VStack组件，该组件用于垂直堆叠儿童（配方的字段）。它接收spacing={["6", "8"]}属性，在较小的屏幕上增加6个单元的垂直空间，并在较大的屏幕上添加8个单元。儿童在此组件中渲染的元素。

EditCategoryForm（功能）

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>
  );
};

代码介绍了功能EditCategoryForm的定义，该定义负责渲染用于编辑类别的表格。它使用其他组件，例如koud0，FormControl，GenericDetailsItem和GridForm，创建形式结构并显示要编辑的类别的详细信息。

EditCategoryFormProps接口定义了可以传递给EditCategoryForm组件的属性。在这种情况下，预计将通过属性category，该属性代表要编辑的类别。

EditCategoryForm功能接收EditCategoryFormProps中定义的属性并返回组件的结构。

在返回中，我们使用BoxCreateItem组件的使用。它被用作编辑形成的有利可图。收到各种属性，包括：

• onSubmit：提交表单时执行handleSubmit(handleEditCategory)函数。她负责处理类别的编辑。
• title：将现金组件标题定义为“编辑类别”。
• isLoadingSaveButton：接收formState.isSubmitting的值，该值指示该表格是否处于运输状态（加载）。
• cancelRoute：定义用户将重定向到取消类别版本的途径。

在BoxCreateItem组件中，我们具有GenericDetailsItem组件，该组件呈现要编辑的类别的详细信息。它接收具有类别和fields属性值的item属性，该属性是定义要显示的字段的对象数组。数组中的每个对象都有代表字段标识符的id属性，而Koud51代表字段。

然后，我们拥有GridForm组件，该组件用于为编辑表格创建响应网格。在koud33中，我们有koudde31组件，该组件代表表单字段。它接收label属性以定义字段卷，error以显示错误（如果存在），而register("name")则以表格记录“名称”字段。

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 };
};

代码介绍了lib EditCategoryLib的定义，该定义负责提供自定义功能以管理类别的形式。此lib使用react-hook-form和koud61库来执行正式数据的验证。

EditCategoryFormData接口定义了编辑表格预期的数据。在这种情况下，预计只有name字段，该字段代表要编辑的类别的名称。

类型SubmitEditCategoryHandler定义为Koud65的别名，Koud65是由react-hook-form库提供的类型。此类型表示表单受到时将调用的函数。

然后，表格的验证方案由常数editCategoryFormSchema定义。该常数使用yup库来定义表单字段验证的规则。在这种情况下，name字段定义为强制性字符串，如果未填充，将显示错误消息。

koud70函数被导出并接收props属性在EditCategoryFormProps中定义。这些属性包括正在编辑的当前类别。

在useEditCategoryLib函数中，使用了由react-hook-form库提供的挂钩useForm。此挂钩返回形成表单的几个属性和功能。过去作为配置对象的一部分，其中包括：

• resolver：使用yupResolver根据editCategoryFormSchema中定义的方案验证编队数据。
• defaultValues：定义表单的初始值。在这种情况下，koud63字段将接收当前类别名称的值，如果类别为nu​​ll或不确定，则接收一个空字符串。

最后，useEditCategoryLib函数返回Hook useForm提供的所有属性和功能，用于在Koude Component29中使用。

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 };
};

代码提出了一个个性化的挂钩，称为koud88，该挂钩负责为类别编辑提供必要的功能。它使用其他钩子和功能来实现这些功能。

然后在EditCategoryForm中导入EditCategoryFormProps接口。

相关的重要性âlib koud93包括koud62，SubmitEditCategoryHandler和koud70。这些类型和功能在lib editCategory.lib中定义的，这是钩useEditCategory的操作所必需的。

Hook useRouter是从next/router软件包导入的。它用于访问下一个。JS路由对象，该对象使您可以在类别版本之后重定向用户转换为另一页。

重要性api可能是指用于拨打电话的自定义客户端。

Hook useMutation是从@tanstack/react-query软件包导入的。它用于执行最小的人，在这种方式中，它代表编辑类别的调用。

在Hook useEditCategory中，定义了一些常数和函数。

从Hook useUi提取常数Koud105，这可能是在用户接口中显示模式的函数。

koud107常数是从Hook useEditCategory收到的属性中提取的。

然后，它被声明为使用Hook useMutation的Koud109函数。此功能被备受关注，代表编辑类别的动作。在此功能中，使用api.patch客户可以呼叫API。类别数据以当前选择的类别的ID发送到/category/update路线。要更新的类别对象由过去的数据作为参数组成，还包括接收当前日期和时间的updatedAt属性。如果API响应成功，将显示成功的模式，并将用户重定向到类别列表。如果API响应中发生错误，则显示错误模式。

然后，useEditCategoryLib函数被调用并作为参数传递，作为hook useEditCategory收到的属性。此挂钩返回以形式使用的react-hook-form的一些属性和功能。

handleEditCategory函数被声明为接收表单值的Ashnial函数。此功能使用母亲©Hook Koud102提供的所有Koud118来执行突变，即执行类别的编辑。

最后，挂钩koud88返回包含以下属性和功能的对象：

• formState：react-hook-form提供的配方状态。
• register：react-hook-form提供的配方器字段的注册功能。
• handleSubmit：处理顺从的功能

由react-hook-form提供的配制器的

• handleEditCategory：提交表单时执行类别编辑的功能。

简而言之，Hook useEditCategory封装了编辑类别所需的停机时间。他使用挂钩和外部功能，例如Koud89，Koud99，Koud102和useEditCategoryLib，以实现编辑功能，称为API并与表单进行交互。

类别editpage

详细解释以下内容：

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>
    </>
  );
};

代码显示了一个称为Koud133的组件，该组件负责呈现类别的版本。它分别代表类别数据和类别ID的属性data和id。

在CategoryEditPage组件中，创建了props对象，其中包含具有data值的category属性。此属性category作为EditCategoryForm组件的属性传递，该属性是从Koudde142导入的。

接下来，呈现Head组件。该组件可能负责处理Padga的头标签，例如标题和描述。以这种方式，Panigan的标题被定义为“ Belezix Admin |类别”，并将其描述为“ Admin Belezix面板类别的管理版”。P>

渲染了Box组件，它用于将EditCategoryForm组件涉及到矩形盒中。此Koud10具有一些视觉配置，例如圆形边缘和背景颜色。

编辑/[ID]

详细解释以下内容：

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;

代码提出了一个名为edit/[id]的pagine，该pagine是根据您的ID发布特殊类别的版本页面的负责。

代码开始导入screens/category/edit/CategoryEditPage文件夹的Koud133组件，以及entidades/category文件夹中Koud159文件的Koud158函数。

然后定义了koudde161函数。此函数是一个特殊的next.js all -so称为数据，然后再呈现服务器上的页面。在这种情况下，getServerSideProps函数接收上下文作为一部分，其中包含有关请求的信息。

在getServerSideProps函数中，称为koudde164函数。此功能可能是一个身份验证中间件，可以验证用户是否有权访问类别编辑板。此功能将接收矮攻击功能作为一部分，如果身份验证成功，将执行该功能。

在此Ashnial函数中，可变id是从请求的上下文中提取的。验证了id的值以确保其徒劳。如果koud50不存在或不存在vamigid string，则pânão被标记为“未发现”，这将导致响应404.

如果id是恶意的，则getCategoryById功能称为id，而上下文为Paranne。此功能可能会提出API请求，以获取具有指定ID的类别数据。结果存储在变体koudde134中。

简而言之，koud155文件定义了一个pânão，该文件根据其ID呈现特定类别的边缘。它寻求使用getCategoryById功能ID的类别数据，并通过data和id属性将此数据传递给CategoryEditPage组件。

概括

在此类中，我们探讨了Web系统中与类别版本相关的不同摘录。我们开始理解Koud0组件，该组件为创建新记录创建一个框。然后，我们分析了EditCategoryForm组件，负责显示特定类别的形成。我们还看到了editCategory.lib库，该库提供了相关的功能和验证。

进一步加深，我们检查了Koud88，这是一种组合不同资源的个性化挂钩，例如形式，现场注册，形成正式和错误处理。此挂钩将react-hook-form库与yup结合使用以验证形式数据。

在序列中，我们知道CategoryEditPage pange，它使用组件EditCategoryForm来渲染类别编辑的接口。最后，我们分析了edit/[id]文件，在该文件中，将配置定义为搜索和提供要编辑的特定类别的数据。

通过概括所有这些元素，我们看到了它们如何与Web系统中的类别编辑体验相关。通过组件，挂钩，库和页面，可以获得完整且功能上的编辑流，因为表单的显示。服务器上的数据。

此类是一个实用的例子，说明了系统的不同部分如何集成以提供特定功能。我希望您了解提出的概念和实践，并可以将来将它们应用于自己的项目。

疯狂的挑战

培训挑战：

挑战包括扩展Web系统类别的功能，在编辑表格中添加一个附加字段并更新服务器上的编辑流。P>

遵循的步骤：

1. 在EditCategoryForm.tsx文件中，向类别的形式添加一个新字段。例如，您可以将字段添加到类别的描述中。

2. 使用yup库更新表单的验证，以确保正确填充新字段。

3. 在koud193文件中，更新EditCategoryFormData接口以包括添加到表单中的新字段。

4. 在CategoryEditPage.tsx文件中，更新Koude Component29中GenericDetailsItem组件中fields属性的定义。包括添加到要显示在编辑屏幕上的表单中的新字段。

5. 在Koud199文件中，在Koud102上更新Koud109功能。在api.patch申请中包含新字段，要发送到服务器并正确更新类别。

6. 运行Web系统并使用添加的新字段测试类别编辑功能。如果正确应用了验证，并且如果信息已在服务器上更新，请检查字段是否正确显示在表单上。

这一挑战将测试您的扩展技巧和现有功能的更新，以及您来自系统不同部分的集成能力。切记遵循开发的最佳实践并确保代码的一致性。

玩有趣的Codando，祝您好运！