feat(startsida): show news and info on home page ([TV-778-FE] (https://jira.arbetsformedlingen.se/browse/TV-778))

Squashed commit of the following:

commit 3c4f404f8e6530b24661987142c5cc0780a48023
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Nov 11 12:04:19 2021 +0100

    TV-778-FE added loader, refactoring models, changed file name

commit 0a9d373e0ea5a02fa026c603d28e7c3a9dee52c6
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Nov 11 09:46:38 2021 +0100

    TV-778-FE updated endpoint

commit 90b73d9d1ff294828c1e65204a61789bca01ec86
Merge: 027bc82c f332dd41
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Nov 10 16:35:17 2021 +0100

    Merge branch 'develop' into feature/TV-778-FE

commit 027bc82ceb98355ec804d2dda57234730ee5b142
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Nov 10 13:40:56 2021 +0100

    TV-778 rename

commit 09f6b9cacb8fffa7c55db1866483460736184e77
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Nov 10 13:11:37 2021 +0100

    TV-778-FE implemented endpoint for news

commit 2b3b354a568b73aa9eff364f516a9486c12bec17
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Mon Nov 8 14:38:59 2021 +0100

    TV-778 refactoring

commit ac2547415ad379e90bc7e4979f4dfa52153453f5
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Mon Nov 8 13:09:07 2021 +0100

    TV-778 ready for news api

commit e541c9e0570f6551f3f565978e23a208892672e5
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Mon Nov 8 11:46:28 2021 +0100

    TV-778 news component created

apps/mina-sidor-fa/src/app/pages/start/start.component.html

@@ -25,6 +25,8 @@
               innehåll, förbättringar och uppdateringar.
             </p>
             <p>Målet är helt enkelt att underlätta ditt dagliga arbete!</p>
+
+            <msfa-news></msfa-news>
           </ng-container>
           <ng-template #unauthorizedRef>
             <p>

apps/mina-sidor-fa/src/app/pages/start/start.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { NewsModule } from '@msfa-shared/components/nyheter/news.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { StartComponent } from './start.component';
 
@@ -15,6 +16,7 @@ import { StartComponent } from './start.component';
     LayoutModule,
     DigiNgCardModule,
     UiLoaderModule,
+    NewsModule
   ],
 })
 export class StartModule {}

apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.html

@@ -0,0 +1,6 @@
+<ng-container *ngIf="newsData$ | async as news">
+  <h1>{{news.title}}</h1>
+  <hr />
+  <div [innerHtml]="news.body"></div>
+</ng-container>
+<ui-loader *ngIf="newsLoading$ | async" uiType="padded"></ui-loader>

apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.scss

@@ -0,0 +1,5 @@
+@import 'variables/gutters';
+
+h1 {
+  margin-top: $digi--layout--gutter--xl;
+}

apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.spec.ts

@@ -0,0 +1,22 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NewsComponent } from './news.component';
+describe('NewsComponent', () => {
+  let component: NewsComponent;
+  let fixture: ComponentFixture<NewsComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [NewsComponent]
+    })
+      .compileComponents();
+  });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/mina-sidor-fa/src/app/shared/components/nyheter/news.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { News } from '@msfa-models/news.model';
+import { NewsApiService } from '@msfa-services/api/news.api.service';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'msfa-news',
+  templateUrl: 'news.component.html',
+  styleUrls: ['news.component.scss']
+})
+export class NewsComponent {
+  newsData$: Observable<News> = this.newsApiService.fetchNews$();
+  newsLoading$: Observable<boolean> = this.newsApiService.newsLoading$;
+
+  constructor(private newsApiService: NewsApiService) { }
+
+}

apps/mina-sidor-fa/src/app/shared/components/nyheter/news.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { NewsComponent } from './news.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [NewsComponent],
+  imports: [CommonModule, UiLoaderModule],
+  exports: [NewsComponent]
+})
+export class NewsModule {
+
+}

apps/mina-sidor-fa/src/app/shared/models/api/news.response.model.ts

@@ -0,0 +1,8 @@
+export interface NewsResponse {
+  body: {
+    view: {
+      value: string;
+    }
+  };
+  title: string;
+}

apps/mina-sidor-fa/src/app/shared/models/news.model.ts

@@ -0,0 +1,15 @@
+import { NewsResponse } from './api/news.response.model';
+
+export interface News {
+  title: string;
+  body: string;
+}
+
+export function mapNewsResponseToNews(data: NewsResponse): News {
+  const { body, title } = data;
+
+  return {
+    title: title,
+    body: body.view.value
+  }
+}

apps/mina-sidor-fa/src/app/shared/services/api/news.api.service.ts

@@ -0,0 +1,37 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from '@msfa-environment';
+import { NewsResponse } from '@msfa-models/api/news.response.model';
+import { errorToCustomError } from '@msfa-models/error/custom-error';
+import { mapNewsResponseToNews, News } from '@msfa-models/news.model';
+import { ErrorService } from '@msfa-services/error.service';
+import { BehaviorSubject, Observable, throwError } from 'rxjs';
+import { catchError, filter, map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NewsApiService {
+  private _apiBaseUrl = `${environment.api.url}/confluence/nyheter`;
+  private _newsLoading$ = new BehaviorSubject<boolean>(false);
+  public newsLoading$: Observable<boolean> = this._newsLoading$.asObservable();
+
+  constructor(private http: HttpClient, private errorService: ErrorService) { }
+
+  public fetchNews$(): Observable<News> {
+    this._newsLoading$.next(true);
+
+    return this.http.get<NewsResponse>(this._apiBaseUrl).pipe(
+      filter(response => !!response),
+      map(response => {
+        this._newsLoading$.next(false);
+        return mapNewsResponseToNews(response['data']);
+      }),
+      catchError((error: Error) => {
+        this.errorService.add(errorToCustomError({ ...error, message: `Kunde inte hämta nyheter.\n\n${error.message}` }));
+        return throwError(errorToCustomError(error));
+      })
+    );
+  }
+
+}