From d50ec588bceb74f7bbf4ab547609a8e312931207 Mon Sep 17 00:00:00 2001 From: tannerlinsley Date: Thu, 15 Aug 2019 09:55:22 -0600 Subject: [PATCH] fix(use-pagination): fixed use pagination pageIndex bug Use pagination will no longer synchronously reset the pageIndex to 0 on mount --- configs/tests/jest.common.js | 1 + configs/tests/setup.common.js | 1 + examples/pagination/src/App.js | 5 +- package.json | 14 +- src/hooks/tests/useTable.test.js | 3 - .../__snapshots__/useExpanded.test.js.snap | 320 +++++----- .../__snapshots__/useFilters.test.js.snap | 92 +-- .../__snapshots__/useGroupBy.test.js.snap | 162 ++--- .../__snapshots__/usePagination.test.js.snap | 576 +++++++++--------- .../__snapshots__/useRowSelect.test.js.snap | 84 +-- .../__snapshots__/useSortBy.test.js.snap | 100 +-- src/plugin-hooks/tests/useExpanded.test.js | 3 - src/plugin-hooks/tests/useFilters.test.js | 3 - src/plugin-hooks/tests/useGroupBy.test.js | 3 - src/plugin-hooks/tests/usePagination.test.js | 21 +- src/plugin-hooks/tests/useRowSelect.test.js | 3 - src/plugin-hooks/tests/useSortBy.test.js | 3 - src/plugin-hooks/usePagination.js | 63 +- src/plugin-hooks/useRowState.js | 23 +- yarn.lock | 120 ++-- 20 files changed, 809 insertions(+), 791 deletions(-) diff --git a/configs/tests/jest.common.js b/configs/tests/jest.common.js index bb01f8a..5dfe187 100644 --- a/configs/tests/jest.common.js +++ b/configs/tests/jest.common.js @@ -13,4 +13,5 @@ module.exports = { rootDir: path.resolve(__dirname, '../../'), roots: ['/src', __dirname], transformIgnorePatterns: ['node_modules'], + snapshotSerializers: [require.resolve('snapshot-diff/serializer.js')], } diff --git a/configs/tests/setup.common.js b/configs/tests/setup.common.js index 9d0b4db..e8cbd3f 100644 --- a/configs/tests/setup.common.js +++ b/configs/tests/setup.common.js @@ -1 +1,2 @@ +import '@testing-library/jest-dom/extend-expect' import 'snapshot-diff/extend-expect' diff --git a/examples/pagination/src/App.js b/examples/pagination/src/App.js index 5fc6d78..bea2e76 100644 --- a/examples/pagination/src/App.js +++ b/examples/pagination/src/App.js @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import { useTable, usePagination } from 'react-table' +import { useTable, usePagination, useTableState } from 'react-table' import makeData from './makeData' @@ -38,6 +38,8 @@ const Styles = styled.div` ` function Table({ columns, data }) { + const tableState = useTableState({ pageIndex: 2 }) + // Use the state and functions returned from useTable to build your UI const { getTableProps, @@ -60,6 +62,7 @@ function Table({ columns, data }) { { columns, data, + state: tableState, }, usePagination ) diff --git a/package.json b/package.json index f3fd553..9e51c9e 100644 --- a/package.json +++ b/package.json @@ -51,12 +51,12 @@ "@commitlint/cli": "^8.1.0", "@commitlint/config-conventional": "^8.1.0", "@svgr/rollup": "^4.3.2", - "@testing-library/dom": "^5.6.0", + "@testing-library/dom": "^6.0.0", "@testing-library/jest-dom": "^4.0.0", - "@testing-library/react": "^8.0.7", + "@testing-library/react": "^9.1.1", "babel-eslint": "9.x", "commitizen": "^4.0.3", - "core-js": "3", + "core-js": "3.2.1", "cross-env": "^5.2.0", "eslint": "5.x", "eslint-config-prettier": "^4.3.0", @@ -70,9 +70,9 @@ "eslint-plugin-prettier": "^3.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-react": "7.14.3", - "eslint-plugin-react-hooks": "1.6.1", + "eslint-plugin-react-hooks": "1.7.0", "eslint-plugin-standard": "^4.0.0", - "husky": "^3.0.2", + "husky": "^3.0.3", "is-ci-cli": "^1.1.1", "jest": "^24.8.0", "jest-cli": "^24.8.0", @@ -81,8 +81,8 @@ "jest-watch-typeahead": "^0.3.1", "lint-staged": "^9.2.1", "prop-types": "^15.5.0", - "react": "^16.8.3", - "react-dom": "^16.8.3", + "react": "^16.9.0", + "react-dom": "^16.9.0", "rollup": "^0.68.0", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^9.1.3", diff --git a/src/hooks/tests/useTable.test.js b/src/hooks/tests/useTable.test.js index 2c8841d..60ff78e 100644 --- a/src/hooks/tests/useTable.test.js +++ b/src/hooks/tests/useTable.test.js @@ -1,6 +1,3 @@ -import '@testing-library/react/cleanup-after-each' -import '@testing-library/jest-dom/extend-expect' - import React from 'react' import { render } from '@testing-library/react' import { useTable } from '../useTable' diff --git a/src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap b/src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap index 772b3ef..a83e7e2 100644 --- a/src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap +++ b/src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders an expandable table 1`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -10,64 +10,64 @@ exports[`renders an expandable table 1`] = ` 
       
         {
--   \\"expanded\\": {}
-+   \\"expanded\\": {
-+     \\"0\\": true
+-   "expanded": {}
++   "expanded": {
++     "0": true
 +   }
   }
+ 👇 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + " + class="" + > `; exports[`renders an expandable table 2`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -225,10 +225,10 @@ exports[`renders an expandable table 2`] = ` 
       
         {
-    \\"expanded\\": {
--     \\"0\\": true
-+     \\"0\\": {
-+       \\"0\\": true
+    "expanded": {
+-     "0": true
++     "0": {
++       "0": true
 +     }
     }
   }
@@ -237,53 +237,53 @@ exports[`renders an expandable table 2`] = `
+ tanner + + linsley + + 29 + + 100 + + In Relationship + + 50 +
+ 👉 @@ -76,147 +76,147 @@ exports[`renders an expandable table 1`] = ` @@ -115,10 +160,139 @@ 50 +
+ + 👉 + + + derek + + perkins + + 40 + + 40 + + Single + + 80 +
+ + 👉 + + + joe + + bergevin + + 45 + + 20 + + Complicated + + 10 +
+ + 👉 + + + jaylen + + linsley + + 26 + + 99 + + In Relationship + + 70
+ 👇 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + " + class="" + > `; exports[`renders an expandable table 3`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -440,11 +440,11 @@ exports[`renders an expandable table 3`] = ` 
       
         {
-    \\"expanded\\": {
-      \\"0\\": {
--       \\"0\\": true
-+       \\"0\\": {
-+         \\"0\\": true
+    "expanded": {
+      "0": {
+-       "0": true
++       "0": {
++         "0": true
 +       }
       }
     }
@@ -453,53 +453,53 @@ exports[`renders an expandable table 3`] = `
@@ -172,10 +174,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + " + class="" + > `; exports[`renders an expandable table 4`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -3,11 +3,13 @@ { - \\"expanded\\": { - \\"0\\": { - \\"0\\": { -- \\"0\\": true -+ \\"0\\": { -+ \\"0\\": true + "expanded": { + "0": { + "0": { +- "0": true ++ "0": { ++ "0": true + } } } @@ -668,40 +668,40 @@ exports[`renders an expandable table 4`] = ` } @@ -218,11 +220,11 @@ - class=\\"\\" + class="" > - 👉 + 👇 + + + " + class="" + > `; diff --git a/src/plugin-hooks/tests/__snapshots__/useFilters.test.js.snap b/src/plugin-hooks/tests/__snapshots__/useFilters.test.js.snap index 9a77135..86764a2 100644 --- a/src/plugin-hooks/tests/__snapshots__/useFilters.test.js.snap +++ b/src/plugin-hooks/tests/__snapshots__/useFilters.test.js.snap @@ -1,197 +1,197 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders a filterable table 1`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -37,11 +37,11 @@ - colspan=\\"1\\" + colspan="1" > Last Name - - - - - - - - - - - - - - - - " + class="" + > `; exports[`renders a filterable table 2`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -37,11 +37,11 @@ - colspan=\\"1\\" + colspan="1" > Last Name
+ tanner + + linsley + + 29 + + 100 + + In Relationship + + 50 +
+ 👉 @@ -292,147 +292,147 @@ exports[`renders an expandable table 2`] = ` @@ -160,10 +205,139 @@ 50 +
+ + 👉 + + + derek + + perkins + + 40 + + 40 + + Single + + 80 +
+ + 👉 + + + joe + + bergevin + + 45 + + 20 + + Complicated + + 10 +
+ + 👉 + + + jaylen + + linsley + + 26 + + 99 + + In Relationship + + 70
+ 👇 + + + tanner + + linsley + + 29 + + 100 + + In Relationship + + 50 +
+ 👉 @@ -508,159 +508,159 @@ exports[`renders an expandable table 3`] = ` @@ -205,10 +250,139 @@ 50 +
+ + 👉 + + + derek + + perkins + + 40 + + 40 + + Single + + 80 +
+ + 👉 + + + joe + + bergevin + + 45 + + 20 + + Complicated + + 10 +
+ + 👉 + + + jaylen + + linsley + + 26 + + 99 + + In Relationship + + 70
@@ -250,10 +252,30 @@ 50 +
+ 
 +             
 +               {
-+   \\"values\\": {
-+     \\"firstName\\": \\"tanner\\",
-+     \\"lastName\\": \\"linsley\\",
-+     \\"age\\": 29,
-+     \\"visits\\": 100,
-+     \\"status\\": \\"In Relationship\\",
-+     \\"progress\\": 50
++   "values": {
++     "firstName": "tanner",
++     "lastName": "linsley",
++     "age": 29,
++     "visits": 100,
++     "status": "In Relationship",
++     "progress": 50
 +   }
 + }
 +             
@@ -709,6 +709,6 @@ exports[`renders an expandable table 4`] = `
progress: 50 -
- firstName: derek - - lastName: perkins - - age: 40 - - visits: 40 - - status: Single - - progress: 80 -
- firstName: joe - - lastName: bergevin - - age: 45 - - visits: 20 - - status: Complicated - - progress: 10
- firstName: tanner + firstName: derek - lastName: linsley + lastName: perkins - age: 29 + age: 40 - visits: 100 + visits: 40 - status: In Relationship + status: Single - progress: 50 + progress: 80
- firstName: jaylen + firstName: joe - lastName: linsley + lastName: bergevin - age: 26 + age: 45 - visits: 99 + visits: 20 - status: In Relationship + status: Complicated - progress: 70 + progress: 10 @@ -199,5 +199,5 @@ exports[`renders a filterable table 2`] = `
- " + `; diff --git a/src/plugin-hooks/tests/__snapshots__/useGroupBy.test.js.snap b/src/plugin-hooks/tests/__snapshots__/useGroupBy.test.js.snap index 6a281e4..e3a8f52 100644 --- a/src/plugin-hooks/tests/__snapshots__/useGroupBy.test.js.snap +++ b/src/plugin-hooks/tests/__snapshots__/useGroupBy.test.js.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders a groupable table 1`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -29,13 +29,13 @@ - 👊 + 🛑 @@ -18,12 +18,12 @@ exports[`renders a groupable table 1`] = ` + Last Name @@ -44,11 +44,11 @@ - style=\\"cursor: pointer;\\" - title=\\"Toggle GroupBy\\" + style="cursor: pointer;" + title="Toggle GroupBy" > 👊 @@ -31,36 +31,36 @@ exports[`renders a groupable table 1`] = ` + First Name @@ -107,138 +107,119 @@ - class=\\"\\" + class="" > - firstName: tanner - - - lastName: linsley - - - age: 29 - - - visits: 100 - - - status: In Relationship + 👉 @@ -68,135 +68,135 @@ exports[`renders a groupable table 1`] = ` + lastName: linsley (2) - progress: 50 - - - - - firstName: derek - - - lastName: perkins + 2 Names - age: 40 + 27.5 (avg) - visits: 40 + 199 (total) - status: Single + status: null - progress: 80 + 60 (med) - firstName: joe + + 👉 + + lastName: perkins (1) - lastName: bergevin + 1 Names - age: 45 + 40 (avg) - visits: 20 + 40 (total) - status: Complicated + status: null - progress: 10 + 80 (med) - firstName: jaylen + + 👉 + + lastName: bergevin (1) - lastName: linsley + 1 Names - age: 26 + 45 (avg) - visits: 99 + 20 (total) - status: In Relationship + status: null - progress: 70 + 10 (med) @@ -204,41 +204,41 @@ exports[`renders a groupable table 1`] = ` - " + `; exports[`renders a groupable table 2`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -6,17 +6,29 @@ Name + Info + + + Name + + Info @@ -246,9 +246,9 @@ exports[`renders a groupable table 2`] = ` - 👊 + 🛑 @@ -257,12 +257,12 @@ exports[`renders a groupable table 2`] = ` + Visits @@ -57,11 +69,11 @@ - style=\\"cursor: pointer;\\" - title=\\"Toggle GroupBy\\" + style="cursor: pointer;" + title="Toggle GroupBy" > 👊 @@ -270,12 +270,12 @@ exports[`renders a groupable table 2`] = ` + First Name @@ -70,11 +82,11 @@ - style=\\"cursor: pointer;\\" - title=\\"Toggle GroupBy\\" + style="cursor: pointer;" + title="Toggle GroupBy" > 👊 @@ -283,8 +283,8 @@ exports[`renders a groupable table 2`] = ` + Age @@ -114,10 +126,13 @@ > @@ -293,10 +293,10 @@ exports[`renders a groupable table 2`] = ` lastName: linsley (2) + 2 Names @@ -304,42 +304,42 @@ exports[`renders a groupable table 2`] = ` 27.5 (avg) - 199 (total) - - status: null @@ -155,22 +165,20 @@ lastName: perkins (1) - 1 Names - + /> - 40 (avg) + 1 Names - 40 (total) + 40 (avg) status: null @@ -194,22 +202,20 @@ @@ -347,25 +347,25 @@ exports[`renders a groupable table 2`] = ` lastName: bergevin (1) - 1 Names - + /> - 45 (avg) + 1 Names - 20 (total) + 45 (avg) - status: null" + status: null `; diff --git a/src/plugin-hooks/tests/__snapshots__/usePagination.test.js.snap b/src/plugin-hooks/tests/__snapshots__/usePagination.test.js.snap index b9bcc50..e100d2a 100644 --- a/src/plugin-hooks/tests/__snapshots__/usePagination.test.js.snap +++ b/src/plugin-hooks/tests/__snapshots__/usePagination.test.js.snap @@ -1,320 +1,138 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders a paginated table 1`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -65,11 +65,11 @@ - class=\\"\\" + class="" > -- tanner 1 -+ tanner 11 +- tanner 21 ++ tanner 31 linsley @@ -99,11 +99,11 @@ - class=\\"\\" + class="" > -- tanner 2 -+ tanner 12 +- tanner 22 ++ tanner 32 linsley @@ -133,11 +133,11 @@ - class=\\"\\" + class="" > -- tanner 3 -+ tanner 13 +- tanner 23 ++ tanner 33 linsley @@ -167,11 +167,11 @@ - class=\\"\\" + class="" > -- tanner 4 -+ tanner 14 +- tanner 24 ++ tanner 34 linsley @@ -201,11 +201,11 @@ - class=\\"\\" + class="" > -- tanner 5 -+ tanner 15 +- tanner 25 ++ tanner 35 linsley @@ -235,11 +235,11 @@ - class=\\"\\" + class="" > -- tanner 6 -+ tanner 16 +- tanner 26 ++ tanner 36 linsley @@ -269,11 +269,11 @@ - class=\\"\\" + class="" > -- tanner 7 -+ tanner 17 +- tanner 27 ++ tanner 37 linsley @@ -303,11 +303,11 @@ - class=\\"\\" + class="" > -- tanner 8 -+ tanner 18 +- tanner 28 ++ tanner 38 linsley @@ -337,11 +337,11 @@ - class=\\"\\" + class="" > -- tanner 9 -+ tanner 19 +- tanner 29 ++ tanner 39 linsley @@ -371,11 +371,11 @@ - class=\\"\\" + class="" > -- tanner 10 -+ tanner 20 +- tanner 30 ++ tanner 40 - linsley -@@ -404,19 +404,15 @@ - - -
-- - -- - - - - - Page - -- 1 of 10 -+ 2 of 10 - - - - - | Go to page: - - - - + + +