todo-app つくった (pagination 編)

Image from Gyazo

API

  • Qiita, GitHub などの API を参考に、RFC 8288 - Web Linking にのっとり、レスポンスのLinkヘッダを使ってページの情報を返すことにした
  • Total-Count で全体の件数も返すようにした
  • Rails では pagyapi-pagination を使ってページ情報をLinkヘッダで返すことにした

クライアント側

  • 次のページや前のページが存在するかどうかをLinkヘッダをみて確認して、ボタンを出すようにした
  • 次のコンテンツを取得するときに、history.pushState() を用いて、URLのパラメータも変更した(これで、リロードしても大丈夫)
  • useState で管理するものが5つも増えてしまった(これはもっとうまいことできそう...)

これから

  • 1ページ目以外で、todo を足したときに、現在いるページの上部に todo が追加されたように見えてしまうのでいい方法考えたい
  • スクロールイベントをトリガーにして、次のページへ遷移するようなものもやってみる

Diff

github.com

github.com