Add usePaginationRequest hook

Author: ilyalesik

README.md

@@ -116,3 +116,31 @@ export const Sender = () => {
 
 ```
 
+### `useFetch`
+```javascript
+usePromise<T, I: $ReadOnlyArray<mixed>>(
+    callFunction: ?(...args: I) => Promise<T>,
+    ...inputs: I
+): TUsePromiseResult<T>
+```
+where `TUsePromiseResult<T>` is
+```javascript
+type TUsePromiseResult<T> = {
+    data: ?T,
+    isLoading: boolean,
+    error: mixed
+}
+```
+
+### `usePaginatedRequest`
+Create a paginated request. 
+```javascript
+usePaginatedRequest = <T>(
+    request: (params: { limit: number, offset: number }) => Promise<Array<T>>,
+    limit: number
+): {
+    data: Array<T>,
+    loadMore?: () => mixed,
+    hasMore: boolean
+};
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fetch-hook",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "React fetch hook",
   "main": "./dist/index.js",
   "scripts": {

src/index.js

@@ -2,3 +2,4 @@
 
 export { useFetch } from "./useFetch";
 export { usePromise } from "./usePromise";
+export { usePaginatedRequest } from "./usePaginatedRequest";

src/usePaginatedRequest.js

@@ -0,0 +1,45 @@
+// @flow
+import { useState, useRef, useEffect } from "react";
+
+export const usePaginatedRequest = <T>(
+    request: (params: { limit: number, offset: number }) => Promise<Array<T>>,
+    limit: number
+): {
+    data: Array<T>,
+    loadMore?: () => mixed,
+    hasMore: boolean
+} => {
+    const [data, setData] = useState([]);
+    const currentUpdate = useRef();
+    const [offset, setOffset] = useState(0);
+    const [hasMore, setHasMore] = useState(true);
+
+    const loadMoreRef = useRef(() => {});
+
+    useEffect(
+        () => {
+            loadMoreRef.current = async () => {
+                if (currentUpdate.current) {
+                    await currentUpdate.current;
+                }
+                if (hasMore) {
+                    setOffset(offset + limit);
+                }
+            };
+
+            const update = async () => {
+                const result = await request({ limit, offset });
+                setHasMore(result.length === limit);
+                setData(prev => [...prev, ...result]);
+            };
+            currentUpdate.current = update();
+        },
+        [offset]
+    );
+
+    return {
+        data,
+        loadMore: loadMoreRef.current || (() => {}),
+        hasMore
+    };
+};