Add option to show all rows

Author: carlosrocha

src/PartialTable.js

@@ -27,7 +27,9 @@ export default class PartialTable extends Component {
                 onChange={onPageSizeChange}
               >
                 {pageLengthOptions.map(opt =>
-                  <option key={opt} value={opt}>{opt}</option>
+                  <option key={opt} value={opt}>
+                    {opt === 0 ? 'All' : opt}
+                  </option>
                 )}
               </select>
             </div>

src/__tests__/dataReducer-test.js

@@ -46,6 +46,7 @@ describe('dataReducer', () => {
       ...state,
       page: data.slice(1, 2),
       pageNumber: 1,
+      totalPages: 2,
     };
 
     expect(dataReducer(state, action)).toEqual(expected);

src/actions.js

@@ -2,7 +2,7 @@
  * @flow
  */
 
-import type {Action, SortBy} from './types';
+import type {Action, SortBy, Value, Filters} from './types';
 
 export const ActionTypes = {
   DATA_LOADED: 'DATA_LOADED',
@@ -31,8 +31,8 @@ export function dataLoaded(value: Array<any>): Action {
 // Probably a bad idea to send down `filters` here.
 export function dataFilter(
   key: string,
-  value: string | number,
-  filters: { [name: string]: (a: any, b: any) => Boolean }
+  value: Value,
+  filters: Filters
 ): Action {
   return { value: {key, value, filters}, type: ActionTypes.DATA_FILTER };
 }

src/dataReducer.js

@@ -18,29 +18,37 @@ const initialState: State = {
 };
 
 function calculatePage(data, pageSize, pageNumber) {
+  if (pageSize === 0) {
+    return { page: data, totalPages: 0 };
+  }
+
   const start = pageSize * pageNumber;
-  return data.slice(start, start + pageSize);
+
+  return {
+    page: data.slice(start, start + pageSize),
+    totalPages: Math.ceil(data.length / pageSize),
+  };
 }
 
 function pageNumberChange(state, {value: pageNumber}) {
   return {
     ...state,
+    ...calculatePage(state.data, state.pageSize, pageNumber),
     pageNumber,
-    page: calculatePage(state.data, state.pageSize, pageNumber),
   };
 }
 
 function pageSizeChange(state, action) {
   const newPageSize = Number(action.value);
   const {pageNumber, pageSize} = state;
-  const newPageNumber = Math.floor((pageNumber * pageSize) / newPageSize);
+  const newPageNumber = newPageSize ?
+    Math.floor((pageNumber * pageSize) / newPageSize) : 0;
 
   return {
     ...state,
-    page: calculatePage(state.data, newPageSize, newPageNumber),
+    ...calculatePage(state.data, newPageSize, newPageNumber),
     pageSize: newPageSize,
     pageNumber: newPageNumber,
-    totalPages: Math.ceil(state.data.length / newPageSize),
   };
 }
 
@@ -49,9 +57,9 @@ function dataSort(state, {value: sortBy}) {
 
   return {
     ...state,
+    ...calculatePage(data, state.pageSize, state.pageNumber),
     sortBy,
     data,
-    page: calculatePage(data, state.pageSize, state.pageNumber),
   };
 }
 
@@ -65,11 +73,10 @@ function dataFilter(state, {value: {key, value, filters}}) {
 
   return {
     ...state,
+    ...calculatePage(data, state.pageSize, state.pageNumber),
     data,
     filterValues: newFilterValues,
-    page: calculatePage(data, state.pageSize, state.pageNumber),
     pageNumber: 0,
-    totalPages: Math.ceil(data.length / state.pageSize),
   };
 }
 
@@ -84,10 +91,9 @@ function dataLoaded(state, {value: data}) {
 
   return {
     ...filledState,
+    ...calculatePage(data, pageSize, pageNumber),
     data,
     initialData: data,
-    page: calculatePage(data, pageSize, pageNumber),
-    totalPages: Math.ceil(data.length / pageSize),
   };
 }
 

src/types.js

@@ -4,6 +4,14 @@
 
 import {ActionTypes} from './actions';
 
+export type Value = string | number;
+
+export type Filters = {
+  [name: string]: {
+    filter: (a: Value, b: Value) => Boolean;
+  };
+};
+
 export type Row = {[key: string]: string} | Array<string>;
 
 export type AppData = Array<Row>;
@@ -27,6 +35,6 @@ export type Action = {
 };
 
 export type SortBy = {
-  prop: string | number;
+  prop: Value;
   order: 'ascending' | 'descending';
 };

src/utils.js

@@ -1,34 +1,28 @@
 import {orderBy, some} from 'lodash';
-import type {SortBy, AppData} from './types';
+import type {SortBy, AppData, Value, Filters} from './types';
 
 export function sort({prop, order}: SortBy, data: AppData) {
   return orderBy(data, prop, order === 'descending' ? 'desc' : 'asc');
 }
 
-export function filter(filters, filterValues, data) {
+export function filter(filters: Filters, filterValues, data: AppData) {
   const filterAndVals = {};
   for (let key in filterValues) {
     filterAndVals[key] = {
       value: filterValues[key],
       filter: filters[key].filter,
+      prop: filters[key].prop,
     };
   }
 
-  return data.filter(
-    row => some(
-      filterAndVals,
-      ({filter, value, prop}) => {
-        if (!prop) {
-          return some(row, filter.bind(null, value));
-        } else {
-          return filter(value, row[key]);
-        }
-      }
-    )
-  );
+  return data.filter((row) => some(
+    filterAndVals,
+    ({filter, value, prop}) =>
+      !prop ? some(row, filter.bind(null, value)) : filter(value, row[key])
+  ));
 }
 
-export function containsIgnoreCase(a, b) {
+export function containsIgnoreCase(a: Value, b: Value) {
   a = String(a).toLowerCase().trim();
   b = String(b).toLowerCase().trim();
   return b.indexOf(a) >= 0;