Repository: brave/browser-laptop (JavaScript)

Issue:
Remove ledgerPinPercentage siteSetting
<!--
Have you searched for similar issues? We have received a lot of feedback and bug reports that we have closed as duplicates. Before submitting this issue, please visit our community site for common ones: https://community.brave.com/c/common-issues
-->

### Description
<!--
[Description of the issue]
-->
`ledgerPinPercentage` is not needed anymore, so we can remove it to reduce complexity of the code


Discussion:

Patch:
diff --git a/app/browser/api/ledger.js b/app/browser/api/ledger.js
index b7a698e46e1..31e6c36c917 100644
--- a/app/browser/api/ledger.js
+++ b/app/browser/api/ledger.js
@@ -510,9 +510,6 @@ const synopsisNormalizer = (state, changedPublisher, returnState = true, prune =
       publisher.weight = 0
       return publisher
     })
-
-    // sync app store
-    state = ledgerState.changePinnedValues(state, dataPinned)
   } else if (dataUnPinned.length === 0 && pinnedTotal < 100) {
     // when you don't have any unpinned sites and pinned total is less then 100 %
     let changedObject = dataPinned.find(publisher => publisher.publisherKey === changedPublisher)
@@ -527,9 +524,6 @@ const synopsisNormalizer = (state, changedPublisher, returnState = true, prune =
       dataPinned = module.exports.normalizePinned(dataPinned, pinnedTotal, 100, false)
       dataPinned = module.exports.roundToTarget(dataPinned, 100, 'pinPercentage')
     }
-
-    // sync app store
-    state = ledgerState.changePinnedValues(state, dataPinned)
   } else {
     // unpinned publishers
     dataUnPinned = dataUnPinned.map((result) => {
diff --git a/app/browser/reducers/ledgerReducer.js b/app/browser/reducers/ledgerReducer.js
index a2590938258..7a2dc98a903 100644
--- a/app/browser/reducers/ledgerReducer.js
+++ b/app/browser/reducers/ledgerReducer.js
@@ -152,21 +152,24 @@ const ledgerReducer = (state, action, immutableAction) => {
               state = ledgerApi.verifiedP(state, publisherKey)
               break
             }
-          case 'ledgerPinPercentage':
-            {
-              const value = action.get('value')
-              const publisher = ledgerState.getPublisher(state, publisherKey)
-              if (publisher.isEmpty() || publisher.get('pinPercentage') === value) {
-                break
-              }
-              state = ledgerState.setPublishersProp(state, publisherKey, 'pinPercentage', value)
-              ledgerApi.savePublisherData(publisherKey, 'pinPercentage', value)
-              state = ledgerApi.updatePublisherInfo(state, publisherKey)
-              break
-            }
         }
         break
       }
+    case appConstants.APP_ON_LEDGER_PIN_PUBLISHER:
+      {
+        const value = action.get('value')
+        const publisherKey = action.get('publisherKey')
+        const publisher = ledgerState.getPublisher(state, publisherKey)
+
+        if (publisher.isEmpty() || publisher.get('pinPercentage') === value) {
+          break
+        }
+
+        state = ledgerState.setPublishersProp(state, publisherKey, 'pinPercentage', value)
+        ledgerApi.savePublisherData(publisherKey, 'pinPercentage', value)
+        state = ledgerApi.updatePublisherInfo(state, publisherKey)
+        break
+      }
     case appConstants.APP_REMOVE_SITE_SETTING:
       {
         const pattern = action.get('hostPattern')
diff --git a/app/common/state/ledgerState.js b/app/common/state/ledgerState.js
index 567e7fc7a7b..a32c186d28f 100644
--- a/app/common/state/ledgerState.js
+++ b/app/common/state/ledgerState.js
@@ -16,8 +16,6 @@ const settings = require('../../../js/constants/settings')
 
 // Utils
 const getSetting = require('../../../js/settings').getSetting
-const siteSettings = require('../../../js/state/siteSettings')
-const urlUtil = require('../../../js/lib/urlutil')
 const {makeImmutable, isMap} = require('../../common/state/immutableUtil')
 
 const validateState = function (state) {
@@ -356,24 +354,6 @@ const ledgerState = {
     }))
   },
 
-  changePinnedValues: (state, publishers) => {
-    state = validateState(state)
-    if (publishers == null) {
-      return state
-    }
-
-    publishers = makeImmutable(publishers)
-    publishers.forEach((item) => {
-      const publisherKey = item.get('publisherKey')
-      const pattern = urlUtil.getHostPattern(publisherKey)
-      const percentage = item.get('pinPercentage')
-      let newSiteSettings = siteSettings.mergeSiteSetting(state.get('siteSettings'), pattern, 'ledgerPinPercentage', percentage)
-      state = state.set('siteSettings', newSiteSettings)
-    })
-
-    return state
-  },
-
   /**
    * PROMOTIONS
    */
diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
index 00dceb3cac3..1f8df0a5ffd 100644
--- a/app/renderer/components/preferences/payment/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -5,30 +5,35 @@
 const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
-// components
+// Components
 const ImmutableComponent = require('../../immutableComponent')
 const SortableTable = require('../../common/sortableTable')
 const SwitchControl = require('../../common/switchControl')
 const BrowserButton = require('../../common/browserButton')
 const PinnedInput = require('./pinnedInput')
+const {SettingCheckbox, SiteSettingCheckbox} = require('../../common/settings')
 
-// style
-const globalStyles = require('../../styles/global')
-const {paymentStylesVariables} = require('../../styles/payment')
-const verifiedGreenIcon = require('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
-const verifiedWhiteIcon = require('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
-const removeIcon = require('../../../../extensions/brave/img/ledger/icon_remove.svg')
-const pinIcon = require('../../../../extensions/brave/img/ledger/icon_pin.svg')
+// Actions
+const appActions = require('../../../../../js/actions/appActions')
+const aboutActions = require('../../../../../js/about/aboutActions')
 
-// other
+// Constants
 const settings = require('../../../../../js/constants/settings')
+
+// Utils
 const getSetting = require('../../../../../js/settings').getSetting
-const aboutActions = require('../../../../../js/about/aboutActions')
 const urlUtil = require('../../../../../js/lib/urlutil')
-const {SettingCheckbox, SiteSettingCheckbox} = require('../../common/settings')
 const locale = require('../../../../../js/l10n')
 const ledgerUtil = require('../../../../common/lib/ledgerUtil')
 
+// Style
+const globalStyles = require('../../styles/global')
+const {paymentStylesVariables} = require('../../styles/payment')
+const verifiedGreenIcon = require('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
+const verifiedWhiteIcon = require('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
+const removeIcon = require('../../../../extensions/brave/img/ledger/icon_remove.svg')
+const pinIcon = require('../../../../extensions/brave/img/ledger/icon_pin.svg')
+
 class LedgerTable extends ImmutableComponent {
   get synopsis () {
     return this.props.ledgerData.get('synopsis')
@@ -40,7 +45,7 @@ class LedgerTable extends ImmutableComponent {
 
   onFaviconError (faviconURL, publisherKey) {
     console.log('missing or corrupted favicon file', faviconURL)
-    // Set the publishers favicon to null so that it gets refetched
+    // Set the publishers favicon to null so that it gets re-fetched
     aboutActions.setLedgerFavicon(publisherKey, null)
   }
 
@@ -108,7 +113,7 @@ class LedgerTable extends ImmutableComponent {
     }
   }
 
-  togglePinSite (hostPattern, pinned, percentage) {
+  togglePinSite (hostPattern, publisherKey, pinned, percentage) {
     if (pinned) {
       if (percentage < 1) {
         percentage = 1
@@ -116,10 +121,10 @@ class LedgerTable extends ImmutableComponent {
         percentage = Math.floor(percentage)
       }
 
-      aboutActions.changeSiteSetting(hostPattern, 'ledgerPinPercentage', percentage)
+      appActions.onLedgerPinPublisher(publisherKey, percentage)
       aboutActions.changeSiteSetting(hostPattern, 'ledgerPayments', true)
     } else {
-      aboutActions.changeSiteSetting(hostPattern, 'ledgerPinPercentage', 0)
+      appActions.onLedgerPinPublisher(publisherKey, 0)
     }
   }
 
@@ -237,7 +242,7 @@ class LedgerTable extends ImmutableComponent {
             pinned
             ? <PinnedInput
               defaultValue={percentage}
-              patern={this.getHostPattern(synopsis)}
+              publisherKey={publisherKey}
             />
             : <span className={css(styles.regularPercentage)}>{percentage}</span>
           }
@@ -251,7 +256,7 @@ class LedgerTable extends ImmutableComponent {
             styles.actionIcons__icon_pin,
             pinned && styles.actionIcons__icon_pin_isPinned
           )}
-            onClick={this.togglePinSite.bind(this, this.getHostPattern(synopsis), !pinned, percentage)}
+            onClick={this.togglePinSite.bind(this, this.getHostPattern(synopsis), publisherKey, !pinned, percentage)}
             data-test-pinned={pinned}
           />
           <span className={css(
diff --git a/app/renderer/components/preferences/payment/pinnedInput.js b/app/renderer/components/preferences/payment/pinnedInput.js
index 10cc575b055..3a10d14d9d3 100644
--- a/app/renderer/components/preferences/payment/pinnedInput.js
+++ b/app/renderer/components/preferences/payment/pinnedInput.js
@@ -5,14 +5,14 @@
 const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
-// components
+// Components
 const ImmutableComponent = require('../../immutableComponent')
 
-// style
-const globalStyles = require('../../styles/global')
+// Actions
+const appActions = require('../../../../../js/actions/appActions')
 
-// other
-const aboutActions = require('../../../../../js/about/aboutActions')
+// Style
+const globalStyles = require('../../styles/global')
 
 class PinnedInput extends ImmutableComponent {
   componentDidUpdate () {
@@ -25,7 +25,7 @@ class PinnedInput extends ImmutableComponent {
     }
   }
 
-  pinPercentage (hostPattern, event) {
+  pinPercentage (publisherKey, event) {
     let value = parseInt(event.target.value)
 
     if (value < 1 || !value) {
@@ -33,7 +33,7 @@ class PinnedInput extends ImmutableComponent {
       this.textInput.value = 1
     }
 
-    aboutActions.changeSiteSetting(hostPattern, 'ledgerPinPercentage', value)
+    appActions.onLedgerPinPublisher(publisherKey, value)
     this.forceUpdate()
   }
   render () {
@@ -41,7 +41,7 @@ class PinnedInput extends ImmutableComponent {
       data-test-id='pinnedInput'
       ref={(input) => { this.textInput = input }}
       defaultValue={this.props.defaultValue}
-      onBlur={this.pinPercentage.bind(this, this.props.patern)}
+      onBlur={this.pinPercentage.bind(this, this.props.publisherKey)}
       onKeyPress={this.keyPress.bind(this)}
       className={css(styles.pinnedInput)}
     />
@@ -49,7 +49,7 @@ class PinnedInput extends ImmutableComponent {
 }
 
 const styles = StyleSheet.create({
-  // Ref: tableTd_percentage on ledgetTable.js
+  // Ref: tableTd_percentage on ledgerTable.js
   pinnedInput: {
     border: `1px solid #c4c5c5`,
     borderRadius: globalStyles.radius.borderRadius,
diff --git a/docs/state.md b/docs/state.md
index c1adaf8eb10..fc814a45876 100644
--- a/docs/state.md
+++ b/docs/state.md
@@ -522,7 +522,6 @@ AppStore
       httpsEverywhere: boolean,
       ledgerPayments: boolean, // false if site should not be paid by the ledger. Defaults to true.
       ledgerPaymentsShown: boolean, // false if site should not be paid by the ledger and should not be shown in the UI. Defaults to true.
-      ledgerPinPercentage: number, // 0 if not pinned, otherwise is pinned with defined percentage
       mediaPermission: boolean,
       midiSysexPermission: boolean,
       notificationsPermission: boolean,
diff --git a/js/actions/appActions.js b/js/actions/appActions.js
index e69aa97d59e..5530f4f88ba 100644
--- a/js/actions/appActions.js
+++ b/js/actions/appActions.js
@@ -1954,6 +1954,14 @@ const appActions = {
     })
   },
 
+  onLedgerPinPublisher: function (publisherKey, value) {
+    dispatch({
+      actionType: appConstants.APP_ON_LEDGER_PIN_PUBLISHER,
+      publisherKey,
+      value
+    })
+  },
+
   onLedgerMediaPublisher: function (mediaKey, response, duration, revisited) {
     dispatch({
       actionType: appConstants.APP_ON_LEDGER_MEDIA_PUBLISHER,
diff --git a/js/constants/appConstants.js b/js/constants/appConstants.js
index ed63b7e8c13..9324b4906f1 100644
--- a/js/constants/appConstants.js
+++ b/js/constants/appConstants.js
@@ -189,6 +189,7 @@ const appConstants = {
   APP_ON_PROMOTION_REMOVAL: _,
   APP_ON_PROMOTION_GET: _,
   APP_ON_PROMOTION_CLOSE: _,
+  APP_ON_LEDGER_PIN_PUBLISHER: _,
   APP_ON_LEDGER_NOTIFICATION_INTERVAL: _,
   APP_ON_LEDGER_MEDIA_DATA: _,
   APP_ON_PRUNE_SYNOPSIS: _,
diff --git a/js/state/syncUtil.js b/js/state/syncUtil.js
index c651ceb3762..aa337f3369d 100644
--- a/js/state/syncUtil.js
+++ b/js/state/syncUtil.js
@@ -48,8 +48,7 @@ module.exports.siteSettingDefaults = {
   httpsEverywhere: true,
   fingerprintingProtection: false, // boolean for backwards compatibility
   ledgerPayments: true,
-  ledgerPaymentsShown: true,
-  ledgerPinPercentage: 0
+  ledgerPaymentsShown: true
 }
 
 // Whitelist of valid browser-laptop site fields. In browser-laptop, site


Test patch:
diff --git a/test/unit/app/browser/api/ledgerTest.js b/test/unit/app/browser/api/ledgerTest.js
index b7f670b91c2..15cef4206a0 100644
--- a/test/unit/app/browser/api/ledgerTest.js
+++ b/test/unit/app/browser/api/ledgerTest.js
@@ -385,9 +385,6 @@ describe('ledger api unit tests', function () {
             .setIn(['ledger', 'synopsis', 'publishers', 'site2', 'weight'], 28.57142857142857)
             .setIn(['ledger', 'synopsis', 'publishers', 'site3', 'pinPercentage'], 28)
             .setIn(['ledger', 'synopsis', 'publishers', 'site3', 'weight'], 28.57142857142857)
-            .setIn(['siteSettings', 'https?://site1', 'ledgerPinPercentage'], 43)
-            .setIn(['siteSettings', 'https?://site2', 'ledgerPinPercentage'], 29)
-            .setIn(['siteSettings', 'https?://site3', 'ledgerPinPercentage'], 28)
           assert.deepEqual(result.toJS(), newState.toJS())
         })
 
@@ -403,9 +400,6 @@ describe('ledger api unit tests', function () {
             .setIn(['ledger', 'synopsis', 'publishers', 'site2', 'weight'], 20)
             .setIn(['ledger', 'synopsis', 'publishers', 'site3', 'pinPercentage'], 32)
             .setIn(['ledger', 'synopsis', 'publishers', 'site3', 'weight'], 32)
-            .setIn(['siteSettings', 'https?://site1', 'ledgerPinPercentage'], 48)
-            .setIn(['siteSettings', 'https?://site2', 'ledgerPinPercentage'], 20)
-            .setIn(['siteSettings', 'https?://site3', 'ledgerPinPercentage'], 32)
           assert.deepEqual(result.toJS(), newState.toJS())
         })
       })
diff --git a/test/unit/app/renderer/components/preferences/payments/ledgerTableTest.js b/test/unit/app/renderer/components/preferences/payments/ledgerTableTest.js
index 167a651f07f..9651dbb3f38 100644
--- a/test/unit/app/renderer/components/preferences/payments/ledgerTableTest.js
+++ b/test/unit/app/renderer/components/preferences/payments/ledgerTableTest.js
@@ -16,36 +16,31 @@ const fivePublishers = {
     [
       'https?://times.com',
       Immutable.Map({
-        ledgerPayments: true,
-        ledgerPinPercentage: 10
+        ledgerPayments: true
       })
     ],
     [
       'https?://cnn.com',
       Immutable.Map({
-        ledgerPayments: true,
-        ledgerPinPercentage: 15
+        ledgerPayments: true
       })
     ],
     [
       'https?://brianbondy.com',
       Immutable.Map({
-        ledgerPayments: true,
-        ledgerPinPercentage: 0
+        ledgerPayments: true
       })
     ],
     [
       'https?://github.com',
       Immutable.Map({
-        ledgerPayments: true,
-        ledgerPinPercentage: 0
+        ledgerPayments: true
       })
     ],
     [
       'https?://clifton.io',
       Immutable.Map({
-        ledgerPayments: true,
-        ledgerPinPercentage: 0
+        ledgerPayments: true
       })
     ]
   ]),
@@ -161,8 +156,7 @@ describe('LedgerTable component', function () {
       [
         'https?://times.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 0
+          ledgerPayments: true
         })
       ]
     ])
@@ -202,22 +196,19 @@ describe('LedgerTable component', function () {
       [
         'https?://times.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 10
+          ledgerPayments: true
         })
       ],
       [
         'https?://cnn.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 15
+          ledgerPayments: true
         })
       ],
       [
         'https?://brianbondy.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 0
+          ledgerPayments: true
         })
       ]
     ])
@@ -291,15 +282,13 @@ describe('LedgerTable component', function () {
       [
         'https?://times.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 10
+          ledgerPayments: true
         })
       ],
       [
         'https?://cnn.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 15
+          ledgerPayments: true
         })
       ]
     ])
@@ -357,8 +346,7 @@ describe('LedgerTable component', function () {
       [
         'https?://times.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 42
+          ledgerPayments: true
         })
       ]
     ])
@@ -398,37 +386,32 @@ describe('LedgerTable component', function () {
       [
         'https?://times.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 10
+          ledgerPayments: true
         })
       ],
       [
         'https?://cnn.com',
         Immutable.Map({
           ledgerPayments: true,
-          ledgerPinPercentage: 15,
           ledgerPaymentsShown: false
         })
       ],
       [
         'https?://brianbondy.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 0
+          ledgerPayments: true
         })
       ],
       [
         'https?://github.com',
         Immutable.Map({
-          ledgerPayments: true,
-          ledgerPinPercentage: 0
+          ledgerPayments: true
         })
       ],
       [
         'https?://clifton.io',
         Immutable.Map({
           ledgerPayments: true,
-          ledgerPinPercentage: 0,
           ledgerPaymentsShown: false
         })
       ]