Oliinyk / Lint fixes (#2596)

* Fixed lint warnings * Fixed Sonar issues * Added lint-staged and pre-commit hook by husky * Lint & Prettier fixes * lintstagedrc config change * Lint/prettier fix
ita-social-projects · Jul 10, 2024 · 6ac0418 · 6ac0418
1 parent 694cd94
commit 6ac0418
Show file tree

Hide file tree

Showing 120 changed files with 1,306 additions and 777 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,5 @@
+npx lint-staged
+if [ $? -ne 0 ]; then
+  echo "Lint-staged failed, commit aborted."
+  exit 1
+fi
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -0,0 +1,3 @@
+{
+  "*.{ts,scss,html}": ["yarn lint:fix"]
+}
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
@@ -1,5 +1,4 @@
 {
-    "name": "Using fixtures to represent data",
-    "email": "hello@cypress.io"
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
 }
-
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
   </head>
   <body>
     <div data-cy-root></div>
   </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "out-of-school",
   "version": "0.0.0",
   "scripts": {
+    "prepare": "husky",
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
@@ -67,6 +68,7 @@
     "@types/node": "^18.11.9",
     "@typescript-eslint/eslint-plugin": "7.5.0",
     "@typescript-eslint/parser": "7.5.0",
+    "cypress": "latest",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -75,14 +77,15 @@
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.34.1",
+    "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-preset-angular": "^14.0.3",
     "karma-coverage": "~2.2.1",
+    "lint-staged": "^15.2.7",
     "prettier": "^3.2.5",
     "ts-jest": "^29.1.2",
     "ts-node": "~10.9.2",
-    "typescript": "~5.1.3",
-    "cypress": "latest"
+    "typescript": "~5.1.3"
   },
   "main": "index.js",
   "repository": "https://github.com/ita-social-projects/OoS-Frontend.git",

diff --git a/src/app/shared/components/filters-list/age-filter/age-filter.component.html b/src/app/shared/components/filters-list/age-filter/age-filter.component.html
@@ -12,8 +12,16 @@
       <p class="filter-text">
         {{ 'FROM' | translate }}
       </p>
-      <input matInput class="age-input" type="number" [formControl]="minAgeFormControl" appDigitOnly maxlength="2"
-        appMinMax [directiveFormControl]="minAgeFormControl" [min]="validationConstants.AGE_MIN"
+      <input
+        matInput
+        class="age-input"
+        type="number"
+        [formControl]="minAgeFormControl"
+        appDigitOnly
+        maxlength="2"
+        appMinMax
+        [directiveFormControl]="minAgeFormControl"
+        [min]="validationConstants.AGE_MIN"
         [max]="(maxAgeFormControl.value ? maxAgeFormControl.value : validationConstants.BIRTH_AGE_MAX) - 1"
         autocomplete="off" />
       <mat-icon class="clear-age" (click)="clearMin()">clear</mat-icon>
@@ -24,10 +32,18 @@
       <p class="filter-text">
         {{ 'TO' | translate }}
       </p>
-      <input matInput class="age-input" type="number" [formControl]="maxAgeFormControl" appDigitOnly maxlength="2"
-        appMinMax [directiveFormControl]="maxAgeFormControl"
+      <input
+        matInput
+        class="age-input"
+        type="number"
+        [formControl]="maxAgeFormControl"
+        appDigitOnly
+        maxlength="2"
+        appMinMax
+        [directiveFormControl]="maxAgeFormControl"
         [min]="minAgeFormControl.value !== undefined ? minAgeFormControl.value + 1 : validationConstants.AGE_MIN"
-        [max]="validationConstants.BIRTH_AGE_MAX" autocomplete="off" />
+        [max]="validationConstants.BIRTH_AGE_MAX"
+        autocomplete="off" />
       <mat-icon class="clear-age" (click)="clearMax()">clear</mat-icon>
     </div>
   </mat-form-field>

diff --git a/src/app/shared/components/filters-list/category-check-box/category-check-box.component.html b/src/app/shared/components/filters-list/category-check-box/category-check-box.component.html
@@ -5,8 +5,15 @@
       <mat-icon class="search-icon" style="transform: rotate(90deg)"> search</mat-icon>
     </button>
     <mat-form-field floatLabel="never" appearance="none">
-      <input matInput type="text" maxlength="200" [formControl]="directionSearchFormControl" class="search" matInput
-        placeholder="{{ 'SEARCH_BY_DIRECTIONS' | translate }}" autocomplete="off" />
+      <input
+        matInput
+        type="text"
+        maxlength="200"
+        [formControl]="directionSearchFormControl"
+        class="search"
+        matInput
+        placeholder="{{ 'SEARCH_BY_DIRECTIONS' | translate }}"
+        autocomplete="off" />
     </mat-form-field>
   </div>
   <div class="list-wrapper" #listWrapper>

diff --git a/src/app/shared/components/filters-list/city-filter/city-filter.component.html b/src/app/shared/components/filters-list/city-filter/city-filter.component.html
@@ -1,13 +1,32 @@
 <mat-form-field class="input-wrapper" fxLayoutAlign="start space-between" fxLayout="column" appearance="none">
-  <input #searchInput class="input-filter" matInput type="text" appTrimValue [formControl]="settlementSearchControl"
-    [matAutocomplete]="auto" (focusout)="onFocusOut($event)" />
-  <mat-autocomplete [panelWidth]="300" #auto="matAutocomplete" disableOptionCentering panelClass="dropdown-panel"
-    [displayWith]="displaySettlementNameFn" (optionSelected)="onSelectedCity($event)">
-    <mat-option class="dropdown-option" *ngFor="let codeficator of codeficatorSearch" [value]="codeficator"
+  <input
+    #searchInput
+    class="input-filter"
+    matInput
+    type="text"
+    appTrimValue
+    [formControl]="settlementSearchControl"
+    [matAutocomplete]="auto"
+    (focusout)="onFocusOut($event)" />
+  <mat-autocomplete
+    [panelWidth]="300"
+    #auto="matAutocomplete"
+    disableOptionCentering
+    panelClass="dropdown-panel"
+    [displayWith]="displaySettlementNameFn"
+    (optionSelected)="onSelectedCity($event)">
+    <mat-option
+      class="dropdown-option"
+      *ngFor="let codeficator of codeficatorSearch"
+      [value]="codeficator"
       [disabled]="codeficator.settlement === Constants.NO_SETTLEMENT">
       {{ codeficator.settlement | translate }} <br />
-      <div class="dropdown-option-trimmed" [matTooltip]="codeficator.fullName" matTooltipClass="tooltip"
-        showTooltipIfTruncated matTooltipPosition="below">
+      <div
+        class="dropdown-option-trimmed"
+        [matTooltip]="codeficator.fullName"
+        matTooltipClass="tooltip"
+        showTooltipIfTruncated
+        matTooltipPosition="below">
         <span class="option-sub-text">{{ codeficator.fullName }}</span>
       </div>
     </mat-option>
@@ -24,7 +43,8 @@
     <div fxLayout="row" fxLayoutAlign="space-between start">
       <p fxFlex="93%">
         {{ 'YOU_ARE_IN_A_SETTLEMENT' | translate }}
-        <span>{{ settlement?.settlement }}</span>?
+        <span>{{ settlement?.settlement }}</span
+        >?
       </p>
       <mat-icon (click)="isDisplayed = false" fxFlex="7%">clear</mat-icon>
     </div>

diff --git a/src/app/shared/components/filters-list/city-filter/city-filter.component.spec.ts b/src/app/shared/components/filters-list/city-filter/city-filter.component.spec.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';

diff --git a/src/app/shared/components/filters-list/filters-list.component.ts b/src/app/shared/components/filters-list/filters-list.component.ts
@@ -25,10 +25,6 @@ import { Util } from 'shared/utils/utils';
   styleUrls: ['./filters-list.component.scss']
 })
 export class FiltersListComponent implements OnInit, OnDestroy {
-  public readonly workshopStatus = WorkshopOpenStatus;
-  public readonly FormOfLearningEnum = FormOfLearningEnum;
-  public readonly Util = Util;
-
   @Select(FilterState.filterList)
   public filterList$: Observable<FilterList>;
 
@@ -40,6 +36,10 @@ export class FiltersListComponent implements OnInit, OnDestroy {
 
   @Input() public isMobileView: boolean;
 
+  public readonly workshopStatus = WorkshopOpenStatus;
+  public readonly FormOfLearningEnum = FormOfLearningEnum;
+  public readonly Util = Util;
+
   public formOfLearningControls = {
     Offline: new FormControl(false),
     Online: new FormControl(false),
@@ -49,11 +49,11 @@ export class FiltersListComponent implements OnInit, OnDestroy {
   public ClosedRecruitmentControl = new FormControl(false);
   public WithDisabilityOptionControl = new FormControl(false);
 
-  private visibleFiltersSidenav: boolean;
   public filterList: FilterList;
+  private visibleFiltersSidenav: boolean;
   private statuses: WorkshopOpenStatus[];
 
-  public destroy$: Subject<boolean> = new Subject<boolean>();
+  private destroy$: Subject<boolean> = new Subject<boolean>();
 
   constructor(private store: Store) {}
 
@@ -96,7 +96,11 @@ export class FiltersListComponent implements OnInit, OnDestroy {
    * we add the status to the array or remove the status from the array.
    */
   public statusHandler(val: boolean, status: string): void {
-    val ? this.statuses.push(this.workshopStatus[status]) : this.statuses.splice(this.statuses.indexOf(this.workshopStatus[status]), 1);
+    if (val) {
+      this.statuses.push(this.workshopStatus[status]);
+    } else {
+      this.statuses.splice(this.statuses.indexOf(this.workshopStatus[status]), 1);
+    }
   }
 
   public changeView(): void {

diff --git a/src/app/shared/components/filters-list/searchbar/searchbar.component.html b/src/app/shared/components/filters-list/searchbar/searchbar.component.html
@@ -1,17 +1,28 @@
 <form class="search-bar">
-  <mat-form-field appPlaceholderStyling class="input-wrapper" floatLabel="never" appearance="none" fxLayout="row"
+  <mat-form-field
+    appPlaceholderStyling
+    class="input-wrapper"
+    floatLabel="never"
+    appearance="none"
+    fxLayout="row"
     fxLayoutAlign="space-between center">
-    <input matInput type="text" class="search-input"
-      placeholder="{{ 'ENTER_THE_NAME_OF_THE_GROUP_SCHOOL' | translate }}" disableOptionCentering autocomplete="off"
-      appTrimValue [formControl]="searchValueFormControl" [matAutocomplete]="autoSearch"
+    <input
+      matInput
+      type="text"
+      class="search-input"
+      placeholder="{{ 'ENTER_THE_NAME_OF_THE_GROUP_SCHOOL' | translate }}"
+      disableOptionCentering
+      autocomplete="off"
+      appTrimValue
+      [formControl]="searchValueFormControl"
+      [matAutocomplete]="autoSearch"
       (keyup.enter)="onValueEnter()" />
 
-    <mat-autocomplete #autoSearch="matAutocomplete" class="search-input" panelClass="dropdown-panel"
-      (optionSelected)="onValueSelect()">
+    <mat-autocomplete #autoSearch="matAutocomplete" class="search-input" panelClass="dropdown-panel" (optionSelected)="onValueSelect()">
       <mat-option class="dropdown-option option" *ngFor="let result of filteredResults" [value]="result">
         {{ result }}
       </mat-option>
     </mat-autocomplete>
     <mat-icon class="icon" style="transform: rotate(90deg)" (click)="onValueEnter()">search</mat-icon>
   </mat-form-field>
-</form>
+</form>
diff --git a/src/app/shared/components/filters-list/searchbar/searchbar.component.scss b/src/app/shared/components/filters-list/searchbar/searchbar.component.scss
@@ -1,4 +1,3 @@
-
 @import 'src/app/shared/styles/dropdown.scss';
 .mat-form-field {
   font-size: 16px;

diff --git a/src/app/shared/components/filters-list/user-radius-set/user-radius-set.component.ts b/src/app/shared/components/filters-list/user-radius-set/user-radius-set.component.ts
@@ -22,18 +22,20 @@ export class UserRadiusSetComponent implements OnInit, OnDestroy {
 
   constructor(private store: Store) {}
 
-  ngOnInit(): void {
+  public ngOnInit(): void {
     this.setValue(this.defaultRadiusInKm);
     this.currentRadius.valueChanges
       .pipe(debounceTime(400), distinctUntilChanged(), takeUntil(this.destroy$))
       .subscribe(() => this.store.dispatch(new FilterChange()));
   }
 
-  radiusHandler(event: ChangeContext): void {
-    event.pointerType && this.setValue(event.highValue);
+  public radiusHandler(event: ChangeContext): void {
+    if (event.pointerType) {
+      this.setValue(event.highValue);
+    }
   }
 
-  ngOnDestroy(): void {
+  public ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();
   }

diff --git a/src/app/shared/components/filters-list/working-hours/working-hours.component.ts b/src/app/shared/components/filters-list/working-hours/working-hours.component.ts
@@ -24,7 +24,7 @@ export class WorkingHoursComponent implements OnInit, OnDestroy {
 
   public readonly validationConstants = ValidationConstants;
   public readonly workingDaysReverse: typeof WorkingDaysReverse = WorkingDaysReverse;
-  public days: WorkingDaysToggleValue[] = WorkingDaysValues.map((value: WorkingDaysToggleValue) => Object.assign({}, value));
+  public days: WorkingDaysToggleValue[] = WorkingDaysValues.map((value: WorkingDaysToggleValue) => ({ ...value }));
 
   public startTimeFormControl = new FormControl('');
   public endTimeFormControl = new FormControl('');

diff --git a/src/app/shared/components/image-cropper-modal/image-cropper-modal.component.ts b/src/app/shared/components/image-cropper-modal/image-cropper-modal.component.ts
@@ -43,5 +43,5 @@ export class ImageCropperModalComponent {
   }
 
   public loadImageFailed(): void {}
-  cropperReady(): void {}
+  public cropperReady(): void {}
 }
diff --git a/src/app/shared/components/institution-hierarchy/institution-hierarchy.component.ts b/src/app/shared/components/institution-hierarchy/institution-hierarchy.component.ts
@@ -33,16 +33,16 @@ export class InstitutionHierarchyComponent implements OnInit, OnDestroy {
   private instituitionsHierarchy$: Observable<InstituitionHierarchy[]>;
   @Select(MetaDataState.editInstituitionsHierarchy)
   private editInstituitionsHierarchy$: Observable<InstituitionHierarchy[]>;
-  private editInstituitionsHierarchy: InstituitionHierarchy[];
   @Select(MetaDataState.institutionFieldDesc)
   private institutionFieldDesc$: Observable<InstitutionFieldDescription[]>;
-  private institutionFieldDesc: InstitutionFieldDescription[];
 
+  public hierarchyArray: HierarchyElement[] = [];
+
+  private editInstituitionsHierarchy: InstituitionHierarchy[];
+  private institutionFieldDesc: InstitutionFieldDescription[];
   private destroy$: Subject<boolean> = new Subject<boolean>();
   private isEditMode: boolean;
 
-  public hierarchyArray: HierarchyElement[] = [];
-
   constructor(private store: Store) {}
 
   public ngOnInit(): void {
@@ -60,7 +60,7 @@ export class InstitutionHierarchyComponent implements OnInit, OnDestroy {
   }
 
   public onHierarchyLevelSelect(hierarchy: HierarchyElement): void {
-    const needToSlice = this.hierarchyArray[this.hierarchyArray.length - 1].hierarchyLevel - hierarchy.hierarchyLevel != 0;
+    const needToSlice = this.hierarchyArray[this.hierarchyArray.length - 1].hierarchyLevel - hierarchy.hierarchyLevel !== 0;
 
     this.store.dispatch(new GetInstitutionHierarchyChildrenById(hierarchy.formControl.value));
 

diff --git a/src/app/shared/components/paginator/paginator.component.ts b/src/app/shared/components/paginator/paginator.component.ts
@@ -10,15 +10,15 @@ import { PaginationElement } from 'shared/models/pagination-element.model';
   styleUrls: ['./paginator.component.scss']
 })
 export class PaginatorComponent implements OnChanges {
-  public readonly constants: typeof PaginationConstants = PaginationConstants;
-
   @Input() public currentPage: PaginationElement;
   @Input() public totalEntities: number;
   @Input() public itemsPerPage: number;
 
   @Output() public pageChange = new EventEmitter<PaginationElement>();
   @Output() public itemsPerPageChange = new EventEmitter<number>();
 
+  public readonly constants: typeof PaginationConstants = PaginationConstants;
+
   public carouselPageList: PaginationElement[] = [];
   public totalPageAmount: number;
   public listOfValues: number[] = [8, 12, 16, 20];

diff --git a/src/app/shared/components/provider-info/provider-info.component.html b/src/app/shared/components/provider-info/provider-info.component.html
@@ -1,7 +1,8 @@
 <div class="wrapper">
   <div
     *ngIf="isProviderView && role === Role.provider && (subrole === Subrole.None || subrole === Subrole.ProviderDeputy)"
-    fxLayout="row" fxLayoutAlign="end">
+    fxLayout="row"
+    fxLayoutAlign="end">
     <a [routerLink]="['/create-provider', editLink]" (click)="onActivateEditMode()" class="edit-icon">
       <button mat-button><mat-icon>edit</mat-icon>{{ 'BUTTONS.EDIT' | translate }}</button>
     </a>

diff --git a/src/app/shared/components/scroll-to-top/scroll-to-top.component.ts b/src/app/shared/components/scroll-to-top/scroll-to-top.component.ts
@@ -10,6 +10,8 @@ export class ScrollToTopComponent implements OnInit {
   public showScrollButton: boolean;
   public readonly constants: typeof Constants = Constants;
 
+  constructor() {}
+
   @HostListener('window:scroll')
   public checkScroll(): void {
     const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
@@ -24,7 +26,5 @@ export class ScrollToTopComponent implements OnInit {
     });
   }
 
-  constructor() {}
-
   public ngOnInit(): void {}
 }