From a7bdaac05d1b84f0fe79b13aad718dfeaa2a5bfd Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Sun, 13 May 2018 11:04:06 +0200 Subject: [PATCH] Fixes sortTable default sort Resolves #13721 Auditors: Test Plan: --- .../components/common/sortableTable.js | 127 +++++++++++--- .../preferences/payment/ledgerTable.js | 33 ++++ package-lock.json | 157 ++++++------------ package.json | 2 +- 4 files changed, 191 insertions(+), 128 deletions(-) diff --git a/app/renderer/components/common/sortableTable.js b/app/renderer/components/common/sortableTable.js index a1afa10e61c..a9b436e524d 100644 --- a/app/renderer/components/common/sortableTable.js +++ b/app/renderer/components/common/sortableTable.js @@ -12,6 +12,7 @@ const globalStyles = require('../styles/global') // Utils const cx = require('../../../../js/lib/classSet') const eventUtil = require('../../../../js/lib/eventUtil') +const ImmutableUtil = require('../../../common/state/immutableUtil') tableSort.extend('number', (item) => { return typeof item === 'number' @@ -32,16 +33,62 @@ class SortableTable extends React.Component { } this.counter = 0 this.sortTable = null + this.dimensionCount = null } componentDidMount () { - this.sortTable = tableSort(this.table) + this.sortTable = tableSort(this.table, { + descending: this.props.defaultHeadingSortOrder === 'desc' + }) return this.sortTable } componentDidUpdate (prevProps) { - if (this.props.rows && - (!prevProps.rows || - prevProps.rows.length !== this.props.rows.length)) { - this.sortTable.refresh() + if (this.isMultiDimensioned) { + let count = 0 + if (this.dimensionCount == null && prevProps.rows) { + for (let i = 0; i < prevProps.rows.length; i++) { + if (this.props.rows[i].length > 0) { + count += this.props.rows[i].length + } + } + this.dimensionCount = count + } + + if (!this.props.rows) { + this.dimensionCount = null + return + } + + count = 0 + for (let i = 0; i < this.props.rows.length; i++) { + if (this.props.rows[i].length > 0) { + count += this.props.rows[i].length + } + } + + if (count !== this.dimensionCount) { + this.sortTable.refresh() + this.dimensionCount = count + return + } + } else { + if ( + this.props.rows && + ( + !prevProps.rows || + prevProps.rows.length !== this.props.rows.length + ) + ) { + this.sortTable.refresh() + return + } + } + + if (this.props.rows && typeof this.props.sortCheck === 'function') { + const shouldSort = this.props.sortCheck(prevProps.rows, this.props.rows) + + if (shouldSort) { + this.sortTable.refresh() + } } } /** @@ -202,11 +249,11 @@ class SortableTable extends React.Component { const tableID = parseInt(tableParts[0]) const rowIndex = parseInt(tableParts[1]) const handlerInput = this.props.totalRowObjects - ? (typeof this.props.totalRowObjects[parseInt(tableID)][rowIndex].toJS === 'function' + ? (ImmutableUtil.isImmutable(this.props.totalRowObjects[parseInt(tableID)][rowIndex]) ? this.props.totalRowObjects[parseInt(tableID)][rowIndex].toJS() : this.props.totalRowObjects[parseInt(tableID)][rowIndex]) : (this.props.rowObjects.size > 0 || this.props.rowObjects.length > 0) - ? (typeof this.props.rowObjects.toJS === 'function' + ? (ImmutableUtil.isImmutable(this.props.rowObjects) ? this.props.rowObjects.get(rowIndex).toJS() : this.props.rowObjects[rowIndex]) : null @@ -305,23 +352,51 @@ class SortableTable extends React.Component { // Object bound to this row. Not passed to multi-select handlers. if (this.isMultiDimensioned) { // Object bound to this row. Not passed to multi-select handlers. - handlerInput = this.props.rowObjects[bodyIndex] && - (this.props.rowObjects[bodyIndex].size > 0 || this.props.rowObjects[bodyIndex].length > 0) - ? (typeof this.props.rowObjects[bodyIndex].toJS === 'function' - ? this.props.rowObjects[bodyIndex].get(index).toJS() - : (typeof this.props.rowObjects[bodyIndex][index].toJS === 'function' - ? this.props.rowObjects[bodyIndex][index].toJS() - : this.props.rowObjects[bodyIndex][index])) - : row + if ( + this.props.rowObjects[bodyIndex] && + ( + this.props.rowObjects[bodyIndex].size > 0 || + this.props.rowObjects[bodyIndex].length > 0 + ) + ) { + let indexObj + if (ImmutableUtil.isImmutable(this.props.rowObjects[bodyIndex])) { + indexObj = this.props.rowObjects[bodyIndex].get(index) + } else { + indexObj = this.props.rowObjects[bodyIndex][index] + } + + handlerInput = indexObj + + if (ImmutableUtil.isImmutable(indexObj)) { + handlerInput = indexObj.toJS() + } + } else { + handlerInput = row + } } else { - handlerInput = this.props.rowObjects && - (this.props.rowObjects.size > 0 || this.props.rowObjects.length > 0) - ? (typeof this.props.rowObjects.toJS === 'function' - ? this.props.rowObjects.get(index).toJS() - : (typeof this.props.rowObjects[index].toJS === 'function' - ? this.props.rowObjects[index].toJS() - : this.props.rowObjects[index])) - : row + if ( + this.props.rowObjects && + ( + this.props.rowObjects.size > 0 || + this.props.rowObjects.length > 0 + ) + ) { + let indexObj + if (ImmutableUtil.isImmutable(this.props.rowObjects)) { + indexObj = this.props.rowObjects.get(index) + } else { + indexObj = this.props.rowObjects[index] + } + + handlerInput = indexObj + + if (ImmutableUtil.isImmutable(indexObj)) { + handlerInput = indexObj.toJS() + } + } else { + handlerInput = row + } } // Allow parent control to optionally specify context @@ -473,9 +548,10 @@ class SortableTable extends React.Component { if (dataType === 'object' && firstEntry.value) { dataType = typeof firstEntry.value } + const defaultSort = (this.sortingDisabled || heading === this.props.defaultHeading) || null const headerClasses = { 'sort-header': true, - 'sort-default': this.sortingDisabled || heading === this.props.defaultHeading, + 'sort-default': defaultSort, [css(styles.table__th, this.props.smallRow && styles.table__th_smallRow)]: true } const isString = typeof heading === 'string' @@ -486,8 +562,9 @@ class SortableTable extends React.Component { return diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js index 765ff9ebb42..0f31141cdfe 100644 --- a/app/renderer/components/preferences/payment/ledgerTable.js +++ b/app/renderer/components/preferences/payment/ledgerTable.js @@ -272,6 +272,38 @@ class LedgerTable extends ImmutableComponent { ] } + /** + * Function used for determination if table should be sorted or not + * For comparison we use publisher percentage, number of views and time spent. + * We compare previous values with new values that we received. + * @param prevRows - Previous value for the table + * @param currentRows - New value for the table + * @returns {boolean} - Was something changed and if so let's trigger the sort + */ + sortCheck (prevRows, currentRows) { + if (prevRows && currentRows && currentRows.length === prevRows.length) { + for (let i = 0; i < currentRows.length; i++) { + const newRow = currentRows[i] + const oldRow = prevRows[i] + + for (let j = 0; j < newRow.length; j++) { + if ( + newRow[j] && + oldRow[j] && + newRow[j][5] && + newRow[j][3] && + newRow[j][4] && + ( + newRow[j][5].value !== oldRow[j][5].value || // % + newRow[j][3].value !== oldRow[j][3].value || // views + newRow[j][4].value !== oldRow[j][4].value // time + ) + ) return true + } + } + } + } + render () { if (!this.synopsis || !this.synopsis.size) { return null @@ -351,6 +383,7 @@ class LedgerTable extends ImmutableComponent { pinnedRows.map((synopsis) => this.getRow(synopsis)).toJS(), unPinnedRows.map((synopsis) => this.getRow(synopsis)).toJS() ]} + sortCheck={this.sortCheck} /> { showButton diff --git a/package-lock.json b/package-lock.json index 79817bd21fc..d04521137be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4764,6 +4764,55 @@ } } }, + "electron-download": { + "version": "github:brave/electron-download#409b65caff14edeef1daa36a7445ba6334658d7c", + "dev": true, + "requires": { + "debug": "2.6.9", + "home-path": "1.0.6", + "minimist": "1.2.0", + "mkdirp": "0.5.1", + "mv": "2.1.1", + "nugget": "1.6.2", + "path-exists": "1.0.0", + "rc": "1.2.7" + }, + "dependencies": { + "nugget": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/nugget/-/nugget-1.6.2.tgz", + "integrity": "sha1-iMpuA7pXBqmRc/XaCQJZPWvK4Qc=", + "dev": true, + "requires": { + "debug": "2.6.9", + "minimist": "1.2.0", + "pretty-bytes": "1.0.4", + "progress-stream": "1.2.0", + "request": "2.85.0", + "single-line-log": "0.4.1", + "throttleit": "0.0.2" + } + }, + "path-exists": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-1.0.0.tgz", + "integrity": "sha1-1aiZjrce83p0w06w2eum6HjuoIE=", + "dev": true + }, + "single-line-log": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-0.4.1.tgz", + "integrity": "sha1-h6VWSfdJ14PsDc2AToFA2Yc8fO4=", + "dev": true + }, + "throttleit": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz", + "integrity": "sha1-z+34jmDADdlpe2H90qg0OptoDq8=", + "dev": true + } + } + }, "electron-download-tf": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/electron-download-tf/-/electron-download-tf-4.3.4.tgz", @@ -4976,20 +5025,6 @@ "integrity": "sha1-HUixB9ghJqLz4hHC6iX4A7pVGyE=", "dev": true }, - "electron-download": { - "version": "github:brave/electron-download#409b65caff14edeef1daa36a7445ba6334658d7c", - "dev": true, - "requires": { - "debug": "2.6.9", - "home-path": "1.0.5", - "minimist": "1.2.0", - "mkdirp": "0.5.1", - "mv": "2.1.1", - "nugget": "1.6.2", - "path-exists": "1.0.0", - "rc": "1.2.7" - } - }, "electron-osx-sign": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/electron-osx-sign/-/electron-osx-sign-0.3.2.tgz", @@ -5033,27 +5068,6 @@ "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=", "dev": true }, - "nugget": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/nugget/-/nugget-1.6.2.tgz", - "integrity": "sha1-iMpuA7pXBqmRc/XaCQJZPWvK4Qc=", - "dev": true, - "requires": { - "debug": "2.6.9", - "minimist": "1.2.0", - "pretty-bytes": "1.0.4", - "progress-stream": "1.2.0", - "request": "2.85.0", - "single-line-log": "0.4.1", - "throttleit": "0.0.2" - } - }, - "path-exists": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-1.0.0.tgz", - "integrity": "sha1-1aiZjrce83p0w06w2eum6HjuoIE=", - "dev": true - }, "plist": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/plist/-/plist-1.2.0.tgz", @@ -5066,18 +5080,6 @@ "xmldom": "0.1.27" } }, - "single-line-log": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-0.4.1.tgz", - "integrity": "sha1-h6VWSfdJ14PsDc2AToFA2Yc8fO4=", - "dev": true - }, - "throttleit": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz", - "integrity": "sha1-z+34jmDADdlpe2H90qg0OptoDq8=", - "dev": true - }, "xmlbuilder": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.0.0.tgz", @@ -5095,55 +5097,6 @@ "requires": { "electron-download": "github:brave/electron-download#409b65caff14edeef1daa36a7445ba6334658d7c", "extract-zip": "1.6.6" - }, - "dependencies": { - "electron-download": { - "version": "github:brave/electron-download#409b65caff14edeef1daa36a7445ba6334658d7c", - "dev": true, - "requires": { - "debug": "2.6.9", - "home-path": "1.0.5", - "minimist": "1.2.0", - "mkdirp": "0.5.1", - "mv": "2.1.1", - "nugget": "1.6.2", - "path-exists": "1.0.0", - "rc": "1.2.7" - } - }, - "nugget": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/nugget/-/nugget-1.6.2.tgz", - "integrity": "sha1-iMpuA7pXBqmRc/XaCQJZPWvK4Qc=", - "dev": true, - "requires": { - "debug": "2.6.9", - "minimist": "1.2.0", - "pretty-bytes": "1.0.4", - "progress-stream": "1.2.0", - "request": "2.85.0", - "single-line-log": "0.4.1", - "throttleit": "0.0.2" - } - }, - "path-exists": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-1.0.0.tgz", - "integrity": "sha1-1aiZjrce83p0w06w2eum6HjuoIE=", - "dev": true - }, - "single-line-log": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-0.4.1.tgz", - "integrity": "sha1-h6VWSfdJ14PsDc2AToFA2Yc8fO4=", - "dev": true - }, - "throttleit": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz", - "integrity": "sha1-z+34jmDADdlpe2H90qg0OptoDq8=", - "dev": true - } } }, "electron-publish": { @@ -8307,9 +8260,9 @@ } }, "home-path": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/home-path/-/home-path-1.0.5.tgz", - "integrity": "sha1-eIspgVsS1Tus9XVkhHbm+QQdEz8=", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/home-path/-/home-path-1.0.6.tgz", + "integrity": "sha512-wo+yjrdAtoXt43Vy92a+0IPCYViiyLAHyp0QVS4xL/tfvVz5sXIW1ubLZk3nhVkD92fQpUMKX+fzMjr5F489vw==", "dev": true }, "homedir-polyfill": { @@ -16153,9 +16106,9 @@ } }, "tablesort": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/tablesort/-/tablesort-5.0.1.tgz", - "integrity": "sha1-WYzts2I8glmVdLZ8QvkVo1wzbGk=" + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/tablesort/-/tablesort-5.0.2.tgz", + "integrity": "sha512-l0mDC2pDQJfXZbUogT+IYDHeYoqsW/Whqd2xMLAPltNrN0A8bVHtQXoU1sIc7/DofkgYnnINF5k7tlaG+QJJtw==" }, "tapable": { "version": "0.2.8", diff --git a/package.json b/package.json index c03ab0cfd3a..02624a7331f 100644 --- a/package.json +++ b/package.json @@ -128,7 +128,7 @@ "snazzy": "^7.0.0", "string.prototype.endswith": "^0.2.0", "string.prototype.startswith": "^0.2.0", - "tablesort": "5.0.1", + "tablesort": "5.0.2", "tldjs": "^2.3.1", "underscore": "1.8.3", "url-loader": "~0.6.2",