Implementa Paginação #398

filipedeschamps · 2022-05-27T04:45:05Z

Atenção: Este PR é um Work In Progress.

Destaques do primeiro commit com foco no backend d86c421

Foco no endpoint /api/v1/contents
Novos query strings disponíveis: page e per_page
Se você chamar o endpoint sem nada, os defaults serão utilizados: page=1 e per_page=30
Exemplo com outros valores: /api/v1/contents?page=2&per_page=15
Refiz a validação do content.findAll() para validar o options somente usando o validator.js

Como os valores padrão são aplicados no model content, isso automaticamente filtrou os últimos 30 conteúdos publicados no ambiente de Homologação: https://tabnews-git-pagination-tabnews.vercel.app/

E se alguém quiser testar a API: https://tabnews-git-pagination-tabnews.vercel.app/api/v1/contents?page=1&per_page=2

Closes #339
Closes #341
Closes #343

vercel · 2022-05-27T04:45:07Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
tabnews	✅ Ready (Inspect)	Visit Preview	May 28, 2022 at 3:03PM (UTC)

filipedeschamps · 2022-05-27T22:20:18Z

Destaques do segundo commit, ainda com foco no backend c312553

Foco no endpoint /api/v1/contents e /api/v1/contents/[username] para retornarem pelo Header da resposta todas as informações de paginação para que seja possível construir uma navegação em qualquer tipo de client.
Novos cabeçalhos disponíveis: X-Pagination-Total-Rows e Link
O cabeçalho X-Pagination-Total-Rows é simples e retorna o número total de itens no banco de dados para aquela busca. Por exemplo, se você estiver usando o fetch para buscar esse valor, basta executar response.headers.get('X-Pagination-Total-Rows'); e que irá retornar o valor total de linhas para aquela query. Se o banco possui 60 linhas para aquela query, aquele código ali em cima vai retornar a string '60'.
Cabeçalho Link segue a RFC 5988, a mesma utilizada pelo GitHub, e ela devolve as URLs absolutas para que o seu próprio código consiga sozinho navegar pela paginação e sem você precisar montar nenhuma URL manualmente, basta utilizar o que vem no cabeçalho.
E no cabeçalho Link é disponibilizado todos os tipos de página que você precisa:
1. first - URL da primeira página
2. prev - URL da página anterior
3. next - URL da página seguinte
4. last - URL da última página

Esse cabeçalho pode ser adquirido da mesma forma que antes response.headers.get('Link') e caso você não queira fazer o parsing dele na mão, há bibliotecas para isso como a parse-link-header para Node.js e que irá devolver um objeto como este:

   // Localhost com 60 conteúdos e paginação default (page=1 e per_page=30)
   // GET http://localhost:3000/api/v1/contents
   
   {
     first: {
       page: '1',
       per_page: '30',
       rel: 'first',
       url: 'http://localhost:3000/api/v1/contents?page=1&per_page=30',
     },
     next: {
       page: '2',
       per_page: '30',
       rel: 'next',
       url: 'http://localhost:3000/api/v1/contents?page=2&per_page=30',
     },
     last: {
       page: '2',
       per_page: '30',
       rel: 'last',
       url: 'http://localhost:3000/api/v1/contents?page=2&per_page=30',
     },
   }

Note que no exemplo acima não existe a chave prev, pois de fato, na página 1 não há página anterior. Da mesma forma, a última página não retornaria next, pois não há página seguinte. E isso é ótimo caso você queira mostrar ou não botões como "próxima página" ou "página anterior".
E caso queira, você pode computar e interpolar todas as páginas intermediárias utilizando as informações acima.
Tudo isso está testado, inclusive um dos testes testa a navegação automática para a próxima página usando next do Link.

filipedeschamps · 2022-05-27T23:10:11Z

Oh não, as getStaticProps() no Next.js não devolvem as query strings pelo context. @omariosouto sem saída nessa né? Vou ter que fazer a paginação das Páginas pelo path mesmo.

omariosouto · 2022-05-28T00:09:46Z

@filipedeschamps como tu quer que seja o link das páginas no navegador 🤔? Daria pra vc gerar as páginas com o incremental static generation

Fiquei com dúvida

omariosouto · 2022-05-28T00:13:30Z

@filipedeschamps realmente via query string com getStaticProps tu não vai ter acesso, achei a issue aqui descrevendo a feature: #343

filipedeschamps · 2022-05-28T01:50:26Z

@omariosouto isso, acabou ficando como descrito nesse comentário

Destaques do terceiro commit, agora focado no frontend e que finaliza esse PR b9598f7 (mas ainda tem um teste que está quebrando no CI que não consigo reproduzir localmente).

A Home do TabNews e Página do Usuário agora contam com paginação.
Por limitações do Next.js, não foi possível usar query strings e a página é acessada pelo path mesmo.
Na Home, as páginas ficarão assim: /pagina/1
Na Página do Usuário, ficará assim: /filipedeschamps/pagina/1
Já está bloqueado no model user de alguém criar conta com o username pagina. Não está bloqueado de alguém criar um conteúdo com o slug pagina, mas se criar, ele não vai ser acessível.
Antes, toda vez que um usuário entrava na Home, ele fazia um hit extra contra a API para pegar os dados mais atualizados. Isso acontecia pois um usuário sempre poderia abrir uma página atualizada por conta do revalidate. A necessidade desse primeiro hit foi substituído pelo response.unstable_revalidate do Next.js e agora a cada nova publicação, ele atualiza a primeira página da Home e a primeira Página do Usuário. O revalidate continua a cada 1 segundo para garantir que outras atualizações paralelas continuem fazendo a página ser atualizada, como por exemplo, um PATCH em um content e outros lugares onde ainda não utilizamos o response.unstable_revalidate.
Tudo está usando o validate.js.
Todo o resultado desse PR pode ser conferido na URL de Homologação: https://tabnews-git-pagination-tabnews.vercel.app/

Agora se houver uma próxima página, aparece isso aqui no fim da lista:

O que não sei consertar, mas que deverão ficar para outros PRs:

Largura da coluna: quando você está numa página muito longe, o offset dos números começarão a quebrar a coluna. Então deveria ter uma espécie de largura mínima, mas que aumenta quando necessário.
O texto que mostra a quanto tempo o conteúdo foi postado continua "flickando" no primeiro load.

omariosouto · 2022-05-28T01:56:33Z

Sensacionaaal!!! @filipedeschamps

Largura da coluna: quando você está numa página muito longe, o offset dos números começarão a quebrar a coluna. Então deveria ter uma espécie de largura mínima, mas que aumenta quando necessário.

R: Acho que esse aqui eu tenho uma solução, vamos mergear esse PR e eu separo um timebox aqui pra atuar nisso hoje ainda haha

O texto que mostra a quanto tempo o conteúdo foi postado continua "flickando" no primeiro load.

R: Esse eu to testando agora...

filipedeschamps · 2022-05-28T02:07:53Z

O CI ta consistentemente quebrando no teste abaixo, e eu não consigo por nada reproduzir em localhost:

FAIL tests/integration/api/v1/contents/post.test.js (25.231 s)
  ● POST /api/v1/contents › Default user › Content with "owner_id" pointing to another user
    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."
      164 |     });
      165 |
    > 166 |     test('Content with "owner_id" pointing to another user', async () => {
          |     ^
      167 |       const firstUser = await orchestrator.createUser();
      168 |       await orchestrator.activateUser(firstUser);
      169 |       const firstUserSessionObject = await orchestrator.createSession(firstUser);
      at test (tests/integration/api/v1/contents/post.test.js:166:5)
      at describe (tests/integration/api/v1/contents/post.test.js:116:3)
      at Object.describe (tests/integration/api/v1/contents/post.test.js:11:1)

filipedeschamps · 2022-05-28T02:21:48Z

Algo está acontecendo com a performance do POST no contents:

PASS tests/integration/api/v1/contents/post.test.js (26.886 s)

26 segundos, eita... sendo que os outros estão em milisegundos.

Vou investigar se é reflexo do response.unstable_revalidate 🤝

filipedeschamps · 2022-05-28T02:28:19Z

Confirmado, é algum comportamento maluco do response.unstable_revalidate 👍

filipedeschamps · 2022-05-28T02:38:25Z

Tudo certo agora 👍

aprendendofelipe · 2022-05-28T02:40:56Z

Algum bug por tentar revalidar uma pagina que não existia?

Edit.
Talvez seja isso, pois nos testes estava tentando revalidar a página do usuário que acabou de ser criado, ou seja, uma página que ainda não tinha sido gerada estaticamente

aprendendofelipe · 2022-05-28T02:51:45Z

pages/api/v1/contents/index.public.js

@@ -107,7 +107,6 @@ async function postHandler(request, response) {
  const secureOutputValues = authorization.filterOutput(userTryingToCreate, 'read:content', createdContent);

  await response.unstable_revalidate(`/`);


Como a revalidação ainda está em beta e também por ter sido mantida a revalidação das páginas a cada 1 segundo, talvez seja bom envolver essa parte com um try catch.

filipedeschamps · 2022-05-28T03:16:10Z

Talvez seja isso, pois nos testes estava tentando revalidar a página do usuário que acabou de ser criado, ou seja, uma página que ainda não tinha sido gerada estaticamente

Excelente ponto! Revalidar antes de existir. Espero que o método leve isso em conta (pelo menos quando virar stable)

filipedeschamps · 2022-05-28T15:02:51Z

@aprendendofelipe feito no commit 2379a92 🤝

filipedeschamps · 2022-05-28T15:07:34Z

Mergeeed!!!! Let's gooooo!!!

omariosouto · 2022-05-28T15:08:24Z

Aeeeeee 🎉🎉🎉🎉🎉

aprendendofelipe · 2022-05-28T15:12:01Z

Massa!

rodrigoKulb · 2022-05-28T15:16:38Z

@filipedeschamps maravilha!! 🚀️

Observando os sites normalmente os próximos resultados ficam na "Próxima >" página e só depois de avançar que tenho a opção de voltar a página Anterior.

Perdi alguma informação sobre essa opção?

filipedeschamps · 2022-05-28T16:03:17Z

Show! Ótimos pontos 🤝

Eu acho muito estranho "ir para frente" para ver itens do passado. Eu compreendo melhor o que está acontecendo sabendo que estou indo para o passado, voltando.
Sobre o outro botão para navegar para frente nesse caso, eu só não implementei 😂 mas ta na mão implementar, porque já vem tudo no pagination 🤝

rodrigoKulb · 2022-05-28T16:13:28Z

@filipedeschamps entendo a lógica de publicações anteriores, porem como a nomenclatura está Página anterior, minha cabeça deu uma travada! Talvez alterar a nomenclatura, segue um exemplo:

omariosouto · 2022-05-28T16:14:48Z

@rodrigoKulb concordo contigo, eu me perdi forte auhshusa

aprendendofelipe · 2022-05-28T17:12:40Z

@rodrigoKulb também curti sua sugestão

filipedeschamps · 2022-05-29T13:59:09Z

Mais uma evidência de que vocês estão certos:

https://www.tabnews.com.br/acnahmias/f445c7d0-9698-4361-a7ab-17761919f30d

👍 🤝

E é muito doido que pra mim naquele contexto eu não consigo diferenciar o que é “voltar” e “mais publicações”.

Como podemos deixar claro que avançar na paginação vai fazer mostrar publicações mais antigas?

rodrigoKulb · 2022-05-29T16:01:37Z

Gosto de utilizar o Google como referencia, porque o publico alvo é praticamente 100% da população, ele utiliza o CSS default do browser então sempre utilizo como referencia, gosto da abordagem simples que utilizam:
Termo: Mais
Outra questão é que sempre imaginamos que o lado direito é o avançar e esquerdo voltar. Mesmo pensando na ideia de artigos anteriores, o usuário quer avançar para os artigos mais antigos. (essa lógica já está na cabeça dos usuários)

Edit: O site referencia para HOME também utiliza o mesmo termo (more)

vitoropereira · 2022-05-29T16:44:29Z

@rodrigoKulb perfeito, ao utilizar pela primeira vez tive este mesmo pensamento: "Pagina anterior? Mas eu quero ir pra frente..."
Acho interessante a HOME com o "MORE.../MAIS..."

aprendendofelipe · 2022-05-29T17:08:03Z

Como podemos deixar claro que avançar na paginação vai fazer mostrar publicações mais antigas?

Será mesmo que é preciso deixar claro que são mais antigas? Talvez seja suficiente deixar claro que existem mais publicações, pois isso irá continuar funcionando independente do método de ordenação.

filipedeschamps · 2022-05-29T17:09:25Z

Github mobile 👍

aprendendofelipe · 2022-07-21T19:49:15Z

Excelente ponto! Revalidar antes de existir. Espero que o método leve isso em conta (pelo menos quando virar stable)

Isso resolve o problema de revalidar antes de existir:

vercel/next.js#38136

filipedeschamps · 2022-07-21T20:13:23Z

@aprendendofelipe tava pensando essa semana, como seria legal ter um comando para apenas limpar o cache (sem recriar).

aprendendofelipe · 2022-07-21T20:31:13Z

@aprendendofelipe tava pensando essa semana, como seria legal ter um comando para apenas limpar o cache (sem recriar).

Fiquei curioso... Qual uso está pensando para esse comando?

Aproveitando para complementar... On-Demand ISR ficou estável na v12.2.0, mas a correção citada acima só entrou na v12.2.1

filipedeschamps · 2022-07-21T20:39:55Z

Fiquei curioso... Qual uso está pensando para esse comando?

Eu estava pensando em habilitar o stale-while-revalidate para as 3 primeiras páginas do endpoint /contents e no ato de um POST nessa rota, ao invés de quem está postando ter que aguardar gerar esses 3 caches, limpar o cache instantâneamente e deixar o POST correr rápido... aí cabe a primeira próxima request pagar o custo de gerar o cache.

Não sei se ficou claro, mas em resumo o revalidate fica muito devagar quando precisa revalidar algo custoso, ou várias coisas custosas.

aprendendofelipe · 2022-07-22T00:23:34Z

Ficou claro sim... Então seria legal se pudesse expirar manualmente o cache ao invés de limpar. Assim as páginas seriam revalidadas em segundo plano sem ninguém ter que esperar.

feat(content): implement pagination in the API

d86c421

filipedeschamps force-pushed the pagination branch from 67fa106 to d86c421 Compare May 27, 2022 05:07

vercel bot deployed to Preview May 27, 2022 05:09 View deployment

vercel bot had a problem deploying to Preview May 27, 2022 21:36 Failure

feat(content): implement Link pagination header (RFC 5988)

c312553

filipedeschamps force-pushed the pagination branch from 96e96eb to c312553 Compare May 27, 2022 21:52

vercel bot deployed to Preview May 27, 2022 21:54 View deployment

omariosouto mentioned this pull request May 28, 2022

[WIP] Proposta de ajuste na Paginação #401

Closed

feat(content): implement pagination on root and user content pages

b9598f7

filipedeschamps changed the title ~~[WIP] Implementa Paginação~~ Implementa Paginação May 28, 2022

vercel bot deployed to Preview May 28, 2022 01:35 View deployment

filipedeschamps mentioned this pull request May 28, 2022

pagination(page): ContentList #343

Closed

vercel bot deployed to Preview May 28, 2022 02:15 View deployment

filipedeschamps force-pushed the pagination branch from 4849402 to 77dde1c Compare May 28, 2022 02:17

vercel bot deployed to Preview May 28, 2022 02:19 View deployment

filipedeschamps force-pushed the pagination branch from 77dde1c to 2e12765 Compare May 28, 2022 02:22

vercel bot deployed to Preview May 28, 2022 02:24 View deployment

omariosouto mentioned this pull request May 28, 2022

fix(contentlist): fixing rerender on published since #402

Merged

fix(content): work around response.unstable_revalidate quirks

c18c12a

filipedeschamps force-pushed the pagination branch from 2e12765 to c18c12a Compare May 28, 2022 02:35

vercel bot deployed to Preview May 28, 2022 02:36 View deployment

aprendendofelipe reviewed May 28, 2022

View reviewed changes

feat(content): wrap unstable_revalidate with a try/catch

2379a92

vercel bot deployed to Preview May 28, 2022 15:03 View deployment

aprendendofelipe approved these changes May 28, 2022

View reviewed changes

filipedeschamps merged commit 2c34a1f into main May 28, 2022

filipedeschamps deleted the pagination branch May 28, 2022 15:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementa Paginação #398

Implementa Paginação #398

filipedeschamps commented May 27, 2022 •

edited

vercel bot commented May 27, 2022 •

edited

filipedeschamps commented May 27, 2022

filipedeschamps commented May 27, 2022

omariosouto commented May 28, 2022 •

edited

omariosouto commented May 28, 2022

filipedeschamps commented May 28, 2022 •

edited

omariosouto commented May 28, 2022 •

edited

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

aprendendofelipe commented May 28, 2022 •

edited

aprendendofelipe May 28, 2022

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

omariosouto commented May 28, 2022

aprendendofelipe commented May 28, 2022

rodrigoKulb commented May 28, 2022

filipedeschamps commented May 28, 2022

rodrigoKulb commented May 28, 2022

omariosouto commented May 28, 2022

aprendendofelipe commented May 28, 2022

filipedeschamps commented May 29, 2022

rodrigoKulb commented May 29, 2022 •

edited

vitoropereira commented May 29, 2022

aprendendofelipe commented May 29, 2022

filipedeschamps commented May 29, 2022

aprendendofelipe commented Jul 21, 2022

filipedeschamps commented Jul 21, 2022

aprendendofelipe commented Jul 21, 2022

filipedeschamps commented Jul 21, 2022

aprendendofelipe commented Jul 22, 2022

		@@ -107,7 +107,6 @@ async function postHandler(request, response) {
		const secureOutputValues = authorization.filterOutput(userTryingToCreate, 'read:content', createdContent);

		await response.unstable_revalidate(`/`);

Implementa Paginação #398

Implementa Paginação #398

Conversation

filipedeschamps commented May 27, 2022 • edited

vercel bot commented May 27, 2022 • edited

filipedeschamps commented May 27, 2022

filipedeschamps commented May 27, 2022

omariosouto commented May 28, 2022 • edited

omariosouto commented May 28, 2022

filipedeschamps commented May 28, 2022 • edited

omariosouto commented May 28, 2022 • edited

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

aprendendofelipe commented May 28, 2022 • edited

aprendendofelipe May 28, 2022

Choose a reason for hiding this comment

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

filipedeschamps commented May 28, 2022

omariosouto commented May 28, 2022

aprendendofelipe commented May 28, 2022

rodrigoKulb commented May 28, 2022

filipedeschamps commented May 28, 2022

rodrigoKulb commented May 28, 2022

omariosouto commented May 28, 2022

aprendendofelipe commented May 28, 2022

filipedeschamps commented May 29, 2022

rodrigoKulb commented May 29, 2022 • edited

vitoropereira commented May 29, 2022

aprendendofelipe commented May 29, 2022

filipedeschamps commented May 29, 2022

aprendendofelipe commented Jul 21, 2022

filipedeschamps commented Jul 21, 2022

aprendendofelipe commented Jul 21, 2022

filipedeschamps commented Jul 21, 2022

aprendendofelipe commented Jul 22, 2022

filipedeschamps commented May 27, 2022 •

edited

vercel bot commented May 27, 2022 •

edited

omariosouto commented May 28, 2022 •

edited

filipedeschamps commented May 28, 2022 •

edited

omariosouto commented May 28, 2022 •

edited

aprendendofelipe commented May 28, 2022 •

edited

rodrigoKulb commented May 29, 2022 •

edited