feat: added album button and fixed fetching albums (#17)

README.md

@@ -61,6 +61,12 @@ Refer to this doc for a detailed walkthrough. However, here are a few screenshot
 
     Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io) with code coverage and without a browser.
 
+    To run only one test, use the `--src` flag. For instance, to run the `photos-section.component.spec.ts` test, run the following command:
+
+    ```bash
+    ng test --watch=false --no-progress --browsers=ChromeHeadless --code-coverage --src=src/app/pages/content-page/photos-section/__tests__/photos-section.component.spec.ts
+    ```
+
 ## Usage
 
 Please note that this project is used for educational purposes and is not intended to be used commercially. We are not liable for any damages/changes/lost data done by this project.

src/app/core/albums/AlbumsRequest.service.ts

@@ -67,7 +67,12 @@ export class AlbumsRequestService {
 
         return this.fetchAlbumsPage(response.nextPageToken);
       }),
-      scan((acc: Album[], current) => acc.concat(current.albums!), [])
+      scan((acc: Album[], current) => {
+        if (current.albums) {
+          return acc.concat(current.albums);
+        }
+        return acc;
+      }, [])
     );
   }
 

src/app/core/albums/__tests__/AlbumsRequest.service.spec.ts

@@ -47,6 +47,7 @@ describe('AlbumsRequestService', () => {
         next: (val: Album[]) => emittedValues.push(val),
         error: done.fail,
         complete: () => {
+          expect(emittedValues.length).toEqual(2);
           expect(emittedValues[0]).toEqual(sharedAlbumsPage1.sharedAlbums!);
           expect(emittedValues[1]).toEqual([
             ...sharedAlbumsPage1.sharedAlbums!,
@@ -84,6 +85,7 @@ describe('AlbumsRequestService', () => {
         next: (val: Album[]) => emittedValues.push(val),
         error: done.fail,
         complete: () => {
+          expect(emittedValues.length).toEqual(2);
           expect(emittedValues[0]).toEqual(albumsPage1.albums!);
           expect(emittedValues[1]).toEqual([
             ...albumsPage1.albums!,
@@ -110,5 +112,36 @@ describe('AlbumsRequestService', () => {
         )
         .flush(albumsPage2, { status: 200, statusText: 'OK' });
     });
+
+    it('should return a list of albums given last page has no albums', (done) => {
+      const emittedValues: Album[][] = [];
+      service.fetchAlbums().subscribe({
+        next: (val: Album[]) => emittedValues.push(val),
+        error: done.fail,
+        complete: () => {
+          expect(emittedValues.length).toEqual(2);
+          expect(emittedValues[0]).toEqual(albumsPage1.albums!);
+          expect(emittedValues[1]).toEqual(albumsPage1.albums!);
+          done();
+        },
+      });
+
+      httpMock
+        .expectOne(
+          (req) =>
+            req.url === 'https://photoslibrary.googleapis.com/v1/albums' &&
+            req.headers.get('Authorization') === 'Bearer accessToken123' &&
+            !req.params.get('pageToken')
+        )
+        .flush(albumsPage1, { status: 200, statusText: 'OK' });
+      httpMock
+        .expectOne(
+          (req) =>
+            req.url === 'https://photoslibrary.googleapis.com/v1/albums' &&
+            req.headers.get('Authorization') === 'Bearer accessToken123' &&
+            req.params.get('pageToken') === albumsPage1.nextPageToken
+        )
+        .flush({}, { status: 200, statusText: 'OK' });
+    });
   });
 });

src/app/pages/content-page/content-page.component.html

@@ -8,7 +8,10 @@
     } @if (treeNode && treeNode.childNodes.length > 0) {
     <app-albums-section [albums]="treeNode.childNodes" [path]="path" />
     } @if (treeNode && treeNode.isAlbum) {
-    <app-photos-section [gAlbumId]="treeNode.albumId" />
+    <app-photos-section
+      [gAlbumId]="treeNode.albumId"
+      [gAlbumLink]="treeNode.albumGooglePhotosLink"
+    />
     }
   </nb-layout-column>
 </nb-layout>

src/app/pages/content-page/content-page.component.ts

@@ -70,6 +70,8 @@ export class ContentPageComponent implements OnInit {
             this.treeNode = treeNode;
           },
           error: (err: HttpErrorResponse) => {
+            console.error(err);
+
             if (err.status === 401 || err.status === 400) {
               this.router.navigate(['/auth/login']);
             } else {

src/app/pages/content-page/header/search-bar/search-bar.component.ts

@@ -45,6 +45,8 @@ export class SearchBarComponent implements OnInit {
         this.options = [...this.options, new SearchItem(album)];
       },
       error: (err: HttpErrorResponse) => {
+        console.error(err);
+
         if (err.status === 401 || err.status === 400) {
           this.router.navigateByUrl('/auth/login');
         } else {

src/app/pages/content-page/photos-section/__tests__/photos-section.component.spec.ts

@@ -153,6 +153,23 @@ describe('PhotosSectionComponent', () => {
     );
   });
 
+  it('should navigate to url when user clicks on album link', async () => {
+    const fixture = TestBed.createComponent(PhotosSectionComponent);
+    const component = fixture.componentInstance;
+    component.gAlbumId = 'albumId1';
+    component.gAlbumLink = 'https://photos.google.com/albums/album1';
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    fixture.nativeElement.querySelector('.photos-section__header-link').click();
+
+    expect(mockWindow.open).toHaveBeenCalledWith(
+      'https://photos.google.com/albums/album1',
+      '_blank',
+      'noopener,noreferrer'
+    );
+  });
+
   [
     { errorCode: 401, expectedRedirect: '/auth/login' },
     { errorCode: 400, expectedRedirect: '/auth/login' },

src/app/pages/content-page/photos-section/photos-section.component.html

@@ -1,5 +1,17 @@
 <div>
-  <h5 class="photos-section__header">Photos</h5>
+  <div class="photos-section__header">
+    <h5 class="photos-section__header-text">Photos</h5>
+
+    @if (gAlbumLink) {
+    <button
+      nbButton
+      class="photos-section__header-link"
+      (click)="handleAlbumClick()"
+    >
+      Go to Album
+    </button>
+    }
+  </div>
 
   <ngx-masonry
     class="photos-section__cards-list"

src/app/pages/content-page/photos-section/photos-section.component.scss

@@ -1,6 +1,13 @@
 .photos-section {
   &__header {
-    margin-top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 2.5rem;
+  }
+
+  &__header-text {
+    margin: 0;
   }
 
   &__cards-list {

src/app/pages/content-page/photos-section/photos-section.component.ts

@@ -38,9 +38,11 @@ import { MediaItemsRequestService } from '../../../core/media-items/MediaItemsRe
 })
 export class PhotosSectionComponent implements OnInit, OnChanges, OnDestroy {
   @Input({ required: true }) gAlbumId?: string;
+  @Input({ required: true }) gAlbumLink?: string;
   @ViewChild(NgxMasonryComponent) masonry?: NgxMasonryComponent;
 
   photos: ImageCardItem[] = [];
+
   readonly masonryOptions: NgxMasonryOptions = {
     gutter: 40,
     fitWidth: true,
@@ -100,6 +102,8 @@ export class PhotosSectionComponent implements OnInit, OnChanges, OnDestroy {
           this.masonry?.layout();
         },
         error: (err: HttpErrorResponse) => {
+          console.error(err);
+
           if (err.status === 401 || err.status === 400) {
             this.router.navigateByUrl('/auth/login');
           } else {
@@ -127,6 +131,10 @@ export class PhotosSectionComponent implements OnInit, OnChanges, OnDestroy {
     );
   }
 
+  handleAlbumClick() {
+    this.window.open(this.gAlbumLink, '_blank', 'noopener,noreferrer');
+  }
+
   handleMorePhotosClick() {
     if (this.hasPhotosToFetch) {
       this.fetchMediaItemsPageRequests$.next(this.lastPageToken);