web: Fix build errors

Signed-off-by: Kwong Tung Nan <tungnan5636@gmail.com>

Author: kwongtn

.husky/pre-commit

@@ -1,5 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 # npm test
 npx lint-staged

eslint.config.mjs

@@ -0,0 +1,48 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [
+    ...compat.extends("eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"),
+    {
+        plugins: {
+            "@typescript-eslint": typescriptEslint,
+        },
+
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+
+            parser: tsParser,
+            ecmaVersion: "latest",
+            sourceType: "module",
+        },
+
+        rules: {
+            indent: ["error", 4],
+            "linebreak-style": ["error", "unix"],
+            quotes: ["error", "double"],
+            semi: ["error", "always"],
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-inferrable-types": ["warn", {
+                ignoreParameters: true,
+                ignoreProperties: true,
+            }],
+        },
+    },
+];

package-lock.json

@@ -69,6 +69,8 @@
         "@angular/cli": "^18.2.12",
         "@angular/compiler-cli": "^18.2.13",
         "@codecov/webpack-plugin": "^1.6.0",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.17.0",
         "@sentry/webpack-plugin": "^2.5.0",
         "@types/geojson": "^7946.0.14",
         "@types/jasmine": "~5.1.4",
@@ -79,6 +81,7 @@
         "eslint": "^9.17.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-json": "^4.0.0",
+        "globals": "^15.14.0",
         "gtfs-types": "^4.0.0",
         "husky": "^9.0.0",
         "jasmine-core": "~5.5.0",

package.json

@@ -5,7 +5,7 @@ import {
     RecaptchaFormsModule,
     RecaptchaV3Module,
     ReCaptchaV3Service,
-} from "ng-recaptcha";
+} from "ng-recaptcha-2";
 import { NzAlertModule } from "ng-zorro-antd/alert";
 import { NzDrawerService } from "ng-zorro-antd/drawer";
 import { en_US, NZ_I18N } from "ng-zorro-antd/i18n";
@@ -16,6 +16,7 @@ import { NzNotificationModule } from "ng-zorro-antd/notification";
 import { MarkdownModule, provideMarkdown } from "ngx-markdown";
 
 import { registerLocaleData } from "@angular/common";
+import { provideHttpClient } from "@angular/common/http";
 import en from "@angular/common/locales/en";
 import { APP_INITIALIZER, ErrorHandler, NgModule } from "@angular/core";
 import {
@@ -33,9 +34,8 @@ import { getStorage, provideStorage } from "@angular/fire/storage";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { Router } from "@angular/router";
-import * as Sentry from "@sentry/angular-ivy";
+import * as Sentry from "@sentry/angular";
 
-// import build from "../build";
 import { environment } from "../environments/environment";
 import { FooterComponent } from "./@ui/footer/footer.component";
 import { AppRoutingModule } from "./app-routing.module";
@@ -85,7 +85,7 @@ const providers: any[] = [
     },
     {
         provide: APP_INITIALIZER,
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
+         
         useFactory: () => () => {},
         deps: [Sentry.TraceService],
         multi: true,
@@ -105,6 +105,7 @@ const providers: any[] = [
     provideDatabase(() => getDatabase()),
     provideStorage(() => getStorage()),
     provideMarkdown(),
+    provideHttpClient(),
     NzModalService,
     NzImageService,
     NzDrawerService,

src/app/app.module.ts

@@ -243,7 +243,7 @@ export class ConsoleEventsTableComponent implements OnInit, OnDestroy {
                     return !rows.includes(elem.id);
                 });
             }
-            this.showLoading = loading;
+            this.showLoading = loading ?? false;
         });
     }
 

src/app/console/events-table/events-table.component.ts

@@ -1,5 +1,5 @@
 import { Apollo, gql } from "apollo-angular";
-import { ReCaptchaV3Service } from "ng-recaptcha";
+import { ReCaptchaV3Service } from "ng-recaptcha-2";
 import { firstValueFrom } from "rxjs";
 import { AuthService } from "src/app/services/auth.service";
 

src/app/console/services/mark-read.service.ts

@@ -11,7 +11,7 @@ import {
     Output,
 } from "@angular/core";
 import { Router } from "@angular/router";
-import * as Sentry from "@sentry/angular-ivy";
+import * as Sentry from "@sentry/angular";
 
 @Component({
     selector: "d-header-menu",
@@ -29,8 +29,11 @@ export class MenuComponent implements OnInit, OnDestroy {
 
     hadUpload: boolean = false;
 
-    constructor(public router: Router, private themeService: ThemeService, 
-        private imageUploadService: ImageUploadService) {
+    constructor(
+        public router: Router,
+        private themeService: ThemeService,
+        private imageUploadService: ImageUploadService
+    ) {
         return;
     }
 
@@ -46,13 +49,13 @@ export class MenuComponent implements OnInit, OnDestroy {
             (count) => {
                 this.countIcon = count;
 
-                if(!this.hadUpload && count > 0) {
+                if (!this.hadUpload && count > 0) {
                     this.hadUpload = true;
                 }
             }
         );
     }
-    
+
     ngOnDestroy(): void {
         this.$countIcon?.unsubscribe();
     }
@@ -72,12 +75,13 @@ export class MenuComponent implements OnInit, OnDestroy {
         this.curLanguage = lang;
     }
 
-    reportBug(): void {
-        const feedback = Sentry.feedbackIntegration();
-        feedback.openDialog();
+    async reportBug(): Promise<void> {
+        const form = await Sentry.feedbackIntegration().createForm();
+        form.appendToDom();
+        form.open();
     }
 
-    toggleTheme(): void{
+    toggleTheme(): void {
         this.themeService.toggleTheme();
     }
 }

src/app/header/menu/menu.component.ts

@@ -5,7 +5,7 @@ import {
     LoadingModule,
     TableWidthConfig,
 } from "ng-devui";
-import { ReCaptchaV3Service } from "ng-recaptcha";
+import { ReCaptchaV3Service } from "ng-recaptcha-2";
 import { NzToolTipModule } from "ng-zorro-antd/tooltip";
 import { firstValueFrom, lastValueFrom, Subscription } from "rxjs";
 import {

src/app/profile/spottings/spottings.component.ts

@@ -5,7 +5,7 @@ import { galaxyTheme, infinityTheme } from "ng-devui/theme-collection";
 
 import { enableProdMode } from "@angular/core";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
-import * as Sentry from "@sentry/angular-ivy";
+import * as Sentry from "@sentry/angular";
 
 import { AppModule } from "./app/app.module";
 import { environment } from "./environments/environment";
@@ -15,13 +15,13 @@ Sentry.init({
     tunnel: environment.sentry.tunnel,
     environment: environment.sentry.environment,
     integrations: [
-        Sentry.browserTracingIntegration({
-            tracingOrigins: environment.sentry.tracingOrigins,
-            _experiments: {
-                enableInteractions: true,
-            }
-        }),
+        Sentry.browserTracingIntegration(),
         Sentry.replayIntegration(),
+        Sentry.feedbackIntegration({
+            // Additional SDK configuration goes in here, for example:
+            colorScheme: "system",
+            autoInject: false,
+        }),
     ],
 
     // Set tracesSampleRate to 1.0 to capture 100%