fix(plugin page);feat(pre commit check)

Author: Ajit Kumar

.husky/pre-commit

@@ -0,0 +1 @@
+npx biome check

.vscode/settings.json

@@ -37,12 +37,14 @@
     "Foxbiz",
     "gapis",
     "hideloading",
+    "hintrc",
     "hljs",
     "iconsrc",
     "IFNULL",
     "ifsc",
     "inappproducts",
     "lightgreen",
+    "locationchange",
     "maxlength",
     "nagivate",
     "noreferrer",
@@ -54,7 +56,6 @@
     "onhide",
     "onloadeend",
     "onloaderror",
-    "onnavigate",
     "onok",
     "onref",
     "onrename",
@@ -81,6 +82,9 @@
   "[json]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
+  "[css]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
   "editor.codeActionsOnSave": {
     "quickFix.biome": "explicit",
     "source.organizeImports.biome": "explicit"

biome.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
-  "files": { "ignoreUnknown": true, "ignore": ["public/**/*", "*.d.ts", ".vscode/**/*", "**/jsconfig.json"] },
+  "files": { "ignoreUnknown": true, "ignore": ["public/**/*", "*.d.ts", ".vscode/**/*", "**/jsconfig.json", ".babelrc", ".hintrc"] },
   "formatter": {
     "enabled": true,
     "useEditorconfig": true,

client/components/MonthSelect.js

@@ -9,9 +9,13 @@ import moment from 'moment';
  */
 export default function MonthSelect({ onChange, ref }) {
   const currentMonth = moment().month();
-  return <select ref={ref} attr-name="month" onchange={onChange} title='Month'>{
-    moment.months().map(
-      (month, i) => <option selected={currentMonth === i} value={i}>{month}</option>,
-    )
-  }</select>;
+  return (
+    <select ref={ref} attr-name='month' onchange={onChange} title='Month'>
+      {moment.months().map((month, i) => (
+        <option selected={currentMonth === i} value={i}>
+          {month}
+        </option>
+      ))}
+    </select>
+  );
 }

client/components/YearSelect.js

@@ -9,19 +9,23 @@ import moment from 'moment';
  */
 export default function YearSelect({ onChange, ref }) {
   const currentYear = moment().year();
-  return <select ref={ref} attr-name="year" onchange={onChange} title='Year'>{
-    (() => {
-      // return list of years
-      const MIN_YEAR = 2023;
-      const MAX_YEAR = new Date().getFullYear();
+  return (
+    <select ref={ref} attr-name='year' onchange={onChange} title='Year'>
+      {(() => {
+        // return list of years
+        const MIN_YEAR = 2023;
+        const MAX_YEAR = new Date().getFullYear();
 
-      const options = [];
-      for (let i = MIN_YEAR; i <= MAX_YEAR; i++) {
-        options.push(
-          <option selected={currentYear === i} value={i}>{i}</option>,
-        );
-      }
-      return options;
-    })()
-  }</select>;
+        const options = [];
+        for (let i = MIN_YEAR; i <= MAX_YEAR; i++) {
+          options.push(
+            <option selected={currentYear === i} value={i}>
+              {i}
+            </option>,
+          );
+        }
+        return options;
+      })()}
+    </select>
+  );
 }

client/components/ajaxForm/index.js

@@ -12,13 +12,13 @@ import './style.scss';
  * @param {string} param0.contentType
  * @returns
  */
-export default function AjaxForm({
-  ref, onloadend, onerror, loading, loadingEnd, method, action, encoding, contentType,
-}, children) {
+export default function AjaxForm({ ref, onloadend, onerror, loading, loadingEnd, method, action, encoding, contentType }, children) {
   const actionUrl = typeof action === 'function' ? '#' : action;
-  const form = <form ref={ref} action={actionUrl} method={method} encoding={encoding}>
-    {children}
-  </form>;
+  const form = (
+    <form ref={ref} action={actionUrl} method={method} encoding={encoding}>
+      {children}
+    </form>
+  );
 
   form.addEventListener('submit', async (event) => {
     event.preventDefault();
@@ -28,9 +28,9 @@ export default function AjaxForm({
     const jsonData = {};
 
     if (contentType === 'json') {
-      formData.entries().forEach(([key, value]) => {
+      for (const [key, value] of formData.entries()) {
         jsonData[key] = value;
-      });
+      }
       body = JSON.stringify(jsonData);
     }
 

client/components/dialogs/alert.js

@@ -2,19 +2,11 @@ import DialogBox from './dialogBox';
 
 /**
  * Alert dialog
- * @param {string} title 
- * @param {string} message 
- * @param {()=>void} [onok] 
- * @param {boolean} [keep] 
+ * @param {string} title
+ * @param {string} message
+ * @param {()=>void} [onok]
+ * @param {boolean} [keep]
  */
 export default function alert(title, message, onok, keep) {
-  const dialog = <DialogBox
-    onhide={onok}
-    title={title}
-    message={message}
-    onok={(hide) => hide()}
-    keep={keep}
-  />;
-
-  document.body.append(dialog);
+  document.body.append(<DialogBox onhide={onok} title={title} message={message} onok={(hide) => hide()} keep={keep} />);
 }

client/components/dialogs/confirm.js

@@ -2,13 +2,20 @@ import DialogBox from './dialogBox';
 
 export default function confirm(title, message) {
   return new Promise((resolve) => {
-    const dialog = <DialogBox title={title} message={message} onok={(hide) => {
-      hide();
-      resolve(true);
-    }} oncancel={(hide) => {
-      hide();
-      resolve(false);
-    }} />;
+    const dialog = (
+      <DialogBox
+        title={title}
+        message={message}
+        onok={(hide) => {
+          hide();
+          resolve(true);
+        }}
+        oncancel={(hide) => {
+          hide();
+          resolve(false);
+        }}
+      />
+    );
     document.body.append(dialog);
   });
 }

client/components/dialogs/select.js

@@ -6,12 +6,16 @@ export default async function select(title, options) {
       hide(false);
       resolve(options[index]);
     };
-    const dialog = <DialogBox
-      onhide={() => { resolve(null); }}
-      title={title}
-      options={options}
-      onselect={onselect}
-    />;
+    const dialog = (
+      <DialogBox
+        onhide={() => {
+          resolve(null);
+        }}
+        title={title}
+        options={options}
+        onselect={onselect}
+      />
+    );
     document.body.append(dialog);
   });
 }

client/components/sendOtp.js

@@ -7,7 +7,11 @@
  * @returns
  */
 export default function SendOtp({ errorText, getEmail, type = 'signup' }) {
-  return <span style={{ marginTop: 0 }} className="link" on:click={sendOtp}>Send OTP</span>;
+  return (
+    <span style={{ marginTop: 0 }} className='link' on:click={sendOtp}>
+      Send OTP
+    </span>
+  );
 
   async function sendOtp(e) {
     const email = getEmail();
@@ -42,9 +46,13 @@ export default function SendOtp({ errorText, getEmail, type = 'signup' }) {
       target.classList.add('success');
       target.textContent = data.message;
       target.style.pointerEvents = 'none';
-      startTimer(60, (time) => {
-        target.textContent = `Resend OTP (${time})`;
-      }, restore);
+      startTimer(
+        60,
+        (time) => {
+          target.textContent = `Resend OTP (${time})`;
+        },
+        restore,
+      );
     } catch (error) {
       errorText.value = error.message;
       restore();

client/lib/Router.js

@@ -37,7 +37,7 @@ class Router {
   }
 
   /**
-   * Nvigate to given path
+   * Navigate to given path
    * @param {string} url
    */
   navigate(url) {
@@ -47,14 +47,14 @@ class Router {
     const allCallbacks = [];
     this.#currentUrl = url;
 
-    Object.keys(this.#beforeNavigate).forEach((path) => {
+    for (const path in this.#beforeNavigate) {
       if (url.startsWith(path)) {
         const callbacks = this.#beforeNavigate[path];
         if (Array.isArray(callbacks)) {
           allCallbacks.push(...callbacks);
         }
       }
-    });
+    }
 
     allCallbacks.push((currUrl, _next, forceParams) => {
       this.#navigate(currUrl, forceParams);
@@ -81,11 +81,9 @@ class Router {
         this.#lastPath = path;
         route(forceParams ?? params, queries);
 
-        if (typeof this.onnavigate === 'function') {
-          this.onnavigate(url, changed);
+        for (const listener of Array.from(this.#on.navigate)) {
+          listener(url, changed);
         }
-
-        this.#on.navigate.forEach((listener) => listener(url, changed));
         break;
       } catch (_error) {
         // not matched
@@ -100,7 +98,7 @@ class Router {
     const { location } = window;
     this.navigate(location.pathname);
     document.addEventListener('locationchange', () => this.navigate());
-    document.body.addEventListener('click', this.#listenForAncher.bind(this));
+    document.body.addEventListener('click', this.#listenForAnchor.bind(this));
     window.addEventListener('popstate', () => {
       document.dispatchEvent(this.#customEvent);
     });
@@ -134,14 +132,14 @@ class Router {
    */
   use(router) {
     const { routes, beforeNavigateCallbacks } = router;
-    Object.keys(routes).forEach((path) => {
+    for (const path in routes) {
       this.add(path, routes[path]);
-    });
+    }
 
-    beforeNavigateCallbacks.forEach(({ path, callback }) => {
+    for (const { path, callback } of beforeNavigateCallbacks) {
       if (!this.#beforeNavigate[path]) this.#beforeNavigate[path] = [];
       this.#beforeNavigate[path].push(callback);
-    });
+    }
   }
 
   /**
@@ -181,10 +179,10 @@ class Router {
     const routeSegments = route.split('/');
     const pathSegments = path.split('/');
 
-    queryString?.split('&').forEach((get) => {
-      const [key, value] = get.split('=');
+    for (const query of queryString.split('&')) {
+      const [key, value] = query.split('=');
       queries[decodeURIComponent(key)] = decodeURIComponent(value);
-    });
+    }
 
     const len = Math.max(routeSegments.length, pathSegments.length);
 
@@ -230,7 +228,7 @@ class Router {
    * @param {MouseEvent} e
    * @returns
    */
-  #listenForAncher(e) {
+  #listenForAnchor(e) {
     const $el = e.target;
 
     if (!($el instanceof HTMLAnchorElement)) return;

client/lib/RouterExtension.js

@@ -36,8 +36,6 @@ export default class RouterExtension {
   }
 
   get beforeNavigateCallbacks() {
-    return [
-      ...this.#beforeNavigate,
-    ];
+    return [...this.#beforeNavigate];
   }
 }

client/main.d.ts

@@ -28,7 +28,6 @@ interface Router {
     event: 'nagivate',
     listener: (url: String, changed: Boolean) => void
   ): void;
-  onnavigate(url: String): void;
 }
 
 interface Order {

client/main.js

@@ -65,14 +65,14 @@ window.onload = async () => {
 
   Router.listen();
 
-  Router.onnavigate = () => {
+  Router.on('navigate', () => {
     const navToggler = tag.get('#menu-toggler');
     if (navToggler.checked) {
       navToggler.checked = false;
     }
     main.content = '';
     app.scrollTop = 0;
-  };
+  });
 
   async function loadModule(module, props = {}) {
     showLoading();

client/pages/payments/index.js

@@ -21,9 +21,9 @@ export default function Payments() {
         throw new Error(data.error);
       }
 
-      data.forEach((i) => {
-        list.append(Payment(i));
-      });
+      for (const item of data) {
+        list.append(Payment(item));
+      }
     } catch (err) {
       alert('ERROR', err.message || err);
     }