Make use of destructuring options, clean up based on feedback.

6 files changed, 54 insertions, 47 deletions

diff --git a/app/assets/javascripts/blob/blob_ci_yaml.js.es6 b/app/assets/javascripts/blob/blob_ci_yaml.js.es6
index 5ae6f1a5940..46496153d7c 100644
--- a/app/assets/javascripts/blob/blob_ci_yaml.js.es6
+++ b/app/assets/javascripts/blob/blob_ci_yaml.js.es6
@@ -8,15 +8,15 @@
 
     requestFile(query) {
       return Api.gitlabCiYml(query.name, this.requestFileSuccess.bind(this));
-    };
+    }
   };
 
   global.BlobCiYamlSelector = BlobCiYamlSelector;
 
   class BlobCiYamlSelectors {
-    constructor(opts) {
-      this.$dropdowns = opts.$dropdowns || $('.js-gitlab-ci-yml-selector');
-      this.editor = opts.editor;
+    constructor({ editor, $dropdowns = $('.js-gitlab-ci-yml-selector') }) {
+      this.editor = editor;
+      this.$dropdowns = $dropdowns;
       this.initSelectors();
     }
 
@@ -24,11 +24,11 @@
       this.$dropdowns.each((i, dropdown) => {
         const $dropdown = $(dropdown);
         return new BlobCiYamlSelector({
+          editor,
           pattern: /(.gitlab-ci.yml)/,
           data: $dropdown.data('data'),
           wrapper: $dropdown.closest('.js-gitlab-ci-yml-selector-wrap'),
-          dropdown: $dropdown,
-          editor: this.editor
+          dropdown: $dropdown
         });
       });
     }
diff --git a/app/assets/javascripts/profile/profile.js.es6 b/app/assets/javascripts/profile/profile.js.es6
index e62e0a89867..5b1a5920c95 100644
--- a/app/assets/javascripts/profile/profile.js.es6
+++ b/app/assets/javascripts/profile/profile.js.es6
@@ -1,9 +1,9 @@
 ((global) => {
 
   class Profile {
-    constructor(opts = {}) {
+    constructor({ form = $('.edit-user') }) {
       this.onSubmitForm = this.onSubmitForm.bind(this);
-      this.form = opts.form || $('.edit-user');
+      this.form = form;
       this.bindEvents();
       this.initAvatarGlCrop();
     }
@@ -72,12 +72,8 @@
         dataType: "json",
         processData: false,
         contentType: false,
-        success: (response) => {
-          return new Flash(response.message, 'notice');
-        },
-        error: (jqXHR) => {
-          return new Flash(jqXHR.responseJSON.message, 'alert');
-        },
+        success: response => new Flash(response.message, 'notice'),
+        error: jqXHR => new Flash(jqXHR.responseJSON.message, 'alert'),
         complete: () => {
           window.scrollTo(0, 0);
           // Enable submit button after requests ends
diff --git a/app/assets/javascripts/search_autocomplete.js.es6 b/app/assets/javascripts/search_autocomplete.js.es6
index d1e8c79336a..abd0748f6a3 100644
--- a/app/assets/javascripts/search_autocomplete.js.es6
+++ b/app/assets/javascripts/search_autocomplete.js.es6
@@ -9,19 +9,20 @@
   };
 
   class SearchAutocomplete {
-    constructor(opts = {}) {
-      this.onSearchInputBlur = this.onSearchInputBlur.bind(this);
-      this.onClearInputClick = this.onClearInputClick.bind(this);
-      this.onSearchInputFocus = this.onSearchInputFocus.bind(this);
-      this.onSearchInputClick = this.onSearchInputClick.bind(this);
-      this.onSearchInputKeyUp = this.onSearchInputKeyUp.bind(this);
-      this.onSearchInputKeyDown = this.onSearchInputKeyDown.bind(this);
-      this.wrap = opts.wrap || $('.search');
-      this.optsEl = opts.optsEl || this.wrap.find('.search-autocomplete-opts');
-      this.autocompletePath = opts.autocompletePath || this.optsEl.data('autocomplete-path')
-      this.projectId = opts.projectId || this.optsEl.data('autocomplete-project-id') || '';
-      this.projectRef = opts.projectRef || this.optsEl.data('autocomplete-project-ref') || '';
-      this.dropdown = this.wrap.find('.dropdown');
+    constructor({
+      wrap = $('.search'),
+      optsEl = wrap.find('.search-autocomplete-opts'),
+      autocompletePath = optsEl.data('autocomplete-path'),
+      projectId = (optsEl.data('autocomplete-project-id') || ''),
+      projectRef = (optsEl.data('autocomplete-project-ref') || '')
+    }) {
+      this.bindEventContext();
+      this.wrap = wrap;
+      this.optsEl = optsEl;
+      this.autocompletePath = autocompletePath;
+      this.projectId = projectId;
+      this.projectRef = projectRef;
+      this.dropdown = wrap.find('.dropdown');
       this.dropdownContent = this.dropdown.find('.dropdown-content');
       this.locationBadgeEl = this.getElement('.location-badge');
       this.scopeInputEl = this.getElement('#scope');
@@ -42,6 +43,14 @@
     }
 
     // Finds an element inside wrapper element
+    bindEventContext() {
+      this.onSearchInputBlur = this.onSearchInputBlur.bind(this);
+      this.onClearInputClick = this.onClearInputClick.bind(this);
+      this.onSearchInputFocus = this.onSearchInputFocus.bind(this);
+      this.onSearchInputClick = this.onSearchInputClick.bind(this);
+      this.onSearchInputKeyUp = this.onSearchInputKeyUp.bind(this);
+      this.onSearchInputKeyDown = this.onSearchInputKeyDown.bind(this);
+    }
     getElement(selector) {
       return this.wrap.find(selector);
     }
diff --git a/app/assets/javascripts/todos.js.es6 b/app/assets/javascripts/todos.js.es6
index fd85b7506ce..d8dca490e3e 100644
--- a/app/assets/javascripts/todos.js.es6
+++ b/app/assets/javascripts/todos.js.es6
@@ -1,11 +1,11 @@
 ((global) => {
 
   class Todos {
-    constructor(opts = {}) {
+    constructor({ el = $('.js-todos-options') }) {
       this.allDoneClicked = this.allDoneClicked.bind(this);
       this.doneClicked = this.doneClicked.bind(this);
-      this.el = opts.el || $('.js-todos-options');
-      this.perPage = this.el.data('perPage');
+      this.el = el;
+      this.perPage = el.data('perPage');
       this.clearListeners();
       this.initBtnListeners();
       this.initFilters();
@@ -60,7 +60,7 @@
         data: {
           '_method': 'delete'
         },
-        success: data => {
+        success: (data) => {
           this.redirectIfNeeded(data.count);
           this.clearDone($target.closest('li'));
           return this.updateBadges(data);
@@ -80,7 +80,7 @@
         data: {
           '_method': 'delete'
         },
-        success: data => {
+        success: (data) => {
           $target.remove();
           $('.prepend-top-default').html('<div class="nothing-here-block">You\'re all done!</div>');
           return this.updateBadges(data);
diff --git a/app/assets/javascripts/user.js.es6 b/app/assets/javascripts/user.js.es6
index 6930d14094c..0f97924d94e 100644
--- a/app/assets/javascripts/user.js.es6
+++ b/app/assets/javascripts/user.js.es6
@@ -1,7 +1,7 @@
 ((global) => {
   global.User = class {
-    constructor(opts) {
-      this.opts = opts;
+    constructor({ action }) {
+      this.action = action;
       this.placeProfileAvatarsToTop();
       this.initTabs();
       this.hideProjectLimitMessage();
@@ -16,7 +16,7 @@
     initTabs() {
       return new global.UserTabs({
         parentEl: '.user-profile',
-        action: this.opts.action
+        action: this.action
       });
     }
 
diff --git a/app/assets/javascripts/user_tabs.js.es6 b/app/assets/javascripts/user_tabs.js.es6
index 4a69a79118e..1ce0b31c01f 100644
--- a/app/assets/javascripts/user_tabs.js.es6
+++ b/app/assets/javascripts/user_tabs.js.es6
@@ -59,11 +59,11 @@ content on the Users#show page.
 */
 ((global) => {
   class UserTabs {
-    constructor (opts) {
+    constructor ({ defaultAction = 'activity', action = defaultAction, parentEl }) {
       this.loaded = {};
-      this.defaultAction = opts.defaultAction || 'activity';
-      this.action = opts.action || 'activity';
-      this.$parentEl = $(opts.parentEl) || $(document);
+      this.defaultAction = defaultAction;
+      this.action = action;
+      this.$parentEl = $(parentEl) || $(document);
       this._location = window.location;
       this.$parentEl.find('.nav-links a')
         .each((i, navLink) => {
@@ -81,7 +81,7 @@ content on the Users#show page.
 
     bindEvents() {
       return this.$parentEl.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
-        .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', (event) => this.tabShown(event));
+        .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event));
     }
 
     tabShown(event) {
@@ -93,7 +93,7 @@ content on the Users#show page.
     }
 
     activateTab(action) {
-      return this.$parentEl.find(".nav-links .js-" + action + "-tab a")
+      return this.$parentEl.find(`.nav-links .js-${action}-tab a`)
         .tab('show');
     }
 
@@ -104,7 +104,9 @@ content on the Users#show page.
       if (action === 'activity') {
         this.loadActivities(source);
       }
-      if (action === 'groups' || action === 'contributed' || action === 'projects' || action === 'snippets') {
+
+      const loadableActions = [ 'groups', 'contributed', 'projects', 'snippets' ];
+      if (loadableActions.indexOf(action) > -1) {
         return this.loadTab(source, action);
       }
     }
@@ -115,9 +117,9 @@ content on the Users#show page.
         complete: () => this.toggleLoading(false),
         dataType: 'json',
         type: 'GET',
-        url: source + ".json",
+        url: `${source}.json`,
         success: (data) => {
-          const tabSelector = 'div#' + action;
+          const tabSelector = `div#${action}`;
           this.$parentEl.find(tabSelector).html(data.html);
           this.loaded[action] = true;
           return gl.utils.localTimeAgo($('.js-timeago', tabSelector));
@@ -141,12 +143,12 @@ content on the Users#show page.
     }
 
     setCurrentAction(action) {
-      const regExp = new RegExp('\/(' + this.actions.join('|') + ')(\.html)?\/?$');
+      const regExp = new RegExp(`\/(${this.actions.join('|')})(\.html)?\/?$`);
       let new_state = this._location.pathname;
-      new_state = new_state.replace(/\/+$/, "");
+      new_state = new_state.replace(/\/+$/, '');
       new_state = new_state.replace(regExp, '');
       if (action !== this.defaultAction) {
-        new_state += "/" + action;
+        new_state += `/${action}`;
       }
       new_state += this._location.search + this._location.hash;
       history.replaceState({