Criar paginação para um App feito com NodeJS

moviandev

Matheus Viana

Posted on May 3, 2020

Criar paginação para um App feito com NodeJS

Hey,

Estou inspirado desde da semana passada em criar um blog pessoal para mim, onde vou falar de tecnologia e outras coisas, e como todo bom blog temos uma paginação para não termos uma bad UX, estou utilizando a seguinte stack no backend:

  • NodeJS;
  • Docker;
  • MongoDB;
  • Jest para testar meu código.

Bom, para o Mongo estou usando o ODM Mongoose. Let's code.

Paginação nada mais é do que pularmos uma porção de resultados e podendo configurar um limite para o tanto de resultados que serão pulados por página. Exemplo: pagina=2&limite=10 página 1 = 0 ~ 10, página 2 = 11 ~ 20.
Observando o exemplo podemos notar que estamos pulando 10 resultados por página, agora vamos codar isso, eu vou pegar um techo de código do projeto que estou fazendo e vou explicar para vocês:
controller.js

exports.getAllPosts = async (req, res) => {
  try {
    // Aqui pegamos pelos query params a página que queremos e como query params
    // vêm em string convertemos para números e caso seja vazio estamos settando para 1

    const pagina = +req.query.page || 1;

    // Aqui estamos pegando o limite informado pelos query params e 
    // convertendo para número caso seja vazio settamos para 10 

    const limite = +req.query.limit || 10;

    // Aqui rola um cálculo maroto, onde subtraimos para pegarmos a página anterior e multiplicamos pelo limite
    // para termos o salto desejado;

    const salto = (pagina - 1) * limite;

    // Aqui fazemos a pesquisa no nosso banco e realizamos a paginação.
    // Skip e Limit que estão no chaining do documento são metodos do Mongoose
    const post = await Post.find().skip(salto).limit(limite);

    res.status(200).json({
      status: 'sucesso',
      post,
    });
  } catch (err) {
    // ...error Handling
  }
};

Ok, Matheus você nos mostrou como fazer páginação, mas tem como testar essa função que você fez? A resposta curta é sim!

controller.spec.js

describe('GET METHOD', () => {
  it('Gets page 3 with the limit of 1 result', async () => {
    const response = await request(app).get('/v1/posts?pagina=3&limite=1');

    expect(response.status).toBe(200);
    expect(response.body.post[0].status).toBe('public');
    expect(response.body.post[0].title).toBe('Teste teste tese teste');
    expect(response.body.post[0].body).toBe(
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    );
    expect(response.body.post[0].metaDescription).toBe(
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq',
    );
  });
});

E isso é tudo pessoal.

Qualquer dúvida é só deixar nos comentários que responderei.

Projeto: https://github.com/moviandev/blog-backend
GitHub: https://github.com/moviandev/
LinkedIn: https://www.linkedin.com/in/matheusviana/

Até a próxima!

💖 💪 🙅 🚩
moviandev
Matheus Viana

Posted on May 3, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related