Upgrade eslint and introduce typescript parser

.dockerignore

@@ -16,8 +16,6 @@
 
 # Assets and static files
 funnel/static/build
-funnel/static/service-worker.js
-funnel/static/service-worker.js.map
 funnel/static/img/fa5-packed.svg
 **/node_modules
 **/*.packed.css

.editorconfig

@@ -3,42 +3,24 @@ root = True
 
 # For all files
 [*]
-end_of_line = lf
-insert_final_newline = true
-tab_width = 8
-
-# For all code, config and documentation
-[*.{js,py,jinja2,j2,html,xml,css,sass,scss,json,yml,yaml,md,rst}]
 charset = utf-8
+end_of_line = lf
+indent_size = 2
 indent_style = space
+insert_final_newline = true
 max_line_length = 88
+tab_width = 8
+trim_trailing_whitespace = true
 
 # Python code
 [*.py]
-indent_style = space
 indent_size = 4
-trim_trailing_whitespace = true
-
-# JavaScript and HTML/CSS
-[*.{js,js.jinja2,html.jinja2,xml.jinja2,j2,html,xml,css,sass,scss}]
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
 
 # Makefile
 [Makefile]
 indent_style = tab
 indent_size = tab
-trim_trailing_whitespace = true
 
-# Config
-[*.{json,toml,yml,yaml}]
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-
-# Documentation
-[*.{md,rst,md.jinja2}]
-indent_style = space
-indent_size = 4
+# Markdown
+[*.{md,md.jinja2}]
 trim_trailing_whitespace = false

.eslintrc.js

@@ -1,21 +1,37 @@
-const OFF = 0;
-const WARN = 1;
-const ERROR = 2;
 module.exports = {
-  parser: 'babel-eslint',
+  root: true,
+  parser: '@typescript-eslint/parser',
+  ignorePatterns: [
+    'build/*',
+    'funnel/static/build/*',
+    'funnel/static/gen/*',
+    'funnel/static/js/libs/*',
+    'funnel/static/js/*.packed.js',
+  ],
   env: {
     browser: true,
     es6: true,
     jquery: true,
+    node: true,
   },
-  extends: ['airbnb-base', 'plugin:prettier/recommended', 'plugin:cypress/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'plugin:cypress/recommended',
+    'plugin:@typescript-eslint/strict',
+    'plugin:@typescript-eslint/stylistic',
+  ],
+  plugins: ['@typescript-eslint'],
   rules: {
-    'no-console': WARN,
-    'prefer-arrow-callback': [ERROR, { allowNamedFunctions: true }],
-    'prefer-const': WARN,
-    'new-cap': WARN,
-    'no-param-reassign': [ERROR, { props: false }],
+    'no-console': 'warn',
+    'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
+    'prefer-const': 'warn',
+    'new-cap': 'warn',
+    'no-param-reassign': ['error', { props: false }],
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? ERROR : OFF,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'cypress/no-unnecessary-waiting': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
   },
 };

.gitignore

@@ -23,8 +23,6 @@ monkeytype.sqlite3
 # Assets and static files
 funnel/static/build
 funnel/static/gen
-funnel/static/service-worker.js
-funnel/static/service-worker.js.map
 funnel/static/img/fa5-packed.svg
 node_modules
 *.packed.css

cypress.config.js

@@ -16,7 +16,9 @@ module.exports = defineConfig({
     supportFile: 'tests/cypress/support.js',
   },
   component: {
-    setupNodeEvents(on, config) {},
+    setupNodeEvents() {
+      /* Do nothing */
+    },
     specPattern: 'tests/cypress/component/**/*.cy.{js,jsx,ts,tsx}',
   },
 });

funnel/assets/js/account_form.js

@@ -143,10 +143,9 @@ window.Hasgeek.Accountform = ({
     });
 
     $(usernameField).on('keydown', function handleUsernameEntry() {
-      const usernamefield = this;
       if (typingTimerUsername) clearTimeout(typingTimerUsername);
       typingTimerUsername = setTimeout(() => {
-        checkUsernameAvailability(usernamefield);
+        checkUsernameAvailability(this);
       }, typingWaitInterval);
     });
   }
@@ -157,10 +156,9 @@ window.Hasgeek.Accountform = ({
     });
 
     $(passwordField).on('keydown', function handlePasswordEntry() {
-      const field = this;
       if (typingTimer) clearTimeout(typingTimer);
       typingTimer = setTimeout(() => {
-        checkPasswordStrength(field);
+        checkPasswordStrength(this);
       }, typingWaitInterval);
     });
 

funnel/assets/js/account_saved.js

@@ -1,11 +1,11 @@
-import SaveProject from './utils/bookmark';
+import saveProject from './utils/bookmark';
 
 $(() => {
   $('.js-save-form').each(function saveProjectButton() {
     const projectSaveConfig = {
       formId: $(this).attr('id'),
       postUrl: $(this).attr('action'),
     };
-    SaveProject(projectSaveConfig);
+    saveProject(projectSaveConfig);
   });
 });

funnel/assets/js/app.js

@@ -33,7 +33,7 @@ $(() => {
       'Unable to connect. Check connection and refresh the page',
     ),
     rateLimitError: window.gettext('This is unusually high activity. Try again later'),
-    error: window.gettext('An error occured when submitting the form'),
+    error: window.gettext('An error occurred when submitting the form'),
   };
 
   Utils.collapse();

funnel/assets/js/event.js

@@ -16,73 +16,56 @@ const Store = {
 class Queue {
   constructor(queueName) {
     this.queueName = queueName;
+  }
 
-    // Adds a ticketParticipantId to queue
-    this.enqueue = function enqueue(ticketParticipantId) {
-      const ticketParticipantList = Store.read(this.queueName) || [];
-      if (ticketParticipantList.indexOf(ticketParticipantId) === -1) {
-        ticketParticipantList.push(ticketParticipantId);
-        return Store.add(this.queueName, ticketParticipantList);
-      }
-      return false;
-    };
+  // Adds a ticketParticipantId to queue
+  enqueue(ticketParticipantId) {
+    const ticketParticipantList = Store.read(this.queueName) || [];
+    if (ticketParticipantList.indexOf(ticketParticipantId) === -1) {
+      ticketParticipantList.push(ticketParticipantId);
+      return Store.add(this.queueName, ticketParticipantList);
+    }
+    return false;
+  }
 
-    // Reads and returns all items from queue
-    // Returns undefined when queue is empty or not defined
-    this.readAll = function readAll() {
-      const ticketParticipantList = Store.read(this.queueName);
-      if (ticketParticipantList && ticketParticipantList.length) {
-        return ticketParticipantList;
-      }
-      return false;
-    };
+  // Reads and returns all items from queue
+  // Returns undefined when queue is empty or not defined
+  readAll() {
+    const ticketParticipantList = Store.read(this.queueName);
+    if (ticketParticipantList && ticketParticipantList.length) {
+      return ticketParticipantList;
+    }
+    return false;
+  }
 
-    // Removes item from queue and returns true
-    // Returns undefined when item not present in queue
-    this.dequeue = function dequeue(ticketParticipantId) {
-      const ticketParticipantList = Store.read(this.queueName);
-      const index = ticketParticipantList
-        ? ticketParticipantList.indexOf(ticketParticipantId)
-        : -1;
-      if (index !== -1) {
-        // Remove item from queue and add updated queue to localStorage
-        ticketParticipantList.splice(index, 1);
-        Store.add(this.queueName, ticketParticipantList);
-        return ticketParticipantId;
-      }
-      return false;
-    };
+  // Removes item from queue and returns true
+  // Returns undefined when item not present in queue
+  dequeue(ticketParticipantId) {
+    const ticketParticipantList = Store.read(this.queueName);
+    const index = ticketParticipantList
+      ? ticketParticipantList.indexOf(ticketParticipantId)
+      : -1;
+    if (index !== -1) {
+      // Remove item from queue and add updated queue to localStorage
+      ticketParticipantList.splice(index, 1);
+      Store.add(this.queueName, ticketParticipantList);
+      return ticketParticipantId;
+    }
+    return false;
+  }
 
-    /* updateQueue: If participant in "checkin-queue" has already been checked-in
+  /* updateQueue: If participant in "checkin-queue" has already been checked-in
     then it is removed from checkin queue */
-    this.updateQueue = function updateQueue(
-      participantsHashMap,
-      ticketParticipantList,
-    ) {
-      const queue = this;
-      const ticketParticipantIds = queue.readAll();
-      const ticketParticipants = ticketParticipantList.get('ticket_participants');
-      if (ticketParticipantIds) {
-        ticketParticipantIds.forEach((ticketParticipantId) => {
-          if (queue.queueName.indexOf('cancelcheckin-queue') > -1) {
-            if (!participantsHashMap[ticketParticipantId].checked_in) {
-              /* Participant's check-in has already been cancelled so remove
+  updateQueue(participantsHashMap, ticketParticipantList) {
+    const ticketParticipantIds = this.readAll();
+    const ticketParticipants = ticketParticipantList.get('ticket_participants');
+    if (ticketParticipantIds) {
+      ticketParticipantIds.forEach((ticketParticipantId) => {
+        if (this.queueName.indexOf('cancelcheckin-queue') > -1) {
+          if (!participantsHashMap[ticketParticipantId].checked_in) {
+            /* Participant's check-in has already been cancelled so remove
               from 'cancelcheckin-queue' */
-              queue.dequeue(ticketParticipantId);
-            } else {
-              const index = Utils.findLoopIndex(
-                ticketParticipants,
-                'puuid_b58',
-                ticketParticipantId,
-              );
-              ticketParticipantList.set(
-                `ticket_participants.${index}.submitting`,
-                true,
-              );
-            }
-          } else if (participantsHashMap[ticketParticipantId].checked_in) {
-            // Participant has been checked-in so remove from 'checkin-queue'
-            queue.dequeue(ticketParticipantId);
+            this.dequeue(ticketParticipantId);
           } else {
             const index = Utils.findLoopIndex(
               ticketParticipants,
@@ -91,9 +74,19 @@ class Queue {
             );
             ticketParticipantList.set(`ticket_participants.${index}.submitting`, true);
           }
-        });
-      }
-    };
+        } else if (participantsHashMap[ticketParticipantId].checked_in) {
+          // Participant has been checked-in so remove from 'checkin-queue'
+          this.dequeue(ticketParticipantId);
+        } else {
+          const index = Utils.findLoopIndex(
+            ticketParticipants,
+            'puuid_b58',
+            ticketParticipantId,
+          );
+          ticketParticipantList.set(`ticket_participants.${index}.submitting`, true);
+        }
+      });
+    }
   }
 }
 

funnel/assets/js/index.js

@@ -1,4 +1,4 @@
-import SaveProject from './utils/bookmark';
+import saveProject from './utils/bookmark';
 import 'htmx.org';
 import initEmbed from './utils/initembed';
 import Ticketing from './utils/ticket_widget';
@@ -18,7 +18,7 @@ $(() => {
         formId: $(this).attr('id'),
         postUrl: $(this).attr('action'),
       };
-      SaveProject(projectSaveConfig);
+      saveProject(projectSaveConfig);
     });
     initEmbed(markdownContainer);
 

funnel/assets/js/membership.js

@@ -63,20 +63,17 @@ const Membership = {
           event.preventDefault();
           if (this.isUserProfileAdmin) {
             this.activeMember = member;
-            const app = this;
             const response = await fetch(url, {
-              headers: {
-                Accept: 'application/json',
-              },
+              headers: { Accept: 'application/json' },
             }).catch(() => {
               toastr.error(window.Hasgeek.Config.errorMsg.networkError);
             });
             if (response && response.ok) {
               const data = await response.json();
               if (data) {
                 const vueFormHtml = data.form;
-                app.memberForm = vueFormHtml.replace(/\bscript\b/g, 'script2');
-                app.errorMsg = '';
+                this.memberForm = vueFormHtml.replace(/\bscript\b/g, 'script2');
+                this.errorMsg = '';
                 $('#member-form').modal('show');
               }
             } else {

funnel/assets/js/notification_list.js

@@ -111,12 +111,11 @@ const Notification = {
           }
         },
         notificationInViewport(entries) {
-          const app = this;
           entries.forEach((entry) => {
             if (entry.isIntersecting) {
               $(entry.target).attr('data-visible-time', entry.time);
               window.setTimeout(() => {
-                app.updateReadStatus(entry.target);
+                this.updateReadStatus(entry.target);
               }, READ_RECEIPT_TIMEOUT);
             } else {
               $(entry.target).attr('data-visible-time', '');
@@ -132,18 +131,17 @@ const Notification = {
         }, REFRESH_INTERVAL);
       },
       updated() {
-        const app = this;
         $.each($('.update--unread'), (index, elem) => {
-          app.notificationInViewport = app.notificationInViewport.bind(app);
+          this.notificationInViewport = this.notificationInViewport.bind(this);
           const notificationObserver = new IntersectionObserver(
-            app.notificationInViewport,
+            this.notificationInViewport,
             {
               rootMargin: '0px',
               threshold: 0,
             },
           );
           notificationObserver.observe(elem);
-          const notificationItem = app.notifications[$(elem).attr('data-index')];
+          const notificationItem = this.notifications[$(elem).attr('data-index')];
           notificationItem.observer = notificationObserver;
         });
       },