Update eslint and various loaders

Also fix some indentation errors thrown up by new version

Author: ArayB

package.json

@@ -71,13 +71,13 @@
     "cross-env": "^4.0.0",
     "css-loader": "^0.28.0",
     "cypress": "^3.7.0",
-    "eslint": "^3.19.0",
+    "eslint": "^4.18.2",
     "eslint-config-airbnb-base": "^11.1.3",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-import-resolver-webpack": "^0.8.1",
-    "eslint-loader": "^1.7.1",
+    "eslint-loader": "^2.0.0",
     "eslint-plugin-cypress": "^2.7.0",
-    "eslint-plugin-html": "^2.0.0",
+    "eslint-plugin-html": "^3.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.17.1",

src/dashboard/cd-dashboard-news.vue

@@ -78,7 +78,7 @@
       // },
       sortPostsByDate(posts) {
         const sortedPosts = posts.sort((a, b) =>
-         b.date - a.date);
+          b.date - a.date);
         return sortedPosts.map(post => Object.assign({
           formattedDate: post.date.utc().format('DD/MM/YYYY'),
         }, post));

src/dojos/manage-request-to-join.vue

@@ -33,9 +33,9 @@
         /* eslint-disable no-nested-ternary */
         return this.status === 'accept' && this.loaderIsVisible ?
           (this.ready ? this.userTypeString : 'Accepting the user...') :
-            (this.status === 'refuse' && this.loaderIsVisible ?
-              (this.ready ? 'The request to join your Dojo has been refused.' : 'Refusing this user from joining your Dojo...') :
-                'Invalid action, try again or contact support.');
+          (this.status === 'refuse' && this.loaderIsVisible ?
+            (this.ready ? 'The request to join your Dojo has been refused.' : 'Refusing this user from joining your Dojo...') :
+            'Invalid action, try again or contact support.');
         /* eslint-enable no-nested-ternary */
       },
       conflictUrl() {
@@ -102,7 +102,7 @@
   @brand-success: #5cb85c;
   @loader-size: 7em;
   @check-thickness: 0.5em;
-  @loader-thickness: @check-thickness/2; 
+  @loader-thickness: @check-thickness/2;
   @check-height: @loader-size/2;
   @check-width: @check-height/2;
   @check-left: (@loader-size/6 + @loader-size/12 - @check-thickness/2);
@@ -133,14 +133,14 @@
     display: none;
     &--visible {
       display: block;
-    } 
+    }
     &.draw:after {
       animation-duration: 800ms;
       animation-timing-function: ease;
       animation-name: checkmark;
       transform: scaleX(-1) rotate(135deg);
     }
-    
+
     &:after {
       opacity: 1;
       height: @check-height;

src/events/cd-event-form.vue

@@ -301,11 +301,11 @@
 
       if (eventId) {
         const event = (await EventsService.v3.load(
-        eventId, {
-          params: {
-            related: 'sessions.tickets',
-          },
-        })).body;
+          eventId, {
+            params: {
+              related: 'sessions.tickets',
+            },
+          })).body;
 
         if (!event.newForm) {
           this.$router.push(`/dashboard/dojo/${dojoId}/event-form/${eventId}`);

src/events/event-store.js

@@ -137,8 +137,8 @@ const store = new Vuex.Store({
           moment().isoWeekday() <= neededDay
             ? moment().isoWeekday(neededDay)
             : moment()
-                .add(1, 'weeks')
-                .isoWeekday(neededDay);
+              .add(1, 'weeks')
+              .isoWeekday(neededDay);
       }
 
       state.eventDate = newDate.format('YYYY-MM-DD');

src/events/order/cd-event-add-child-ticket.vue

@@ -29,10 +29,10 @@
       <p class="gender-why" v-show="genderExplaination && errors.has(`gender-${id}:required`)">{{ $t(`We want to provide activities that appeal to people regardless of their gender.`) }}<br/>{{ $t(`To check how well we are succeeding, we'd like to find out whether people of different genders are equally likely to attend.`) }}</p>
 
       <label class="cd-child-ticket__label">{{ $t('Ticket') }}</label>
-      <div class="cd-child-ticket__ticket-selector"> 
+      <div class="cd-child-ticket__ticket-selector">
         <multiselect v-model="selectedTickets" :options="childTickets" group-label="name" group-values="tickets" :multiple="true" :searchable="false" :group-select="false" :placeholder="$t('Select Event Tickets')" track-by="id" label="name" @close="onBlur" @open="onFocus" :data-vv-name="`tickets-${id}`" v-validate="'required'"></multiselect>
       </div>
-      <p class="cd-child-ticket__ticket-select-err text-danger" v-show="errors.has(`tickets-${id}:required`)">{{ $t('Ticket selection is required') }}</p>  
+      <p class="cd-child-ticket__ticket-select-err text-danger" v-show="errors.has(`tickets-${id}:required`)">{{ $t('Ticket selection is required') }}</p>
 
       <special-req-component class="cd-child-ticket__special-req-selector" v-model="notes"></special-req-component>
     </form>
@@ -96,9 +96,9 @@
       },
       async createChild() {
         return UserService.addChild(this.child)
-        .then((response) => {
-          this.userId = response.body.userId;
-        });
+          .then((response) => {
+            this.userId = response.body.userId;
+          });
       },
     },
     watch: {

src/users/cd-tickets.vue

@@ -54,7 +54,7 @@
         ));
         this.events = (events.reduce((acc, dojoEvents) =>
           acc.concat(dojoEvents.body.results), []))
-            .sort(EventUtils.orderByStartTime);
+          .sort(EventUtils.orderByStartTime);
       },
       async loadUserDojos() {
         const res = await DojosService.getUsersDojos(this.currentUser.id);

src/users/cdf-manage.vue

@@ -143,18 +143,18 @@
             this.dojos = res[1].map(resp => resp.body);
           })
           // Split this function from the promise.all : CORS errors are hard to catch
-          .then((async () => {
-            if (this.user.email) {
-              // TODO : once the forum integration is done back-end wise
-              // we can fully automate from there
-              try {
-                this.forumUser = (await ForumService.user.search(this.user.email)).body;
-              } catch (e) {
-                // You might not have the forums running in development; and that's fine
-                this.errors.add('forumUserNotFound', 'User not found');
+            .then((async () => {
+              if (this.user.email) {
+                // TODO : once the forum integration is done back-end wise
+                // we can fully automate from there
+                try {
+                  this.forumUser = (await ForumService.user.search(this.user.email)).body;
+                } catch (e) {
+                  // You might not have the forums running in development; and that's fine
+                  this.errors.add('forumUserNotFound', 'User not found');
+                }
               }
-            }
-          })());
+            })());
         } catch (e) {
           if ((e.status === 404 && e.body.message === '404 - "Invalid userId"') ||
             e.message === 'Invalid email') {