Make ledger table sortable

Fix #4046
brave · Sep 16, 2016 · a704cc0 · a704cc0
1 parent 0b7d487
commit a704cc0
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 57 deletions.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -82,6 +82,7 @@ rank=Rank
 views=Views
 timeSpent=Time Spent
 include=Include
+percentage=%
 bravery=Bravery
 hintsTitle=Helpful hints
 hint0=The Bravery panel allows you turn HTTPS Everywhere on or off. HTTPS Everywhere automatically rewrites your HTTP traffic to HTTPS for supported sites to keep you more secure.

diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -21,7 +21,6 @@ const getSetting = require('../settings').getSetting
 const SortableTable = require('../components/sortableTable')
 const Button = require('../components/button')
 const searchProviders = require('../data/searchProviders')
-const pad = require('underscore.string/pad')
 
 const adblock = appConfig.resourceNames.ADBLOCK
 const cookieblock = appConfig.resourceNames.COOKIEBLOCK
@@ -163,16 +162,16 @@ class SiteSettingCheckbox extends ImmutableComponent {
   }
 }
 
-class LedgerTableRow extends ImmutableComponent {
+class LedgerTable extends ImmutableComponent {
   get synopsis () {
-    return this.props.synopsis
+    return this.props.ledgerData.get('synopsis')
   }
 
-  get formattedTime () {
-    var d = this.synopsis.get('daysSpent')
-    var h = this.synopsis.get('hoursSpent')
-    var m = this.synopsis.get('minutesSpent')
-    var s = this.synopsis.get('secondsSpent')
+  getFormattedTime (synopsis) {
+    var d = synopsis.get('daysSpent')
+    var h = synopsis.get('hoursSpent')
+    var m = synopsis.get('minutesSpent')
+    var s = synopsis.get('secondsSpent')
     if (d << 0 > 364) {
       return '>1y'
     }
@@ -183,14 +182,12 @@ class LedgerTableRow extends ImmutableComponent {
     return (d + h + m + s + '')
   }
 
-  padLeft (v) { return pad(v, 12, '0') }
-
-  get hostPattern () {
-    return `https?://${this.synopsis.get('site')}`
+  getHostPattern (synopsis) {
+    return `https?://${synopsis.get('site')}`
   }
 
-  get enabled () {
-    const hostSettings = this.props.siteSettings.get(this.hostPattern)
+  enabledForSite (synopsis) {
+    const hostSettings = this.props.siteSettings.get(this.getHostPattern(synopsis))
     if (hostSettings) {
       const result = hostSettings.get('ledgerPayments')
       if (typeof result === 'boolean') {
@@ -200,54 +197,53 @@ class LedgerTableRow extends ImmutableComponent {
     return true
   }
 
-  render () {
-    const faviconURL = this.synopsis.get('faviconURL') || appConfig.defaultFavicon
-    const rank = this.synopsis.get('rank')
-    const views = this.synopsis.get('views')
-    const duration = this.synopsis.get('duration')
-    const publisherURL = this.synopsis.get('publisherURL')
-    // TODO: This should redistribute percentages accordingly when a site is
-    // enabled/disabled for payments.
-    const percentage = this.synopsis.get('percentage')
-    const site = this.synopsis.get('site')
+  getRow (synopsis) {
+    if (!synopsis || !synopsis.get) {
+      return []
+    }
+    const faviconURL = synopsis.get('faviconURL') || appConfig.defaultFavicon
+    const rank = synopsis.get('rank')
+    const views = synopsis.get('views')
+    const duration = synopsis.get('duration')
+    const publisherURL = synopsis.get('publisherURL')
+    const percentage = synopsis.get('percentage')
+    const site = synopsis.get('site')
     const defaultSiteSetting = true
 
-    return <tr className={this.enabled ? '' : 'paymentsDisabled'}>
-      <td className='alignRight' data-sort={this.padLeft(rank)}>{rank}</td>
-      <td><a href={publisherURL} target='_blank'><img src={faviconURL} alt={site} /><span>{site}</span></a></td>
-      <td><SiteSettingCheckbox hostPattern={this.hostPattern} defaultValue={defaultSiteSetting} prefKey='ledgerPayments' siteSettings={this.props.siteSettings} checked={this.enabled} /></td>
-      <td className='alignRight' data-sort={this.padLeft(views)}>{views}</td>
-      <td className='alignRight' data-sort={this.padLeft(duration)}>{this.formattedTime}</td>
-      <td className='alignRight' data-sort={this.padLeft(percentage)}>{percentage}</td>
-    </tr>
+    return [
+      rank,
+      {
+        html: <a href={publisherURL} target='_blank'><img src={faviconURL} alt={site} /><span>{site}</span></a>,
+        value: site
+      },
+      {
+        html: <SiteSettingCheckbox hostPattern={this.getHostPattern(synopsis)} defaultValue={defaultSiteSetting} prefKey='ledgerPayments' siteSettings={this.props.siteSettings} checked={this.enabledForSite(synopsis)} />,
+        value: this.enabledForSite(synopsis) ? 1 : 0
+      },
+      views,
+      {
+        html: this.getFormattedTime(synopsis),
+        value: duration
+      },
+      percentage
+    ]
   }
-}
 
-class LedgerTable extends ImmutableComponent {
   render () {
-    const synopsis = this.props.ledgerData.get('synopsis')
-    if (!synopsis || !synopsis.size) {
+    if (!this.synopsis || !this.synopsis.size) {
       return null
     }
     return <div id='ledgerTable'>
-      <table className='sort'>
-        <thead>
-          <tr>
-            <th className='sort-header' data-l10n-id='rank' />
-            <th className='sort-header' data-l10n-id='publisher' />
-            <th className='sort-header' data-l10n-id='include' />
-            <th className='sort-header' data-l10n-id='views' />
-            <th className='sort-header' data-l10n-id='timeSpent' />
-            <th className='sort-header'>&#37;</th>
-          </tr>
-        </thead>
-        <tbody>
-        {
-          synopsis.map((row) => <LedgerTableRow synopsis={row}
-            siteSettings={this.props.siteSettings} />)
+      <SortableTable
+        headings={['rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
+        defaultHeading='rank'
+        columnClassNames={['alignRight', '', '', 'alignRight', 'alignRight', 'alignRight']}
+        rowClassNames={
+          this.synopsis.map((item) =>
+            this.enabledForSite(item) ? '' : 'paymentsDisabled').toJS()
         }
-        </tbody>
-      </table>
+        onContextMenu={aboutActions.contextMenu}
+        rows={this.synopsis.map((synopsis) => this.getRow(synopsis))} />
     </div>
   }
 }

diff --git a/js/components/sortableTable.js b/js/components/sortableTable.js
@@ -22,6 +22,10 @@ class SortableTable extends ImmutableComponent {
     return this.props.columnClassNames &&
       this.props.columnClassNames.length === this.props.headings.length
   }
+  get hasRowClassNames () {
+    return this.props.rowClassNames &&
+      this.props.rowClassNames.length === this.props.rows.length
+  }
   get hasDoubleClickHandler () {
     return typeof this.props.onDoubleClick === 'function'
   }
@@ -78,9 +82,9 @@ class SortableTable extends ImmutableComponent {
               </td>
             })
             const rowAttributes = this.getRowAttributes(row, i)
-            return rowAttributes.onContextMenu
-              ? <tr {...rowAttributes} data-context-menu-disable>{entry}</tr>
-              : <tr {...rowAttributes}>{entry}</tr>
+            return <tr {...rowAttributes}
+              data-context-menu-disable={rowAttributes.onContextMenu ? true : undefined}
+              className={this.hasRowClassNames ? this.props.rowClassNames[i] : undefined}>{entry}</tr>
           })
         }
       </tbody>
@@ -92,6 +96,7 @@ SortableTable.defaultProps = {
   headings: React.PropTypes.array.isRequired, // list of data-10n-id's
   rows: React.PropTypes.array.isRequired, // value or {html: <displayed_html>, value: <value_to_sort_by>} for each table entry
   columnClassNames: React.PropTypes.array,
+  rowClassNames: React.PropTypes.array,
   addHoverClass: React.PropTypes.bool,
   contextMenuName: React.PropTypes.string
 }

diff --git a/package.json b/package.json
@@ -106,7 +106,6 @@
     "tldjs": "1.6.2",
     "tracking-protection": "1.1.x",
     "underscore": "1.8.3",
-    "underscore.string": "^3.3.4",
     "url-loader": "^0.5.7"
   },
   "devDependencies": {