Angular 15 (#1765)

* Refactored some code in BookService to make the code easier to understand

* More lint fixes

* Use npm ci for installs in pipeline

* Fixed build system again by deleting nodejs. New build system uses package-lcok going forward.

.github/workflows/sonar-scan.yml

@@ -150,7 +150,7 @@ jobs:
       - run: |
           cd UI/Web || exit
           echo 'Installing web dependencies'
-          npm install
+          npm ci
 
           echo 'Building UI'
           npm run prod

API/Services/BookService.cs

@@ -402,21 +402,7 @@ public class BookService : IBookService
             {
                 publicationDate = epubBook.Schema.Package.Metadata.Dates.FirstOrDefault()?.Date;
             }
-            var dateParsed = DateTime.TryParse(publicationDate, out var date);
-            var year = 0;
-            var month = 0;
-            var day = 0;
-            switch (dateParsed)
-            {
-                case true:
-                    year = date.Year;
-                    month = date.Month;
-                    day = date.Day;
-                    break;
-                case false when !string.IsNullOrEmpty(publicationDate) && publicationDate.Length == 4:
-                    int.TryParse(publicationDate, out year);
-                    break;
-            }
+            var (year, month, day) = GetPublicationDate(publicationDate);
 
             var info =  new ComicInfo()
             {
@@ -473,7 +459,28 @@ public class BookService : IBookService
         return null;
     }
 
-    #nullable enable
+    private static (int year, int month, int day) GetPublicationDate(string publicationDate)
+    {
+        var dateParsed = DateTime.TryParse(publicationDate, out var date);
+        var year = 0;
+        var month = 0;
+        var day = 0;
+        switch (dateParsed)
+        {
+            case true:
+                year = date.Year;
+                month = date.Month;
+                day = date.Day;
+                break;
+            case false when !string.IsNullOrEmpty(publicationDate) && publicationDate.Length == 4:
+                int.TryParse(publicationDate, out year);
+                break;
+        }
+
+        return (year, month, day);
+    }
+
+#nullable enable
     private static string ValidateLanguage(string? language)
     {
         if (string.IsNullOrEmpty(language)) return string.Empty;

UI/Web/src/app/cards/card-item/card-item.component.ts

@@ -213,6 +213,7 @@ export class CardItemComponent implements OnInit, OnDestroy {
     });
 
     this.download$ = this.downloadService.activeDownloads$.pipe(takeUntil(this.onDestroy), map((events) => {
+      console.log('Active downloads: ', events);
       if(this.utilityService.isSeries(this.entity)) return events.find(e => e.entityType === 'series' && e.subTitle === this.downloadService.downloadSubtitle('series', (this.entity as Series))) || null;
       if(this.utilityService.isVolume(this.entity)) return events.find(e => e.entityType === 'volume' && e.subTitle === this.downloadService.downloadSubtitle('volume', (this.entity as Volume))) || null;
       if(this.utilityService.isChapter(this.entity)) return events.find(e => e.entityType === 'chapter' && e.subTitle === this.downloadService.downloadSubtitle('chapter', (this.entity as Chapter))) || null;

UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.ts

@@ -1,9 +1,8 @@
-import { ChangeDetectionStrategy, Component, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, QueryList, ViewChildren } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { LegendPosition } from '@swimlane/ngx-charts';
 import { Observable, Subject, BehaviorSubject, combineLatest, map, takeUntil, shareReplay } from 'rxjs';
 import { MangaFormatPipe } from 'src/app/pipe/manga-format.pipe';
-import { MangaFormat } from 'src/app/_models/manga-format';
 import { StatisticsService } from 'src/app/_services/statistics.service';
 import { SortableHeader, SortEvent, compare } from 'src/app/_single-module/table/_directives/sortable-header.directive';
 import { FileExtension, FileExtensionBreakdown } from '../../_models/file-breakdown';
@@ -22,7 +21,7 @@ const mangaFormatPipe = new MangaFormatPipe();
   styleUrls: ['./file-breakdown-stats.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FileBreakdownStatsComponent implements OnInit {
+export class FileBreakdownStatsComponent implements OnDestroy {
 
   @ViewChildren(SortableHeader<PieDataItem>) headers!: QueryList<SortableHeader<PieDataItem>>;
 
@@ -71,9 +70,6 @@ export class FileBreakdownStatsComponent implements OnInit {
     })));
   }
 
-  ngOnInit(): void {
-  }
-
   ngOnDestroy(): void {
     this.onDestroy.next();
     this.onDestroy.complete();

UI/Web/src/app/statistics/_components/manga-format-stats/manga-format-stats.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { LegendPosition } from '@swimlane/ngx-charts';
 import { Observable, Subject, BehaviorSubject, combineLatest, map, takeUntil } from 'rxjs';
@@ -12,7 +12,7 @@ import { PieDataItem } from '../../_models/pie-data-item';
   styleUrls: ['./manga-format-stats.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MangaFormatStatsComponent implements OnInit {
+export class MangaFormatStatsComponent implements OnInit, OnDestroy {
 
   @ViewChildren(SortableHeader<PieDataItem>) headers!: QueryList<SortableHeader<PieDataItem>>;
 

UI/Web/src/main.ts

@@ -1,22 +1,7 @@
 /// <reference types="@angular/localize" />
 
-import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
 
-if (environment.production) {
-  enableProdMode();
-}
-
-// function fetchConfig(): Promise<ConfigData> {
-//   return fetch(environment.apiUrl + 'settings/base-url')
-//     .then(response => response.text())
-//     .then(response => new ConfigData(response));
-// }
-
-// fetchConfig().then(config => {
-  
-// });
 platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));