chore(deps): update typescript-eslint monorepo to v7

Reviewed-on: #94
Co-authored-by: Renovate <renovate@dwysokinski.me>
Co-committed-by: Renovate <renovate@dwysokinski.me>

.env

@@ -1 +1 @@
-TWHELP_API_BASE_URL=https://twhelp.app
+TWHELP_API_BASE_URL=https://twhelp.app/api

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "prepare": "husky install",
-    "generate-client": "openapi --input ./src/lib/twhelpv2/openapi3.json --output ./src/lib/twhelpv2 --name TWHelpV2 --useOptions --client axios",
+    "generate-client": "openapi --input ./src/lib/twhelpv2/openapi3.json --output ./src/lib/twhelpv2 --name TWHelpV2Client --useOptions --client axios",
     "build": "rm -rf dist && yarn generate-client && parcel build ./src/*.user.ts ./src/*.quickbar.ts",
     "postbuild": "PUBLIC_URL=https://scripts.twhelp.app node postbuild.js",
     "lint": "eslint src/**/*.ts"
@@ -21,13 +21,13 @@
     "url": "https://dwysokinski.me/"
   },
   "browserslist": [
-    "since 2017-06"
+    "since 2020-01"
   ],
   "devDependencies": {
     "@commitlint/cli": "^18.0.0",
     "@commitlint/config-conventional": "^18.0.0",
-    "@parcel/validator-eslint": "^2.9.1",
-    "@parcel/validator-typescript": "^2.9.1",
+    "@parcel/validator-eslint": "^2.12.0",
+    "@parcel/validator-typescript": "^2.12.0",
     "@types/jquery": "^3.5.14",
     "@types/lodash": "^4.14.191",
     "@types/node": "^20.0.0",
@@ -38,7 +38,7 @@
     "eslint-config-prettier": "^9.0.0",
     "husky": "^8.0.3",
     "openapi-typescript-codegen": "^0.28.0",
-    "parcel": "^2.9.1",
+    "parcel": "^2.12.0",
     "prettier": "^3.0.0",
     "typescript": "^5.0.0"
   },

postbuild.js

@@ -9,7 +9,7 @@ const metadata = {
 // @name         Extended player profile
 // @version      1.1.6
 // @description  Adds additional info and actions on a player overview.
-// @author       Dawid Wysokiński - Kichiyaki - contact@dwysokinski.me
+// @author       Dawid Wysokiński - Kichiyaki - contact@twhelp.app
 // @match        https://*/game.php?*screen=info_player*
 // @downloadURL  ${process.env.PUBLIC_URL}/extended-player-profile.user.js
 // @updateURL    ${process.env.PUBLIC_URL}/extended-player-profile.user.js
@@ -19,9 +19,9 @@ const metadata = {
 // ==/UserScript==`,
   'extended-map-popup': `// ==UserScript==
 // @name         Extended map popup
-// @version      1.0.5
+// @version      1.1.0
 // @description  Extends the map popup with additional info.
-// @author       Dawid Wysokiński - Kichiyaki - contact@dwysokinski.me
+// @author       Dawid Wysokiński - Kichiyaki - contact@twhelp.app
 // @match        https://*/game.php?*screen=map*
 // @downloadURL  ${process.env.PUBLIC_URL}/extended-map-popup.user.js
 // @updateURL    ${process.env.PUBLIC_URL}/extended-map-popup.user.js
@@ -31,9 +31,9 @@ const metadata = {
 // ==/UserScript==`,
   'extended-village-profile': `// ==UserScript==
 // @name         Extended village profile
-// @version      1.0.4
+// @version      1.1.0
 // @description  Adds additional info and actions on a village overview.
-// @author       Dawid Wysokiński - Kichiyaki - contact@dwysokinski.me
+// @author       Dawid Wysokiński - Kichiyaki - contact@twhelp.app
 // @match        https://*/game.php?*screen=info_village*
 // @downloadURL  ${process.env.PUBLIC_URL}/extended-village-profile.user.js
 // @updateURL    ${process.env.PUBLIC_URL}/extended-village-profile.user.js
@@ -45,7 +45,7 @@ const metadata = {
 // @name         Extended tribe profile
 // @version      1.0.4
 // @description  Adds additional info and actions on a tribe overview.
-// @author       Dawid Wysokiński - Kichiyaki - contact@dwysokinski.me
+// @author       Dawid Wysokiński - Kichiyaki - contact@twhelp.app
 // @match        https://*/game.php?*screen=info_ally*
 // @downloadURL  ${process.env.PUBLIC_URL}/extended-tribe-profile.user.js
 // @updateURL    ${process.env.PUBLIC_URL}/extended-tribe-profile.user.js

src/common/dialog-table-v2.ts

@@ -0,0 +1,132 @@
+import { createTranslationFunc } from '../utils';
+
+const t = createTranslationFunc({
+  pl_PL: {
+    Loading: 'Wczytywanie',
+    'Previous page': 'Poprzednia strona',
+    'Next page': 'Następna strona',
+    'Something went wrong while loading the data':
+      'Coś poszło nie tak podczas wczytywania danych',
+  },
+});
+
+export type DialogTableColumn<T> = {
+  header: string;
+  accessor: (row: T, index: number, rows: T[]) => string;
+};
+
+export type Cursor = {
+  next?: string;
+  self?: string;
+};
+
+export type LoadDataResult<T> = {
+  cursor?: Cursor;
+  data: T[];
+};
+
+export class DialogTableV2<T> {
+  private readonly prevPageId: string;
+  private readonly nextPageId: string;
+
+  private readonly prevCursors: Cursor[] = [];
+
+  constructor(
+    private readonly id: string,
+    private readonly columns: DialogTableColumn<T>[],
+    private readonly limit: number,
+    private readonly loadData: (
+      cursor: string | undefined,
+      limit: number
+    ) => Promise<LoadDataResult<T>>
+  ) {
+    this.prevPageId = `${this.id}_page_prev`;
+    this.nextPageId = `${this.id}_page_next`;
+  }
+
+  public async render() {
+    await this.renderPage();
+  }
+
+  private async renderPage(pageCursor?: string) {
+    window.Dialog.show(this.id, `<p>${t('Loading')}...</p>`);
+
+    try {
+      const { data, cursor } = await this.loadData(pageCursor, this.limit);
+
+      window.Dialog.show(
+        this.id,
+        `
+      ${this.buildPagination(cursor)}
+      ${this.buildTable(data)}
+    `
+      );
+
+      this.addEventListeners(cursor);
+    } catch (err) {
+      console.error(err);
+      window.Dialog.close();
+      window.UI.ErrorMessage(t('Something went wrong while loading the data'));
+    }
+  }
+
+  private buildPagination(cursor?: Cursor): string {
+    return `
+      <div style="display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 10px">
+          <button title="${t(
+            'Previous page'
+          )}" style="margin-right: 5px" class="btn" id="${this.prevPageId}"${
+            this.prevCursors.length === 0 ? ' disabled' : ''
+          }>&lt;</button>
+          <button title="${t('Next page')}" class="btn" id="${
+            this.nextPageId
+          }"${!cursor?.next ? ' disabled' : ''}>&gt;</button>
+      </div>    
+    `;
+  }
+
+  private buildTable(data: T[]) {
+    return `
+      <table style="width: 100%" class="vis">
+        <tbody>
+          <tr>
+            ${this.columns.map((col) => `<th>${col.header}</th>`).join('')}
+          </tr>
+          ${data
+            .map(
+              (r, index) => `
+            <tr>
+                ${this.columns
+                  .map((col) => `<td>${col.accessor(r, index, data)}</td>`)
+                  .join('')}
+            </tr>
+          `
+            )
+            .join('')}
+        </tbody>
+      </table>      
+      `;
+  }
+
+  private addEventListeners(cursor?: Cursor) {
+    document
+      .querySelector('#' + this.prevPageId)
+      ?.addEventListener('click', () => {
+        const prev = this.prevCursors.pop();
+        if (!prev) {
+          return;
+        }
+        this.renderPage(prev.self);
+      });
+
+    document
+      .querySelector('#' + this.nextPageId)
+      ?.addEventListener('click', () => {
+        if (!cursor) {
+          return;
+        }
+        this.prevCursors.push(cursor);
+        this.renderPage(cursor.next);
+      });
+  }
+}

src/extended-map-popup.user.ts

@@ -1,13 +1,13 @@
 import addSeconds from 'date-fns/addSeconds';
-import {
-  Ennoblement,
-  ServerConfig,
-  TWHelpClient,
-  UnitInfo,
-} from './lib/twhelp';
 import { Cache, InMemoryStorage } from './lib/cache';
 import { calcDistance, calcLoyalty } from './lib/tw';
 import { createTranslationFunc } from './utils';
+import {
+  TWHelpV2Client,
+  Ennoblement,
+  UnitInfo,
+  ServerConfig,
+} from './lib/twhelpv2';
 
 declare global {
   interface Window {
@@ -43,25 +43,38 @@ const t = createTranslationFunc({
 
 class TWHelpConnector {
   private static readonly SERVER_CONFIG_CACHE_KEY =
-    'extended_map_popup_server_config';
-  private static readonly UNIT_INFO_CACHE_KEY = 'extended_map_popup_unit_info';
+    'extended_map_popup_server_config_v2';
+  private static readonly UNIT_INFO_CACHE_KEY =
+    'extended_map_popup_unit_info_v2';
   private static readonly VILLAGE_CACHE_KEY_PREFIX =
-    'extended_map_popup_village_';
+    'extended_map_popup_village_v2_';
 
   private readonly localStorageCache = new Cache(localStorage);
   private readonly inMemoryCache = new Cache(new InMemoryStorage());
+
+  private readonly client: TWHelpV2Client;
+
   constructor(
-    private readonly client: TWHelpClient,
+    readonly baseUrl: string,
     private readonly version: string,
     private readonly server: string
-  ) {}
+  ) {
+    this.client = new TWHelpV2Client({
+      BASE: baseUrl,
+    });
+  }
 
   serverConfig() {
     return this.localStorageCache.load(
       TWHelpConnector.SERVER_CONFIG_CACHE_KEY,
       3600,
-      () => {
-        return this.client.serverConfig(this.version, this.server);
+      async () => {
+        return (
+          await this.client.servers.getServerConfig({
+            serverKey: this.server,
+            versionCode: this.version,
+          })
+        ).data;
       }
     );
   }
@@ -70,8 +83,13 @@ class TWHelpConnector {
     return this.localStorageCache.load(
       TWHelpConnector.UNIT_INFO_CACHE_KEY,
       3600,
-      () => {
-        return this.client.unitInfo(this.version, this.server);
+      async () => {
+        return (
+          await this.client.servers.getUnitInfo({
+            serverKey: this.server,
+            versionCode: this.version,
+          })
+        ).data;
       }
     );
   }
@@ -84,15 +102,14 @@ class TWHelpConnector {
     }
 
     return this.inMemoryCache.load(key, 86400, async () => {
-      const ennoblements = await this.client.villageEnnoblements(
-        this.version,
-        this.server,
-        id,
-        {
-          limit: 1,
+      const ennoblements =
+        await this.client.ennoblements.listVillageEnnoblements({
+          versionCode: this.version,
+          serverKey: this.server,
           sort: ['createdAt:DESC'],
-        }
-      );
+          villageId: id,
+          limit: 1,
+        });
       return ennoblements.data.length > 0 ? ennoblements.data[0] : null;
     });
   }
@@ -245,9 +262,9 @@ class Popup {
 
 class ExtendedMapPopup {
   connector: TWHelpConnector;
-  constructor(client: TWHelpClient) {
+  constructor(baseApiUrl: string) {
     this.connector = new TWHelpConnector(
-      client,
+      baseApiUrl,
       window.game_data.market,
       window.game_data.world
     );
@@ -273,9 +290,7 @@ class ExtendedMapPopup {
     return;
   }
 
-  await new ExtendedMapPopup(
-    new TWHelpClient(process.env.TWHELP_API_BASE_URL ?? '')
-  )
+  await new ExtendedMapPopup(process.env.TWHELP_API_BASE_URL ?? '')
     .run()
     .catch((err) => {
       console.log(err);

src/extended-village-profile.user.ts

@@ -1,8 +1,8 @@
-import { Ennoblement, ServerConfig, TWHelpClient } from './lib/twhelp';
 import { createTranslationFunc } from './utils';
-import { DialogTable } from './common/dialog-table';
 import { calcLoyalty } from './lib/tw';
 import { Cache } from './lib/cache';
+import { TWHelpV2Client, Ennoblement, ServerConfig } from './lib/twhelpv2';
+import { DialogTableV2 } from './common/dialog-table-v2';
 
 const t = createTranslationFunc({
   pl_PL: {
@@ -22,32 +22,42 @@ const t = createTranslationFunc({
 
 class TWHelpConnector {
   private static SERVER_CONFIG_CACHE_KEY =
-    'extended_village_profile_server_config';
+    'extended_village_profile_server_config_v2';
 
   private cache = new Cache(localStorage);
+
+  private client: TWHelpV2Client;
+
   constructor(
-    private readonly client: TWHelpClient,
+    readonly baseUrl: string,
     private readonly version: string,
     private readonly server: string,
     private readonly id: number
-  ) {}
+  ) {
+    this.client = new TWHelpV2Client({ BASE: baseUrl });
+  }
 
   serverConfig() {
     return this.cache.load(
       TWHelpConnector.SERVER_CONFIG_CACHE_KEY,
       3600,
-      () => {
-        return this.client.serverConfig(this.version, this.server);
+      async () => {
+        return (
+          await this.client.servers.getServerConfig({
+            versionCode: this.version,
+            serverKey: this.server,
+          })
+        ).data;
       }
     );
   }
 
   async latestEnnoblement() {
-    const ennoblements = await this.client.villageEnnoblements(
-      this.version,
-      this.server,
-      this.id,
+    const ennoblements = await this.client.ennoblements.listVillageEnnoblements(
       {
+        versionCode: this.version,
+        serverKey: this.server,
+        villageId: this.id,
         limit: 1,
         sort: ['createdAt:DESC'],
       }
@@ -55,11 +65,14 @@ class TWHelpConnector {
     return ennoblements.data.length > 0 ? ennoblements.data[0] : null;
   }
 
-  villageEnnoblements(page: number, limit: number) {
-    return this.client.villageEnnoblements(this.version, this.server, this.id, {
-      offset: (page - 1) * limit,
-      limit,
-      sort: ['createdAt:desc'],
+  villageEnnoblements(cursor: string | undefined, limit: number) {
+    return this.client.ennoblements.listVillageEnnoblements({
+      cursor,
+      versionCode: this.version,
+      serverKey: this.server,
+      villageId: this.id,
+      limit: limit,
+      sort: ['createdAt:DESC'],
     });
   }
 }
@@ -138,7 +151,7 @@ class UI {
   private async showEnnoblements(e: Event) {
     e.preventDefault();
 
-    await new DialogTable(
+    await new DialogTableV2<Ennoblement>(
       DialogId.ENNOBLEMENTS,
       [
         {
@@ -182,8 +195,8 @@ class UI {
         },
       ],
       30,
-      (page: number, limit: number) => {
-        return this.connector.villageEnnoblements(page, limit);
+      async (cursor, limit) => {
+        return this.connector.villageEnnoblements(cursor, limit);
       }
     ).render();
   }
@@ -191,9 +204,9 @@ class UI {
 
 class ExtendedVillageProfile {
   connector: TWHelpConnector;
-  constructor(client: TWHelpClient) {
+  constructor(apiBaseUrl: string) {
     this.connector = new TWHelpConnector(
-      client,
+      apiBaseUrl,
       window.game_data.market,
       window.game_data.world,
       this.getVillageId()
@@ -226,9 +239,7 @@ class ExtendedVillageProfile {
     return;
   }
 
-  await new ExtendedVillageProfile(
-    new TWHelpClient(process.env.TWHELP_API_BASE_URL ?? '')
-  )
+  await new ExtendedVillageProfile(process.env.TWHELP_API_BASE_URL ?? '')
     .run()
     .catch((err) => {
       console.log(err);