Criação da seção de slides automáticos(Elementos e estilo)

Agora, nós iremos criar os slides automáticos, que vão vir do backend, para isso, nós iremos criar um novo serviço. Iremos então na pasta “services” criar um arquivo “categoriesService.ts”

Nós iremos importar de cara a nossa api e também o courseType

import api from "./api";
import { CourseType } from "./courseService";

Agora, nós iremos criar um novo tipo, que será o tipo da categoria. Nós iremos colocar cursos como opicionais, pois nas categorias, os cursos não são obrigatórios.
```
export type CategoryType = {
  id: number;
  name: string;
  position: number;
  courses?: CourseType[];
};
```
Agora, nós iremos criar um serviço para as categorias e começar também já criando o primeiro método, o método de pegar as categorias.
```
const categoriesService = {
  getCategories: async () => {},
};

export default categoriesService
```

A partir de agora será muito parecido com o que fizemos nos cursos.

getCategories: async () => {
	const token = sessionStorage.getItem("onebitflix-token");

  const res = await api
  .get("/categories", {
  headers: {
	  Authorization: `Bearer ${token}`,
  },
  })
  .catch((error) => {
	  console.log(error.response.data.message);

    return error.response;
  });

  return res;
},

Agora, nós precisamos criar o método para pegarmos os cursos, podemos até copiar o método criado e mudar pouca coisa. Colocaremos um id como parâmetro do método e também colocaremos esse id na url dentro de get (Iremos transformar em template string)

getCourses: async (id: number) => {
	const token = sessionStorage.getItem("onebitflix-token");

  const res = await api
  .get(`/categories/${id}`, {
  headers: {
	  Authorization: `Bearer ${token}`,
  },
  })
  .catch((error) => {
	  console.log(error.response.data.message);

    return error.response;
	});

  return res;
},

Agora, com os métodos criados, podemos ir na pasta “homeAuth”. Nela nós iremos criar uma pasta chamada “listCategories” e criar o index. Nós não iremos usar o scss aqui, será em outro arquivo, então não iremos fazer o seu import.
```
const ListCategories = function () {
  return <></>;
};

export default ListCategories;
```

Nós vamos agora fazer o fetch com o SWR, podemos copiar de algum fetch que já foi dado para facilitar. Só que, nós iremos fazer o import do service que criamos para essas categorias.

import useSWR from "swr";
import categoriesService, { CategoryType } from "../../../services/categoriesService";
import SwrSpinner from "../../common/swrSpinner";

const ListCategories = function () {
const { data, error } = useSWR("/listCategories", categoriesService.getCategories);

if (error) return error;
if (!data) return <SwrSpinner />;

Agora, nós iremos fazer o uso desse nosso data. Nós iremos acessar dentro de “data.data” o “.categories”, que será daqui que virá os arrays. Você pode dar um “console.log()” no “data” para verificar de onde virá o resultado das categorias que queremos. (Se você quiser dar o console.log, você precisa também importar essa lista dentro do index do ‘homeAuth’ ”
```
return (
	<>
	  data.data.categories?.map((category: CategoryType) => (
	    <p>{category.name}</p>
    ))}
	</>
);
```

Agora vamos em “home.tsx” para fazermos o import dessa também.

<>
	<main>
	  <FeaturedSection />
    <NewestCategory />
    <FeaturedCategory />
    <ListCategories />
  </main>
</>

Agora, nós iremos criar um componente para o slide. Na pasta “listCategories” nós iremos criar uma pasta chamada “listCategoriesSlide”, e iremos configurar o seu “index.tsx”. Será aqui que iremos importar o nosso styles.
```
import styles from "../../../../styles/slideCategory.module.scss";

const ListCategoriesSlide = function () {
  return <></>;
};

export default ListCategoriesSlide;
```

Agora, nós iremos utilizar o SWR para fazer o fetch dos cursos dessa nossa categoria.

import styles from "../../../../styles/slideCategory.module.scss";
import useSWR from "swr";
import categoriesService from "../../../../services/categoriesService";
import SwrSpinner from "../../../common/swrSpinner";

const ListCategoriesSlide = function () {
const { data, error } = useSWR("/categoriesCourses", categoriesService.getCourses);

if (error) return error;
if (!data) return <SwrSpinner />;

Nós vamos também criar uma props, pois com essas props nós iremos pegar o nome da categoria e também o seu ID, pois nós precisamos do id para saber qual categoria nós estamos chamando os cursos.
```
interface props {
  categoryId: number;
  categoryName: string;
}

const ListCategoriesSlide = function ({ categoryId, categoryName }: props) {
```

Agora iremos fazer a implementação do nosso curso no return. (Nós iremos usar o “SlideComponent” aqui também.

interface props {
  categoryId: number;
  categoryName: string;
}

const ListCategoriesSlide = function ({ categoryId, categoryName }: props) {

Agora no fetch com o SWR nós iremos modificar algumas coisas: Nós iremos colocar o nosso identificador sendo dinâmico, iremos colocar uma template string e passar o id do curso. Depois, nós iremos criar uma arrow function para conseguir passar o parâmetro pro método de curso, pois o SWR pede que seja dessa forma para receber parâmetros.
```
const { data, error } = useSWR(`/categories/${categoryId}`, () =>
	categoriesService.getCourses(categoryId)
);
if (error) return error;
if (!data) return <SwrSpinner />;
```

Agora, nós iremos fazer o uso disso que criamos no nosso return. Nós iremos usar agora o “SlideComponent”

return (
	<>
		<p className={styles.titleCategory}>{categoryName}</p>
    <SlideComponent course={data.data.courses} />
	</>
);

Agora, para finalizar, nós iremos no index de “listCategories” para passar através do map que temos o nome e o id da categoria para esse component que criamos.
1. Nós vamos também colocar a key dele sendo o id, para o react não ficar reclamando.
```
return (
	<>
	  {data.data.categories?.map((category: CategoryType) => (
	    <ListCategoriesSlide
      key={category.id}
      categoryId={category.id}
      categoryName={category.name}
      />
		))}
	</>
);
```
Podemos então ver que na nossa página nós temos diversas categorias vindas do backend, com diferentes cursos. E o nosso método de “arrows” e “grab” está acontecendo certinho de acordo com a quantidade de cursos.

Criação da seção de slides automáticos(Elementos e estilo)

Responsividade da seção