Cleanup with new eslint rules

Author: chiefmikey

client/app.js

@@ -1,6 +1,6 @@
 import Koa from 'koa';
-import path from 'node:path';
 import serve from 'koa-static';
+import path from 'node:path';
 
 const port = 3004;
 

client/routes/index.js

@@ -1,8 +1,8 @@
 import allNames from './helpers/names.js';
-import auth from './requests/token.js';
+import getSize from './helpers/size.js';
 import getLanguages from './requests/languages.js';
 import getRepos from './requests/repos.js';
-import getSize from './helpers/size.js';
+import auth from './requests/token.js';
 
 const langs = async (owner) => {
   try {

client/routes/requests/token.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+
 import environment from '../../environment.js';
 
 let token;

client/src/components/App.svelte

@@ -1,10 +1,12 @@
 <script>
   import { onMount } from 'svelte';
-  import Styles from './Styles.svelte';
-  import Progress from './Progress.svelte';
+
+  import langs from '../../routes/index.js';
+
   import Card from './Card.svelte';
+  import Progress from './Progress.svelte';
   import ScrollTop from './ScrollTop.svelte';
-  import langs from '../../routes/index.js';
+  import Styles from './Styles.svelte';
 
   let owner = '';
   let currentOwner = '';
@@ -55,7 +57,7 @@
         if (allData.names) {
           repoCount = allData.names.length;
         }
-        // eslint-disable-next-line unicorn/explicit-length-check
+
         if (allData.space) {
           const keys = Object.keys(allData.space);
           langCount = keys.length;
@@ -112,8 +114,8 @@
       <table>
         <tbody id="tbody">
           {#if data.length > 0}
-            {#each data as d, i}
-              <Progress {d} {i} {langCount} {isDone} />
+            {#each data as dat, index}
+              <Progress {dat} {index} {langCount} {isDone} />
             {/each}
           {:else}
             <h4>User Not Found</h4>

client/src/components/Progress.svelte

@@ -2,13 +2,13 @@
   import { cubicInOut } from 'svelte/easing';
   import { tweened } from 'svelte/motion';
 
-  export let d;
-  export let i;
+  export let dat;
+  export let index;
   export let langCount;
   export let isDone;
 
-  const finalPercent = Number((d.percent * 100).toFixed(2));
-  const speed = (i / 8) * 1000 + 222;
+  const finalPercent = Number((dat.percent * 100).toFixed(2));
+  const speed = (index / 8) * 1000 + 222;
 
   const progress = tweened(0, {
     duration: 1400,
@@ -27,44 +27,44 @@
     return perc;
   };
 
-  setTimeout(() => ($progress = setProgress(d.percent)), speed);
+  setTimeout(() => ($progress = setProgress(dat.percent)), speed);
   setTimeout(() => {
     $progress2 = finalPercent;
-    if (i === langCount - 1) {
+    if (index === langCount - 1) {
       isDone();
     }
   }, speed);
   setTimeout(() => {
-    const prog = document.getElementById(`bar${i}`);
-    const info = document.getElementsByClassName(`info${i}`);
+    const prog = document.querySelector(`#bar${index}`);
+    const info = document.querySelector(`.info${index}`);
     prog.style.setProperty(
       '--c',
-      `rgb(${255 - (255 / langCount) * i}, ${
-        160 - (160 / langCount) * i
+      `rgb(${255 - (255 / langCount) * index}, ${
+        160 - (160 / langCount) * index
       }, ${203})`,
     );
 
-    info[0].style.color = `rgb(${275 - (225 / langCount) * i}, ${
-      275 - (225 / langCount) * i
-    }, ${275 - (225 / langCount) * i})`;
+    info[0].style.color = `rgb(${275 - (225 / langCount) * index}, ${
+      275 - (225 / langCount) * index
+    }, ${275 - (225 / langCount) * index})`;
   }, 0);
 </script>
 
 <template>
   <tr
-    id="row{i}"
-    style="animation: fadeInHeight .5s ease-out {i / 8}s forwards;"
+    id="row{index}"
+    style="animation: fadeInHeight .5s ease-out {index / 8}s forwards;"
   >
-    <div class="info info{i}">
+    <div class="info info{index}">
       <td class="name">
-        <span>{d.name}</span>
+        <span>{dat.name}</span>
       </td>
       <td class="percent">
         <span>{$progress2.toFixed(2)}%</span>
       </td>
     </div>
     <td class="bar">
-      <progress id="bar{i}" value={$progress} />
+      <progress id="bar{index}" value={$progress} />
     </td>
   </tr>
 </template>

package-lock.json

@@ -30,7 +30,7 @@
     "svelte": "^3.44.2"
   },
   "devDependencies": {
-    "@mikey-pro/style-guide": "^2.5.2",
+    "@mikey-pro/style-guide": "^2.5.3",
     "css-loader": "^6.5.1",
     "eslint": "^8.3.0",
     "mini-css-extract-plugin": "^2.4.5",