Vinicius no ultimo codigo que voce disponibilizou, quando filtro por dragon ball por exemplo ele exibe os resultados do dragon ball por primeiro mas se for percorrendo as paginas ele exibe outros titulos, como corrigimos isso ?, ou seja para exibir somente o que estamos buscando. e também explica para nós como inserir um loading na transicao de uma pagina para outra. Obrigado pela atencao, conteudo sensacional...
I have no idea what you're talking about since i'm not a Portuguese speaker but this tutorial is pure gold I wish you could have someone implement English subtitles for your videos
Esse código está criando mais botões que o necessário. Se você for até o final, vai perceber. Acho que adicionar alguma lógica como a de baixo, iria ajudar. Basicamento quando a soma para direira for mais que o número de páginas, trava. Fiz os testes e funcionou aqui. Porém de forma geral, foi uma aula aula excelente, parabéns! // Know when to stop creating new pagination buttons const diffLimit = pages - current - MAX_LEFT; const first = diffLimit < 0 ? pages - 2 * MAX_LEFT : Math.max(current - MAX_LEFT, 1);
Fala Gabriel, beleza? Realmente, nós identificamos esse bug depois que o vídeo já estava publicado. O link com o código corrigido está na descrição do vídeo. Valeu demais pela sugestão! Abraços.
Rapaz, eu falhei miseravelmente ao tentar fazer um projetinho de teste para uma contratante dentro do prazo que me pediram, e decidi manter esse projetinho como um portifólio meu, sempre melhorando os patterns do meu código. Vi alguns outros vídeos de paginação, mas o teu foi o que mais serviu pra mim no momento. Show!
Vídeo excelente, me ajudou demais, mas pra acrescentar tem um bugzinho, quando chega na ultima renderização de página, ainda sim é renderizado os botões pras proximas páginas que não existem, resolvi colocando uma condição no segundo map onde eu falo só para renderizar quando o "page" do map for menor ou igual ao numero total de páginas, if (page
Vinicius, obrigado por compartilhar !!! Esse vídeo literalmente me salvou... Após ver e rever observei os mesmos detalhes que a galera já comentou... o FIRST foi o calcanhar de Aquiles da lógica... rsrs...
Fala Vinicius show essa aula, sim gostaria de na próxima aula o loading dos itens e também se possível o conceito de spa nesse projeto, pois todas as vezes que clica no botão de paginação ele recarrega a página toda. :).
Faaaala amigão ! beleza ? Cara essa aula sua foi fera. Didática muito boua! Sem contar que deu para perceber sua preocupação com clean code e domínio em lógica de programação. Me ajudou a resolver minha dúvida de paginação rsrs. Primeira vez que necessito fazer uma. Mas ao aplica seu código no meu aqui, verifiquei uma coisa. Sua lógica aplicada no final para mostrar o Math.min dos buttons foi ok. Mas pensemos o seguinte: E o last button ? Como verificaremos ele ? Se eu tenho 5 páginas para mostrar, ao clicar no button 5, eu não posso fazer um map de (index + first). Pois -> 0 + 4 = 4; 1 + 4 = 5; 2 + 4 = 6; OBS: (Considerando o MAX_ITENS=3)!! Como pode ver, o map acaba por inserir o button 6 sendo que são só 5 páginas ! O que eu fiz para corrigir isso foi verificar se a page atual que estou é igual ao total de pages. Se for, eu faço o map passando Math.max(total_pages - (MAX_ITENS -1), 1) Assim, eu tenho uma variável last. Não sei se faz sentido isso na sua aplicação. Mas aqui se resolveu assim. Vou testar mais rsrsrs. E valeu pela aula esclarecedora !
Bem apontado Kaio. Eu lembro que em algum momento eu testei isso, mas no processo de simplificar a lógica para gravar o vídeo, acho que essa parte acabou saindo fora 😅. A correção feita por você está perfeita! Eu só extrairia ela para uma variável, lá no topo do componente, como fiz aqui nesse exemplo: codesandbox.io/s/brava-pagination-forked-7f0q6?file=/src/Pagination.js Muito obrigado por apontar esse detalhe. Grande abraço.
Excelente vídeo, estou aprendendo React e achei esse vídeo muito esclarecedor. A questão de carregar a pagina usando o load e a parte de dar um alert caso não encontra a pagina já sei como fazer. Mas eu tenho algumas dúvidas onde salvo os informações da paginas, em cookies, no localstorage ou ainda salvando em lugar. Agradeço demais essa aula
Vinicius no ultimo codigo que voce disponibilizou, quando filtro por dragon ball por exemplo ele exibe os resultados do dragon ball por primeiro mas se for percorrendo as paginas ele exibe outros titulos, como corrigimos isso ?, ou seja para exibir somente o que estamos buscando. e também explica para nós como inserir um loading na transicao de uma pagina para outra. Obrigado pela atencao, conteudo sensacional...
Mano, não sei se entendi bem, mas está sendo feita uma nova consulta toda vez que muda a página (mesmo quando volta)? O adequado não é "guardando" o resultado das paginações anteriores?
Nesse tipo de paginação é sempre recarregado. Porque os dados podem ter sidos alterados enquanto você está utilizando, o que pode mudar a ordem deles ou mesmo os dados em si. Então normalmente não fazemos o cache no frontend. Porém, algum nível de cache pode ser implementado no backend, levando updates em consideração.
Fala Vinicius, encontrei um problema que não sei se o pessoal ta passando pelo mesmo. Quando vc fez a função onPageChange e seta o setOffset((page - 1) * limit), vamos supor que o indice da minha pagina seja 2 e o limit seja 15, ficando assim "setOffset((2 - 1) * 15)" dando um resultado de 15, ou sejá ele vai me levar para a página 15. Como posso corrigir? Também te mais um bug de calculos que é o seguinte, vou usar do mesmo exmplo no current vc faz o segunt calculo, se offset for nulo então é 1, mais se offset for = 2 e o limit for = 15 e temos que somar + 1 então teremos 2 / 15 = 0,1333333333333333 ai somamos + 1 que é = 1,133333333333333, dando numero quebrado e ai quando uso o current - 1 ou current + 1 me da um bug também. Outro ponto que queria saber como corrigir.
1º ->>> setOffset((2-1)*15) = 15... ou seja: para um LIMIT de 15 vc vai estar na página 2 e não na página 15... a página inicial seria ... setOffset((1-1)*15) = 0, se o seu offset é ZERO vc está na página inicial... 2º ->>> o mínimo para CURRENT tem que ser 1, senão dá M&rd@.... a conta que vc simulou dá 0,13333..... é menor que um... então como sugestão ... Math.max(current, 1) Eu fiz exatamente como está no código do link: codesandbox.io/s/brava-pagination-forked-6sv4k?file=/src/Pagination.js funcionou perfeitamente... só adaptei a exibição ao meu projeto... espero, mesmo depois desse tempo todo, ter ajudado...
@@AriVenuth aqui aconteceu a mesma coisa, o current seria 2, mas vamos usar o valor de 15 igual o exemplo do amigo, o offset fica literalmetee com o valor de 15 , ou seja a paginação estará no 2 mas a página que carrega é a 15... estou usando o mesmo código do vídeo
A minha dúvida é, para uma aplicação que mostre apenas 3 resultados por pagina, ele faz a requisição a API em cada clique de botão? trazendo 3 resultados por clique? ou ele ta trazendo um uma quantidade ex: 50 resultados e paginando esses 50, qual a melhor forma de otimizar e não bombardear a API com requisições? OTIMO VÍDEO, PARABÉNS...
Boa luciano! No processo de simplificar a lógica, eu acabei esquecendo de testar um dos cases. O código com a correção está disponível aqui: codesandbox.io/s/brava-pagination-forked-6sv4k?file=/src/Pagination.js Qualquer dúvida, fico a disposição. Grande abraço.
Fala pra gente o que você achou do vídeo. Não esquece, qualquer dúvida, comentário ou sugestão, é só deixar pra gente aqui nos comentários! 🔥🔥🔥
Vinicius no ultimo codigo que voce disponibilizou, quando filtro por dragon ball por exemplo ele exibe os resultados do dragon ball por primeiro mas se for percorrendo as paginas ele exibe outros titulos, como corrigimos isso ?, ou seja para exibir somente o que estamos buscando. e também explica para nós como inserir um loading na transicao de uma pagina para outra.
Obrigado pela atencao, conteudo sensacional...
I have no idea what you're talking about since i'm not a Portuguese speaker but this tutorial is pure gold
I wish you could have someone implement English subtitles for your videos
Esse código está criando mais botões que o necessário. Se você for até o final, vai perceber.
Acho que adicionar alguma lógica como a de baixo, iria ajudar.
Basicamento quando a soma para direira for mais que o número de páginas, trava.
Fiz os testes e funcionou aqui. Porém de forma geral, foi uma aula aula excelente, parabéns!
// Know when to stop creating new pagination buttons
const diffLimit = pages - current - MAX_LEFT;
const first =
diffLimit < 0 ? pages - 2 * MAX_LEFT : Math.max(current - MAX_LEFT, 1);
Fala Gabriel, beleza?
Realmente, nós identificamos esse bug depois que o vídeo já estava publicado.
O link com o código corrigido está na descrição do vídeo.
Valeu demais pela sugestão!
Abraços.
@@viniciusdacal ah top irmão! Sensacional o conteúdo! Parabéns pelo que vem fazendo pela comunidade. Quero um dia chegar no seu nível.
Mais complicado do que eu pensei paginar kkkkk, obrigado pelo tutorial!
Rapaz, eu falhei miseravelmente ao tentar fazer um projetinho de teste para uma contratante dentro do prazo que me pediram, e decidi manter esse projetinho como um portifólio meu, sempre melhorando os patterns do meu código. Vi alguns outros vídeos de paginação, mas o teu foi o que mais serviu pra mim no momento. Show!
Vídeo excelente, me ajudou demais, mas pra acrescentar tem um bugzinho, quando chega na ultima renderização de página, ainda sim é renderizado os botões pras proximas páginas que não existem, resolvi colocando uma condição no segundo map onde eu falo só para renderizar quando o "page" do map for menor ou igual ao numero total de páginas, if (page
tb percebi isso no meu
Parabéns pelo conteúdo!
Me ajudou bastante, vídeo bem explicativo. Consegui implementar a páginação no projeto com seu exemplo.
Vinicius, obrigado por compartilhar !!!
Esse vídeo literalmente me salvou...
Após ver e rever observei os mesmos detalhes que a galera já comentou... o FIRST foi o calcanhar de Aquiles da lógica... rsrs...
você é um dos melhores professores de react!!! valeuu
sempre que preciso posso vir procurar, seus vídeos tem me ajudado muito, obrigado.
o youtube até notificou!! vlw vinicius, didática perfeita
Muito obrigado pela aula!
Muito obrigado pelo vídeo Vinicius, me ajudou bastante!! abraço.
Fala Vinicius show essa aula, sim gostaria de na próxima aula o loading dos itens e também se possível o conceito de spa nesse projeto, pois todas as vezes que clica no botão de paginação ele recarrega a página toda. :).
Nossa.. virei seu fã! Quero ser programador igual você!!
Cara muito obrigado pelo conteúdo, me ajudou muito hoje!
mto obrigado mano, consegui implementar no meu projeto aqui.
muito bom video, obrigado por compartilhar o conhecimento
que video FODA, obrigado Vinicius
Uma dúvida no tempo 9:29 pq tem constante que são definidas dentro e fora da função do componente? Qual o critério para isso?
Ótima aula!!!
Muito bom, cara. Deixei o like!
Muito boa aula
Vídeo excelente. Muito obrigado por compartilhar Vinicius!! Gostaria sim de um vídeo sobre a funcionalidade com o state de load! :)
Cara, muuuuito obrigado mesmo por fazer esse video!!! SALVOU DEMAISS, VOCÊ É FODA!
Parabéns pelo vídeo e pela explicação, me ajudou muito!
Faaaala amigão ! beleza ?
Cara essa aula sua foi fera. Didática muito boua!
Sem contar que deu para perceber sua preocupação com clean code e domínio em lógica de programação. Me ajudou a resolver minha dúvida de paginação rsrs. Primeira vez que necessito fazer uma.
Mas ao aplica seu código no meu aqui, verifiquei uma coisa.
Sua lógica aplicada no final para mostrar o Math.min dos buttons foi ok.
Mas pensemos o seguinte:
E o last button ?
Como verificaremos ele ?
Se eu tenho 5 páginas para mostrar, ao clicar no button 5, eu não posso fazer um map de (index + first). Pois -> 0 + 4 = 4; 1 + 4 = 5; 2 + 4 = 6;
OBS: (Considerando o MAX_ITENS=3)!!
Como pode ver, o map acaba por inserir o button 6 sendo que são só 5 páginas !
O que eu fiz para corrigir isso foi verificar se a page atual que estou é igual ao total de pages. Se for, eu faço o map passando Math.max(total_pages - (MAX_ITENS -1), 1)
Assim, eu tenho uma variável last.
Não sei se faz sentido isso na sua aplicação. Mas aqui se resolveu assim. Vou testar mais rsrsrs.
E valeu pela aula esclarecedora !
Bem apontado Kaio.
Eu lembro que em algum momento eu testei isso, mas no processo de simplificar a lógica para gravar o vídeo, acho que essa parte acabou saindo fora 😅.
A correção feita por você está perfeita!
Eu só extrairia ela para uma variável, lá no topo do componente, como fiz aqui nesse exemplo:
codesandbox.io/s/brava-pagination-forked-7f0q6?file=/src/Pagination.js
Muito obrigado por apontar esse detalhe.
Grande abraço.
Tem algum exemplo de como ficou?
@@filippobarcellos2944 Pode acessar esse link aqui: codesandbox.io/s/brava-pagination-forked-6sv4k?file=/src/Pagination.js
Resolveu meu problema, valeu!
Excelente vídeo, estou aprendendo React e achei esse vídeo muito esclarecedor. A questão de carregar a pagina usando o load e a parte de dar um alert caso não encontra a pagina já sei como fazer. Mas eu tenho algumas dúvidas onde salvo os informações da paginas, em cookies, no localstorage ou ainda salvando em lugar. Agradeço demais essa aula
essa era a aula que eu estava procurando valeu.
Muito bom, parabéns!
dei like quando vi cowboy bebop, mas o vídeo ta show ;)
valeu demais, excelente video, ganhou 1 inscrito
Que dica você dá para quem esta travado no react. Considero fácil aprender javascript mas a lib é complexa ao meu ver.
Vinicius no ultimo codigo que voce disponibilizou, quando filtro por dragon ball por exemplo ele exibe os resultados do dragon ball por primeiro mas se for percorrendo as paginas ele exibe outros titulos, como corrigimos isso ?, ou seja para exibir somente o que estamos buscando. e também explica para nós como inserir um loading na transicao de uma pagina para outra.
Obrigado pela atencao, conteudo sensacional...
Top ja tem meu like :D
Mano, não sei se entendi bem, mas está sendo feita uma nova consulta toda vez que muda a página (mesmo quando volta)? O adequado não é "guardando" o resultado das paginações anteriores?
Nesse tipo de paginação é sempre recarregado. Porque os dados podem ter sidos alterados enquanto você está utilizando, o que pode mudar a ordem deles ou mesmo os dados em si.
Então normalmente não fazemos o cache no frontend.
Porém, algum nível de cache pode ser implementado no backend, levando updates em consideração.
Tem como fazer sem precisar colocar no get da query da api?
Este exemplo seria bom se fosse genérico, mas é específico da api da anime. Tentei usar em outro contexto, nao funcionou.
Fala Vinicius, encontrei um problema que não sei se o pessoal ta passando pelo mesmo. Quando vc fez a função onPageChange e seta o setOffset((page - 1) * limit), vamos supor que o indice da minha pagina seja 2 e o limit seja 15, ficando assim "setOffset((2 - 1) * 15)" dando um resultado de 15, ou sejá ele vai me levar para a página 15. Como posso corrigir?
Também te mais um bug de calculos que é o seguinte, vou usar do mesmo exmplo no current vc faz o segunt calculo, se offset for nulo então é 1, mais se offset for = 2 e o limit for = 15 e temos que somar + 1 então teremos 2 / 15 = 0,1333333333333333 ai somamos + 1 que é = 1,133333333333333, dando numero quebrado e ai quando uso o current - 1 ou current + 1 me da um bug também. Outro ponto que queria saber como corrigir.
1º ->>> setOffset((2-1)*15) = 15... ou seja: para um LIMIT de 15 vc vai estar na página 2 e não na página 15...
a página inicial seria ... setOffset((1-1)*15) = 0, se o seu offset é ZERO vc está na página inicial...
2º ->>> o mínimo para CURRENT tem que ser 1, senão dá M&rd@.... a conta que vc simulou dá 0,13333..... é menor que um... então como sugestão ... Math.max(current, 1)
Eu fiz exatamente como está no código do link:
codesandbox.io/s/brava-pagination-forked-6sv4k?file=/src/Pagination.js
funcionou perfeitamente... só adaptei a exibição ao meu projeto...
espero, mesmo depois desse tempo todo, ter ajudado...
@@AriVenuth aqui aconteceu a mesma coisa, o current seria 2, mas vamos usar o valor de 15 igual o exemplo do amigo, o offset fica literalmetee com o valor de 15 , ou seja a paginação estará no 2 mas a página que carrega é a 15... estou usando o mesmo código do vídeo
A minha dúvida é, para uma aplicação que mostre apenas 3 resultados por pagina, ele faz a requisição a API em cada clique de botão? trazendo 3 resultados por clique? ou ele ta trazendo um uma quantidade ex: 50 resultados e paginando esses 50, qual a melhor forma de otimizar e não bombardear a API com requisições? OTIMO VÍDEO, PARABÉNS...
Me ajudou muito!
Ao avançar todas as páginas ele sempre está incrementando mais, mesmo tendo chegado à última. Acontece aí?
Respondi logo acima irmão
Pode me informar o nome do tema q cê usa? achei bonitão kk
Muito bom Vinicius porém esta com um bug se vc for para a ultma pagina
Boa luciano!
No processo de simplificar a lógica, eu acabei esquecendo de testar um dos cases.
O código com a correção está disponível aqui:
codesandbox.io/s/brava-pagination-forked-6sv4k?file=/src/Pagination.js
Qualquer dúvida, fico a disposição.
Grande abraço.
achei dificil de entender, daqui uns meses eu volto com mais informações pra ver se consigo capitar tudo que foi falado
18:02 quarenta e ovo kkkkkkkkkkkkk
na moral, voltar pro back-end msm, sas porra de front-end não prestam não
Muito bom, parabéns!