Esse é o issue sobre uma nova função que planejo implementar, onde o usuario pode ler qualquer livro em formato epub que tenha baixado dentro ou fora do site, diretamente no mesmo.

Limitações:
~~A maior limitação certamente é o fato de o usuario precisar baixar o próprio arquivo, para muitas pessoas, esse vai ser o motivo de não usarem essa função. ~~ Atualização: Foi descoberto que ambos os servidores IPFS.io e Pinata permitem requisições de download que não são bloqueadas pelo CORS.

O objetivo agora é fazer com que o próprio Bibliomar salve livros e renderize para o usuário.

A segunda maior limitação são as inerentes da biblioteca que estaremos utilizando: Atualmente, a melhor opção para ler livros digitais no navegador é a biblioteca epub.js, e apesar de ser uma opção inovadora e robusta, ainda é nova.
Isso significa que alguns bugs provavelmente não poderão ser evitados.

Além do mais, estaremos usando um wrapper para React em cima dessa biblioteca, o react-reader, que também pode adicionar novas variaveis a formula.

A ideia principal:

• O usuario deve entrar na rota /reader
• Um modal abre assim que o usuario entra aqui, e este solicita o arquivo .epub do usuario.
• Se o arquivo for enviado no formato correto, o usuario pode prosseguir para a próxima página.
• Redirecionado para a rota /reader/:nomedolivro, o usuario vai poder ler seu livro normalmente, inclusive salvando progresso mesmo fechando o navegador.

Também vamos começar a estudar a implementação da biblioteca localForage, ela possui uma interface simples, que vai permitir o uso de APIs de armazenamento offline robustas, e quem sabe, no futuro, você não possa acessar o leitor do Bibliomar sem conexão a internet? #6

Esse é o issue principal descrevendo a proposta, e novos subissues vão ser criados para lidar com o desenvolvimento passo a passo.

Esse issue vai começar a ser trabalhado após o lançamento do leitor online.

Vamos criar novas rotas no Biblioterra responsáveis por armazenar e recuperar o progresso nos livros dos usuarios. E no Bibliomar, opções para usar esses dados no leitor online.

Como o leitor online ainda está em desenvolvimento, esse issue é apenas um draft. Não deve ter foco atualmente.

Atualmente, no sistema de Biblioteca o usuario pode inserir seus livros em três categorias diferentes, sendo essas:

• Lendo - Livros para leitura imediata
• Planejando ler - Livros para ler na futura
• Backlog - Basicamente, onde você guarda os livros para ler em um futuro distante (ou não)

O nome dessas categorias se encontra diferente no biblioterra, que foi projetado em inglês, por isso é importante manter a documentação do mesmo aberta enquanto trabalha: Biblioterra Docs

Objetivo: Adicionar funcionalidade de mover vários livros para uma categoria diferente. Atualmente, você pode trocar a categoria do livro acessando as informações do mesmo e alterando por lá, porém, se você quiser mover vários livros de uma só vez, seria uma tarefa tediosa.

Basicamente, seria interesse ter uma espécie de "modo de edição", onde você seleciona os livros ao clicar neles, e então pode realizar a mudança com um só comando.

Toda essa informação é relevante aos componentes no diretório src/components/library.

Problema:

Ao entrar em alguma rota /search que tenha o parâmetro q (query) definido, uma pesquisa duplicada é realizada.

Como verificar:

Entre no modo de desenvolvedor -> Faça alguma pesquisa na tela inicial -> verifique por um console.log() de um array contendo vários objetos, esse é o resultado da pesquisa sendo logado, e o comportamento esperado é que apenas um console.log() apareça, junto de uma unica requisição GET.

O bug ocorre quando você entra na rota /search com o parametro q definido, por exemplo: /search?q="orgulho" irá resultar em dois console.log() e duas requisições GET.

Possíveis causas:

O componente de pesquisa está programado para enviar um evento de submit assim que detectar um valor de q diferente de "" (string vazia):

useEffect(() => {
        let submit = setTimeout(async () => {
            if (query != null && query !== "") {
                formRef.current!.dispatchEvent(
                    new Event("submit", { bubbles: true, cancelable: true })
                );
            }
            // ~500ms gives enough time for everything to render.
        }, 500);
        return () => clearTimeout(submit);
    }, [page, searchParams]);

Código mencionado

Isso funciona até certo ponto, mas aparentemente está fazendo com que o componente re-renderize logo ao ser montado, fazendo com que uma requisição dupla seja enviada a API.

Como o Biblioterra salva a pesquisa em cache automaticamente, não estamos realmente colocando pressão extra nos servidores do LibraryGenesis, e por esse motivo, esse issue não é urgente.

Porém, é uma oportunidade boa de se familizariar com essa parte do código, e por isso está aberto para quem quiser resolver.
Boa sorte!

Esse novo sistema de paginação é bem mais robusto.

Principalmente na pesquisa, já que agora fica bem mais simples receber novos resultados conforme o usuario avança nas páginas de resultados.

Comecei a estudar a possibilidade de transformar o site em um PWA, permitindo que os usuarios o instalem em qualquer dispositivo.

Provavelmente a solução mais simples é usar o vite-plugin-pwa para realizar a configuração automática.

Problema: Atualmente, principalmente em celulares e dispositivos 16:10, a escala de tela dos livros pode ficar estranha.

Estudando esse problema, verifiquei que poderia existir uma solução usando flexbox, definindo uma altura fixa no container parent e definindo flex-grow: 1 nas partes relevantes. Acabou que depois de alguns testes isso de fato funcionou, mas falta testar em dispositivos reais para confirmar.

Agora, todos as imagens de dentro das figures (que compoem a capa e a pequena descrição dos livros em todas as partes do site) possuem uma altura fixa, e o conteudo escala baseado nessa altura especifica (dando prioridade para a descrição acima da imagem de capa)

Essa é a estrutura simplificada:

<figure className="figure d-flex flex-column">
  <figcaption className="figure-caption flex-grow-1">
</figure>

Esse issue também ajudou a resolver o problema onde os items que possuiam tamanho de titulo diferente ficavam desalinhados com o resto do site.

Vou mantê-lo aberto até realizar mais testes, e qualquer sugestão de mudança é bem vinda.

Problema: muito código no Bibliomar usa de conhecimento prévio para saber os possíveis resultados, principalmente quanto a requisição a APIs e objetos. Nós estamos usando Typescript por um motivo e seria uma pena não aproveitar o potencial dessa ferramenta.

Objetivo: melhorar a tipagem do aplicativo no geral.

Requisitos gerais: É intessante registrar esses novos tipos nas pastas de componentes as quais eles pertencem. As unicas exceções são tipos que abrangem todo o aplicativo, como o Book.

Por exemplo, se eu desejo descrever uma interface ou tipo de uma variavel dentro de algum componente na pasta components/reader, o mais interessante é criar uma nova pasta chamada helpers, junto de um arquivo readerTypes.ts, e exportar os novos tipos a partir desse arquivo.

Para as tipagens relevantes a toda a aplicação, utilizar o arquivo em src/helpers/generalTypes.ts

Um exemplo de interface que descreve os elementos de um determinado resultado de pesquisa, ou arquivo armazenado na biblioteca do usuario:

interface Book {
   series: string;
   title: string;
   authors: string;
   language: string;
   file: string;
   mirror1: string;
   mirror2?: string;
   md5: string;
   topic: string;
   extension: string;
   size: string;
}

export type { Book };

Atualmente, ao entrar na tela de login o usuario se depara com um texto que indica o inicio do "login automatico".

O objetivo dessa mudança é criar um novo componente, dentro de uma nova rota, que irá realizar essa tarefa de login automatico.

Esse issue é ideal para iniciantes, devido a sua baixa complexidade. Também é interessante para quem quer se familiarizar com o código e como as requisições para o Biblioterra funcionam.

Antes de começar: Deixe a documentação do Biblioterra aberta, lá você pode fazer as requisições diretamente do seu navegador. Siga o tutorial básico para deixar seu ambiente de desenvolvimento pronto.

Requisitos gerais:

Você deve criar uma nova rota que vai levar ao seu novo componente, nós utilizamos o react-router no Bibliomar, e você pode aprender sobre ele aqui: Nós usamos componentes funcionais no Bibliomar (isso significa que usamos funções ao invés de classes). As requisições devem ser feitas utilizando a biblioteca axios, ou a padrão do navegador fetch.
Não há requisitos quanto a forma que você quer apresentar essa tela de login. Apenas lembre-se que em todo o site incluímos o componente <Navbar />, que é a barra de navegação e usamos a classe css bg-alt como plano de fundo.

Dicas gerais:

Essas dicas devem lhe ajudar a se situar em como o processo de autenticação (e consequentemente, re-autenticação) funciona.

Você irá trabalhar com uma rota principal, a /user/validate, ela vai receber um token JWT, e retornará um novo token com uma data de expiração postergada. (Vamos entender melhor, passo a passo)

• O login automatico é feito utilizando o endpoint /user/validate do Biblioterra. Este endpoint é protegido. Endpoints protegidos significam que você deve estar autorizado para poder utilizar-los:

• O Biblioterra trabalha com autenticação usando JWT do tipo Bearer. Isso significa que você deve enviar, junto da sua chamada a API, um token Bearer no cabeçalho Authorization.

• Você recebe um token JWT sempre que realizar um login correto em /user/login ou uma re-autenticação em /user/validate Você, o desenvolvedor, salva esse token em algum lugar para poder utilizar-lo nas operações com o usuario autenticado.
  Existem longas discussões sobre onde é o lugar mais seguro para salvar este token, e cada alternativa apresenta seus prós e contras.
  Por isso, nós salvamos o token na interface localStorage, onde ele pode ser utilizado em toda a aplicação, e persiste mesmo quando o usuario fecha o navegador. Esse token é salvo na chave "jwt-token", e é muito importante manter esse nome.

• O endpoint de revalidação retorna dois códigos de resposta principais, 200 e 401. 200 significa que tudo ocorreu bem, e no corpo dessa resposta está o novo token JWT atualizado. 401 significa que o token é inválido ou expirou, nesse caso, o usuario deve fazer login novamente.

Passo a passo:

Adicione sua rota no aplicativo:
Navegue até o arquivo App.tsx e sem seguida adicione o seguinte dentro da parte de <Routes>:

<Routes>
  // ...
  // Não substitua as outras rotas, apenas adicione isso ao final
  <Route path="/autologin" element={<SeuNovoComponente />} />
</Routes>

Isso vai definir que toda vez que alguém entrar na url /autologin, seu componente será renderizado.

Já no seu componente, salve o valor do token em alguma variavel:

const jwtToken = localStorage.getItem("jwt-token")

Em seguida, envie sua requisição com esse token no cabeçalho Authorization: Usamos a biblioteca axios nesse exemplo

const config = {
  url: "https://biblioterra.herokuapp.com/v1/user/validate",
  method: "GET",
  /* Parte importante */
  headers: {
    Authorization: `Bearer ${jwtToken}`,
  },
};

Em seguida, faça sua requisição, utilizando async/await ou promises.

let req = await axios.request(config);

ou

axios.request(config).then(...);

Você pode verificar o status e o corpo da requisição usando:

// Status
req.status
// Corpo (com o token JWT)
req.data

Caso o status da requisição retorne OK (200), salve o novo token no localStorage:

const newToken = req.data["access_token"]  

//Sempre nomeie a chave como "jwt-token", ou ela não será usada no resto do site.  
localStorage.setItem("jwt-token", newToken)  

Seu melhor amigo nessa hora é o hook useEffect(), que vai executar seu código assim que o usuario entrar na página e ela renderizar. Lembre-se sempre de adicionar tratamento de erros. Cheque a documentação da biblioteca de requisições que você está usando para entender como fazer isso.

Agradeço o interesse, e estou aberto a responder qualquer pergunta ou sugestão, boa sorte!

Salve mestre, tem alguma feature ou refatoramento que você tem em mente e gostaria que fosse implementados? Afinal de conta o projeto é seu então eu não gostaria de fazer algo que você não tenha interesse. Pode abrir issues e me marcar aqui se tiver alguma em específico que eu tento dar uma olhada assim que sair do horário de serviço.