Refactoring

Author: EpocDotFr

js/content.js

@@ -1,16 +1,63 @@
 (function(globals) {
     'use strict';
 
-    globals.gmrle = {
-        currentProjectId: null,
-        baseProjectUrl: null,
-        baseUrl: null,
-        mergeRequestsDetailsApiUrl: null,
+    class GitLabApiClient {
+        constructor(baseUrl) {
+            this.baseUrl = baseUrl;
+        }
 
+        /**
+         * Create an `URL` object representing the full URL to the given GitLab API endpoint.
+         */
+        createEndpointUrl(endpoint, queryStringParameters = null) {
+            let url = new URL(this.baseUrl + endpoint);
+
+            if (queryStringParameters) {
+                queryStringParameters.forEach(function(queryStringParameter) {
+                    url.searchParams.append(queryStringParameter[0], queryStringParameter[1]);
+                });
+            }
+
+            return url;
+        }
+
+        sendRequest(method, endpoint, callback, queryStringParameters = null) {
+            let xhr = new XMLHttpRequest();
+
+            xhr.responseType = 'json';
+
+            xhr.onload = callback;
+
+            xhr.onerror = function() {
+                console.error('Error while communicating with GitLab');
+            };
+
+            xhr.open(method, this.createEndpointUrl(endpoint, queryStringParameters));
+            xhr.send();
+        }
+
+        /**
+         * Fetch details about the given Merge Requests IDs.
+         */
+        getMergeRequests(projectId, mergeRequestIds, callback) {
+            let queryStringParameters = mergeRequestIds.map(function(mergeRequestId) {
+                return ['iids[]', mergeRequestId];
+            });
+
+            this.sendRequest(
+                'GET',
+                'projects/' + projectId + '/merge_requests',
+                callback,
+                queryStringParameters
+            );
+        }
+    }
+
+    class ContentScript {
         /**
          * Initialize the content script of the extension which is executed in the context of the page.
          */
-        init() {
+        constructor() {
             this.currentProjectId = this.getCurrentProjectId();
 
             if (!this.currentProjectId) {
@@ -30,15 +77,23 @@
             }
 
             this.baseUrl = location.protocol + '//' + location.host;
-            this.mergeRequestsDetailsApiUrl = this.baseUrl + '/api/v4/projects/' + this.currentProjectId + '/merge_requests';
+            this.baseApiUrl = this.baseUrl + '/api/v4/';
+            this.apiClient = new GitLabApiClient(this.baseApiUrl);
 
             console.debug('Current project ID:', this.currentProjectId);
             console.debug('Base project URL:', this.baseProjectUrl);
             console.debug('GitLab base URL:', this.baseUrl);
-            console.debug('API URL:', this.mergeRequestsDetailsApiUrl);
+            console.debug('GitLab API base URL:', this.baseApiUrl);
+
+            this.removeExistingTargetBranchNodes();
+
+            let currentMergeRequestIds = this.getCurrentMergeRequestIdsAndSetUuidDataAttributes();
+
+            console.debug('Current merge requests IDs:', currentMergeRequestIds);
+
+            this.fetchMergeRequestsDetails(currentMergeRequestIds);
+        }
 
-            this.updateUI();
-        },
         /**
          * Finds and returns the GitLab project ID whe're looking merge requests at.
          */
@@ -50,31 +105,17 @@
             }
 
             return body.dataset.projectId;
-        },
+        }
+
         /**
          * Finds and returns the URI to the project whe're looking merge requests at.
          */
         getBaseProjectUrl() {
             let link = document.querySelector('.nav-sidebar .context-header a');
 
             return link ? link.getAttribute('href') : null;
-        },
-        /**
-         * Initialize an UI update process:
-         *   - Removes all branches that may have been already displayed by GitLab
-         *   - Get all Merge Requests IDs that are currently displayed
-         *   - Fetch their details using the GitLab API
-         *   - Actually update the UI by altering the DOM
-         */
-        updateUI() {
-            this.removeExistingTargetBranchNodes();
-
-            let currentMergeRequestIds = this.getCurrentMergeRequestIdsAndSetUuidDataAttributes();
-
-            console.debug('Current merge requests IDs:', currentMergeRequestIds);
+        }
 
-            this.fetchMergeRequestsDetails(currentMergeRequestIds);
-        },
         /**
          * Gets all Merge Requests IDs that are currently displayed AND sets the `iid` data attribute (public Merge
          * Request identifier) on all DOM nodes representing a Merge Requests (it's used later in the process).
@@ -89,59 +130,37 @@
 
                 return iid;
             });
-        },
+        }
+
         /**
          * Performs an HTTP GET request to the GitLab API to retrieve details about Merge Requests that are
          * currently displayed. If successful, it actually updates the UI by altering the DOM.
          */
         fetchMergeRequestsDetails(mergeRequestIds) {
             let self = this;
-            let xhr = new XMLHttpRequest();
-
-            xhr.responseType = 'json';
 
-            xhr.onload = function() {
-                if (this.status == 200) {
-                    if (this.response == '') {
-                        console.error('Got empty response from GitLab');
-
-                        return;
+            this.apiClient.getMergeRequests(
+                this.currentProjectId,
+                mergeRequestIds,
+                function() {
+                    if (this.status == 200) {
+                        self.updateMergeRequestsNodes(this.response);
+                    } else {
+                        console.error('Got error from GitLab:', this.status, this.response);
                     }
-
-                    self.updateMergeRequestsNodes(this.response);
-                } else {
-                    console.error('Got error from GitLab:', this.status, this.response);
                 }
-            };
-
-            xhr.onerror = function() {
-                console.error('Error while communicating with GitLab');
-            };
-
-            xhr.open('GET', this.createMergeRequestsDetailsApiUrl(mergeRequestIds));
-            xhr.send();
-        },
-        /**
-         * Create an `URL` object representing the URL to the GitLab API endpoint that returns details about
-         * Merge Requests that are currently displayed (and only these ones).
-         */
-        createMergeRequestsDetailsApiUrl(mergeRequestIds) {
-            let url = new URL(this.mergeRequestsDetailsApiUrl);
-
-            mergeRequestIds.forEach(function(mergeRequestId) {
-                url.searchParams.append('iids[]', mergeRequestId);
-            });
+            );
+        }
 
-            return url;
-        },
         /**
          * Removes all branches that may have been already displayed by GitLab.
          */
         removeExistingTargetBranchNodes() {
             document.querySelectorAll('.mr-list .merge-request .project-ref-path').forEach(function(el) {
                 el.parentNode.removeChild(el);
             });
-        },
+        }
+
         /**
          * Actually updates the UI by altering the DOM by adding our stuff.
          */
@@ -165,7 +184,7 @@
                     .appendChild(branchesInfoNode);
             });
         }
-    };
+    }
 
-    globals.gmrle.init();
-}(this));
+    let cs = new ContentScript();
+}(this));