Merge pull request #699 from mpourismaiel/refactor/assets/linter

Add eslint and prettier for js files
okkur · Feb 21, 2020 · bfa6c84 · bfa6c84
2 parents 941e10a + 90b680e
commit bfa6c84
Show file tree

Hide file tree

Showing 29 changed files with 1,483 additions and 367 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+  "extends": ["airbnb", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error"]
+  },
+}
+
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
+}
diff --git a/assets/js/collapse.js b/assets/js/collapse.js
@@ -3,7 +3,7 @@ import $ from './helpers/jq-helpers';
 const collapse = $('[data-toggle="collapse"]');
 const addCollapse = $('[data-toggle="collapse"][data-add-collapse]');
 
-addCollapse.$nodes.forEach(collapsible => {
+addCollapse.$nodes.forEach((collapsible) => {
   const target = $(collapsible.dataset.target);
 
   if (target && target[0].children.length) {
@@ -12,9 +12,9 @@ addCollapse.$nodes.forEach(collapsible => {
   }
 });
 
-collapse.on('click', function (e) {
+collapse.on('click', function(e) {
   if (e.target.tagName === 'A') {
-    return
+    return;
   }
   const target = $(this).attr('data-target');
 
@@ -25,13 +25,13 @@ collapse.on('click', function (e) {
   }
 });
 
-const hideCollapse = function (el, target) {
+const hideCollapse = function(el, target) {
   $(el).attr('aria-expanded', 'false');
   $(el).addClass('collapsed');
   $(target).removeClass('show');
 };
 
-const showCollapse = function (el, target) {
+const showCollapse = function(el, target) {
   $(el).attr('aria-expanded', 'true');
   $(el).removeClass('collapsed');
   $(target).addClass('show');

diff --git a/assets/js/contact.js b/assets/js/contact.js
@@ -10,62 +10,79 @@ import Validator from 'form-validator-simple';
 const validatorConfig = {
   errorTemplate: '<span class="help-block form-error">%s</span>',
   onFormValidate: (isFormValid, form) => {
-    form.querySelector('button.submit-btn').disabled = !isFormValid
+    form.querySelector('button.submit-btn').disabled = !isFormValid;
   },
   onError: function(e, form) {
-    $(`form[id=${form.getAttribute('id')}] .generic-error`).removeClass('d-none');
+    $(`form[id=${form.getAttribute('id')}] .generic-error`).removeClass(
+      'd-none',
+    );
   },
   onSuccess: function(e, form) {
     if (form.dataset.hasNetlify || form.dataset.hasFormspree) {
       return;
     }
 
-    e.preventDefault()
-    const id = form.getAttribute('id')
-    const $form = $(`form[id=${id}]`)
-    const action = $form.attr('action')
-    const genericSuccess = $form.$('.generic-success')
-    const genericError = $form.$('.generic-error')
-    genericSuccess.addClass('hidden')
-    genericError.addClass('d-none')
-    $form.removeClass('error').removeClass('success')
+    e.preventDefault();
+    const id = form.getAttribute('id');
+    const $form = $(`form[id=${id}]`);
+    const action = $form.attr('action');
+    const genericSuccess = $form.$('.generic-success');
+    const genericError = $form.$('.generic-error');
+    genericSuccess.addClass('hidden');
+    genericError.addClass('d-none');
+    $form.removeClass('error').removeClass('success');
 
-    const serializedForm = $(`#${id}`).serialize()
-    if (typeof grecaptcha !== "undefined" && grecaptcha.getResponse() === "") {
-      grecaptcha.execute()
-      return false
+    const serializedForm = $(`#${id}`).serialize();
+    if (typeof grecaptcha !== 'undefined' && grecaptcha.getResponse() === '') {
+      grecaptcha.execute();
+      return false;
     }
 
-    $form.$('button.submit-btn').attr('disabled', true).addClass('disabled')
+    $form
+      .$('button.submit-btn')
+      .attr('disabled', true)
+      .addClass('disabled');
     $.post(action, serializedForm, {
       contentType: 'application/x-www-form-urlencoded',
     })
       .then(() => {
-        genericSuccess.removeClass('hidden')
-        $form.addClass('success')
-        $form.$('button.submit-btn').removeAttr('disabled').removeClass('disabled')
+        genericSuccess.removeClass('hidden');
+        $form.addClass('success');
+        $form
+          .$('button.submit-btn')
+          .removeAttr('disabled')
+          .removeClass('disabled');
       })
       .catch(() => {
-        genericError.removeClass('d-none')
-        $form.addClass('error')
-        $form.$('button.submit-btn').removeAttr('disabled').removeClass('disabled')
+        genericError.removeClass('d-none');
+        $form.addClass('error');
+        $form
+          .$('button.submit-btn')
+          .removeAttr('disabled')
+          .removeClass('disabled');
       });
 
     return false;
-  }
+  },
 };
 
-document.querySelectorAll('form.contact')
-  .forEach((form ) => {
-    new Validator(Object.assign(validatorConfig, { form }))
-    $(form).$('#generic-success [data-action="return-form"]').on('click', () => {
-      $(form).$('#generic-success').addClass('hidden');
+document.querySelectorAll('form.contact').forEach((form) => {
+  new Validator(Object.assign(validatorConfig, { form }));
+  $(form)
+    .$('#generic-success [data-action="return-form"]')
+    .on('click', () => {
+      $(form)
+        .$('#generic-success')
+        .addClass('hidden');
       $(form).removeClass('success');
     });
-  })
+});
 
 function checkReCaptcha() {
-  if (document.querySelector('.g-recaptcha-container') && typeof grecaptcha === "undefined") {
+  if (
+    document.querySelector('.g-recaptcha-container') &&
+    typeof grecaptcha === 'undefined'
+  ) {
     $('.captcha-error').removeClass('d-none');
     setTimeout(checkReCaptcha, 200);
   } else {
@@ -78,17 +95,25 @@ function checkReCaptcha() {
 window.onContactCaptcha = function($form) {
   var customEvent = document.createEvent('Event');
   customEvent.initEvent('submit', true, true);
-  document.querySelector('form.contact').dispatchEvent(customEvent)
-}
+  document.querySelector('form.contact').dispatchEvent(customEvent);
+};
 
-window.syna.stream.subscribe('contact:update', function({ name, email, phone, message }) {
+window.syna.stream.subscribe('contact:update', function({
+  name,
+  email,
+  phone,
+  message,
+}) {
   const form = $('form.contact');
-  form.$('input[name=name]').attr('value', name || null)[0].focus();
+  form
+    .$('input[name=name]')
+    .attr('value', name || null)[0]
+    .focus();
   // TODO: REVISIT: Remove the following line whenever firefox fixes center on focus
-  form[0].scrollIntoView({behavior: "instant", block: "center"});
+  form[0].scrollIntoView({ behavior: 'instant', block: 'center' });
   form.$('input[name=email]').attr('value', email || null);
   form.$('input[name=phone]').attr('value', phone || null);
-  form.$('textarea[name=message]').$nodes.forEach(node => {
+  form.$('textarea[name=message]').$nodes.forEach((node) => {
     node.innerHTML = '';
     node.appendChild(document.createTextNode(message || ''));
   });

diff --git a/assets/js/editor.js b/assets/js/editor.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import ReactJsonschemaForm from 'react-jsonschema-form';
 
-(window.synaPortals || (window.synaPortals = {})).editors = (window.editors || []).map(editor => {
+(window.synaPortals || (window.synaPortals = {})).editors = (
+  window.editors || []
+).map((editor) => {
   return {
     component: class Editor extends React.PureComponent {
       render() {

diff --git a/assets/js/graph.js b/assets/js/graph.js
@@ -2,13 +2,20 @@ import Chart from 'chart.js';
 import $ from './helpers/jq-helpers';
 
 const graphs = window.syna.api.getScope('graph');
-Object.keys(graphs).forEach(key => {
+Object.keys(graphs).forEach((key) => {
   const config = graphs[key];
-  window.syna.api.register('graphCharts', 'graphCharts-' + key, new Chart($(config.selector), {
-    type: config.config.type || 'line',
-    options: Object.assign({
-      maintainAspectRatio: false,
-    }, (config.config || {}).options),
-    data: (config.config || {}).data,
-  }));
+  window.syna.api.register(
+    'graphCharts',
+    'graphCharts-' + key,
+    new Chart($(config.selector), {
+      type: config.config.type || 'line',
+      options: Object.assign(
+        {
+          maintainAspectRatio: false,
+        },
+        (config.config || {}).options,
+      ),
+      data: (config.config || {}).data,
+    }),
+  );
 });
diff --git a/assets/js/head.js b/assets/js/head.js
@@ -17,7 +17,7 @@ class Stream {
     this._updateActiveEvent = this._updateActiveEvent.bind(this);
   }
 
-  subscribe (topic, func) {
+  subscribe(topic, func) {
     if (!this._topics[topic]) {
       this._topics[topic] = [];
     }
@@ -36,15 +36,14 @@ class Stream {
     }
     setTimeout(() => {
       const subscribers = this._topics[topic];
-      const args = typeof argsText === 'object' ? 
-        argsText :
-        argsText
-          .split(',')
-          .reduce((tmp, param) => {
-            const [key, value] = param.split(':');
-            tmp[key] = value;
-            return tmp;
-          }, {});
+      const args =
+        typeof argsText === 'object'
+          ? argsText
+          : argsText.split(',').reduce((tmp, param) => {
+              const [key, value] = param.split(':');
+              tmp[key] = value;
+              return tmp;
+            }, {});
 
       let len = subscribers ? subscribers.length : 0;
       while (len--) {
@@ -95,19 +94,17 @@ class Stream {
 
   _translateUrlQuery(url) {
     const query = url.slice(url.indexOf('?') + 1) || '';
-    return query
-      .split('&')
-      .reduce((tmp, pair) => {
-        const [key, value] = pair.split('=')
-        tmp[decodeURIComponent(key)] = decodeURIComponent(value);
-        return tmp;
-      }, {});
+    return query.split('&').reduce((tmp, pair) => {
+      const [key, value] = pair.split('=');
+      tmp[decodeURIComponent(key)] = decodeURIComponent(value);
+      return tmp;
+    }, {});
   }
 }
 
 class SynaAPI {
   constructor() {
-    this._registry = {}
+    this._registry = {};
     this.register = this.register.bind(this);
     this.update = this.update.bind(this);
     this.get = this.get.bind(this);
@@ -137,7 +134,7 @@ class SynaAPI {
       return null;
     }
 
-    return this._registry[scope][id]
+    return this._registry[scope][id];
   }
 
   getScope(scope) {

diff --git a/assets/js/helpers/bootstrap-helper.js b/assets/js/helpers/bootstrap-helper.js
@@ -11,16 +11,16 @@ function toggleMenu(node) {
 }
 
 function closeMenus() {
-  Array.from(dropdowns || []).forEach(node => {
+  Array.from(dropdowns || []).forEach((node) => {
     node.querySelector('.dropdown-toggle').classList.remove('dropdown-open');
     node.classList.remove('open');
-  })
+  });
 }
 
 function closeMenusOnResize() {
   if (document.body.clientWidth >= 768) {
     closeMenus();
-    Array.from(collapse || []).forEach(node => node.classList.remove('in'));
+    Array.from(collapse || []).forEach((node) => node.classList.remove('in'));
   }
 }
 
@@ -36,5 +36,9 @@ function toggleDropdown() {
 }
 
 window.addEventListener('resize', closeMenusOnResize, false);
-Array.from(dropdowns || []).forEach(node => node.addEventListener('click', toggleDropdown))
-Array.from(toggle || []).forEach(node => node.addEventListener('click', e => toggleMenu(node), false));
+Array.from(dropdowns || []).forEach((node) =>
+  node.addEventListener('click', toggleDropdown),
+);
+Array.from(toggle || []).forEach((node) =>
+  node.addEventListener('click', (e) => toggleMenu(node), false),
+);