refactor: rename GenreService to FilmGenreService and create FilmGenre interface

frontend/src/app/components/home/categories/categories.component.html

@@ -27,8 +27,12 @@
   }
 
   <!-- Genre columns -->
-  @for (filmGenre of filmGenres; track filmGenre) {
-  <!-- Videos by genre -->
+  @if (genres$ | async; as genres) {
+
+  <!-- Loop through genres -->
+  @for (filmGenre of genres; track filmGenre) {
+
+  <!-- If genre has videos -->
   @if (getAllVideos(filmGenre.code).length > 0) {
   <div class="category">
     <p>{{ filmGenre.name }}</p>
@@ -39,6 +43,8 @@
       (currentVideoId)="openCurrentVideo($event)"
     ></app-video-list>
   </div>
-  } }
+  } } } @else {
+  <div class="category"><p>Loading...</p></div>
+  }
 </section>
 }

frontend/src/app/components/home/categories/categories.component.ts

@@ -10,8 +10,9 @@ import {
 } from '@angular/core';
 import { environment } from '../../../../environments/environment';
 import { VideoListComponent } from './video-list/video-list.component';
-import { FilmGenre, GenreService } from '../../../services/genre.service';
+import { FilmGenreService } from '../../../services/film-genre.service';
 import { Subject, takeUntil } from 'rxjs';
+import { FilmGenre } from '../../../interfaces/film-genre.interface';
 
 @Component({
   selector: 'app-categories',
@@ -20,7 +21,7 @@ import { Subject, takeUntil } from 'rxjs';
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss',
 })
-export class CategoriesComponent implements OnInit, AfterViewInit {
+export class CategoriesComponent implements AfterViewInit {
   @Input() videos: any[] = [];
   @Input() currentVideo: number = 0;
   @Input() favoriteVideos: any[] = [];
@@ -29,34 +30,15 @@ export class CategoriesComponent implements OnInit, AfterViewInit {
 
   environmentBaseUrl: string = environment.baseUrl;
   isScrollable: boolean = false;
-  filmGenres: FilmGenre[] = [];
 
-  private destroy$ = new Subject<void>();
+  genres$ = this.filmGenreService.getGenres();
 
-  constructor(private genreService: GenreService) {}
-
-  ngOnInit(): void {
-    this.getFilmGenreNames();
-  }
+  constructor(private filmGenreService: FilmGenreService) {}
 
   ngAfterViewInit(): void {
     this.checkScroll();
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  getFilmGenreNames(): void {
-    this.genreService
-      .getGenres()
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((genres) => {
-        this.filmGenres = genres;
-      });
-  }
-
   openCurrentVideo(videoId: number) {
     this.currentVideo = videoId;
     this.currentVideoId.emit(videoId);

frontend/src/app/interfaces/film-genre.interface.ts

@@ -0,0 +1,4 @@
+export interface FilmGenre {
+  code: string;
+  name: string;
+}

frontend/src/app/services/film-genre.service.ts

@@ -1,16 +1,12 @@
 import { Injectable } from '@angular/core';
 import { Observable, of, tap } from 'rxjs';
 import { ApiService } from './api.service';
-
-export interface FilmGenre {
-  code: string;
-  name: string;
-}
+import { FilmGenre } from '../interfaces/film-genre.interface';
 
 @Injectable({
   providedIn: 'root',
 })
-export class GenreService {
+export class FilmGenreService {
   private genres: FilmGenre[] = [];
 
   constructor(private apiService: ApiService) {}