refactor: Add linters, move to yarn, fix code. (#190)

* refactor: Add linters, move to yarn, fix code.
* fix: Allow param reassignments on props.

Author: yammesicka

.eslintrc.js

@@ -1,20 +1,16 @@
 module.exports = {
   env: {
     browser: true,
-    es6: true,
-    jquery: true,
+    es2021: true,
   },
   extends: [
     'airbnb-base',
   ],
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
-  },
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 12,
+    sourceType: 'module',
   },
   rules: {
-    "no-param-reassign": [2, { "props": false }]
+    'no-param-reassign': [2, { props: false }],
   },
 };

lms/extractors/base.py

@@ -1,11 +1,7 @@
 from dataclasses import dataclass
 import re
-from re import IGNORECASE
 import string
-from typing import (
-    Any, ClassVar, Iterator, List,
-    Pattern, Sequence, Tuple, Union, cast,
-)
+from typing import Any, Iterator, List, Sequence, Tuple, Union, cast
 
 from werkzeug.datastructures import FileStorage
 
@@ -23,7 +19,7 @@ class File:
 
 
 class Extractor:
-    UPLOAD_TITLE: ClassVar[Pattern] = re.compile(r'Upload\s+(\d+)', IGNORECASE)
+    UPLOAD_TITLE = re.compile(r'Upload\s+(\d+)', re.IGNORECASE)
 
     def __init__(self, to_extract: FileStorage):
         self.to_extract = to_extract

lms/lmsweb/views.py

@@ -557,7 +557,7 @@ class AdminCommentTextView(AdminModelView):
     webapp,
     name='LMS',
     template_mode='bootstrap3',
-    index_view=MyAdminIndexView(),
+    index_view=MyAdminIndexView(),  # NOQA
 )
 
 for m in ALL_MODELS:

lms/static/comments.js

@@ -2,7 +2,6 @@ const DEFAULT_COMMENTED_LINE_COLOR = '#fab3b0';
 const FLAKE_COMMENTED_LINE_COLOR = '#fac4c3';
 const HOVER_LINE_STYLE = '1px solid #0d0d0f';
 
-
 function markLine(target, color) {
   if (target.dataset && target.dataset.marked === 'true') { return; }
   if (target.dataset && target.dataset.vimbackground === 'true') { return; }
@@ -12,11 +11,13 @@ function markLine(target, color) {
 function hoverLine(targets, hover) {
   const [lineTarget, addCommentTarget] = targets;
   if (lineTarget.dataset && lineTarget.dataset.vimbackground === 'true') { return; }
-  let parsedColor = (
-    (hover === true) ? HOVER_LINE_STYLE :
-      (hover === false ? 'none' : hover)
-  )
-  let commentOpacity = (hover === true) ? '1' : '0';
+  const commentOpacity = (hover === true) ? '1' : '0';
+  let parsedColor = hover;
+  if (hover === true) {
+    parsedColor = HOVER_LINE_STYLE;
+  } else if (hover === false) {
+    parsedColor = 'none';
+  }
   lineTarget.style.border = parsedColor;
   addCommentTarget.style.opacity = commentOpacity;
 }
@@ -27,8 +28,7 @@ function isUserGrader() {
 }
 
 function formatCommentData(commentData) {
-  let changedCommentText = commentData.text;
-  changedCommentText = `<span class="comment-author">${commentData.author_name}:</span> ${commentData.text}`
+  let changedCommentText = `<span class="comment-author">${commentData.author_name}:</span> ${commentData.text}`;
   if (isUserGrader()) {
     const deleteButton = `<i class="fa fa-trash grader-delete" aria-hidden="true" data-commentid="${commentData.id}" onclick="deleteComment(${window.fileId}, ${commentData.id});"></i>`;
     changedCommentText = `${deleteButton} ${changedCommentText}`;
@@ -56,7 +56,7 @@ function addCommentToLine(line, commentData) {
     $(commentElement).popover();
   }
   if (commentData.is_auto) {
-      markLine(commentElement[0], FLAKE_COMMENTED_LINE_COLOR);
+    markLine(commentElement[0], FLAKE_COMMENTED_LINE_COLOR);
   } else {
     markLine(commentElement[0], DEFAULT_COMMENTED_LINE_COLOR);
     commentElement[0].dataset.marked = true;
@@ -73,7 +73,6 @@ function treatComments(comments) {
   });
 }
 
-
 function pullComments(fileId, callback) {
   const url = `/comments?act=fetch&fileId=${fileId}`;
   const xhr = new XMLHttpRequest();
@@ -88,15 +87,15 @@ function pullComments(fileId, callback) {
   xhr.send('');
 }
 
-
 function updateOpenedSpans(currentSpans, line) {
   /* Because we have each line wrapped in it's own span, we must close
    * all the opened spans in this specific line and re-open them in the next
    * line. This function help us to manage the state of open span tags.
    */
   let isCatching = false;
   let phrase = '';
-  for (const c of line) {
+  for (let i = 0; i < line.length; i += 1) {
+    const c = line.length[i];
     if (c === '>') {
       isCatching = false;
       phrase = `<${phrase}>`;
@@ -114,9 +113,8 @@ function updateOpenedSpans(currentSpans, line) {
   }
 }
 
-
 function addLineSpansToPre(items) {
-  let openSpans = [];
+  const openSpans = [];
   Array.from(items).forEach((item) => {
     const code = item.innerHTML.trim().split('\n');
     item.innerHTML = code.map(
@@ -126,13 +124,12 @@ function addLineSpansToPre(items) {
         lineContent += '</span>'.repeat(openSpans.length);
         const wrappedLine = `<span data-line="${i + 1}" class="line">${lineContent}</span>`;
         return wrappedLine;
-      }
+      },
     ).join('\n');
   });
   window.dispatchEvent(new Event('lines-numbered'));
 }
 
-
 window.markLink = markLine;
 window.hoverLine = hoverLine;
 window.addCommentToLine = addCommentToLine;

lms/static/grader.js

@@ -22,7 +22,6 @@ function trackFinished(exerciseId, solutionId, element) {
   });
 }
 
-
 function sendComment(kind, fileId, line, commentData) {
   const xhr = new XMLHttpRequest();
   xhr.open('POST', '/comments');
@@ -56,15 +55,14 @@ function visuallyRemoveComment(commentId) {
   const hr = commentElement.nextElementSibling || commentElement.previousElementSibling;
   if (hr === null) {
     lineElement.dataset.marked = false;
-    window.markLine(lineElement, "none");
+    window.markLine(lineElement, 'none');
     $(lineElement).popover('dispose');
   } else {
     hr.parentNode.removeChild(hr);
     commentElement.parentNode.removeChild(commentElement);
   }
 }
 
-
 function deleteComment(fileId, commentId) {
   const xhr = new XMLHttpRequest();
   const url = `/comments?act=delete&fileId=${fileId}&commentId=${commentId}`;
@@ -88,12 +86,10 @@ function sendNewComment(...commentData) {
   return sendComment('text', ...commentData);
 }
 
-
 function sendExistsComment(...commentData) {
   return sendComment('id', ...commentData);
 }
 
-
 function trackDragAreas(lineItems, addCommentItems) {
   function findElementsToMark(e) {
     const span = (e.target.nodeType === 3) ? e.target.parentNode : e.target;
@@ -141,7 +137,6 @@ function trackDragAreas(lineItems, addCommentItems) {
   });
 }
 
-
 function trackDraggables(elements) {
   Array.from(elements).forEach((item) => {
     item.addEventListener('dragstart', (e) => {
@@ -150,28 +145,25 @@ function trackDraggables(elements) {
   });
 }
 
-
 function focusTextArea(lineNumber) {
   const target = document.querySelector(`textarea[data-line='${lineNumber}']`);
-  target.focus({preventScroll: true});
+  target.focus({ preventScroll: true });
 }
 
-
 function trackTextArea(lineNumber) {
   const target = `textarea[data-line='${lineNumber}']`;
   const popoverElement = `.grader-add[data-line='${lineNumber}']`;
   $(target).keydown((ev) => {
-    if ((ev.which == 10 || ev.which == 13) && ev.ctrlKey) {  // CTRL + ENTER
+    if ((ev.which === 10 || ev.which === 13) && ev.ctrlKey) { // CTRL + ENTER
       sendNewComment(window.fileId, lineNumber, ev.target.value);
       $(popoverElement).popover('hide');
-    } else if (ev.key == 'Escape') {
+    } else if (ev.key === 'Escape') {
       ev.preventDefault();
       $(popoverElement).popover('hide');
     }
   });
 }
 
-
 function registerNewCommentPopover(element) {
   const lineNumber = element.dataset.line;
   const addCommentString = 'הערה חדשה לשורה';
@@ -187,7 +179,6 @@ function registerNewCommentPopover(element) {
   });
 }
 
-
 function addNewCommentButtons(elements) {
   Array.from(elements).forEach((item) => {
     const newNode = document.createElement('span');
@@ -200,7 +191,6 @@ function addNewCommentButtons(elements) {
   $('[data-toggle=popover]').popover();
 }
 
-
 window.deleteComment = deleteComment;
 window.sendExistsComment = sendExistsComment;
 window.addEventListener('lines-numbered', () => {