GROWI Developers Wiki

{{pagename}} - {{sitename}}

Shin Oka

# PaginationWrapper マニュアル

## PaginationWrapper とは

何かのリストを表示させるのにあたって、現在 GROWI ではリストする個数は統一している（はず）ので、なにかのテーブルを作ったりやリストをするときに PaginationWrapper を使いましょう。PaginationWrapper は基本的に4つの props を受け取ります：
``` js
PaginationWrapper.propTypes = {
  appContainer: PropTypes.instanceOf(AppContainer).isRequired,

  activePage: PropTypes.number.isRequired,
  changePage: PropTypes.func.isRequired,
  totalItemsCount: PropTypes.number.isRequired,
  pagingLimit: PropTypes.number.isRequired,
};
```
（appContainer は unstated の Provider で渡してるので無視してよし）

全 props は state を共有しているものなので、シンクロの確認は必須

- activePage は現在指定しているページ  
- changePage はページを変えるときの handler 関数  
- totalItemsCount は合計個数  
- pagingLimit は１ページに最大何個見せるか（GROWI のデフォルトに合わせる・[7/4/2019] 現在10個）

基本的には、PaginationWrapper ではページングボタン生成とボタンを押したときの処理しかしていない。
ので、Wrapper をする対象コンポーネント自体で Pagination をします。具体的に言うと、activePage の state が変わることによって、再度 GET リクエストをし、そのページのためのアイテムしか取り出さないようにバック（あるいはフロントで、ものによって検討が必要）で調整する(mongoose の paginate)。というのが理想。

## 参考
UserGroupPage.jsx、MyDraftList, RecentCreated　などを参考にしてください


PaginationWrapperを使いたい

PaginationWrapper マニュアル

PaginationWrapper とは

参考