Criação da seção de minha lista (Elementos e estilo)

1. Nós iremos fazer uma seção que será apenas para os cursos que o usuário colocar como favoritos. Esses cursos vão ser configurados como favorito na página do curso, onde o usuário vai acessar para ver o episódio que quer.

2. Nós vamos então na página “homeAuth”, nela nós iremos criar uma pasta chamada “favoriteCategory”.

   import styles from "../../../../styles/slideCategory.module.scss";
   
   const FavoritesCourses = function () {
     return <></>;
   };
   
   export default FavoritesCourses;
   

Criação do método

1. Nós iremos agora fazer a criação do método para colocar os cursos como favoritos. Iremos em “courseService”. Nós iremos criar o método assícrono “addToFav”, que irá chamar um id, que pode ser um número ou uma string.

   addToFav: async (courseId: number | string) => {
   },
   

2. Agora, nós iremos puxar o token fazer a criação do res, só que nós iremos colocar o post no lugar do get, que foi o que fizemos nas outras categorias.

   const token = sessionStorage.getItem("onebitflix-token");
   
   const res = await api.post("/favorites")
   

3. Agora, além de “headers”, nós iremos colocar “courseId”, que vai ser enviado para o body no backend, pois nós iremos colocar como parâmetro desse método o id do curso que a pessoa está adicionando aos favoritos.

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

4. Agora, nós iremos fazer o método de remover dos favoritos. Nós faremos a criação do método normal, recebendo o “courseId” como parâmetro, só que, não iremos passar o “courseId” que nem passamos no método de adicionar.

   removeFav: async (courseId: number | string) => {
   	const token = sessionStorage.getItem("onebitflix-token");
   
     const res = await api
   	  delete("/favorites", {
   	    headers: {
   	      Authorization: `Bearer ${token}`,
         }
       })
       .catch((error) => {
   	    console.log(error.response.data.message);
   
         return error.response;
       });
   
       return res;
   },
   

5. Agora, iremos colocar abaixo do “headers” um “data”, que vai receber o “courseId”, e vai ser pego pelo backend. Quando fazemos o uso do delete com o axios, nós precisamos colocar dessa forma o parâmetro que for para o body.

   removeFav: async (courseId: number | string) => {
   	const token = sessionStorage.getItem("onebitflix-token");
   
     const res = await api
   	  delete("/favorites", {
   	    headers: {
   	      Authorization: `Bearer ${token}`,
         },
   			data: { courseId }
       })
       .catch((error) => {
   	    console.log(error.response.data.message);
   
         return error.response;
       });
   
       return res;
   },
   

6. Por último, nós faremos o método de pegar o curso, que será igual aos outros que fizemos, só que mudando a url que é utilizada.

   getFavCourses: async () => {
   	const token = sessionStorage.getItem("onebitflix-token");
   
     const res = await api
   	  .get("/favorites", {
   		  headers: {
   		    Authorization: `Bearer ${token}`,
   	    },
       })
   	  .catch((error) => {
   	    console.log(error.response.data.message);
   
         return error.response;
       });
   
       return res;
   },
   

Chamando o método para os slides

1. Nós iremos agora fazer a criação da lista de fato. Vamos começar colocar o título.

   return (
   	<>
   	  <p className={styles.titleCategory}>Minha Lista</p>
     </>
   );
   

2. Agora iremos fazer o uso do SWR para pegar o “getFavCourses”

   const { data, error } = useSWR("/favCourses", courseService.getFavCourses);
   if (error) return error;
   if (!data) return <SwrSpinner />;
   

3. Nós iremos agora fazer uma renderização condicional. Nós vamos verificar se existem cursos na lista, se não existir, nós vamos retornar uma mensagem. O array de cursos que temos, nesse método, não vai estar só em “data.data”, vai estar em “data.data.courses”, então vamos verificar se o length é maior ou igual a 1, e se não for, vamos retornar a mensagem.

   {data.data.courses.length >= 1 ? (
   	<SlideComponent course={data.data.courses} />
   ) : (
     <p className="h5 text-center pt-3">
   	  <strong>Você não tem nenhum curso na lista</strong>
     </p>
   )}
   

4. Como não colocamos nenhum curso na lista, vai ser retornada a mensagem, mas vamos poder testar isso quando tivermos os cursos com páginas para eles.

Commit do git

1. Agora, nós finalizamos a nossa categoria de favoritos, então vamos dar um commit final para isso.

   git add -A
   

   git commit -m "Criação dos elementos da seção de favoritos, do seu estilo visual e também dos métodos de favorito - Seção favoritos"
   

Conclusão

O que foi feito/visto nessa aula:

1. Criação dos métodos de favoritos