From db61a9a17588253b15d0d0b846828ae44d641a1e Mon Sep 17 00:00:00 2001 From: Jamie Curnow Date: Sun, 22 May 2022 23:55:26 +1000 Subject: [PATCH] Update packages, fix table page selector --- frontend/package.json | 74 +- frontend/src/components/Table/TableHelpers.ts | 7 + frontend/src/components/Table/TableLayout.tsx | 10 +- frontend/src/components/Table/TextFilter.tsx | 2 +- frontend/yarn.lock | 2064 +++++++++-------- 5 files changed, 1163 insertions(+), 994 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 770eb7d..6e4f833 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,63 +3,63 @@ "version": "3.0.0", "private": true, "dependencies": { - "@chakra-ui/react": "^1.8.3", + "@chakra-ui/react": "^2.1.0", "@emotion/react": "^11", - "@emotion/styled": "^11.6.0", - "@testing-library/jest-dom": "5.16.2", - "@testing-library/react": "12.1.2", + "@emotion/styled": "^11.8.1", + "@testing-library/jest-dom": "5.16.4", + "@testing-library/react": "13.2.0", "@types/humps": "^2.0.1", - "@types/jest": "27.4.0", - "@types/lodash": "4.14.178", - "@types/node": "17.0.15", - "@types/react": "17.0.39", - "@types/react-dom": "17.0.11", + "@types/jest": "27.5.1", + "@types/lodash": "4.14.182", + "@types/node": "17.0.35", + "@types/react": "18.0.9", + "@types/react-dom": "18.0.4", "@types/react-router-dom": "5.3.3", - "@types/react-table": "^7.7.9", - "@types/styled-components": "5.1.22", - "@typescript-eslint/eslint-plugin": "^5.10.2", - "@typescript-eslint/parser": "^5.10.2", + "@types/react-table": "^7.7.12", + "@types/styled-components": "5.1.25", + "@typescript-eslint/eslint-plugin": "^5.25.0", + "@typescript-eslint/parser": "^5.25.0", "babel-eslint": "^10.1.0", "classnames": "^2.3.1", - "country-flag-icons": "^1.4.20", + "country-flag-icons": "^1.5.2", "date-fns": "2.28.0", - "eslint": "^8.8.0", - "eslint-config-prettier": "^8.3.0", - "eslint-config-react-app": "^7.0.0", + "eslint": "^8.16.0", + "eslint-config-prettier": "^8.5.0", + "eslint-config-react-app": "^7.0.1", "eslint-loader": "^4.0.2", "eslint-plugin-flowtype": "^8.0.3", - "eslint-plugin-import": "^2.25.4", + "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.28.0", - "eslint-plugin-react-hooks": "^4.3.0", + "eslint-plugin-react": "^7.30.0", + "eslint-plugin-react-hooks": "^4.5.0", "formik": "^2.2.9", "framer-motion": "^6", "humps": "^2.0.1", "jest-date-mock": "1.0.8", "jest-fetch-mock": "3.0.3", - "jest-junit": "^13.0.0", - "jest-localstorage-mock": "2.4.18", - "jest-runner-eslint": "1.0.0", + "jest-junit": "^13.2.0", + "jest-localstorage-mock": "2.4.21", + "jest-runner-eslint": "1.0.1", "lodash": "4.17.21", - "moment": "2.29.1", + "moment": "2.29.3", "node-sass": "^7.0.1", - "prettier": "2.5.1", + "prettier": "2.6.2", "query-string": "7.1.1", - "react": "^17.0.2", + "react": "^18.1.0", "react-async": "10.0.1", - "react-dom": "17.0.2", - "react-focus-lock": "^2.8.1", + "react-dom": "18.1.0", + "react-focus-lock": "^2.9.1", "react-icons": "^4.3.1", - "react-intl": "^5.24.6", - "react-markdown": "^8.0.1", - "react-query": "^3.34.19", - "react-router-dom": "^6.2.1", - "react-scripts": "5.0.0", - "react-table": "^7.7.0", - "rooks": "5.10.0", + "react-intl": "^6.0.1", + "react-markdown": "^8.0.3", + "react-query": "^3.39.0", + "react-router-dom": "^6.3.0", + "react-scripts": "5.0.1", + "react-table": "^7.8.0", + "rooks": "5.11.2", "tmp": "^0.2.1", - "typescript": "^4.5.5" + "typescript": "^4.6.4" }, "scripts": { "start": "react-scripts start", @@ -105,7 +105,7 @@ } }, "devDependencies": { - "@formatjs/cli": "^4.8.2", + "@formatjs/cli": "^5.0.1", "@types/country-flag-icons": "^1.2.0" } } diff --git a/frontend/src/components/Table/TableHelpers.ts b/frontend/src/components/Table/TableHelpers.ts index 0df424e..0df329c 100644 --- a/frontend/src/components/Table/TableHelpers.ts +++ b/frontend/src/components/Table/TableHelpers.ts @@ -23,6 +23,7 @@ const tableEvents = { }; const tableEventReducer = (state: any, { type, payload }: any) => { + let offset = state.offset; switch (type) { case tableEvents.PAGE_CHANGED: return { @@ -45,9 +46,15 @@ const tableEventReducer = (state: any, { type, payload }: any) => { sortBy: payload, }; case tableEvents.FILTERS_CHANGED: + if (state.filters !== payload) { + // this actually was a legit change + // sets to page 1 when filter is modified + offset = 0; + } return { ...state, filters: payload, + offset, }; default: throw new Error(`Unhandled action type: ${type}`); diff --git a/frontend/src/components/Table/TableLayout.tsx b/frontend/src/components/Table/TableLayout.tsx index 098d1ac..2b68c88 100644 --- a/frontend/src/components/Table/TableLayout.tsx +++ b/frontend/src/components/Table/TableLayout.tsx @@ -40,7 +40,6 @@ export interface TableLayoutProps { canPreviousPage: any; previousPage: any; canNextPage: any; - setPageSize: any; nextPage: any; pageCount: any; pageOptions: any; @@ -59,7 +58,6 @@ function TableLayout({ canPreviousPage, previousPage, canNextPage, - setPageSize, nextPage, pageCount, pageOptions, @@ -102,7 +100,7 @@ function TableLayout({ return ( <> - +
{headerGroups.map((headerGroup: any) => ( @@ -215,7 +213,11 @@ function TableLayout({ disabled={!canPreviousPage && !canNextPage} aria-label={intl.formatMessage({ id: "tables.pagination-select", - })}> + })} + onChange={(e: any) => { + const page = parseInt(e.target.value, 10) - 1; + gotoPage(page); + }}> {getPageList()} )} - +