Nós vamos criar o serviço de categoria nessa aula, iremos começar criando o arquivo categoryService.ts

Ao criar, podemos criar a estrutura, já importando o api também

import api from "./api";

const categoriesService = {
};

export default categoriesService;

E agora que está criada a base, podemos criar ela de fato

import api from "./api";

const categoriesService = {
  getCategories: async () => {
    const res = await api.get("/categories");

    return res;
  },
};

export default categoriesService;

Vamos então na tela de allCategories criar um state chamado de categories que começará como um array vazio, e também o loading, que começa como true.

const AllCategories = () => {
  const [loading, setLoading] = useState(true);
  const [categories, setCategories] = useState([]);

Depois, nós vamos criar e chamar a função

const AllCategories = () => {
  const [loading, setLoading] = useState(true);
  const [categories, setCategories] = useState([]);

  const handleGetCategories = async () => {
    const res = await categoriesService.getCategories();
    setCategories(res.data);

    setLoading(false);
  };

  useEffect(() => {
    handleGetCategories();
  }, []);

Agora nós podemos colocar o loader aqui na tela

return (
  <>
    {!loading ? (
      <>
        <Container contentContainerStyle={{ paddingBottom: 100 }}>
          <DefaultTitle title="TODAS AS CATEGORIAS" fontSize={20} />

          {Data.map(({ categorie }: Categorie) => (
            <CategorieList key={categorie._id} categorie={categorie} />
          ))}
        </Container>
        <NavBar />
      </>
    ) : (
      <Loader />
    )}
  </>
);

Nós podemos trocar o Data pelo categories, e vamos ajeitar aqui nossas tipagens, começando pela tipagem de Categorie, vamos remover o “categorie” e colocar o product de verdade

export interface Category {
  _id: string;
  products: Product[];
}

{categories.map((category: Categorie) => (
	<CategorieList key={category._id} category={category} />
))}

Agora, nós vamos lá para a pasta de AllCategories e vamos entrar na lista, e dentro dela, vamos começar alterando o tipo de category e de product

interface CategoryProps {
  category: Category;
}

const CategorieList = ({ category }: CategoryProps) => {
  const navigation = useNavigation<PropsStack>();

  const renderItem: ListRenderItem<Product> = ({ item }) => (

Agora, precisamos alterar por dentro tudo que estamos usando

const CategorieList = ({ category }: CategoryProps) => {
  const navigation = useNavigation<PropsStack>();

  const renderItem: ListRenderItem<Product> = ({ item }) => (
    <CategorieCard product={item} key={item._id} />
  );

  return (
    <Container>
      <TitleContainer>
        <Title>{category._id}</Title>
        <SeeMore
          onPress={() => {
            navigation.navigate("Category", {
              _id: category._id,
              products: category.products,
            });
          }}
        >
          Ver mais
        </SeeMore>
      </TitleContainer>

      <FlatList
        data={category.products}
        renderItem={renderItem}
        horizontal
        showsHorizontalScrollIndicator={false}
      />
    </Container>
  );
};

Ao fazer isso, nós colocamos as categorias já funcionando, precisamos entrar agora no card para deixar funcionando certinho também

interface ProductProps {
  product: Product;
}

return (
  <Container>
    <Image source={{ uri: product.images[0].url }} />
    <TextContainer>
      <Title>{product.name}</Title>

Agora já está tudo certo com todas as nossas categorias, vamos só precisar navegar, por algum motivo, aqui no meu a rota de Category sumiu durante o processo, então vamos lá e vamos adicionar ela

A primeira coisa que faremos será organizar aqui a tipagem do categoryList, que é a forma que vamos exibir os conteúdos únicos para o usuário

interface CategoryProps {
  products: Product[];
}

Agora, iremos entrar em CategoryCard para poder mudar e deixar tudo de acordo com a nova tipagem

interface ProductProps {
  product: Product;
}

const likeImage = require("../../../../../assets/icons/like.png");

const CategoryCard = ({ product }: ProductProps) => {
  return (
    <Container activeOpacity={0.85} onPress={() => {}}>
      <Image source={{ uri: product.images[0].url }} />
      <InfoContainer>
        <Price>R$ {product.price}</Price>
        <Title numberOfLines={2}>{product.name}</Title>

Vamos agora para CategoryCard dentro de CategoryList para fazer a navegação

const CategoryCard = ({ product }: ProductProps) => {
  const navigation = useNavigation<PropsStack>();

  return (
    <Container
      onPress={() => {
        navigation.navigate("Product", {
          ...product,
        });
      }}
    >

Vamos fazer a mesma coisa com o category individual

const CategoryCard = ({ product }: ProductProps) => {
  const navigation = useNavigation<PropsStack>();

  return (
    <Container
      activeOpacity={0.85}
      onPress={() => {
        navigation.navigate("Product", {
          ...product,
        });
      }}
    >