Criação da página de search

Nós precisamos fazer primeiro a lógica do nosso search, para depois fazermos o visual, pois assim como os slides, o visual só vai ser feito com o backend.
Nós iremos em “courseService.ts” para criar um novo método para o search. O nosso search vai receber um parâmetro, que será o nome no input de pesquisa que iremos fazer.
```
getSearch: async (name: string) => {
	const token = sessionStorage.getItem("onebitflix-token");
},
```

Agora, para o conteúdo, será igual aos demais, só que nós iremos fazer uma template string na URL, passando um parâmetro importante para a pesquisa, que é o nosso parâmetro do nome.

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

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

    return error.response;
  });

  return res;
},

Agora, nós iremos no “headerAuth” para fazermos algo simples, que será o nosso handle de search. Nós iremos fazer ele acima do nosso useEffect.
```
const handleSearch = async () => {
    
};
```
Agora, nós iremos criar um useState, que será usado no input para registrar o name.
```
const [searchName, setSearchName] = useState("");
```
Agora, nós iremos no input de search e faremos a mudança do onChange, nós iremos usar um value aqui também, para podermos limpar o input quando fizermos a pesquisa. Nós iremos colocar no final um método para deixar o search sempre em minúsculo, para ficar padronizado.
```
<Form>
	<Input
	name="search"
  type="search"
  placeholder="Pesquisar"
  className={styles.input}
	value={searchName}
	onChange={(event) => {
	  setSearchName(event.currentTarget.value.toLowerCase());
  }}
  />
</Form>
```
Agora nós iremos no search, lá, nós iremos colocar um push, para que quando a pessoa inicie o search, ela seja redirecionada para outra página, com o “searchName” no link, similar ao que fizemos no registro/login
```
const handleSearch = async (event: FormEvent<HTMLFormElement>) => {
	event.preventDefault();
    
	router.push(`/search?name=${searchName}`);
};
```
1. Faremos um logo abaixo dele para ser exclusivo da lupa que temos ao lado do input, pois pela tipagem do typescript, o “event: FormEvent”, é exclusivo de formulário, então vão vai ser compatível com a nossa imagem.
2. Será igual ao método acima, só que ele não terá a parte de event do form, terá apenas o push com o nome que estamos pegando do input.
```
	const handleSearch = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    router.push(`/search?name=${searchName}`);
		setSearchName("");
  };

  const handleSearchClick = () => {
    router.push(`/search?name=${searchName}`);
		setSearchName("");
  };
```

Agora, nós iremos colocar esse método no formulário e também no botão de search.

<Form onSubmit={handleSearch}>
	<Input
  name="search"
  type="search"
  placeholder="Pesquisar"
  className={styles.input}
	value={searchName}
  onChange={(event) => {
	  setSearchName(event.currentTarget.value.toLowerCase());
  }}
	/>
</Form>
<img
src="/homeAuth/icon-lupa.svg"
alt="lupaHeader"
className={styles.searchImg}
onClick={handleSearchClick}
/>

Agora, nós vamos em “pages”, nela iremos criar um arquivo chamado search. Iremos criar um arquivo visual chamado “search.module.scss” em “styles”

import styles from "../styles/search.module.scss";
import Head from "next/head";
import HeaderAuth from "../src/components/common/headerAuth";

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

export default Search;

Agora, se testarmos o search, nós seremos redirecionados para essa página e podemos ver na url o que foi pesquisado.
Nós iremos primeira criar o router e em seguida criar uma constante que vai receber o name que está vindo da url. Nós iremos pegar ele através do router.
1. Esse “.name” é o “name” que nós colocamos depois da “?” no nosso “router.push” em “headerAuth”.
```
const router = useRouter();
const searchName = router.query.name;
```
Agora, nós iremos fazer um useState, que iremos usar para armazenar o array de cursos que vão vir, para isso, iremos usar o “CourseType”.
```
const [searchResult, setSearchResult] = useState<CourseType[]>([]);
```
Agora, faremos uma função assíncrona que fará a nossa pesquisa.
```
const searchCourses = async function () {
    
};
```
Agora nós iremos verificar se o nosso “searchName” é uma string, pois o typescript pede essa verificação para podermos colocar o “searchName” como parâmetro do método search.
```
const searchCourses = async function () {
	if (searchName === "string") {
	  const res = await courseService.getSearch(searchName);

    setSearchResult(res.data.courses);
  }
};
```
Agora, nós iremos fazer um “useEffect” para chamar essa função apenas 1 vez, e para isso, nós iremos passar como dependência o nosso “searchName”, isso significa que o useEffect só vai ser acionado de novo quando ele mudar.
```
useEffect(() => {
	searchCourses();
}, [searchName]);
```
Com isso, nós vamos poder fazer o map da função para ver se estamos tendo o resultado que queremos. Já vamos também colocar uma div que terá uma “key”, que será o “id” do nosso curso.

```tsx
<main>
	<HeaderAuth />
	{searchResult?.map((course) => (
	  <div key={course.id}>
	    <p>{course.name}</p>
    </div>
   ))}
</main>
```

Nós podemos testar e veremos que o nosso “name” está sendo retornado tranquilamente. Podemos colocar até mesmo testes que vamos ver resultado, como “prog” ou “testando”
Vamos poder então partir agora para o nosso visual.

Criação da página de search

Commit do git