Criação da página de episódios

Agora, vamos para o nosso último passo, que será a página de episódios. Nós faremos páginas dinâmicas de acordo com o id do curso, e iremos então buscar os episódios dele. Nós iremos fazer uma pasta dentro de “pages” chamada “courses”

Dentro dessa página nós teremos um arquivo chamado “[id].tsx” e iremos criar na pata “styles” um arquivo chamado “coursePage.module.scss”

import styles from "../../styles/coursePage.module.scss";
import Head from "next/head";

const CoursePage = function () {
  return (
    <>
      <Head>
        <title>Onebitflix - {"nomeDoCurso"}</title>
        <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
      </Head>
      <main>
				<HeaderAuth />
			</main>
    </>
  );
};

export default CoursePage;

Agora, nós iremos na pasta “services” e iremos acessar o arquivo “coursesService.ts”. Nós iremos começar criando um método chamado “getEpisodes”, que vai receber como parâmetro um id, que será um número ou uma string.
```
getEpisodes: async (id: number | string) => {
    
},
```

Agora iremos colocar o conteúdo do método, será agora algo parecido com o método de search, só que mudando a url.

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

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

    return error.response;
  });

  return res;
},

Agora, nós iremos no arquivo que criamos “[id].tsx”, iremos começar pegando o router e em seguida vamos pegar o “id” de “router.query”, que nem fizemos com o search, só que iremos usar destructuring no id, pois ele vai vir como um objeto.
```
const router = useRouter();
const { id } = router.query;
```
Agora, nós iremos criar um useState para colocarmos o objeto de informações vindas do curso, incluindo depois um map para buscarmos episódios. Nós iremos então colocar o tipo dele como “CourseType”
```
const [course, setCourse] = useState<CourseType>();
```
Agora, assim como fizemos em search, iremos criar uma função que vai ser responsável em usar o service que criamos. Primeiro iremos fazer uma verificação, só que essa verificação será: Se o id não for uma string, ele vai retornar vazio, e travar a página.
```
const getCourse = async function () {
	if (typeof id !== "string") return;
};
```

Agora iremos fazer o “res” utilizando o método que criamos, passando o id como parâmetro.

const getCourse = async function () {
	if (typeof id !== "string") return;

  const res = await courseService.getEpisodes(id);

  if (res.status === 200) {
	  setCourse(res.data);
  }
};

Agora, usaremos um “useEffect” para fazermos a mesma coisa que fizemos em search, chamar essa função uma única vez, e ela só vai ser chamada de novo, quando o “id” mudar.
```
useEffect(() => {
	getCourse();
}, [id]);
```
Podemos então fazer um teste, pegaremos o título do curso. Será um pouco mais simples, já que é um objeto, então não será necessário map. Mas teremos que colocar uma “?” em tudo, pois são coisas opicionais.
```
<main>
	<HeaderAuth />
  <p>{course?.name}</p>
</main>
```

Agora, para finalizar, podemos mudar logo o título do head para o nome do curso que estamos buscando.

<Head>
	<title>Onebitflix - {course?.name}</title>
  <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
</Head>

Criação do método de likes

Nós já criamos o nosso método de favoritos, então antes de criamos ele visualmente, vamos também criar o método de like. Nele, nós vamos dar like no curso, e quando entrarmos vamos verificar se o curso está com like ou não.

Agora, nós iremos na pasta “services” e iremos acessar o arquivo “coursesService.ts”. Nós iremos criar o método “like” abaixo de “getFavCourses”. Nele nós iremos criar a mesma coisa que criamos em “addToFav”, só mudando a url.

like: async (courseId: number | string) => {
	const token = sessionStorage.getItem("onebitflix-token");

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

    return error.response;
  });

  return res;
},

Com isso, nós temos o método de dar like. Vamos agora fazer o de remover o like. Ele é a mesma coisa do “removeFav”, mudando apenas a url.

removeLike: async (courseId: number | string) => {
	const token = sessionStorage.getItem("onebitflix-token");

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

    return error.response;
  });

  return res;
},

Com apenas isso, nós vamos conseguir trabalhar os likes.

Commit do git

Com a nossa chamada do curso funcionando, podemos então dar o seu commit.

git add -A

git commit -m "Criação do método de pegar o objeto de um curso, comunicação com o front - Página do curso"