refactor: Lint with rxjs linter and stylelint

Author: autowp

.eslintrc.json

@@ -18,8 +18,10 @@
       "extends": [
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates",
-        "plugin:prettier/recommended"
+        "plugin:prettier/recommended",
+        "plugin:rxjs/recommended"
       ],
+      "plugins": ["rxjs","rxjs-angular"],
       "rules": {
         "@angular-eslint/component-selector": [
           "error",
@@ -36,7 +38,13 @@
             "style": "camelCase",
             "type": "attribute"
           }
-        ]
+        ],
+        "rxjs-angular/prefer-async-pipe": "off",
+        "rxjs-angular/prefer-composition": "off",
+        "rxjs-angular/prefer-takeuntil": "off",
+        "rxjs/finnish": "error",
+        "rxjs/no-compat": "error",
+        "rxjs/no-sharereplay": "off"
       }
     },
     {

.gitlab-ci.yml

@@ -21,7 +21,8 @@ build:
       - node_modules/
   script:
     - npm ci
-    - ./node_modules/.bin/ng lint
+    - npx ng lint
+    - npx stylelint "src/**/*.scss"
     - sonar-scanner -Dsonar.login=$SONAR_TOKEN
     - ./node_modules/.bin/ng build --configuration production --no-progress --base-href=/ --extra-webpack-config webpack.extra.js
     - npx semantic-release

.stylelintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-prettier",
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier-scss"
+  ],
+  "rules": {
+    "no-descending-specificity": null
+  }
+}

package-lock.json

@@ -76,10 +76,12 @@
     "@types/leaflet": "^1.9.0",
     "@types/node": "^18.11.10",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@typescript-eslint/parser": "^5.50.0",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-rxjs": "^5.0.2",
+    "eslint-plugin-rxjs-angular": "^2.0.0",
     "google-protobuf": "^3.21.2",
     "grpc-web": "^1.4.2",
     "html-comment-regex": "^1.1.2",
@@ -88,6 +90,11 @@
     "prettier": "^2.8.1",
     "prettier-eslint": "^15.0.1",
     "showdown": "^2.1.0",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-standard-scss": "^6.1.0",
     "ts-node": "^10.9.1",
     "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.7.0",

package.json

@@ -97,7 +97,7 @@ export class AboutComponent implements OnInit {
         ids.push(about.beTranslator);
         ids.push(about.ptBrTranslator);
 
-        return this.userService.getUserMap(ids).pipe(
+        return this.userService.getUserMap$(ids).pipe(
           map((users) => ({
             users,
             aboutText,

src/app/about/about.component.ts

@@ -29,8 +29,8 @@ export class AccountAccountsComponent implements OnInit {
       next: (response) => {
         this.accounts = response.items;
       },
-      error: (response) => {
-        this.toastService.response(response);
+      error: (response: unknown) => {
+        this.toastService.handleError(response);
       },
     });
   }
@@ -51,8 +51,8 @@ export class AccountAccountsComponent implements OnInit {
         next: (response) => {
           window.location.href = response.url;
         },
-        error: (response) => {
-          this.toastService.response(response);
+        error: (response: unknown) => {
+          this.toastService.handleError(response);
         },
       });
   }
@@ -64,9 +64,9 @@ export class AccountAccountsComponent implements OnInit {
 
         this.load();
       },
-      error: (response) => {
+      error: (response: unknown) => {
         this.disconnectFailed = true;
-        this.toastService.response(response);
+        this.toastService.handleError(response);
       },
     });
   }

src/app/account/accounts/accounts.component.ts

@@ -29,7 +29,7 @@ export class AccountContactsComponent {
     setTimeout(() => this.pageEnv.set({pageId: 198}), 0);
 
     this.auth
-      .getUser()
+      .getUser$()
       .pipe(
         map((user) => {
           if (!user) {
@@ -42,7 +42,7 @@ export class AccountContactsComponent {
           return user;
         }),
         switchMap(() =>
-          this.contactsService.getContacts({
+          this.contactsService.getContacts$({
             fields: ['avatar', 'gravatar', 'last_online'],
           })
         )
@@ -51,22 +51,22 @@ export class AccountContactsComponent {
         next: (response) => {
           this.items = response.items;
         },
-        error: (response) => this.toastService.response(response),
+        error: (response: unknown) => this.toastService.handleError(response),
       });
   }
 
   public deleteContact(id: string) {
-    this.contacts.deleteContact(new DeleteContactRequest({userId: id})).subscribe(
-      () => {
+    this.contacts.deleteContact(new DeleteContactRequest({userId: id})).subscribe({
+      next: () => {
         for (let i = 0; i < this.items.length; i++) {
           if (this.items[i].contactUserId === id) {
             this.items.splice(i, 1);
             break;
           }
         }
       },
-      (response) => this.toastService.response(response)
-    );
+      error: (response: unknown) => this.toastService.handleError(response),
+    });
     return false;
   }
 }

src/app/account/contacts/contacts.component.ts

@@ -8,6 +8,7 @@ import {APIDeleteUserRequest} from '@grpc/spec.pb';
 import {extractFieldViolations, fieldViolations2InvalidParams} from '../../grpc';
 import {InvalidParams} from '../../utils/invalid-params.pipe';
 import {switchMap} from 'rxjs/operators';
+import {GrpcStatusEvent} from '@ngx-grpc/common';
 
 @Component({
   selector: 'app-account-delete',
@@ -31,7 +32,7 @@ export class AccountDeleteComponent {
 
   public submit() {
     this.auth
-      .getUser()
+      .getUser$()
       .pipe(
         switchMap((user) =>
           this.usersGrpc.deleteUser(
@@ -44,12 +45,12 @@ export class AccountDeleteComponent {
       )
       .subscribe({
         next: () => {
-          this.auth.signOut();
+          this.auth.signOut$();
           this.router.navigate(['/account/delete/deleted']);
         },
-        error: (response) => {
-          this.toastService.grpcErrorResponse(response);
-          if (response.statusCode === 3) {
+        error: (response: unknown) => {
+          this.toastService.handleError(response);
+          if (response instanceof GrpcStatusEvent && response.statusCode === 3) {
             const fieldViolations = extractFieldViolations(response);
             this.invalidParams = fieldViolations2InvalidParams(fieldViolations);
           }

src/app/account/delete/delete.component.ts

@@ -21,7 +21,7 @@ export class AccountEmailComponent {
       next: (response) => {
         this.email = response.email;
       },
-      error: (response) => this.toastService.response(response),
+      error: (response: unknown) => this.toastService.handleError(response),
     });
   }
 }