Resolve 'this alias' lint errors and add more typing packages

hasgeek · Jun 7, 2024 · 568c44c · 568c44c
1 parent 0a3aa97
commit 568c44c
Show file tree

Hide file tree

Showing 14 changed files with 599 additions and 81 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,6 +31,6 @@ module.exports = {
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'cypress/no-unnecessary-waiting': 'off',
-    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/no-this-alias': ['error', { allowedNames: ['self'] }],
   },
 };
diff --git a/funnel/assets/js/schedule_view.js b/funnel/assets/js/schedule_view.js
@@ -11,29 +11,29 @@ import Modal from './utils/modalhelper';
 
 const Schedule = {
   renderScheduleTable() {
-    const schedule = this;
+    const self = this;
 
     const scheduleUI = Vue.component('schedule', {
-      template: schedule.config.scriptTemplate,
+      template: self.config.scriptTemplate,
       data() {
         return {
-          schedules: schedule.config.schedule,
-          rowWidth: Object.keys(schedule.config.rooms).length,
+          schedules: self.config.schedule,
+          rowWidth: Object.keys(self.config.rooms).length,
           rowHeight: '30',
           timeSlotWidth: '75',
-          timeZone: schedule.config.timeZone,
+          timeZone: self.config.timeZone,
           rowBorder: '1',
-          activeTab: Object.keys(schedule.config.rooms)[0],
+          activeTab: Object.keys(self.config.rooms)[0],
           width: $(window).width(),
           height: $(window).height(),
           modalHtml: '',
           headerHeight: '',
           pageDetails: {
             url: window.location.href,
-            title: `Schedule – ${schedule.config.projectTitle}`,
-            projectTitle: schedule.config.projectTitle,
+            title: `Schedule – ${self.config.projectTitle}`,
+            projectTitle: self.config.projectTitle,
             pageTitle: 'Schedule',
-            description: schedule.config.pageDescription,
+            description: self.config.pageDescription,
           },
           view: 'agenda',
           svgIconUrl: window.Hasgeek.Config.svgIconUrl,
@@ -84,14 +84,14 @@ const Schedule = {
           // On closing modal, update browser history
           $('#session-modal').on($.modal.CLOSE, () => {
             this.modalHtml = '';
-            if (schedule.config.replaceHistoryToModalUrl) {
+            if (self.config.replaceHistoryToModalUrl) {
               Spa.updateMetaTags(this.pageDetails);
               if (window.history.state.openModal) {
                 window.history.back();
               }
             }
           });
-          if (schedule.config.changeToModalUrl) {
+          if (self.config.changeToModalUrl) {
             $(window).on('popstate', () => {
               if (this.modalHtml) {
                 $.modal.close();
@@ -103,7 +103,7 @@ const Schedule = {
           this.modalHtml = sessionHtml;
           $('#session-modal').modal('show');
           this.handleModalShown();
-          if (schedule.config.replaceHistoryToModalUrl) {
+          if (self.config.replaceHistoryToModalUrl) {
             window.history.pushState(
               {
                 openModal: true,
@@ -184,7 +184,7 @@ const Schedule = {
           this.getHeight();
           this.pathName = window.location.pathname;
           const scrollPos = JSON.parse(window.sessionStorage.getItem('scrollPos'));
-          const activeSession = schedule.config.active_session;
+          const activeSession = self.config.active_session;
           if (activeSession) {
             // Open session modal
             const paths = window.location.href.split('/');
@@ -243,7 +243,7 @@ const Schedule = {
         },
       },
       mounted() {
-        if (schedule.config.rememberScrollPos) {
+        if (self.config.rememberScrollPos) {
           this.animateWindowScrollWithHeader();
         }
         this.handleBrowserResize();
@@ -257,7 +257,7 @@ const Schedule = {
         faSvg,
       },
     });
-    scheduleApp.$mount(schedule.config.divElem);
+    scheduleApp.$mount(self.config.divElem);
   },
   addSessionToSlots() {
     this.config.sessions.forEach((session) => {
@@ -316,7 +316,6 @@ const Schedule = {
     };
   },
   init(config) {
-    const self = this;
     this.config = config;
     this.config.rooms = {};
     if (!this.config.venues.length) {
@@ -330,7 +329,7 @@ const Schedule = {
           this.config.rooms[room.scoped_name].venue_title = venue.title;
         });
       } else {
-        self.addDefaultRoom(venue);
+        this.addDefaultRoom(venue);
       }
     });
     this.config.currentDate = this.Utils.getDateString(new Date());

diff --git a/funnel/assets/js/submission.js b/funnel/assets/js/submission.js
@@ -42,7 +42,7 @@ export const Submission = {
 
 export const LabelsWidget = {
   init() {
-    const Widget = this;
+    const self = this;
 
     // On load, if the radio has been selected, then check mark the listwidget label
     $('.listwidget input[type="radio"]').each(function loadCheckMarkToLabel() {
@@ -51,33 +51,36 @@ export const LabelsWidget = {
       }
     });
 
-    $('.listwidget .mui-form__label').click(function uncheckLabel() {
+    $('.listwidget .mui-form__label').on('click', function uncheckLabel() {
       if ($(this).hasClass('checked')) {
         $(this).removeClass('checked');
         $(this).siblings().find('input[type="radio"]').prop('checked', false);
-        const attr = Widget.getLabelTxt($(this).text().trim());
-        Widget.updateLabels('', attr, false);
+        const attr = self.getLabelTxt($(this).text().trim());
+        self.updateLabels('', attr, false);
       } else {
         $(this).addClass('checked');
         $(this).siblings().find('input[type="radio"]').first().click();
       }
     });
 
     // Add check mark to listwidget label
-    $('.listwidget input[type="radio"]').change(function addCheckMarkToLabel() {
+    $('.listwidget input[type="radio"]').on('change', function addCheckMarkToLabel() {
       const label = $(this).parent().parent().prev('.mui-form__label');
       label.addClass('checked');
-      const labelTxt = `${Widget.getLabelTxt(label.text())}: ${Widget.getLabelTxt(
+      const labelTxt = `${self.getLabelTxt(label.text())}: ${self.getLabelTxt(
         $(this).parent().find('label').text(),
       )}`;
-      const attr = Widget.getLabelTxt(label.text());
-      Widget.updateLabels(labelTxt, attr, this.checked);
+      const attr = self.getLabelTxt(label.text());
+      self.updateLabels(labelTxt, attr, this.checked);
     });
 
-    $('.mui-checkbox input[type="checkbox"]').change(function clickLabelCheckbox() {
-      const labelTxt = Widget.getLabelTxt($(this).parent('label').text());
-      Widget.updateLabels(labelTxt, labelTxt, this.checked);
-    });
+    $('.mui-checkbox input[type="checkbox"]').on(
+      'change',
+      function clickLabelCheckbox() {
+        const labelTxt = self.getLabelTxt($(this).parent('label').text());
+        self.updateLabels(labelTxt, labelTxt, this.checked);
+      },
+    );
 
     // Open and close dropdown
     $('#label-select').on('click', () => {

diff --git a/funnel/assets/js/utils/form_widgets.js b/funnel/assets/js/utils/form_widgets.js
@@ -183,12 +183,11 @@ export class MapMarker {
   }
 
   activate() {
-    const self = this;
     Form.preventSubmitOnEnter(this.field.locationId);
 
     // locationpicker.jquery.js
     $(`#${this.field.mapId}`).locationpicker({
-      location: self.getDefaultLocation(),
+      location: this.getDefaultLocation(),
       radius: 0,
       zoom: 18,
       inputBinding: {
@@ -197,32 +196,32 @@ export class MapMarker {
         locationNameInput: $(`#${this.field.locationId}`),
       },
       enableAutocomplete: true,
-      onchanged() {
-        if ($(`#${self.field.locationId}`).val()) {
-          $(`#${self.field.mapId}`).removeClass('mui--hide');
+      onchanged: () => {
+        if ($(`#${this.field.locationId}`).val()) {
+          $(`#${this.field.mapId}`).removeClass('mui--hide');
         }
       },
       onlocationnotfound() {
         // Ignore this event
       },
-      oninitialized() {
+      oninitialized: () => {
         // Locationpicker sets latitude and longitude field value to 0,
         // this is to empty the fields and hide the map
-        if (!$(`#${self.field.locationId}`).val()) {
-          $(`#${self.field.latitudeId}`).val('');
-          $(`#${self.field.longitudeId}`).val('');
-          $(`#${self.field.mapId}`).addClass('mui--hide');
+        if (!$(`#${this.field.locationId}`).val()) {
+          $(`#${this.field.latitudeId}`).val('');
+          $(`#${this.field.longitudeId}`).val('');
+          $(`#${this.field.mapId}`).addClass('mui--hide');
         }
       },
     });
 
     // On clicking clear, empty latitude, longitude, location fields and hide map
     $(`#${this.field.clearId}`).on('click', (event) => {
       event.preventDefault();
-      $(`#${self.field.latitudeId}`).val('');
-      $(`#${self.field.longitudeId}`).val('');
-      $(`#${self.field.locationId}`).val('');
-      $(`#${self.field.mapId}`).addClass('mui--hide');
+      $(`#${this.field.latitudeId}`).val('');
+      $(`#${this.field.longitudeId}`).val('');
+      $(`#${this.field.locationId}`).val('');
+      $(`#${this.field.mapId}`).addClass('mui--hide');
     });
   }
 

diff --git a/funnel/assets/js/utils/jsonform.js b/funnel/assets/js/utils/jsonform.js
@@ -14,7 +14,6 @@ const jsonForm = Vue.component('jsonform', {
       return JSON.stringify(obj);
     },
     activateForm() {
-      const form = this;
       const url = Form.getActionUrl(this.formid);
       const formValues = new FormData($(`#${this.formid}`)[0]);
       const onSuccess = (response) => {
@@ -32,7 +31,7 @@ const jsonForm = Vue.component('jsonform', {
             dataType: 'html',
             formData: JSON.stringify({
               csrf_token: formValues.get('csrf_token'),
-              form: form.getFormData(),
+              form: this.getFormData(),
             }),
           });
         });

diff --git a/funnel/assets/js/utils/markmap.js b/funnel/assets/js/utils/markmap.js
@@ -12,7 +12,7 @@ const MarkmapEmbed = {
   },
   async init(container) {
     const parentElement = $(container || 'body');
-    const markmapEmbed = this;
+    const self = this;
     if (
       parentElement.find('.md-embed-markmap:not(.activating, .activated)').length > 0
     ) {
@@ -34,14 +34,11 @@ const MarkmapEmbed = {
       parentElement
         .find('.md-embed-markmap:not(.activating):not(.activated)')
         .each(function embedMarkmap() {
-          const markdownDiv = this;
-          $(markdownDiv).addClass('activating');
-          $(markdownDiv).find('.embed-loading').addClass('loading');
-          const { root } = transformer.transform(
-            $(markdownDiv).find('.embed-content').text(),
-          );
-          $(markdownDiv).find('.embed-container').append('<svg></svg>');
-          const current = $(markdownDiv).find('svg')[0];
+          $(this).addClass('activating');
+          $(this).find('.embed-loading').addClass('loading');
+          const { root } = transformer.transform($(this).find('.embed-content').text());
+          $(this).find('.embed-container').append('<svg></svg>');
+          const current = $(this).find('svg')[0];
           const markmap = Markmap.create(
             current,
             {
@@ -52,10 +49,10 @@ const MarkmapEmbed = {
             },
             root,
           );
-          markmapEmbed.markmaps.push(markmap);
+          self.markmaps.push(markmap);
           $(current).data('markmap', markmap);
           observer.observe(current);
-          $(markdownDiv).addClass('activated').removeClass('activating');
+          $(this).addClass('activated').removeClass('activating');
         });
 
       window.addEventListener('resize', this.resizeMarkmapContainers.bind(this));

diff --git a/funnel/assets/js/utils/ticket_widget.js b/funnel/assets/js/utils/ticket_widget.js
@@ -42,8 +42,7 @@ const Ticketing = {
       },
 
       error(response) {
-        const ajaxLoad = this;
-        ajaxLoad.retries -= 1;
+        this.retries -= 1;
         let errorMsg;
 
         if (response.readyState === 4) {
@@ -52,7 +51,7 @@ const Ticketing = {
           );
           $(widgetElem).html(errorMsg);
         } else if (response.readyState === 0) {
-          if (ajaxLoad.retries < 0) {
+          if (this.retries < 0) {
             if (!navigator.onLine) {
               errorMsg = window.gettext('This device has no internet connection');
             } else {
@@ -64,8 +63,8 @@ const Ticketing = {
             $(widgetElem).html(errorMsg);
           } else {
             setTimeout(() => {
-              $.get(ajaxLoad);
-            }, ajaxLoad.retryInterval);
+              $.get(this);
+            }, this.retryInterval);
           }
         }
       },

diff --git a/funnel/assets/js/utils/typeform_embed.js b/funnel/assets/js/utils/typeform_embed.js
@@ -29,8 +29,7 @@ const TypeformEmbed = {
     $(containerDiv)
       .find('a')
       .each(function isTypeformUrl() {
-        const anchorTag = this;
-        const txt = $(anchorTag).attr('href');
+        const txt = $(this).attr('href');
         let urlSplit;
         let typeformId;
         let parentDiv;
@@ -40,9 +39,9 @@ const TypeformEmbed = {
           urlSplit = txt.split('/');
           typeformId = urlSplit.pop();
           typeformId = typeformId.includes('?') ? typeformId.split('?')[0] : typeformId;
-          parentDiv = $(anchorTag).parents(containerDiv);
+          parentDiv = $(this).parents(containerDiv);
           if (typeformId) {
-            self.addTypeformEmbed(typeformId, anchorTag, parentDiv, loadScript);
+            self.addTypeformEmbed(typeformId, this, parentDiv, loadScript);
           }
         }
       });

diff --git a/funnel/assets/js/utils/webshare.js b/funnel/assets/js/utils/webshare.js
@@ -17,21 +17,20 @@ const WebShare = {
 
       $('body').on('click', '.hg-link-btn', function clickWebShare(event) {
         event.preventDefault();
-        const linkElem = this;
         let url =
-          $(linkElem).data('url') ||
+          $(this).data('url') ||
           (document.querySelector('link[rel=canonical]') &&
             document.querySelector('link[rel=canonical]').href) ||
           window.location.href;
         const title = $(this).data('title') || document.title;
         const text = $(this).data('text') || '';
-        if ($(linkElem).attr('data-shortlink')) {
+        if ($(this).attr('data-shortlink')) {
           mobileShare(title, url, text);
         } else {
           Utils.fetchShortUrl(url)
             .then((shortlink) => {
               url = shortlink;
-              $(linkElem).attr('data-shortlink', true);
+              $(this).attr('data-shortlink', true);
             })
             .finally(() => {
               mobileShare(title, url, text);
@@ -41,15 +40,14 @@ const WebShare = {
     } else {
       $('body').on('click', '.js-copy-link', function clickCopyLink(event) {
         event.preventDefault();
-        const linkElem = this;
-        if ($(linkElem).attr('data-shortlink')) {
-          Utils.copyToClipboard($(linkElem).find('.js-copy-url')[0]);
+        if ($(this).attr('data-shortlink')) {
+          Utils.copyToClipboard($(this).find('.js-copy-url')[0]);
         } else {
-          Utils.fetchShortUrl($(linkElem).find('.js-copy-url').first().html())
+          Utils.fetchShortUrl($(this).find('.js-copy-url').first().html())
             .then((shortlink) => {
-              $(linkElem).find('.js-copy-url').text(shortlink);
-              $(linkElem).attr('data-shortlink', true);
-              Utils.copyToClipboard($(linkElem).find('.js-copy-url')[0]);
+              $(this).find('.js-copy-url').text(shortlink);
+              $(this).attr('data-shortlink', true);
+              Utils.copyToClipboard($(this).find('.js-copy-url')[0]);
             })
             .catch((errMsg) => {
               toastr.error(errMsg);