@twotalltotems/paginatable-list - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

index.js

 import React, { Component } from 'react';
-import { FlatList, RefreshControl, View, Text } from 'react-native';
+import { FlatList, RefreshControl, View, Text, Image } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import PaginationStateManager from './PaginationStateManager';
+import style from './style';
 
@@ -10,2 +11,3 @@ class PaginatableList extends Component {
         onRenderItem            : PropTypes.func,
+        onRenderEmptyStatus     : PropTypes.func,
         numColumns              : PropTypes.number,
@@ -19,3 +21,4 @@ extraData               : PropTypes.extraData, //extraData is used to make sure Flatlist will rerender when the object that passed in changes. Otherwise, Flatlist acts as PureComponent.
         onLoadMore              : PropTypes.func, //If you need to handle loadMore on your own. For examplem, you might need to query with more parmas than pageNumber and pageSize. 
-        onRefresh               : PropTypes.func, //If you need to handle refresh on your own.              
+        onRefresh               : PropTypes.func, //If you need to handle refresh on your own.
+        onLoadError             : PropTypes.func,              
     }
@@ -36,4 +39,6 @@
         return (
-            <View style={{ height: 20 }}>
-                <Text>{`Item ${index}`}</Text>
+            <View style={style.defaultCell}>
+                <Text style={style.defaultCellText}>{`Item ${index}`}</Text>
+                <Text style={style.defaultCellHint}>Use 'onRenderItem' props to overwrite the default cell.</Text>
+                <Image style={style.defaultCellLogo} resizeMode={'contain'} source={require('./assets/TTTLogo_white.png')} />
             </View>
@@ -71,3 +76,3 @@ )
         } else {
-            this.props.dispatch(this.paginationStateManager.loadMore({ pageNumberKey, pageSizeKey, pageNumber, pageSize }))
+            this.props.dispatch(this.paginationStateManager.loadMore({ pageNumberKey, pageSizeKey, pageNumber, pageSize }, this.onCompleteLoadingMore, this.onLoadError))
         }
@@ -85,3 +90,3 @@ }
             } else {
-                this.props.dispatch(this.paginationStateManager.refresh({ pageNumberKey, pageSizeKey, pageSize }, this.onCompleteRefreshing))
+                this.props.dispatch(this.paginationStateManager.refresh({ pageNumberKey, pageSizeKey, pageSize }, this.onCompleteRefreshing, this.onLoadError))
             }
@@ -91,2 +96,6 @@ })
 
+    onCompleteLoadingMore = () => {
+        if (__DEV__) console.tron.log('Load More Items Completed')
+    }
+
     onCompleteRefreshing = () => {
@@ -96,3 +105,9 @@ this.setState({ isRefreshing: false })
 
-    render() {
+    onLoadError = (error) => {
+        if (this.props.onLoadError) {
+            this.props.onLoadError(error)
+        }
+    }
+
+    renderList = () => {
         return (
@@ -112,2 +127,21 @@ <FlatList
     }
+
+    renderEmptyStatus = () => {
+        if (this.props.onRenderEmptyStatus) {
+            return this.props.onRenderEmptyStatus()
+        }
+        return (
+            <View style={style.defaultEmptyStatusContainer}>
+                <Image style={style.defaultEmptyStatusLogo} resizeMode={'contain'} source={require('./assets/TTTLogo_white.png')} />
+                <Text style={style.defaultCellText}>There is no items in the list.</Text>
+            </View>
+        )
+    }
+
+    render() {
+        if (this.props.items && this.props.items.length > 0) {
+            return this.renderList()
+        }
+        return this.renderEmptyStatus()
+    }
 }
@@ -114,0 +148,0 @@

package.json

 {
   "name": "@twotalltotems/paginatable-list",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A self-managed list with pagination.",
@@ -20,4 +20,8 @@ "main": "index.js",
   ],
-  "author": "Becky Wu <[e-mail]> (http://www.beckywu.me)",
-  "license": "ISC",
+  "author": "TTT Studio (https://ttt.studio)",
+  "contributors": [
+    "Becky Wu <[e-mail]> (http://www.beckywu.me)",
+    "Felipe Peña <[e-mail]> (http://felipe.penya.cl)"
+  ],
+  "license": "MIT",
   "bugs": {
@@ -24,0 +28,0 @@ "url": "https://github.com/Twotalltotems/react-native-paginatable/issues"

PaginateService.js

 import axios from 'axios';
-import Config from 'react-native-config';
 
@@ -14,3 +13,2 @@ export default class PaginateService {
         return axios({
-            baseURL: Config.BASE_API_URL,
             url: endpointUrl,
@@ -17,0 +15,0 @@ params

PaginationStateManager.js

@@ -66,3 +66,3 @@ import { createActions, createReducer } from 'reduxsauce';
 
-    loadMore = ({ pageNumberKey, pageSizeKey, pageNumber, pageSize, ...args }) => {
+    loadMore = ({ pageNumberKey, pageSizeKey, pageNumber, pageSize, ...args }, successCallback = () => {}, errorCallback = () => {}) => {
         return (dispatch) => {
@@ -72,5 +72,7 @@ PaginateService.getItems({ pageNumberKey, pageSizeKey, pageNumber, pageSize, endpointUrl: this.endpointUrl, ...args })
                 dispatch(this.actions.loadMore(response.data))
+                successCallback()
             })
             .catch(error => {
-                if (__DEV__) console.tron.log(error)
+                if (__DEV__) console.tron.log(JSON.stringify(error))
+                errorCallback(error)
             })
@@ -80,3 +82,3 @@ }
 
-    refresh = ({ pageNumberKey, pageSizeKey, pageSize, ...args }, successCallback = () => {}) => {
+    refresh = ({ pageNumberKey, pageSizeKey, pageSize, ...args }, successCallback = () => {}, errorCallback = () => {}) => {
         return (dispatch) => {
@@ -89,3 +91,4 @@ PaginateService.getItems({ pageNumberKey, pageSizeKey, pageNumber: 1, pageSize, endpointUrl: this.endpointUrl, ...args })
             .catch(error => {
-                if (__DEV__) console.tron.log(error)
+                if (__DEV__) console.tron.log(JSON.stringify(error))
+                errorCallback(error)
             })
@@ -92,0 +95,0 @@ }

README.md

@@ -1,26 +0,54 @@
-#PaginatableList
+![PaginatableList](https://raw.githubusercontent.com/Twotalltotems/react-native-paginatable/develop/assets/paginatablelist_banner.jpg?token=AP1X8MZ26iYe8ToP9Rrvc0l7d4ZFYai-ks5cISTxwA%3D%3D)
+# PaginatableList
 
-The PaginatableListView is a wrapper build on top of React Native FlatList that make the list capable of doing pagination on its own.
+**PaginatableList** is a list component developed by **TTT Studio** Mobile Team for the purpose of avoiding repetitive logic that handles loading more list items via pagination in the REST API, and pull-to-refresh the entire list. PaginatableList is built on top of React Native's `FlatList`, but we make it be able to manage the list items automatically and store the list items in Redux Store. 
 
-##Installation
-1. `yarn add @twotalltotems/paginatable-list`
-2. Add dependencies of `react-redux`, `prop-types`, `axios`, `react-native-config`, and `reduxsauce`.
+By default, it provides:
 
-##Basic Usage
+*  Reaching the list bottom to load more items after making GET API call.
+*  Pull-to-refresh the whole list.
 
-####Initialize PaginationStateManager Instance
+However, it is customizable regarding the item cell appearance, and more actions than the two default actions out of the box. 
 
-In order to use `PaginatableList`, first create a PaginationStateManager instance. The two required pramas are the `key` in redux store that will be used to store list items, and the `endpoint url` respectively.
+<a href="https://imgflip.com/gif/2nvebz"><img src="https://i.imgflip.com/2nvebz.gif" title="made at imgflip.com"/></a>
 
+## Installation
+1. `yarn add @twotalltotems/paginatable-list` or `npm install @twotalltotems/paginatable-list --save` 
+2. Install dependencies.
+
+
+## Dependencies
+
+This project needs the follow dependencies inside your project.
+
+1. `react-redux`
+1. `reduxsauce`
+2. `redux-thunk`
+1. `prop-types`
+1. `axios`
+1. `react-native-config`
+
+
+## Basic Usage
+
+#### Initialize PaginationStateManager Instance
+
+In order to use `PaginatableList`, first create a `PaginationStateManager` instance. There are two required parameters:
+
+
 ```
 import { PaginationStateManager } from '@twotalltotems/paginatable-list';
+import Config from 'react-native-config';
 
-const paginationStateManager = new PaginationStateManager('users', 'users');
+const paginationStateManager = new PaginationStateManager('users', `${Config.BASE_API_URL}/users`);
 
 ```
-1. The first param `users` is the key that will be used to store list item in the redux store. 
-2. The second param `users` is the paginatable endpoint url. In this example, the full api endpoint is `http://localhost:3000/users`, and the `base url`, which is `http://localhost:3000`, is store in `.env` config file. 
 
-####Link Redux Store
+| Parameter   | Description |
+|-------------|-------------|
+| key         |  Redux store key that will be used to store list items. In this example, `users` is the key that will be used to store the item list in the Redux store.  |
+| endpointUrl |  The paginatable endpoint URL for requesting content for each page with pageNumber and pageSize. In this example, `${Config.BASE_API_URL}/users` is the endpointUrl. `Config.BASE_API_URL` is stored in `.env` file. |
 
+#### Link Redux Store
+
 ```
@@ -44,6 +72,8 @@ import { combineReducers, applyMiddleware, compose} from 'redux';
 ```
-*Notice: The key used in `combineReducers` need to be consistant with the key that is used to initialize `PaginationStateManager` in the last step, which is `users` in this example.*
+*Notice: The key used in `combineReducers` need to be consistant with the key that is used to initialize `PaginationStateManager` in the last step, which in this example, is `users`.*
 
-####Use PaginatableList Component
+#### Use PaginatableList Component
 
+Inside your component, you can use this code. 
+
 ```
@@ -70,15 +100,16 @@ render() {
 ```
+
 1. `renderListItem` is used to render specific list item. PaginatableList exists as the scrollable container of the list items that will complete the two most common operations, loading more items and pull-to-refresh, for you. With this in mind, you can use this PaginatableList container to holder whatever you prefer. It could be `View`, `TouchableOpacity`, or your customized component.
-2. In this example, `renderListItem` params `item` is the object within the array that is stored in redux store. Currently, `PaginationStateManager` is storing whatever the server response. In this example, local server is return an array of objects, and each object contains `id`, `email`, and `password`. Therefore, redux store is storing by default the exact same format of the object.
+2. In this example, `renderListItem` params `item` is the object within the array that is stored in Redux store. Currently, `PaginationStateManager` is storing whatever the server response. In this example, local server is return an array of objects, and each object contains `id`, `email`, and `password`. Therefore, Redux store is storing by default the exact same format of the object.
 
 
-###Customization
+### Customization
 
 If you need more than loading more items, and pull-to-refresh, continue reading.
 
-For many lists in actual situations, we need more than only the two common operations for the list. Example of the extra operations could be click to like an item, delete an item, or highlight an item. We will exmplain the customization with an highlighting item as example.
+For many lists in real life situations, yu would need more than only two common operations for the list. Example for an extra operations could be click to like an item, delete an item, or highlight an item. Below there's an explanation using highlighting an item as example.
 
-####Subclass PaginationStateManager
+#### Subclass PaginationStateManager
 
-To customize, first subclassing from `PaginatableListReducer`.
+To customize, first subclass from `PaginatableListReducer`.
 
@@ -95,3 +126,4 @@ ```
 
-####Add Extra Action
+#### Add Extra Action
+
 Initialize instance of CustomizedPaginationStateManager, and add extra action to it.
@@ -116,5 +148,6 @@
 
-####Dispatch The Extra Action
+#### Dispatch The Extra Action
 
 First, let's make the list item clickable, and make it call `onHighlightItem` when the item is clicked.
+
 ```
@@ -153,3 +186,3 @@ renderListItem = ({ index, item }) => {
 
-Whenever you add extra actions to the subclass instance of `PaginationStateManager`, this lib will generate a default handler for you which will dispatch the action directly for you. However, if you would like to do more before dispatching the action, for example, make an API call, you can overwrite the default handler. 
+Whenever you add extra actions to the subclass instance of `PaginationStateManager`, this library will generate a default handler for you which will dispatch the action directly for you. However, if you would like to do more before dispatching the action, for example, make an API call, you can overwrite the default handler. 
   
@@ -165,3 +198,3 @@ ```
     highlightItem = ({ index, extra }) => {
-        console.tron.log('Overwrite Default highlightItem() function. For example, you might need to do network call before dispatch an action.')
+        console.log('Overwrite Default highlightItem() function. For example, you might need to do network call before dispatch an action.')
         // This is where you could add the API call.
@@ -174,1 +207,41 @@ return (dispatch) => {
 ```
+
+#### Customize Empty Status
+Customize empty status for PaginatableList via `onRenderEmptyStatus` props.
+
+```
+renderEmptyStatus = () => {
+    return (
+        <View style={{ flex:1, alignItems: 'center', justifyContent: 'center' }}>
+            <View>
+              	<Image 
+            		style={style.emptyStatusLogo} 
+            		resizeMode={'contain'} 
+            		source={require('../../Assets/TTTLogo.png')} 
+            	/>
+                <Text>Customized Empty Status</Text>
+            </View>
+        </View>
+    )
+}
+
+    
+render() {
+    return (
+        <View style={{ flex:1 }}>
+            <PaginatableList
+                onRenderItem={this.renderListItem}
+                onRenderEmptyStatus={this.renderEmptyStatus}
+                customizedPaginationStateManager={this.props.paginatableListReducer}
+            />
+        </View>
+    )
+}
+```
+
+## RoadMap
+* [x] Customizable Empty Status of the List.
+* [ ] Remove `reduxsauce` dependency.
+* [x] Make the `endpointUrl` param take a full Url.
+* [ ] 
+ 

No alert changes

Improved metrics

Total package byte prevSize

82559

increased by471.3%

Number of package files

9

increased by50%

Lines of code

261

increased by33.85%

Number of lines in readme file

240

increased by42.86%

No dependency changes