# 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　などを参考にしてください


---

## Page Navigation

- Canonical URL: https://dev.growi.org/資料/開発ガイドライン/PaginationWrapperを使いたい
- Permalink: https://dev.growi.org/5d1dc3608c18400041e56649
- Parent: [開発ガイドライン](/5cff50c29f29ed003e5d2984.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 12 total
  - [ADR - Architecture Decision Record](/6522ae62c305143ea046a16e.md)
  - [Field制限に関するModel層での責務について](/5f3e0b4e21b23d00487da698.md)
  - [Modernize](/5f74fad16711480049ff1938.md)
  - [Mongooseメソッド](/5cff5ed49f29ed003e5d2987.md)
  - [Next.js 化](/5f7ad6de2906df004819a9af.md)
  - [SWRによるグローバルステート＆カスタムhooks](/637355d1c29dff4657eb5e2d.md)
  - [USER_PUBLIC_FIELDS の扱いについて](/605016625ea133004833567e.md)
  - [i18n](/5eca4d8e7bc0b20049fd2760.md)
  - [デザイン規定とポリシー](/5ed49039abdc3e0048a2256d.md)
  - [モデルインターフェースのTypescript化](/61ea77b416b45b44403d246d.md)
  - [動作確認タスクの進め方](/5ee18e85615ff10048fac7a4.md)
  - [英語表記基準](/5cefa1ca927e6e003e203577.md)
- Last updated: 2019-07-04T11:09:52.505Z by okas
- Full page listing (all children regardless of count): https://dev.growi.org/_api/v3/page-listing/children?id=5d1dc3608c18400041e56649