Make CommitsList an instantiatable class42734-reenable-eslint-commits-js

3 files changed, 29 insertions, 28 deletions

diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
index 22b201d49e4..2be63bd8c76 100644
--- a/app/assets/javascripts/commits.js
+++ b/app/assets/javascripts/commits.js
@@ -4,34 +4,33 @@ import Pager from './pager';
 import axios from './lib/utils/axios_utils';
 
 export default class CommitsList {
-  static init(limit) {
+  constructor(limit = 0) {
     this.timer = null;
 
     this.$contentList = $('.content_list');
 
-    Pager.init(parseInt(limit, 10), false, false, this.processCommits);
+    Pager.init(parseInt(limit, 10), false, false, this.processCommits.bind(this));
 
     this.content = $('#commits-list');
     this.searchField = $('#commits-search');
     this.lastSearch = this.searchField.val();
-    return this.initSearch();
+    this.initSearch();
   }
 
-  static initSearch() {
+  initSearch() {
     this.timer = null;
-
-    return this.searchField.on('keyup', () => {
+    this.searchField.on('keyup', () => {
       clearTimeout(this.timer);
-      this.timer = setTimeout(this.filterResults, 500);
+      this.timer = setTimeout(this.filterResults.bind(this), 500);
     });
   }
 
-  static filterResults() {
+  filterResults() {
     const form = $('.commits-search-form');
-    const search = CommitsList.searchField.val();
-    if (search === CommitsList.lastSearch) return Promise.resolve();
+    const search = this.searchField.val();
+    if (search === this.lastSearch) return Promise.resolve();
     const commitsUrl = `${form.attr('action')}?${form.serialize()}`;
-    CommitsList.content.fadeTo('fast', 0.5);
+    this.content.fadeTo('fast', 0.5);
     const params = form.serializeArray().reduce((acc, obj) => Object.assign(acc, {
       [obj.name]: obj.value,
     }), {});
@@ -40,9 +39,9 @@ export default class CommitsList {
       params,
     })
       .then(({ data }) => {
-        CommitsList.lastSearch = search;
-        CommitsList.content.html(data.html);
-        CommitsList.content.fadeTo('fast', 1.0);
+        this.lastSearch = search;
+        this.content.html(data.html);
+        this.content.fadeTo('fast', 1.0);
 
         // Change url so if user reload a page - search results are saved
         history.replaceState({
@@ -50,16 +49,16 @@ export default class CommitsList {
         }, document.title, commitsUrl);
       })
       .catch(() => {
-        CommitsList.content.fadeTo('fast', 1.0);
-        CommitsList.lastSearch = null;
+        this.content.fadeTo('fast', 1.0);
+        this.lastSearch = null;
       });
   }
 
   // Prepare loaded data.
-  static processCommits(data) {
+  processCommits(data) {
     let processedData = data;
     const $processedData = $(processedData);
-    const $commitsHeadersLast = CommitsList.$contentList.find('li.js-commit-header').last();
+    const $commitsHeadersLast = this.$contentList.find('li.js-commit-header').last();
     const lastShownDay = $commitsHeadersLast.data('day');
     const $loadedCommitsHeadersFirst = $processedData.filter('li.js-commit-header').first();
     const loadedShownDayFirst = $loadedCommitsHeadersFirst.data('day');
diff --git a/app/assets/javascripts/pages/projects/commits/show/index.js b/app/assets/javascripts/pages/projects/commits/show/index.js
index 90b5882a24f..6110fda17de 100644
--- a/app/assets/javascripts/pages/projects/commits/show/index.js
+++ b/app/assets/javascripts/pages/projects/commits/show/index.js
@@ -3,7 +3,7 @@ import GpgBadges from '~/gpg_badges';
 import ShortcutsNavigation from '~/shortcuts_navigation';
 
 export default () => {
-  CommitsList.init(document.querySelector('.js-project-commits-show').dataset.commitsLimit);
+  new CommitsList(document.querySelector('.js-project-commits-show').dataset.commitsLimit); // eslint-disable-line no-new
   new ShortcutsNavigation(); // eslint-disable-line no-new
   GpgBadges.fetch();
 };
diff --git a/spec/javascripts/commits_spec.js b/spec/javascripts/commits_spec.js
index 44ec9e4eabf..1daccc8dd02 100644
--- a/spec/javascripts/commits_spec.js
+++ b/spec/javascripts/commits_spec.js
@@ -4,6 +4,8 @@ import axios from '~/lib/utils/axios_utils';
 import CommitsList from '~/commits';
 
 describe('Commits List', () => {
+  let commitsList;
+
   beforeEach(() => {
     setFixtures(`
       <form class="commits-search-form" action="/h5bp/html5-boilerplate/commits/master">
@@ -11,6 +13,7 @@ describe('Commits List', () => {
       </form>
       <ol id="commits-list"></ol>
       `);
+    commitsList = new CommitsList(25);
   });
 
   it('should be defined', () => {
@@ -19,7 +22,7 @@ describe('Commits List', () => {
 
   describe('processCommits', () => {
     it('should join commit headers', () => {
-      CommitsList.$contentList = $(`
+      commitsList.$contentList = $(`
         <div>
           <li class="commit-header" data-day="2016-09-20">
             <span class="day">20 Sep, 2016</span>
@@ -39,7 +42,7 @@ describe('Commits List', () => {
 
       // The last commit header should be removed
       // since the previous one has the same data-day value.
-      expect(CommitsList.processCommits(data).find('li.commit-header').length).toBe(0);
+      expect(commitsList.processCommits(data).find('li.commit-header').length).toBe(0);
     });
   });
 
@@ -48,8 +51,7 @@ describe('Commits List', () => {
     let mock;
 
     beforeEach(() => {
-      CommitsList.init(25);
-      CommitsList.searchField.val('');
+      commitsList.searchField.val('');
 
       spyOn(history, 'replaceState').and.stub();
       mock = new MockAdapter(axios);
@@ -66,11 +68,11 @@ describe('Commits List', () => {
     });
 
     it('should save the last search string', (done) => {
-      CommitsList.searchField.val('GitLab');
-      CommitsList.filterResults()
+      commitsList.searchField.val('GitLab');
+      commitsList.filterResults()
         .then(() => {
           expect(ajaxSpy).toHaveBeenCalled();
-          expect(CommitsList.lastSearch).toEqual('GitLab');
+          expect(commitsList.lastSearch).toEqual('GitLab');
 
           done();
         })
@@ -78,10 +80,10 @@ describe('Commits List', () => {
     });
 
     it('should not make ajax call if the input does not change', (done) => {
-      CommitsList.filterResults()
+      commitsList.filterResults()
         .then(() => {
           expect(ajaxSpy).not.toHaveBeenCalled();
-          expect(CommitsList.lastSearch).toEqual('');
+          expect(commitsList.lastSearch).toEqual('');
 
           done();
         })