Fix all lints flagged by eslint (gitcoinco#666)

.eslintrc.yaml

@@ -0,0 +1,12 @@
+---
+  env:
+    browser: true
+    es6: true
+    jquery: true
+  globals:
+    Rails: readonly
+    StripeCheckout: readonly
+    Turbolinks: readonly
+    Typed: readonly
+  rules:
+    no-extra-bind: "off"

app/javascript/src/app/controllers/animated_type_controller.js

@@ -2,12 +2,16 @@ import { Controller } from 'stimulus'
 
 export default class extends Controller {
   connect () {
-    const strings = JSON.parse(this.element.dataset.strings),
-      typeSpeed = parseInt(this.element.dataset.typeSpeed),
-      loop = this.element.dataset.loop === 'true',
-      backSpeed = parseInt(this.element.dataset.backSpeed),
-      backDelay = parseInt(this.element.dataset.backDelay)
+    const strings = JSON.parse(this.element.dataset.strings)
 
-    new Typed(this.element, { strings, typeSpeed, loop, backSpeed, backDelay })
+    const typeSpeed = parseInt(this.element.dataset.typeSpeed)
+
+    const loop = this.element.dataset.loop === 'true'
+
+    const backSpeed = parseInt(this.element.dataset.backSpeed)
+
+    const backDelay = parseInt(this.element.dataset.backDelay)
+
+    new Typed(this.element, { strings, typeSpeed, loop, backSpeed, backDelay }) // eslint-disable-line no-new
   }
 }

app/javascript/src/app/controllers/campaign_form_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from 'stimulus'
 // import Rails from 'rails-ujs';
-import { Binding } from '@stimulus/core/dist/src/binding'
+// import { Binding } from '@stimulus/core/dist/src/binding'
 
 export default class extends Controller {
   static targets = [

app/javascript/src/app/controllers/creative_form_controller.js

@@ -91,10 +91,10 @@ export default class extends Controller {
   }
 
   setLargeImage () {
-    let target = this.inputLargeBlobIdTarget
-    let blobId = parseInt(target.value, 10)
+    const target = this.inputLargeBlobIdTarget
+    const blobId = parseInt(target.value, 10)
     if (!isNaN(blobId)) {
-      let selectedOption = target.options[target.selectedIndex]
+      const selectedOption = target.options[target.selectedIndex]
       this.previewImageUrlTarget.src = selectedOption.dataset.imageUrl
     } else {
       this.previewImageUrlTarget.src = this.previewImageUrlTarget.dataset.defaultImageUrl
@@ -106,10 +106,10 @@ export default class extends Controller {
   }
 
   setSponsorImage () {
-    let target = this.inputSponsorBlobIdTarget
-    let blobId = parseInt(target.value, 10)
+    const target = this.inputSponsorBlobIdTarget
+    const blobId = parseInt(target.value, 10)
     if (!isNaN(blobId)) {
-      let selectedOption = target.options[target.selectedIndex]
+      const selectedOption = target.options[target.selectedIndex]
       this.previewSponsorImageTarget.src = selectedOption.dataset.imageUrl
     } else {
       this.previewImageUrlTarget.src = 'about:blank'

app/javascript/src/app/controllers/image_uploader_controller.js

@@ -19,9 +19,9 @@ export default class extends Controller {
   }
 
   showUploadProgress (event) {
-    let { file, progress } = event.detail
+    const { file, progress } = event.detail
     this.chooseButtonTarget.innerHTML = this.chooseButtonTarget.dataset.disableWith
-    let innerBar = this.progressBars[file.name].querySelector('.progress-bar')
+    const innerBar = this.progressBars[file.name].querySelector('.progress-bar')
     innerBar.innerText = `${file.name} ${Math.floor(event.detail.progress)}%`
     innerBar.style.width = `${progress}%`
   }
@@ -36,13 +36,13 @@ export default class extends Controller {
   }
 
   upload (event) {
-    let files = toArray(event.target.files).reverse()
+    const files = toArray(event.target.files).reverse()
     files.forEach(file => this.showProgressBar(file))
     this.submitButtonTarget.click()
   }
 
   showProgressBar (file) {
-    let bar = this.progressBarTemplateTarget.cloneNode(true)
+    const bar = this.progressBarTemplateTarget.cloneNode(true)
     bar.hidden = false
     bar.querySelector('.progress-bar').innerText = file.name
     this.progressBars[file.name] = bar

app/javascript/src/app/controllers/inline_toggle_controller.js

@@ -1,5 +1,4 @@
 import { Controller } from 'stimulus'
-import axios from 'axios'
 
 export default class extends Controller {
   toggle (event) {

app/javascript/src/app/controllers/job_listing_keyword_controller.js

@@ -3,7 +3,7 @@ import { Controller } from 'stimulus'
 export default class extends Controller {
   appendToSearch (event) {
     Rails.stopEverything(event)
-    let terms = Array.from(
+    const terms = Array.from(
       new Set(
         `${this.inputTarget.value} ${this.element.innerText}`
           .split(' ')

app/javascript/src/app/controllers/job_posting_purchases_form_controller.js

@@ -27,9 +27,16 @@ export default class extends Controller {
   showPaymentModal (event) {
     Rails.stopEverything(event)
 
-    let { processing, key, image, name, currency, email } = this.element.dataset
+    const {
+      processing,
+      key,
+      image,
+      name,
+      currency,
+      email
+    } = this.element.dataset
     if (processing) return
-    let stripe = StripeCheckout.configure({
+    const stripe = StripeCheckout.configure({
       key,
       image,
       locale: 'auto',
@@ -174,31 +181,37 @@ export default class extends Controller {
 
   get selectedOffers () {
     toArray(this.offersTarget.options).filter(option => {
-      if (option.selected) option.value
+      if (option.selected) return option.value
     })
   }
 
   get amount () {
     let cents = 0
-    if (this.monthlyPlanTarget.selected)
+    if (this.monthlyPlanTarget.selected) {
       cents += Number(this.monthlyPlanTarget.dataset.amount)
-    if (this.prepaidPlanTarget.selected)
+    }
+    if (this.prepaidPlanTarget.selected) {
       cents += Number(this.prepaidPlanTarget.dataset.amount)
-    if (this.premiumPlacementOfferTarget.selected)
+    }
+    if (this.premiumPlacementOfferTarget.selected) {
       cents += Number(this.premiumPlacementOfferTarget.dataset.amount)
-    if (this.codeFundAdsOfferTarget.selected)
+    }
+    if (this.codeFundAdsOfferTarget.selected) {
       cents += Number(this.codeFundAdsOfferTarget.dataset.amount)
-    if (this.readTheDocsOfferTarget.selected)
+    }
+    if (this.readTheDocsOfferTarget.selected) {
       cents += Number(this.readTheDocsOfferTarget.dataset.amount)
+    }
     return cents
   }
 
   get description () {
-    let value = []
+    const value = []
     if (this.monthlyPlanTarget.selected) value.push('Monthly Plan')
     if (this.prepaidPlanTarget.selected) value.push('Prepaid Plan')
-    if (this.premiumPlacementOfferTarget.selected)
+    if (this.premiumPlacementOfferTarget.selected) {
       value.push('Premium Placement')
+    }
     if (this.codeFundAdsOfferTarget.selected) value.push('CodeFund Ads')
     if (this.readTheDocsOfferTarget.selected) value.push('ReadTheDocs Ads')
     return value.join(', ')

app/javascript/src/app/controllers/load_more_controller.js

@@ -12,7 +12,7 @@ export default class extends Controller {
       .get(nextUrl)
       .then(response => {
         target.remove()
-        let items = document.createElement('div')
+        const items = document.createElement('div')
         items.innerHTML = response.data
         while (items.firstChild) {
           if (items.firstChild.outerHTML) {

app/javascript/src/app/controllers/pricing_map_controller.js

@@ -1,16 +1,9 @@
 import { Controller } from 'stimulus'
-import { reduce } from 'lodash'
 import * as am4core from '@amcharts/amcharts4/core'
 import * as am4maps from '@amcharts/amcharts4/maps'
-import am4themes_animated from '@amcharts/amcharts4/themes/animated'
-import am4themes_dark from '@amcharts/amcharts4/themes/dark'
-import am4geodata_worldLow from '@amcharts/amcharts4-geodata/worldLow'
-
-const formatter = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-  minimumFractionDigits: 2
-})
+import am4themes_animated from '@amcharts/amcharts4/themes/animated' // eslint-disable-line camelcase
+// import am4themes_dark from '@amcharts/amcharts4/themes/dark' // eslint-disable-line camelcase
+import am4geodata_worldLow from '@amcharts/amcharts4-geodata/worldLow' // eslint-disable-line camelcase
 
 export default class extends Controller {
   connect () {
@@ -20,7 +13,7 @@ export default class extends Controller {
     // Themes end
 
     /* Create map instance */
-    let chart = am4core.create('chartdiv', am4maps.MapChart)
+    const chart = am4core.create('chartdiv', am4maps.MapChart)
 
     const mapColor = chart.colors.getIndex(0)
     // const mapColor = am4core.color('#3c6b95');
@@ -32,18 +25,18 @@ export default class extends Controller {
     chart.maxZoomLevel = 4
 
     /* Set map definition */
-    chart.geodata = am4geodata_worldLow
+    chart.geodata = am4geodata_worldLow // eslint-disable-line camelcase
 
     /* Set projection */
     chart.projection = new am4maps.projections.Miller()
 
     /* Create map polygon series */
-    let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries())
+    const polygonSeries = chart.series.push(new am4maps.MapPolygonSeries())
 
     /* Make map load polygon (like country names) data from GeoJSON */
     polygonSeries.useGeodata = true
 
-    //Set min/max fill color for each area
+    // Set min/max fill color for each area
     polygonSeries.heatRules.push({
       property: 'fill',
       target: polygonSeries.mapPolygons.template,
@@ -52,11 +45,11 @@ export default class extends Controller {
     })
 
     // Set heatmap values for each state
-    let countries = JSON.parse(this.element.dataset.countries)
+    const countries = JSON.parse(this.element.dataset.countries)
     polygonSeries.data = countries
 
     /* Configure series */
-    let polygonTemplate = polygonSeries.mapPolygons.template
+    const polygonTemplate = polygonSeries.mapPolygons.template
     polygonTemplate.applyOnClones = true
     polygonTemplate.togglable = false
     polygonTemplate.tooltipText = '{emoji_flag} {name}: {display_price}'
@@ -66,7 +59,7 @@ export default class extends Controller {
 
     polygonTemplate.fill = mapColor
 
-    let hs = polygonTemplate.states.create('hover')
+    const hs = polygonTemplate.states.create('hover')
     hs.properties.fill = mapColor.brighten(1.2)
 
     // Hide Antarctica
@@ -79,7 +72,7 @@ export default class extends Controller {
     // Zoom control
     chart.zoomControl = new am4maps.ZoomControl()
 
-    let homeButton = new am4core.Button()
+    const homeButton = new am4core.Button()
     homeButton.events.on('hit', function () {
       chart.goHome()
     })

app/javascript/src/app/controllers/search_autocomplete_controller.js

@@ -132,7 +132,7 @@ export default class extends Controller {
 
   submit (event) {
     event.preventDefault()
-    let globalId = this.hiddenTarget.value
+    const globalId = this.hiddenTarget.value
     if (globalId.length === 0) return
 
     this.reset()

app/javascript/src/app/controllers/select_country_province_controller.js

@@ -1,6 +1,5 @@
 import 'select2'
 import { Controller } from 'stimulus'
-import { toArray } from '../utils'
 
 export default class extends Controller {
   static targets = ['countryCodeSelect', 'provinceCodeSelect']
@@ -22,16 +21,17 @@ export default class extends Controller {
   createProvinceCodeOptions () {
     this.provinceCodeSelectTarget.appendChild(this.createOption(null, ''))
     this.validProvinces.forEach(p => {
-      let option = this.createOption(p.id, p.name)
+      const option = this.createOption(p.id, p.name)
       option.dataset.countryCode = p.countryCode
-      if (this.provinceCodeSelectTarget.dataset.selected === p.id)
+      if (this.provinceCodeSelectTarget.dataset.selected === p.id) {
         option.selected = true
+      }
       this.provinceCodeSelectTarget.appendChild(option)
     })
   }
 
   createOption (value, text) {
-    let option = document.createElement('option')
+    const option = document.createElement('option')
     option.value = value
     option.text = text
     return option

app/javascript/src/app/controllers/select_date_controller.js

@@ -2,7 +2,6 @@
 // Our use of it here is simply because its already a dependency
 // The verbose use of the `jQuery` variable instead of `$` is intentional so its use is easier to identify
 import { Controller } from 'stimulus'
-import moment from 'moment'
 
 export default class extends Controller {
   connect () {

app/javascript/src/app/controllers/select_geo_targets_controller.js

@@ -18,8 +18,9 @@ export default class extends Controller {
       event &&
       event.type === 'cf:select:changed' &&
       String(event.target.dataset.target).indexOf('countryCodesSelect') === -1
-    )
+    ) {
       return
+    }
 
     if (
       this.validProvinces.length === 0 ||
@@ -44,19 +45,19 @@ export default class extends Controller {
   }
 
   removeInvalidProvinceCodeOptions () {
-    let valid = this.validProvinces
+    const valid = this.validProvinces
     this.provinceCodeOptions.forEach(o => {
-      let match = valid.find(p => p.countryCode === o.dataset.countryCode)
+      const match = valid.find(p => p.countryCode === o.dataset.countryCode)
       if (!match) o.remove()
     })
   }
 
   addMissingProvinceCodeOptions () {
-    let options = this.provinceCodeOptions
+    const options = this.provinceCodeOptions
     this.validProvinces.forEach(p => {
-      let match = options.find(o => o.dataset.countryCode === p.countryCode)
+      const match = options.find(o => o.dataset.countryCode === p.countryCode)
       if (!match) {
-        let option = document.createElement('option')
+        const option = document.createElement('option')
         option.value = p.id
         option.text = p.name
         option.dataset.countryCode = p.countryCode
@@ -67,8 +68,11 @@ export default class extends Controller {
 
   preselectProvinceCodeOptions () {
     this.provinceCodeOptions.forEach(o => {
-      if (this.provinceCodesSelectTarget.dataset.selected.indexOf(o.value) > 0)
+      if (
+        this.provinceCodesSelectTarget.dataset.selected.indexOf(o.value) > 0
+      ) {
         o.selected = true
+      }
     })
   }
 

app/javascript/src/app/controllers/select_multiple_controller.js

@@ -12,7 +12,7 @@ export default class extends Controller {
 
   selectSubset (event) {
     Rails.stopEverything(event)
-    let values = JSON.parse(event.target.dataset.values)
+    const values = JSON.parse(event.target.dataset.values)
     this.options.forEach(o => {
       if (!o.selected) {
         o.selected = values.indexOf(o.value) >= 0

app/javascript/src/app/controllers/select_parent_controller.js

@@ -58,8 +58,8 @@ export default class extends Controller {
   }
 
   get childSelectTarget () {
-    let id = this.element.dataset.child
-    let element = document.getElementById(id)
+    const id = this.element.dataset.child
+    const element = document.getElementById(id)
     if (!element)
       console.log(
         `select-parent-controller: Unable to find a child with the id '${id}'`

app/javascript/src/app/controllers/split_experiment_controller.js

@@ -18,7 +18,7 @@ export default class extends Controller {
   }
 
   request (method, url) {
-    let xhr = new XMLHttpRequest()
+    const xhr = new XMLHttpRequest()
     xhr.open(url, method)
     xhr.onreadystatechange = () => {
       if (xhr.readyState === XMLHttpRequest.DONE) {

bin/lint

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+bundle exec standardrb
+yarn run prettier-standard --lint 'app/javascript/**/*.js'