Add pagination wrapper for any list view

[hellowin]

Add pagination wrapper for any list view

[reyhansofian]

@hellowin for this feature I think we need to use immutable on our reducer to minimize the changes on the store. Facebook's Feed API didn't have explicit pagination (we only use cursor pagination) which is need to re-fetch the feed over and over again if we want to get the next page.

Let's say for the first time (select group page) we only fetch the first page (default is 10 items). If we want to get the second page, it will re-fetch the feed, request the first page from pagination cursor and then go to the second page. With this approach, we will get the same first page and a brand new second page.

Please let me know if you have any suggestion. CMIIW

[hellowin]

Actually this is very simple approach.

Create React Component which receive list of props props[]. So it will be like:

<Pagination list={[
    { id: 'x', message: 'x message' },
    { id: 'y', message: 'y message' },
    { id: 'z', message: 'z message' },
  ]} childComponent={Child} />

On Pagination component it will render something like this:

<pagination elements>
  {list.slice(0, 10).map((li, key) => <Child {key, ...props} />)}
</pagination elements>

See .slice(0, 10) part, that one is handled by Pagination system inside its component using simple state management. For example:

• page 1, with total childs 10, will be .slice(0, 9)
• page 3, with total childs 10, will be .slice(30, 49
• etc.

So we can put everything list there and everything component. List of cards, list of tables, etc.

notes:

1. Don't use reducer, redux, etc. this one must be isolated and very simple pagination approach which can be used by any components.
2. This pagination is for paginating local fetched list, don't use it for fetching etc.

[hellowin]

@reyhansofian do you have any progress on this? If not I'll handle this right now.

[hellowin]

It's done @reyhansofian, look at this PR #43