Ajuda na pesquisa

Oi, Jean,

Realizei os testes usando o código que você compartilhou e ele está retornando as pesquisas corretamente.

É importante lembrar que o projeto deste curso é composto por duas pastas, uma referente ao Back-End, que pode ser acessada neste link e outra referente ao Front-End, que pode ser acessada neste link. Para que o projeto funcione adequadamente, é necessário que você rode mantenha o Back-End rodando no terminal. Para isso, você pode seguir os seguintes passo:

• Abra a pasta do Back-End do projeto no VS Code;

• Abra o terminal integrado do VS Code clicando no menu superior em "Terminal", e selecionando a opção "New Terminal"; No terminal aberto na parte inferior do VS Code digite o comando:

  node app.js
  

• O retorno no terminal vai ser a mensagem "Escutando a porta 8000".

  

Caso já esteja com o Back-End funcionando, verifique se a pesquisa está sendo feita com a diferenciação entre letras maiúsculas e minúsculas, pois esta barra de pesquisa é case sensitive e ela verá diferença entre as letras maiúsculas e minúsculas. Por exemplo, ao buscar pelo livro "Entendendo Algorítimos", você deve digitar "Entendendo…", da mesma forma que está escrito o nome do livro.

Caso ainda assim, o problema persista, peço que você compartilhe seu repositório no GitHub, com todos os arquivos e pastas necessários, para podermos simular seu ambiente de desenvolvimento e realizar outros testes para te responder de forma mais assertiva.

Espero que dê tudo certo. Abraços!

a aplicação back-end esta rodando, acho que fiz algo de errado e nao estou achando o problema, vou compartilhar o link do github. Link do server:https://github.com/roesler987/projeto3-server. Link front:https://github.com/roesler987/projeto3

Oi, Jean!

O projeto está fazendo a busca dos livros que estão na mesma pasta do componente "Search". Para que ele consiga pesquisar os livros que estão sendo disponibilizados pelo servidor precisamos realizar algumas alterações no seu código:

Na pasta referente aos arquivos do Front-End:

• Criaremos a pasta "servicos" dentro da pasta "src";

• Dentro da pasta "servicos" criaremos o arquivo "livros.js" e escreveremos o seguinte código:

     import axios from "axios"
  
     const livrosAPI = axios.create({baseURL: "http://localhost:8000/livros"})
  
     async function getLivros() {
         const response = await livrosAPI.get('/')
  
         return response.data
     }
  
     export {
         getLivros
     }
  
     ```
  

• Em seguida, iremos fazer algumas alterações no arquivo "index.js" do componente "Search". Precisaremos modificar o código da seguinte maneira:

   import Input from '../Input'
   import styled from 'styled-components'
   import { useState } from 'react'
   import { getLivros } from '../../servicos/livros.js'
   import { useEffect } from 'react'
  
  //CÓDIGO OMITIDO 
  
  
  function Search() {
      const [livrosPesquisados, setLivrosPesquisados] = useState([])
      const [livros, setLivros] = useState([])
  
      useEffect(() => {
          fetchLivros()
      }, [])
  
      async function fetchLivros() {
          const livrosDaAPI = await getLivros()
          setLivros(livrosDaAPI)
      }
  
      async function insereFavorito(id) {
          alert(`O livro de id: ${id} foi inserido com sucesso`)
      }
  
      return (
          <PesquisaContainer>
              <Titulo>Já sabe por onde começar?</Titulo>
              <Subtitulo>Encontre seu livro em nossa estante.</Subtitulo>
              <Input
                  placeholder="Escreva sua próxima leitura"
                  onBlur={evento => {
                      const textoDigitado = evento.target.value
                      const resultadoPesquisa = livros.filter( livro => livro.nome.includes(textoDigitado))
                      setLivrosPesquisados(resultadoPesquisa)
                  }}
              />
              { livrosPesquisados.map( livro => (
                  <Resultado onClick={() => insereFavorito(livro.id)}>
                      <img src={livro.src} alt=""/>
                      <p>{livro.nome}</p>
                  </Resultado>
              ) ) }
          </PesquisaContainer>
      )
  }
  
  export default Search
  

Na pasta referente aos arquivos do Back-End:

• Altere o arquivo "app.js" com o seguinte código:

  const express = require("express")
  const rotaLivro = require("./rotas/livro")
  
  const cors = require("cors")
  
  const app = express()
  app.use(express.json())
  app.use(cors({origin: "*"}))
  
  app.use('/livros', rotaLivro)
  
  const port = 8000
  
  app.listen(port, () => {
      console.log(`Escutando a porta ${port}`)
  })
  

• Altera o arquivo "package.json" com o seguinte código:

  {
    "name": "alura-books-server",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Bernardo Severo",
    "license": "ISC",
    "dependencies": {
      "cors": "^2.8.5",
      "express": "^4.18.2",
      "nodemon": "^2.0.20"
    }
  }
  

• Em seguida, no terminal, com a pasta do Back-End aberta use o comando npm install para instalar todas as dependências e depois o comando npx nodemon app.js para rodar o servidor.

Com essas alterações a pesquisa deve ser feita no arquivo "livros.json" que está disponível na porta localhost:8000.

Deixo abaixo o link do GitHub com o seu projeto alterado e funcionando. Para utilizá-lo, basta abrir dois terminais, um para o Back-End e outro para o Front-End. No terminal que você for rodar o Back-End você precisa usar o comando npm install e em seguida o comando npx nodemon app.js enquanto no terminal referente ao Front-End, você precisa usar o comando npm install e depois usar o comando npm start.

• Link do repositório no GitHub com as alterações feitas

Conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!